Sheet label
<SheetLabel> · .v-sheet-label
Numbers every section, like a drawing sheet. Accent square and rule, uppercase mono on a ground band.
Sheet 02 · Operating principles
03 · Design system
Where the identitybecomes product.
Vellum: the tokens, components and patterns shipping under the IrvingSpace name. Everything here is the site's own code, rendered live, so this page can't drift from what ships. The reasons behind it live in visual identity.
01 · Tokens
Every value has a name
Hex values live in one file, vellum.css, as CSS variables; components only ever use the variable. The chips below paint with the live variables.
The color concept
Product + AI = Systems, with a human in every loop. Product is the accent blue; AI is yellow, brighter as it acts with less oversight; systems is green, blue and yellow combined; the human is purple, and never a topic.
Roles, rules and contrast: visual identity → color
Color
TokenValueUse
--ground#EEE8D9Page background (the vellum sheet). Always carries the layout grid.
--paper#F7F3EAPaper cards, nav bar, topic strip, secondary buttons, collapsed text bands. Always plain, never shows the grid.
--ink#15364FPrussian 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#3E4A63Supporting text and excerpts on ground and paper. 7.3:1 on ground.
--ink-3#4A5672Mono labels and metadata on ground and paper. 6.0:1 on ground, 6.6:1 on paper.
--accent#1F6AAECerulean. 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#C9DDF0Solid tint fill for areas inside figures (e.g. under a trend line). Never behind text smaller than 24px.
--on-accent#FFFFFFText and white grid lines on accent blocks.
--systems#2F7A3ESystems 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#CFE3D2Solid tint fill for systems shapes (and approved / solution states) inside figures.
--ai-l1#E3A92BAI autonomy Level 01 · Assist (amber gold): AI suggests, a person decides and acts. Ink text on it (6.0:1).
--ai-l2#F2C230AI autonomy Level 02 · Advise (gold): AI recommends, a person approves. Default for AI with no stated level. Ink text on it (7.5:1).
--ai-l3#FAD435AI autonomy Level 03 · Act with approval (bright gold): AI acts, a person reviews or can undo. Ink text on it.
--ai-l4var(--logo-yellow)
#FFE537AI autonomy Level 04 · Autonomous (the logo's yellow): AI decides and acts alone. Ink text on it (9.9:1). The only place logo-yellow appears outside the logo.
#FFE537AI autonomy Level 04 · Autonomous (the logo's yellow): AI decides and acts alone. Ink text on it (9.9:1). The only place logo-yellow appears outside the logo.
--aivar(--ai-l2)
#F2C230AI topic color when no autonomy level is stated (= Level 02).
#F2C230AI topic color when no autonomy level is stated (= Level 02).
--ai-tint#FBEBB0Solid tint fill for AI areas inside figures.
--ai-line#7A5F00Outline 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.
--productvar(--accent)
#1F6AAEProduct topic (cerulean, same as accent): tag fill, trend sparkline, product figures. White text on it 5.6:1.
#1F6AAEProduct topic (cerulean, same as accent): tag fill, trend sparkline, product figures. White text on it 5.6:1.
--product-tintvar(--accent-tint)
#C9DDF0Solid tint fill for product shapes inside figures.
#C9DDF0Solid tint fill for product shapes inside figures.
--human#5A3FA6The 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#D9D0F0Solid tint fill for human areas inside figures.
--grid-majorrgba(30,60,110,0.17)Major grid lines every 120px on ground.
--grid-minorrgba(30,60,110,0.07)Minor grid lines every 24px on ground.
--grid-white-majorrgba(255,255,255,0.32)Major grid lines drawn inside accent (colored) blocks.
--grid-white-minorrgba(255,255,255,0.14)Minor grid lines drawn inside accent (colored) blocks.
--rulergba(21,54,79,0.25)Internal dividers inside paper cards (log rows, strip cells, title-block cells).
--logo-yellow#FFE537Logo center disc, and AI autonomy Level 04 (via ai-l4). Nowhere else.
--logo-pupilvar(--ink)
#15364FLogo center dot ONLY. Ink, the same as the mark's lines: on an ink surface it reads as a hole through the yellow.
#15364FLogo center dot ONLY. Ink, the same as the mark's lines: on an ink surface it reads as a hole through the yellow.
Spacing
- --unit-half
- 12pxTight inner gaps only (label to heading inside a card).
- --unit
- 24pxBase unit. Card padding, gaps between cards, minor grid step.
- --unit-2
- 48pxGap between hero columns, title to buttons, heading to content, large card padding.
- --unit-3
- 72pxHeading line box; space under the hero row; nav height on desktop.
- --unit-4
- 96pxSpace between sections and above the hero label at desktop.
- --column
- 120pxOne grid column and the major grid step.
- --frame
- 1200pxContent frame width: 10 columns, centered on the page's middle grid line.
Sizes
- control-height
- 48px · Buttons and inputs.
- label-height
- 24px · SheetLabel and tag height.
- nav-height
- 72px · Header bar at desktop (56px on phones).
- strip-height
- 120px · Topic strip and footer title block.
- row-height
- 240px · Writing log rows and the subscribe block.
- duo-height
- 360px · Premise and author cards.
- hero-height
- 408px · Hero row (title column and figure card).
- card-height
- 480px · Principle cards.
Borders and corners
- border-card
- 1.5px · Paper card and secondary button outlines, in ink. Draw with border-box sizing or an inset outline so height stays on the grid.
- border-rule
- 1px · Dividers inside cards, in rule.
- border-accent-dash
- 1.5px dashed · Premise note frame, in accent.
- radius-none
- 0 · Everything. Vellum is a square system: cards, buttons, tags, inputs and blocks have no rounded corners.
02 · Components
The parts, live
Each one is the component the site renders, from web/src/components/site. Square corners, ink outlines, tokens only.
Paper card
<PaperCard> · .v-paper-card
Anything that isn't the page itself. Solid paper, a 1.5px ink outline, and never the grid inside.
The problem space
Knowing where you are changes everything about how you work.
Color block
<ColorBlock> · .v-color-block
The accent at full strength, the grid showing through in white. For the moment that matters on a page: subscribe, or a way onward.
Color block
The grid shows through in white.
Buttons
<Button variant> · .v-button--primary | secondary | accent | mono
48px tall, square. Primary is ink; secondary is paper with an ink outline; accent is the header Subscribe; mono is for list links.
Topic tags
<TopicTag topic aiLevel> · .v-topic-tag
A post's topic on a 24px tag. AI tags always carry level pips, and name the level to screen readers.
Problem spaceTracking resultsProductSystems thinkingAIAIAIAI
Level pips
<LevelPips level size> · .v-level-pips
Four squares in an ink outline, filled to the level. 7px in tags, 11–14px in large swatches. Autonomy is never color alone.
L01 · AssistL02 · AdviseL03 · Act, reviewedL04 · Autonomous
Autonomy scale
<AutonomyScale> · .v-autonomy
The four AI levels side by side: brightest means least human in the loop.
L01 · #E3A92B
Assist
AI suggests, a person decides and acts.
L02 · #F2C230
Advise
AI recommends, a person approves. Default when no level is stated.
L03 · #FAD435
Act with approval
AI acts, a person reviews or can undo.
L04 · #FFE537
Autonomous
AI decides and acts alone.
Human marker
<HumanMarker> · .v-human-marker
The person: a purple square and a mono label, on the author card and post bylines. The only purple outside figures.
Author · Human
Topic strip
<TopicStrip> · .v-strip
A full-bleed paper band under the home hero: the three topics, each with a sparkline in its color.
Product
Artificial intelligence
Systems
Nav
<Nav> · .v-nav
Full-bleed paper bar, 72px (56 on phones), sticky, ink rule below. Uppercase mono links; the current page in accent with a tab on the rule. Below 640px the links fold into a menu.
Title-block footer
<Footer> · .v-footer
The page ends like a drawing: a ruled title block of context, author, copyright and other places to find the work.
Writing-log row
<PostLogRow> · .vb-log__row
One post in the log: tag, date and read time beside the title and excerpt. AI posts add a fourth line naming the autonomy level. This one is live from the log.
Subscribe block
<SubscribeBlock> · .vb-subscribe
A color block with the ask on the left and the action on the right: an email form, or a link button when it points somewhere on the site.
Subscribe
Follow my thinking as it takes shape.
Premise frame
.vb-premise
A statement of belief in a dashed accent frame: paper, an accent label, the quote in Archivo 500.
Note 01 · The premise
It's a place to navigate through ideas, because exploring is how I figure out what I actually believe.
03 · Patterns
How the parts combine
The moves that repeat across pages. Each one keeps the drawing-sheet idea intact.
Two-line hero headline
.type-display-h1 > span + span.accent
The hero asks its question in two lines, breaking at the color change: line one ink, line two accent.
Are you solving forthe right problem?
Hero band
.v-hero-band
When nothing sits right under the hero (About, a post, the 404), the hero goes on an accent band with the grid in white. Home and Writing keep plain ground, since a strip or the filter band follows.
About · John Irving
I'm not here to tell you what to build.I'm here to ask better questions about why.
Sticky filter band
.vb-filterband
On Writing, the topic filter sticks under the nav, tucked under its rule so the two read as one line. Chips show counts; the current one fills with ink.
Docs layout
<DocsLayout rail={<DocsIndex …/>}> · .v-docs
Long reference pages (the brand guide, this design system, templates) get a full-height index rail on the left: paper, ruled in ink like the nav and flush with the screen's edge, so the two read as one frame. The index sits in the frame's first two columns, in line with the logo, and marks the section in view; the content takes the other eight. Below 1024 the rail folds into a sticky chapter bar.
Numbered sheets
<SheetLabel>Sheet 0n · …</SheetLabel>
Home sections are numbered drawing sheets; brand pages number their chapters. The number says where you are in the set.
Sheet 01 · Product · AI · Systems thinking
Sheet 02 · Operating principles
Sheet 03 · Writing log
Text on the grid
.v-band
Supporting copy over the grid sits on a ground band: it reads cleanly without becoming a card.
I write about the questions that get squeezed out when everyone's moving fast.
One-line section heading
.type-display-h2.v-sec__title
Section headings stay on one line, directly on the grid. If it doesn't fit, the heading is too long.
Three ideas that shape how I look at most things
04 · Principles
Principles for building
When a component decision isn't obvious, these settle it. They're the usage rules from the brand guide, applied to product.
Do
- Let 1.5px ink outlines carry structure. Vellum has no shadows and no elevation.
- Use the accent for every interactive state: links, hover, focus rings.
- Keep each color to its meaning: product blue, AI yellow, systems green, the person purple.
- Set display in Archivo, reading in Plex Sans, labels and data in Plex Mono.
- Pair every control with a clear label.
- Add a new value to vellum.css as a token first, then use the variable.
Don't
- Scatter topic colors to decorate. A color always means its topic.
- Introduce radii, shadows, or colors outside the tokens.
- Reach for photography or an icon library without asking why it beats drawing our own.
- Set reading text below 17px, or mix two faces in one element.
- Use red. Anywhere.
Where it lives
- Tokens
- web/src/app/(frontend)/vellum.css, from web/src/lib/vellum-tokens.json
- Components
- web/src/components/site and its vellum-components.css
- Page blocks
- web/src/components/site/blocks, edited as page-builder blocks in the admin
- Figures
- web/src/components/site/figures, code-drawn SVG