This site’s design system

Colour

Two scales, brand (blue) and ink (neutral), plus paper for the light page and signal for live status. Values are OKLCH; the hex is the sRGB colour the browser paints.

Under each colour: its contrast as text on the light page (paper) and on the dark page (ink-950).

Contrast

The text and background pairs the components use, in both themes. Transparent backgrounds are blended over the surface below them, as the browser does.

55 of 55 pairs pass AA, and 34 of the text pairs also reach AAA.

Ratios use the sRGB value of each colour. On wide-gamut screens, Tailwind’s default rose, emerald and amber can look slightly more saturated.

Typography

Bricolage Grotesque for headings and Inter for text, both variable fonts in the latin subset. The fallback faces use metric overrides, so swapping to the web font doesn’t shift the layout.

Families

• Fast, accessible frontends

  Headings

  --font-display: 'Bricolage Grotesque Variable', 'Bricolage Fallback', ui-sans-serif, system-ui, sans-serif

• Fast, accessible frontends

  Text and interface

  --font-sans: 'Inter Variable', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif

• Fast, accessible frontends

  Labels, code and console

  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace

Display sizes

Display sizes are fluid: they grow with the viewport between the minimum and the maximum of the clamp().

• Aa

  Token

  text-display-xl

  Size

  clamp(3rem, 8vw, 6.5rem)

  Line height

  0.95

  Letter spacing

  -0.035em

• Aa

  Token

  text-display-lg

  Size

  clamp(2rem, 4vw, 3.25rem)

  Line height

  1.02

  Letter spacing

  -0.03em

• Aa

  Token

  text-display-md

  Size

  clamp(1.5rem, 2.6vw, 2.125rem)

  Line height

  1.1

  Letter spacing

  -0.02em

Text sizes

• text-xs · 0.75rem (12 px) Fast, accessible frontends
• text-sm · 0.875rem (14 px) Fast, accessible frontends
• text-base · 1rem (16 px) Fast, accessible frontends
• text-lg · 1.125rem (18 px) Fast, accessible frontends
• text-xl · 1.25rem (20 px) Fast, accessible frontends
• text-2xl · 1.5rem (24 px) Fast, accessible frontends

Space, radius and elevation

Tailwind’s spacing scale on a 0.25rem (4 px) unit, one content width, and a few radii and shadows, each with one job.

Spacing

• 1 · 0.25rem
• 2 · 0.5rem
• 3 · 0.75rem
• 4 · 1rem
• 5 · 1.25rem
• 6 · 1.5rem
• 8 · 2rem
• 10 · 2.5rem
• 12 · 3rem
• 16 · 4rem
• 20 · 5rem
• 28 · 7rem

Sections have 5rem of vertical padding on phones and 7rem from 640 px up.

Content width: --container-page: 76rem

Radii

• Chips

  rounded-md · 0.375rem

• Form fields

  rounded-xl · 0.75rem

• Cards

  rounded-2xl · 1rem

• Panels

  rounded-3xl · 1.5rem

• Buttons

  rounded-full

Shadows

• Cards and buttons at rest

  shadow-soft: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px -4px rgb(0 0 0 / 0.06)

• Cards on hover and the console

  shadow-lift: 0 1px 1px rgb(14 15 20 / 0.04), 0 12px 32px -12px rgb(14 15 20 / 0.18)

• Brand emphasis

  shadow-glow: 0 0 0 1px rgb(59 99 255 / 0.18), 0 20px 60px -20px rgb(59 99 255 / 0.45)

Motion

Short transitions on one easing curve. When the visitor asks for reduced motion, animations, smooth scrolling and view transitions are switched off.

Easing

--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1)

Animations

• --animate-fade-up: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both
• --animate-caret: caret 1s steps(1) infinite
• --animate-pulse-dot: pulseDot 2s ease-in-out infinite

Components

The shared classes in global.css, rendered live. Press Tab to see the focus ring on each control.

<button type="button" class="btn-primary">Primary</button>
<button type="button" class="btn-brand">Brand</button>
<button type="button" class="btn-ghost">Ghost</button>
<button type="button" class="btn-ghost btn-sm">Small</button>

<span class="chip-core">Core</span>
<span class="chip">Chip</span>
<span class="chip chip-familiar">Familiar</span>
<span class="chip chip-brand">Brand chip</span>
<span class="chip-live">Live status</span>

<div class="w-full"><label class="field-label" for="ds-email">Email</label>
  <input id="ds-email" class="field" type="email" placeholder="name@company.com" autocomplete="off"></div>
<div class="error-summary w-full">Check 1 field before sending: Company.</div>
<div class="w-full"><label class="field-label" for="ds-company">Company</label>
  <input id="ds-company" class="field" type="text" aria-invalid="true" aria-describedby="ds-company-error" autocomplete="off">
  <p id="ds-company-error" class="field-error">Enter the company name.</p></div>

<div class="card p-5"><p class="font-semibold text-ink-950 dark:text-white">Card</p>
  <p class="mt-1 text-sm">Large radius, hairline border and a soft shadow.</p></div>
<div class="panel p-5"><p class="font-semibold text-ink-950 dark:text-white">Panel</p>
  <p class="mt-1 text-sm">Larger radius and no shadow.</p></div>

<a class="link-underline" href="#links">Brand link</a>
<a class="link-quiet" href="#links">Quiet link</a>

// Oscar Arenas
{ "years": 17, "stack": "React · Next.js" }

<div class="console w-full" aria-hidden="true">
  <div class="console-bar"><span class="console-dot"></span><span class="console-dot"></span><span class="console-dot"></span><span>resume.json</span></div>
  <pre class="px-4 py-3 overflow-x-auto"><span class="c">// Oscar Arenas</span>
{ <span class="k">"years"</span>: <span class="n">17</span>, <span class="k">"stack"</span>: <span class="s">"React · Next.js"</span> }</pre>
</div>