02 · Visual identity
The face of the space,and the reasons.
The mark, the palette, the type, the grid: chosen so any surface under the name reads the same way. This page is the why behind each choice. The design system is where the same atoms become tokens and components.
01 · The mark
A compass, not a monogram
It answers a different question than most identity marks. Not who is this, but which way are we facing?
The idea
A cross of two ink axes, four pointers, and a yellow disc at the exact center. It works alone as an icon and a favicon, and beside the wordmark as the lockup.
The center carries the constant. It doesn't move: everything else in the identity can shift version to version; this can't. Its yellow appears nowhere else, except as AI autonomy level 04.
The pointers read as a plus sign, then a compass rose, then two axes on a plot. All three readings are on purpose.
Anatomy
- The fixed pointLogo yellow at the exact center. The one constant across every version, every surface, every size.
- The pupilAn ink dot inside the yellow, the same ink as the lines. On a dark ink surface it reads as a hole; at small sizes it reads as an eye and holds the mark together at 16px.
- Primary pointerThe north arm, solid ink. Direction: where the work is aimed.
- Secondary pointersSouth, east and west at 60%. The other directions you could go, quieted so the primary reads first.
- AxesTwo hairlines through the center. The grid the space is built on.
- WordmarkGeorgia, the one place it appears. “Irving” at 62% ink, “Space” bold: the name yields to the concept.
Sizes and lockups
Mark · 16px
Favicon. The disc and pupil still read.
Mark · 38px
The mark alone, inline. Below 24px, always the mark alone.
Lockup · nav
Mark 38, wordmark 25, in the 72px bar. The primary application.
Lockup · phone
Mark 28, wordmark 20, in the 56px bar.
Wordmark alone
The footer title block. The mark has already done its work above.
Clear space
At least the mark's own height on every side. The compass should breathe.
Do
- Use the lockup where there is room; the mark alone below 24px.
- Set it on ground or paper. The linework is ink and needs a light surface.
- Keep clear space equal to the height of the mark.
- Keep the disc and pupil exactly as drawn, at every size.
Don't
- Recolor the disc, or use logo yellow anywhere but the logo and AI level 04.
- Rotate the mark, outline it, or add effects.
- Set the wordmark in any face but Georgia, or stretch it.
- Use the compass as decoration when it isn’t doing logo work.
02 · Color
Product + AI = Systems
With a human in every loop. Four roles, four colors, and a reason for each. Problem space and Tracking results stay in neutral ink.
The four roles
- Product
- Blue, the accent. The site’s own accent.
- AI
- Yellow, four levels. Brighter means less human in the loop. Level 04 is the logo’s own yellow.
- Systems
- Green. Blue + yellow = green. Systems are where product and AI meet; green also reads as correct, approved, go.
- Human
- Purple. Yellow’s opposite. The person, who touches all three. Never a topic.
Foundations
--ground
#EEE8D9
Page background (the vellum sheet). Always carries the layout grid.
--paper
#F7F3EA
Paper cards, nav bar, topic strip, secondary buttons, collapsed text bands. Always plain, never shows the grid.
--ink
#15364F
Prussian ink. Headlines, body copy, card outlines, figure linework, primary button fill, logo linework. 10.3:1 on ground, 11.3:1 on paper.
--ink-2
#3E4A63
Supporting text and excerpts on ground and paper. 7.3:1 on ground.
--ink-3
#4A5672
Mono labels and metadata on ground and paper. 6.0:1 on ground, 6.6:1 on paper.
--accent
#1F6AAE
Cerulean. Headline accent line, links, header Subscribe, SheetLabel marker, colored blocks, key figure lines. 4.6:1 on ground, 5.1:1 on paper; white text on it is 5.6:1.
--accent-tint
#C9DDF0
Solid tint fill for areas inside figures (e.g. under a trend line). Never behind text smaller than 24px.
--rule
rgba(21,54,79,0.25)
Internal dividers inside paper cards (log rows, strip cells, title-block cells).
Topics
--product
#1F6AAE · = --accent
Product topic (cerulean, same as accent): tag fill, trend sparkline, product figures. White text on it 5.6:1.
--product-tint
#C9DDF0 · = --accent-tint
Solid tint fill for product shapes inside figures.
--systems
#2F7A3E
Systems thinking topic (green). Blue + yellow = green: systems are where product and AI meet, and green reads as correct, approved, go. Tag fill, network sparkline, systems figures. White text on it 5.3:1; on paper 4.8:1.
--systems-tint
#CFE3D2
Solid tint fill for systems shapes (and approved / solution states) inside figures.
AI, by autonomy
Brightness is autonomy. A level is never shown by color alone: every AI tag carries level pips.
--ai-tint
#FBEBB0
Solid tint fill for AI areas inside figures.
--ai-line
#7A5F00
Outline for every yellow shape (all four levels) and AI strokes or small labels on paper (4.9:1). Yellow shapes never appear without it on paper.
The human, and the logo
--human
#5A3FA6
The human (purple): a special accent for the person, who touches product, AI and systems. YOU checkpoints in diagrams, the author, human assumptions and judgment. Never a topic tag. White text on it 7.8:1; on paper 7.1:1.
--human-tint
#D9D0F0
Solid tint fill for human areas inside figures.
--logo-yellow
#FFE537
Logo center disc, and AI autonomy Level 04 (via ai-l4). Nowhere else.
--logo-pupil
#15364F · = --ink
Logo center dot ONLY. Ink, the same as the mark's lines: on an ink surface it reads as a hole through the yellow.
Do
- Set text on yellow in ink.
- Outline every yellow shape on paper or ground with 1.5px ai-line. Yellow nearly matches the paper and disappears without it.
- Show AI autonomy with level pips as well as color: four squares, filled to the level.
- Use green for approved and solution states in figures. It’s the systems color.
- Keep the measured pairings: white on product 5.6:1, on systems 5.3:1, on human 7.8:1; ink on AI L1 6.0:1, on L2 7.5:1.
Don't
- Set white or yellow text on yellow.
- Show an AI level by color alone.
- Use purple for anything but the person: YOU checkpoints, the author marker, human assumptions in figures. Never a topic, a button, or decoration.
- Use red. Anywhere.
- Use logo yellow outside the logo and AI level 04.
03 · Type
Three faces and a signature
Archivo carries the display, IBM Plex Sans the reading, IBM Plex Mono the labels. Georgia appears in one place: the wordmark.
Display
Archivo
"Archivo", "Helvetica Neue", Arial, sans-serif
Weights 500 · 600 · 700 · 800
Reading
IBM Plex Sans
"IBM Plex Sans", system-ui, sans-serif
Weights 400 · 500 · 600
Labels and data
IBM Plex Mono
"IBM Plex Mono", ui-monospace, Menlo, monospace
Weights 400 · 500
Wordmark only
Georgia
Georgia, "Times New Roman", serif
Weights 400 · 700
Display
Are you solving for the right problem?
Three ideas that shape how I look at most things
John Irving
The Systems of Provenance
Systems thinking
Exploring is how I figure out what I actually believe.
Text
Every black box is a set of choices someone made a long time ago.
I write about the questions that get squeezed out when everyone's moving fast.
Mono
SHEET 01 · PRODUCT / AI / SYSTEMS
FIG. 02.1
Wordmark
IrvingSpace
Do
- Break the hero headline at the color change: line one ink, line two accent.
- Keep section headings to one line, on the grid.
- Set labels, dates and metadata in uppercase mono.
- Let display line boxes stay multiples of 24 at desktop so headlines sit on the grid.
Don't
- Use Georgia anywhere but the wordmark.
- Mix two faces in one line or heading.
- Set reading text in mono, or labels in Plex Sans.
- Add sizes outside the scale.
04 · The grid
The grid is the layout
The background isn't decoration. Every edge of every block lands on one of its lines, so the page reads like a drawing sheet.
Colored block
The grid shows through in white.
- Unit
- 24px. The minor line, and the step every size and space is a multiple of.
- Column
- 120px. The major line: five units.
- Frame
- 1200px, ten columns, centered on the page's middle grid line.
- Breakpoint
- 1240px, the frame plus gutters. Above it blocks take fixed grid heights; below it heights go auto and columns wrap. Phones under 640px tighten the rhythm, still in steps of 24.
- Rhythm
- 96px between sections at desktop (60 mid, 48 on phones). The nav is 72px, 56 on phones.
- Text on the grid
- Supporting copy sits on a ground band, so grid lines never run through small text. Paper cards stay plain: no grid inside them.
05 · Figures
Drawn, not decorated
Figures are code-drawn SVGs from the same geometry as the mark: ink linework, mono labels, one idea per drawing, and the topic colors doing the explaining.
Hero · The problem space
The wedge in AI yellow with an ai-line stroke; the assumption marker in human purple with a paper ring; the trend in accent over an accent-tint area.
About · Asking why
A section drawing. The ask rests on an assumption; digging straight down finds nothing, and asking why steps sideways to the actual problem.
Principle 01 · Problem → solution
PROBLEM in accent with white text; SOLUTION in systems tint with a systems stroke.
Principle 02 · The black box
Box and nodes in systems green, the label white.
Principle 03 · Results
Bars in accent tint with an accent stroke, the last bar solid; target line and label in ink.
Writing · The log
Every published post is a stem at its date, as tall as its read time, capped in its topic's color. Drawn from live data, so it grows with the writing.
Do
- Draw from the mark’s geometry: ink hairlines, square ends, mono labels.
- Give each drawing one idea, and an accessible label that states it.
- Put a YOU node (human purple) between the AI step and the outcome at autonomy levels 01–03. Level 04 runs input → AI → action with none.
- Try new forms deliberately. Photography or motion can earn a place the same way the drawings did: by carrying the idea.
Don't
- Reach for stock imagery or an icon library without asking why it beats drawing our own.
- Use more colors than the idea needs, or a color that doesn’t mean its topic.
- Fill space. If a figure doesn’t carry the idea, cut it.