Naoufal Chobah

Design system

Design tokens

Every colour, space, type size, radius and button on this site comes from one file, src/content/tokens.yaml. Change a value there, rebuild, and this page and the whole site follow.

Colour

The Bright Signal palette. Each swatch shows its custom property and how it reads on paper.

  • Aa --paper #FFFFFF on paper 1.00 · —
  • Aa --ink #121826 on paper 17.73 · AAA
  • Aa --truth #1B6FE8 on paper 4.68 · AA
  • Aa --accent #FF6B4A on paper 2.82 · —
  • Aa --sky #E8F1FF on paper 1.14 · —
  • Aa --voice #FFF0EA on paper 1.11 · —
  • Aa --ink-2 #414A5C on paper 8.90 · AAA
  • Aa --ink-3 #5B6477 on paper 5.94 · AA
  • Aa --truth-ink #1558C7 on paper 6.46 · AA
  • Aa --accent-ink #C4432A on paper 5.02 · AA
  • Aa --line #E4E9F2 on paper 1.22 · —
  • Aa --line-strong #CDD6E6 on paper 1.46 · —
  • Aa --mist #F6F9FF on paper 1.05 · —
  • Aa --night #0B101B on paper 19.02 · AAA

Spacing

One scale for every gap, padding and margin. Page gutters and section rhythm are fluid: 16–40px and 72–136px.

  • --space-3xs 4px
  • --space-2xs 8px
  • --space-xs 12px
  • --space-s 16px
  • --space-m 24px
  • --space-l 32px
  • --space-xl 48px
  • --space-2xl 64px
  • --space-3xl 96px

Typography

Three families, a fluid scale from 360px to 1280px wide screens, and a handful of weights, leadings and trackings.

  • Aa --font-display Fraunces Variable
  • Aa --font-reading Newsreader Variable
  • Aa --font-ui Inter Variable
  • Aa --font-mono ui-monospace
  • --text-5xl The sky is a clock 42→86px
  • --text-4xl The sky is a clock 38→72px
  • --text-3xl The sky is a clock 30→52px
  • --text-2xl The sky is a clock 24→34px
  • --text-xl The sky is a clock 21→26px
  • --text-lg The sky is a clock 18→21px
  • --text-md The sky is a clock 17→19px
  • --text-base The sky is a clock 16→17px
  • --text-sm The sky is a clock 14→15px
  • --text-xs The sky is a clock 12→13px
Leading
--leading-tight 1.02--leading-snug 1.15--leading-normal 1.6--leading-relaxed 1.72
Weight
--weight-regular 400--weight-medium 560--weight-semibold 600--weight-bold 650
Tracking
--tracking-tight -0.035em--tracking-snug -0.02em--tracking-normal 0em--tracking-wide 0.14em

Radius

Two families of corners: soft backgrounds and surfaces, and fully rounded controls.

Backgrounds --radius-bg-*

  • --radius-bg-section 40px
  • --radius-bg-card 28px
  • --radius-bg-panel 18px
  • --radius-bg-media 12px
  • --radius-bg-inset 6px

Controls

  • Button --radius-button 999px
  • Chip --radius-chip 999px
  • Field --radius-field 12px

Buttons

Four variants in three sizes: .btn plus .btn--primary, --dark, --ghost or --soft, and .btn--sm or .btn--lg.

sm · 36pxmd · 46pxlg · 56px
.btn--primary About me About me About me
.btn--dark All posts All posts All posts
.btn--ghost Read the blog Read the blog Read the blog
.btn--soft Subscribe Subscribe Subscribe

Shadow & motion

Three elevations, one easing curve and three durations. Motion stops for visitors who prefer reduced motion.

  • --shadow-s
  • --shadow-m
  • --shadow-lift

--ease cubic-bezier(0.2, 0.75, 0.25, 1)

  • --dur-fast 200ms
  • --dur-base 350ms
  • --dur-slow 800ms

Using them

.card {
  padding: var(--space-m);
  border-radius: var(--radius-bg-card);
  font-size: var(--text-base);
}
<a class="btn btn--primary btn--lg" href="/blog/">Read the blog</a>