Lodestar design system
From the Lodestar template.
Included with Everything
Colour
Type
- Gloockdisplay · 400 · SIL OFL 1.1
- Wix Madefor Textbody · 400, 600, 700 · SIL OFL 1.1
- Display89 / 64px · 400Eight days on the edge of the sea.
- H255 / 43px · 400Where we go.
- H328 / 22px · 700However you like to go.
- Lead20 / 20px · 400Lodestar runs small-group walking and cultural trips to far places, led by people who live there.
- Body17 / 17px · 400See every departure, the price for your group and the deposit, and request your places in a minute.
- Small13 / 13px · 700Half our trips walk within sight of the sea.
- Eyebrow13 / 13px · 600OUR MOST BOOKED TRIP
Components
LodestarTripsTravel stylesPrivate tripsReviewsDestinations
Every date and price
Find a trip
Learn more
Destinations
SMALL GROUPS, FAR PLACES, SINCE 2009
However you like to go.
See every departure, the price for your group and the deposit, and request your places in a minute.
Shape and motion
- sm · 3px
- md · 6px
- lg · 10px
- shadow sm
- out ·
cubic-bezier(.2, .7, .1, 1) - in-out ·
cubic-bezier(.65, 0, .25, 1) - fast · 200ms
- base · 500ms
- slow · 1100ms
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("lodestar") with the MCP server.
- Source
- Lodestar template
- Palette
- Sanzo Wada 249: Hay's Russet, Ecru, Olive Ocher, Dark Medici Blue
- Fonts
- Gloock (SIL OFL 1.1), Wix Madefor Text (SIL OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 15.78:1 · muted 8.48: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