Everything for $49All templates for $99

Design systems

Clerestory design system

From the Clerestory template.

Included with Everything
Clerestory

Colour

Type

  • Gilda Displaydisplay · 400 · SIL Open Font License 1.1
  • Manropebody · 400, 500, 600, 700 · SIL Open Font License 1.1
  • Display135 / 60px · 400Recent rooms, in their own light.
  • H262 / 40px · 400From the first visit to the last cushion.
  • H317 / 17px · 600Six questions. One minute. Your style, named.
  • Lead19 / 18px · 400Every project starts with a day in the house, watching where the sun goes.
  • Body15 / 15px · 400A typical room design, to scale.
  • Small14 / 14px · 400We ask what we would ask on a first visit.
  • Eyebrow14 / 14px · 600THE STUDIO

Components

ServicesProcessShopJournalBook a consultation
Book a consultation Book a consultation See all work

THE STUDIO

Six questions. One minute. Your style, named.

A typical room design, to scale.

Shape and motion

  • sm · 2px
  • md · 4px
  • lg · 4px
  • out · cubic-bezier(.22, .7, .16, 1)
  • fast · 500ms
  • slow · 1300ms

Exports

  • DESIGN.mdDESIGN.md21 KBEverything
  • CSS variablestokens.css5 KBEverything
  • Tailwind v4tailwind.css6 KBEverything
  • shadcn/ui themeshadcn.css5 KBEverything
  • Figma variablesfigma-variables.json28 KBEverything
  • Webflow variableswebflow-variables.json9 KBEverything
  • W3C tokens (JSON)tokens.json16 KBEverything

Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("clerestory") with the MCP server.

Source
Clerestory template
Palette
Sanzo Wada 238: Ochraceous Salmon, Cotinga Purple, Warm Gray
Fonts
Gilda Display (OFL 1.1), Manrope (OFL 1.1)
Themes
Light and dark
Contrast
Text 15.33:1 · muted 10.3:1

Inside DESIGN.md

  1. At a glance
  2. Setup
  3. Colour
  4. Typography
  5. Layout and spacing
  6. Shape and depth
  7. Motion
  8. Components
  9. Voice and copy
  10. Do and don’t
  11. Tokens

More design systems

All 123