Brightloft design system
From the Brightloft template.
Included with Everything
Colour
Type
- Gabaritodisplay · 700, 800, 900 · SIL OFL 1.1
- Plus Jakarta Sansbody · 450, 500, 600, 700, 800 · SIL OFL 1.1
- Display138 / 50px · 900This month at the park
- H284 / 44px · 800Seven ways up, over and down.
- H320 / 18px · 700Stay low, or go all the way.
- Lead19 / 18px · 450Brightloft is an indoor adventure park: a 14 m climbing wall, an 80 m zip line under the roof, high ropes, drop slides and twenty-four trampolines.
- Body16 / 16px · 450Book a time and skip the line.
- Small14 / 14px · 700One hall, two floors, every ride in sight of the café.
- Eyebrow13 / 13px · 500The park
Components
BrightloftPartiesGet ticketsGet tickets
Get tickets
Book Ground Pass
The park
Stay low, or go all the way.
Book a time and skip the line.
Tell us who's coming. We'll plan the day.
One hall, two floors, every ride in sight of the café.
Shape and motion
- sm · 14px
- md · 20px
- lg · 32px
- pill · 9999px
- shadow sm
- shadow md
- out ·
cubic-bezier(.22, 1, .36, 1) - in-out ·
cubic-bezier(.65, 0, .35, 1) - fast · 200ms
- base · 550ms
- slow · 1100ms
Exports
- DESIGN.md
DESIGN.md23 KBEverything - CSS variables
tokens.css6 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.json19 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("brightloft") with the MCP server.
- Source
- Brightloft template
- Palette
- Sanzo Wada 267: Cream Yellow, Yellow Orange, Benzol Green, Blue
- Fonts
- Gabarito (SIL OFL 1.1), Plus Jakarta Sans (SIL OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 16.46:1 · muted 6.52: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