Amberlea design system
From the Amberlea template.
Included with Everything
Colour
Type
- Bodoni Modadisplay · 400 · SIL Open Font License 1.1
- Schibsted Groteskbody · 400, 500, 600, 700 · SIL Open Font License 1.1
- Display129 / 54px · 600New to market, and worth the drive
- H262 / 40px · 400The coast, neighbourhood by neighbourhood
- H319 / 19px · 600Every home, filmed at its best hour.
- Lead21 / 20px · 400Six places, six ways to live.
- Body15 / 16px · 400A first figure in ten seconds, from 412 sales on the coast since 2021.
- Small14 / 14px · 400Six places, six ways to live.
- Eyebrow12 / 12px · 50001
Components
AmberleaBuySellAgentsJournalFree valuation
How we sell a home
See the homes
About Amberlea
01
Every home, filmed at its best hour.
A first figure in ten seconds, from 412 sales on the coast since 2021.
What is your home worth?
Six places, six ways to live.
Shape and motion
- sm · 3px
- md · 8px
- lg · 8px
- pill · 9999px
- shadow sm
- shadow md
- out ·
cubic-bezier(.2, .7, .1, 1) - in-out ·
cubic-bezier(.65, 0, .35, 1) - base · 500ms
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.json18 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("amberlea") with the MCP server.
- Source
- Amberlea template
- Palette
- Sanzo Wada 343: Burnt Sienna, Ivory Buff, Deep Grayish Olive, Vandar Poel's Blue
- Fonts
- Bodoni Moda (OFL 1.1), Schibsted Grotesk (OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 15.81:1 · muted 8.26: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