Glassmorphism design system
From the Glassmorphism section style.
Included with Everything
Colour
Type
- Soradisplay · 400, 500, 600 · SIL Open Font License 1.1
- Display81 / 42px · 600One template. Every format.
- H250 / 26px · 600Section headline
- H321 / 19px · 600Card heading
- Lead18 / 18px · 400Body copy reads at this size and measure.
- Body15 / 15px · 400Body copy reads at this size and measure.
- Small13 / 13px · 400Body copy reads at this size and measure.
- Eyebrow12 / 12px · 500Section label
Components
GlassmorphismProductPricingAboutGet started
Get started
Card heading
Body copy reads at this size and measure.
Shape and motion
- sm · 10px
- md · 16px
- lg · 30px
- shadow sm
- fast · 700ms
- slow · 1150ms
Exports
- DESIGN.md
DESIGN.md19 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css5 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-glass") with the MCP server.
- Source
- Glassmorphism section style
- Palette
- Sanzo Wada 143: Blue, Lilac, Warm Gray
- Fonts
- Sora (OFL 1.1)
- Themes
- Light, plus a derived dark
- Contrast
- Text 16.15:1 · muted 6.84: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