Skeuomorphism design system
From the Skeuomorphism section style.
Included with Everything
Colour
Type
- Frauncesdisplay · 400 · SIL Open Font License 1.1
- Archivobody · 400, 600, 700 · SIL Open Font License 1.1
- Courier Primemono · 400 · SIL Open Font License 1.1
- Display81 / 42px · 400One template. Every format.
- H250 / 26px · 400Section headline
- H316 / 14px · 700Card heading
- Body16 / 16px · 400Body copy reads at this size and measure.
Components
SkeuomorphismProductPricingAboutGet started
Get started
Card heading
Body copy reads at this size and measure.
Shape and motion
- sm · 4px
- md · 9px
- lg · 10px
- shadow sm
- shadow md
- spring ·
cubic-bezier(0.5, 0, 0.15, 1.15) - spring-2 ·
cubic-bezier(0.6, -0.15, 0.25, 1.12) - fast · 300ms
- base · 400ms
- slow · 1050ms
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.json25 KBEverything - Webflow variables
webflow-variables.json9 KBEverything - W3C tokens (JSON)
tokens.json17 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("style-skeuo") with the MCP server.
- Source
- Skeuomorphism section style
- Palette
- Sanzo Wada 249: Hay's Russet, Ecru, Olive Ocher, Dark Medici Blue
- Fonts
- Fraunces (OFL 1.1), Archivo (OFL 1.1), Courier Prime (OFL 1.1)
- Themes
- Dark, plus a derived light
- Contrast
- Text 4.87:1 · muted 3.28: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