Safelight design system
From the Safelight template.
Included with Everything
Colour
Type
- Bricolage Grotesquedisplay · 500 · SIL OFL 1.1
- Instrument Sansbody · 400, 500, 600 · SIL OFL 1.1
- Azeret Monomono · 500 · SIL OFL 1.1
- Display100 / 60px · 500Five series, one way of seeing.
- H262 / 37px · 500Three ways to work with us.
- H326 / 20px · 500What it costs, before you ask.
- Lead24 / 20px · 400Safelight is a photography studio for weddings, magazines and brands: photographs made slowly and printed by hand in our own darkroom.
- Body20 / 18px · 400Weddings, magazines and brands.
- Small12 / 12px · 500Pick the kind of day and how long you need us.
- Eyebrow16 / 16px · 50002 SELECTED WORK
Components
SafelightCommissionsPricingPrintsJournalBuild a quote
Open the full builder
Wedding
Enquire
02 SELECTED WORK
What it costs, before you ask.
Weddings, magazines and brands.
Shape and motion
- sm · 1px
- md · 2px
- lg · 2px
- out ·
cubic-bezier(.2, .7, .1, 1) - in-out ·
cubic-bezier(.65, 0, .25, 1) - fast · 180ms
- base · 450ms
- slow · 1200ms
- slower · 1800ms
Exports
- DESIGN.md
DESIGN.md22 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css5 KBEverything - Figma variables
figma-variables.json29 KBEverything - Webflow variables
webflow-variables.json9 KBEverything - W3C tokens (JSON)
tokens.json17 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("safelight") with the MCP server.
- Source
- Safelight template
- Palette
- Sanzo Wada 30: Pompeian Red, Mineral Gray
- Fonts
- Bricolage Grotesque (SIL OFL 1.1), Instrument Sans (SIL OFL 1.1), Azeret Mono (SIL OFL 1.1)
- Themes
- Dark and light
- Contrast
- Text 16.7:1 · muted 11.67:1
Inside DESIGN.md
- At a glance
- Setup
- Colour
- Typography
- Layout and spacing
- Shape and depth
- Motion
- Components
- Voice and copy
- Do and don’t
- Tokens