Design system
Studio system
Tokens and patterns that power this site.
An opinionated kit for Design by Elliot: peach paper, hot accents, big type, thick-bordered cards. Documented here as a living reference. Plain Astro and CSS, no React.
Principles
Punchy, not carnival
Loud type and three accents (rose, violet, lime). Restraint in chrome so the craft stays clear.
Tokens first
Colour, type, space, and radius live as CSS custom properties. Components consume tokens; they do not invent one-off values.
Ship in the browser
What you see is production CSS from this site. Docs stay honest: no fake Storybook skin over a different system.
Colour
Warm paper and ink, with rose / violet / lime as the accent system. Semantic roles flip cleanly under data-theme.
- Paper
--color-paper - Paper 2
--color-paper-2 - Ink
--color-ink - Ink soft
--color-ink-soft - Surface
--color-surface - Rose
--color-rose - Violet
--color-violet - Lime
--color-lime - CTA
--color-cta-bg - Focus
--color-focus
Tone cards
Section and card energy uses three tinted packs. Border and tag share the tone; body text stays card ink.
- Rose
Card title
Tinted fill, thick border, shared tag colour.
- Violet
Card title
Tinted fill, thick border, shared tag colour.
- Lime
Card title
Tinted fill, thick border, shared tag colour.
Type
Syne for display, Manrope for body, JetBrains Mono for labels. Display runs oversized and tight; labels go wide and uppercase.
- DisplayDesign
- 2XLSelected work
- XLHow hiring works
- BodyProduct interfaces that hold up in production, not just in mockups.
- LabeliOS · Web · Product craft
- Mono--color-rose · 0.14em
Space
A stepped scale from 3xs to 2xl. Prefer these over magic numbers so rhythm stays consistent across sections.
- 3xs
--space-3xs - 2xs
--space-2xs - xs
--space-xs - sm
--space-sm - md
--space-md - lg
--space-lg - xl
--space-xl - 2xl
--space-2xl
Radius and borders
- Pill
--radius-pill999px - Card
--radius-card1.5rem - Border
--border-width1px - Border thick
--border-width-thick3px
Components
A few production patterns used on the site. Same classes as live UI.
Primary CTA
Send a briefText link
See selected work →Tags
Availability
Booking for September 2026
Theme toggle
Tone sample row
Offer
Work
Ship
Theme
Toggle light and dark from the control below (or the site footer). Tokens rebind under html[data-theme].
Persists in localStorage · key theme
Accessibility
- Focus rings use --color-focus (violet) with a consistent offset. Interactive elements get :focus-visible styles, not only :hover.
- Theme is set on html[data-theme] before paint to avoid a flash; colour-scheme follows light or dark.
- Text and UI targets prefer real content contrast on paper and ink; lime CTAs use dark ink on the fill.
- Motion respects prefers-reduced-motion where transforms fan devices or lift CTAs.
Living system
This page documents the same CSS variables used across Design by Elliot. Edit tokens in global.css; the site and this reference stay aligned.
See selected work