Frutiger Aero design system
From the Frutiger Aero section style.
Included with Everything
Colour
Type
- Hinddisplay · 500, 600, 700 · SIL Open Font License 1.1
- Display92 / 42px · 600One template. Every format.
- H257 / 44px · 600Section headline
- H329 / 22px · 700Card heading
- Lead19 / 19px · 500Body copy reads at this size and measure.
- Body16 / 14px · 500Body copy reads at this size and measure.
- Small14 / 14px · 500Body copy reads at this size and measure.
- Eyebrow13 / 13px · 500Section label
Components
Frutiger AeroProductPricingAboutGet started
Get started
Card heading
Body copy reads at this size and measure.
Shape and motion
- sm · 0px
- md · 0px
- lg · 0px
- pill · 9999px
- shadow sm
- shadow md
- out ·
cubic-bezier(0.2, 0.8, 0.3, 1) - in ·
cubic-bezier(0.5, 0, 0.9, 0.5) - out-2 ·
cubic-bezier(0.2, 0.7, 0.3, 1) - base · 700ms
Exports
- DESIGN.md
DESIGN.md19 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css4 KBEverything - Figma variables
figma-variables.json28 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("style-frutiger-aero") with the MCP server.
- Source
- Frutiger Aero section style
- Palette
- Sanzo Wada 208: Sulpher Yellow, Green Blue, Antwarp Blue
- Fonts
- Hind (OFL 1.1)
- Themes
- Dark, plus a derived light
- Contrast
- Text 5.58:1 · muted 3.76: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