isn’t it chironic · Design System
The system, in code, as it actually is.
A working reference for building the site. Every value on this page is read from tokens.css at the moment the page loads, so it shows what the code will really use, not what someone remembered. v1 ships Morning only; Night is shown so it keeps working.
How to use it. Keep this open in a second tab while you build. Click any swatch or token to copy its var(--name). When Claude Code builds a component, it adds a story file and the component appears under Components.
Rules for Code
- Semantic tokens only in components.
--bg,--text,--action… never a primitive (--c-*), never a raw hex. - Spacing from the scale. If a value isn’t on the scale, the design is wrong or the scale needs a new step. Ask.
- Two shadows exist. Invitation card and state cards. Nothing else lifts.
- Gold is scarce. Golden Sunrise is a signature, not a fill. Pink is atmosphere only, never interactive.
- The comet is the only comet. Sparkles never mean “AI”.
- Every animation has a reduced-motion fallback. Nothing pulses, bounces or autoplays.
- AA minimum on every pair. The Contrast section checks the real pairs live.
Color · Primitives
Raw paint. These feed the semantic tokens and never appear in a component.
Color · Semantic
What components use. Each row shows what the token points to in Morning (v1) and in Night (v2, opt-in with data-theme="night").
| Token | Morning · v1 | Night · v2 |
|---|
Contrast
The pairs the site actually uses, measured live against WCAG 2.1. AA needs 4.5 for body text and 3 for large text and UI parts.
| Pair | Morning | Night | Needs |
|---|
Atmosphere & Sky
The painted world. The hero is the only painted surface on a Morning page, built from three layers so they can move: sky-field, sky-far, sky-near. Fidelity falls as text rises: painted at the top, paper where people read.
/img/sky/morning/, exported from the Morning Parallax component (964:216840). Hover to separate the layers.
/img/sky/night/ (964:216841). For the few Night sections v1 allows.Fidelity levels
- 1 · Painted hero only
- 2 · Simplified hero exception
- 3 · Gradient + grain objects allowed at edges
- 4 · Paper + grain objects allowed at edges
- 5 · Flat where people read
Typography
Headlines: Archivo Expanded (the width axis at 125%). Body: Inter. Committed Oct 4: where Figma still shows Trade Gothic or SF Pro, the code wins. Measure 44 to 56 characters.
Spacing
The whole scale. Section gaps and named gaps below it.
Radius & Lines
Elevation
One stepped scale, level 0 to 4. Each level pairs a tight contact shadow with a wide soft one, and every shadow is tinted (violet on Morning, deep navy on Night), never neutral grey. The same scale serves both themes; --elev-k raises the strength on Night, because dark surfaces swallow weak shadows. The sky has its own hues, below.
--elev-0Page and paper. No shadow.--elev-1Glass panes holding images and diagrams (--glass-shadow).--elev-2The header pill, the front-door card, state cards (--nav-shadow, --shadow-card).--elev-3The nav dropdown and any popover (--menu-shadow).--elev-4Dialogs and the image lightbox (--modal-shadow).The same scale on Night
The sky: its own shadow hues
Painted objects do not cast a UI shadow. Near clouds lift on a soft warm rose (--sky-near-shadow); far clouds stay flat and hazy. The sun carries a tight orange halo and a very wide tapering one (--orb-glow-1, --orb-glow-2), chained as two drop-shadow()s because that function takes a single shadow. On Night the same tokens become navy under clouds and an ivory and rose glow around the moon.
Frosted surface
Motion
Hover the tiles. Every motion here stops when the system asks for reduced motion.
| Token | Value |
|---|
Grid & Layout
Content column up to 1440 (it grows with the screen) · gutter 24 to 96 · 12 columns with 24 between. Two-up sections are 7/5 or 6/6 with 56 to 96 between. Drawn to scale below.
Icons
Material Symbols Rounded, weight 400, fill 0, as text ligatures: <span class="material-symbols-rounded">arrow_forward</span>. Person means the user and the robot means the agent, in every diagram. Click to copy the name.
Brand
comet-gradient.png- One wordmark: the gradient version, on Morning and Night alike. The dark and white versions are retired.
- The wordmark overhangs the nav pill top and bottom on purpose, a little more on top, and sits in from the pill’s left end. Never centered, never boxed, never resized per page.
- The comet faces left, so it crosses the sky instead of heading at the viewer.
- Navigation: a white pill on Morning, a deep-purple pill on Night, both with a soft shadow. Nav links use the primary link color at 20 px. The footer is light Morning paper (a soft violet-to-ivory wash) on every page.
isn’t it chironic · Components
Every component.
26 components built so far. Pick one here or from the menu on the left. Each shows its states, links to its Figma node, and has a live preview you can resize to phone, tablet and desktop widths and flip between Morning and Night.
Actions & forms
- Badgev1The chip, smaller: same sans-serif (Inter Bold 12 px), vertically centered, 20 px tall, with a soft two-stop gradient and a hairline edge…Figma 944:196872
- Buttonv1Primary action, 52 px target. Primary and ghost (the quiet secondary). A link when it has an href, a button otherwise. Tab to it to see t…Figma 18:10
- Chipv1Skill or constraint chip. Rows wrap; never more than ten on a screen.Figma 500:49275
- Fieldv1Labelled input and textarea with a hint. Label always visible; focus ring; inline error (shown here on the last field). Used by the Conta…Figma 18:11
- Gate (front door)v1The way in from the front door: one button to the portfolio.
- Linkv1Always underlined. External links open in a new tab and show the open_in_new icon.
Brand & navigation
- Footer (First light)v1The closing footer, on the light Morning paper (updated Oct 5 from the old Night footer): a soft violet-to-ivory wash, the two-line tagli…Figma 500:45138
- Navv1The header pill. Morning is a white pill; Night is a deep-purple pill; both have a soft shadow and rounded ends. Links are Inter Semibold…Figma 500:41045
- Portrait cloudv1The portrait held in a cut-paper cloud. Left: no photo yet (what is live today). Right: with a photo, the cloud masks it and the caption …Figma 500:49238
- Wordmarkv1The only comet on the site. Always the gradient version, on Morning and on Night: the lettering is cut out of the comet, so it takes the …Figma 102:104552
Sky & night
- Arrival transitionv1"Come on in" flies through the clouds into first light, then Home fades up out of the glow. Under one second, plays once per visit, and b…Figma 508:41053
- Atmosphere (clouds, sparkles, comet, moon)v1The small objects that make the sky feel lived in: drifting clouds (left, right or both lane) that also rise and fall a little, yellow sp…
- Glass cardv1A Night glass card (faint white fill, hairline) inside a Night section. The section switches every token with data-theme="night" over a v…
- Night bandv1A Night section: night sky, headline, one sentence, one button. Used on Home and the Case Studies index. Tokens flip inside it, so the bu…
- Night sectionv1A Night section: every token takes its night value (data-theme="night") over a deep violet-to-blue field with a faint pink afterglow at t…
- Sky herov1The eight painted layers with parallax and drift (both stop for reduced motion). The layers drift side to side and a little up and down, …
Content blocks
- About chapterv1One chapter of the About story: years | headline, paragraph, optional pull quote, where line | image. The pull quote is off by default.Figma 995:40974
- Fact listv1Stat rows with pale-gold hairlines. Used on the front door, Home and About.Figma 407:16384
- Invitation cardv1The front door card. It holds one button to the portfolio.Figma 500:49259
- Lensv1The “Questions” card on the Case Studies hero: four questions a reader might arrive with, each one a link that jumps down the page to the…Figma 908:90864
- Paragraphsv1Copy with blank-line-separated paragraphs, **bold** lead-ins, bulleted lists ("- item") and numbered lists ("1. item"); every list item s…
- Peek tilev1Front-door sneak peek: short still, badge, title, tags. Ecolab may be named; its clients never are.Figma 500:49292
- Principle cardv1One working principle: Title Case heading plus one sentence. Tokens only, so it works on Morning and Night.Figma 995:41053
- Section headv1A section heading with a short note on the right; stacks on phones. Above the study list on Home, the story on About and the previews on …
- Stillv1Image slot. Empty: a labelled placeholder (what the real image shows). With src: the whole image in a frosted glass pane at its own propo…Figma 407:16406
About chapter
v1Figma 995:40974 ↗One chapter of the About story: years | headline, paragraph, optional pull quote, where line | image. The pull quote is off by default.
Arrival transition
v1Figma 508:41053 ↗"Come on in" flies through the clouds into first light, then Home fades up out of the glow. Under one second, plays once per visit, and becomes a 280 ms crossfade for reduced motion. Press Play to replay it here (it does not leave this page). Real keyframes: 508:41053 (clouds) and 508:45175 (gold bloom).
Atmosphere (clouds, sparkles, comet, moon)
v1The small objects that make the sky feel lived in: drifting clouds (left, right or both lane) that also rise and fall a little, yellow sparkles that breathe, a comet that idles, a moon with a cloud sliding across it. Vector or painted, token-colored (Morning and Night each get their own palette), never cropped by an edge, kept out of text (a cloud that cannot avoid text dims to the accessible level), sitting behind content and ignoring clicks. Everything stops under reduced motion.
Badge
v1Figma 944:196872 ↗The chip, smaller: same sans-serif (Inter Bold 12 px), vertically centered, 20 px tall, with a soft two-stop gradient and a hairline edge. Morning is a light lavender-to-blue gradient with dark violet text; Night is a deep violet-to-blue gradient with light text. All four case studies are SHIPPED. PILOT, POC and CONCEPT are for features in a different state (future use). Flip to Night above: no gold, every pair above 4.5:1 (the audit reads --badge-bg-start and --badge-bg-end).
Case Study section
v1The wrapper every case study section uses: an anchor id, a heading and the standard vertical rhythm (72 above, 96 below at desktop). `tone="dawn"` adds the soft sky wash used where the page turns; `theme="night"` makes the section Night.
Chip
v1Figma 500:49275 ↗Skill or constraint chip. Rows wrap; never more than ten on a screen.
Fact list
v1Figma 407:16384 ↗Stat rows with pale-gold hairlines. Used on the front door, Home and About.
Field
v1Figma 18:11 ↗Labelled input and textarea with a hint. Label always visible; focus ring; inline error (shown here on the last field). Used by the Contact form.
Gate (front door)
v1The way in from the front door: one button to the portfolio.
Glass card
v1A Night glass card (faint white fill, hairline) inside a Night section. The section switches every token with data-theme="night" over a violet-to-blue field with a pink afterglow at the bottom.
Invitation card
v1Figma 500:49259 ↗The front door card. It holds one button to the portfolio.
Lens
v1Figma 908:90864 ↗The “Questions” card on the Case Studies hero: four questions a reader might arrive with, each one a link that jumps down the page to the case study that answers it.
Link
v1Always underlined. External links open in a new tab and show the open_in_new icon.
Night band
v1A Night section: night sky, headline, one sentence, one button. Used on Home and the Case Studies index. Tokens flip inside it, so the button turns gold.
Night section
v1A Night section: every token takes its night value (data-theme="night") over a deep violet-to-blue field with a faint pink afterglow at the bottom edge. `moon` adds a small moon in the corner. Use the Morning/Night switch above: the section looks the same either way, because it sets its own theme.
Paragraphs
v1Copy with blank-line-separated paragraphs, **bold** lead-ins, bulleted lists ("- item") and numbered lists ("1. item"); every list item starts with a capital. Pass `columns` to split the text into two even columns (blocks are not broken in half, and it stacks on tablets and phones). In the production build, to-do markers (a bracketed T) are removed from the text; here, in development, they stay visible so nothing is forgotten (see the second paragraph).
Peek tile
v1Figma 500:49292 ↗Front-door sneak peek: short still, badge, title, tags. Ecolab may be named; its clients never are.
Portrait cloud
v1Figma 500:49238 ↗The portrait held in a cut-paper cloud. Left: no photo yet (what is live today). Right: with a photo, the cloud masks it and the caption appears (the sample is a stand-in image).
Principle card
v1Figma 995:41053 ↗One working principle: Title Case heading plus one sentence. Tokens only, so it works on Morning and Night.
Section head
v1A section heading with a short note on the right; stacks on phones. Above the study list on Home, the story on About and the previews on the front door.
Sky hero
v1The eight painted layers with parallax and drift (both stop for reduced motion). The layers drift side to side and a little up and down, each on its own rhythm, and lag the page as you scroll (far 0.30, near 0.62). Shown as a short Morning and a short Night band; heroes are one full screen on pages with the content centered in a 1440 px column.
Still
v1Figma 407:16406 ↗Image slot. Empty: a labelled placeholder (what the real image shows). With src: the whole image in a frosted glass pane at its own proportions (its real size is read at build time, so nothing jumps while it loads). Options: `bare` shows a transparent image as is, with no pane, background or corners (the case study hero and side-by-side images); `crop` is a deliberate tight crop for cards; `enlarge` makes the image a button that opens the whole thing large in a dialog (Esc, the Close button or a click outside closes it, focus returns to the image, and the large view scrolls so small print stays readable on a phone). Click the second example to try it.
Wordmark
v1Figma 102:104552 ↗The only comet on the site. Always the gradient version, on Morning and on Night: the lettering is cut out of the comet, so it takes the color of whatever is behind it. Never recolor it, resize it per page or box it. 175 px wide in the nav and footer (120 px in the phone nav). The dark and white versions are retired.