Skip to content

Design system

The system

designtakes.com is type-led, dark-only, and built from a single layer of design tokens. This page documents the decisions. For a machine-readable version, read design.md.

Typography

Mg¹²

Aa Bb Gg 0123

atipo foundry · Regular / Medium / Bold · roman & italic

The entire site — display and body — is set in Mg¹², a technical sans by atipo foundry. It is self-hosted (woff2/woff/ttf) under a single-website webfont licence. Headings use Medium (500); body uses Regular (400); emphasis uses the true Bold and Italic cuts — never synthesised.

Buy Mg¹² at atipo foundry
Design takes --step--2 · Fine print, eyebrows
Design takes --step--1 · Meta, captions
Design takes --step-0 · Body
Design takes --step-1 · Lead / large body
Design takes --step-2 · H3 / pull quote
Design takes --step-3 · H2
Design takes --step-4 · Section titles
Design takes --step-5 · Page titles
Design takes --step-6 · Large display
Design takes --step-7 · Hero display

Colour

One neutral dark-gray ground, one confident vermilion accent. No light theme. All text pairs meet WCAG AA.

  • --bg #161617 Page background
  • --surface #1f1f21 Raised cards, menu
  • --surface-sunken #101011 Wells, code blocks
  • --ink #f2f2f3 Primary text
  • --muted #a0a0a6 Secondary / meta
  • --line #2b2b2e Hairlines
  • --accent #ff6a45 Brand vermilion
  • --accent-ink #ff8a6b Links / small text

Space & shape

Fluid spacing scale (clamped to the viewport) and radii.

--space-3xs
--space-2xs
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-2xl
--space-3xl
  • --radius-xs
  • --radius-sm
  • --radius-md
  • --radius-lg
  • --radius-full

Principles

  • Tokens, not magic values — one file (tokens.css) tunes the whole aesthetic.
  • Zero client JS by default; islands only where interaction truly needs it.
  • Type-led and dark-only. Restraint over decoration.
  • Accessibility is not optional — AA contrast, visible focus, reduced-motion respected.

Full decision log for humans and bots: design.md.

Built with

Licence
Open source under the MIT licence. © Design Takes.
Framework
Astro 5, static output (fully prerendered), TypeScript (strict). Zero client JS by default.
Styling
Tailwind CSS v4 (CSS-first) layered over the tokens.css design tokens.
Type
Self-hosted Mg¹² by atipo foundry (woff2/woff/ttf).
Hosting
Deployed to Cloudflare Workers static assets and served from the Cloudflare edge; DNS on Cloudflare.
Content
Markdown posts in Astro content collections. Feedback curated from GitHub Discussions.
Source
Code on GitHub.