Oriel design system
From the Oriel template.
Included with Everything
Colour
Type
- Epiloguedisplay · 300, 400, 500 · Check the font vendor
- Literatabody · 400 · Check the font vendor
- Display154 / 58px · 300Selected work
- H287 / 42px · 300Three kinds of building
- H332 / 22px · 400Plan your project in two minutes
- Lead17 / 17px · 400Oriel is an architecture practice of twenty-six people designing houses, housing, cultural buildings and workplaces.
- Body15 / 17px · 400See the work, or plan your project with the brief builder.
- Small14 / 14px · 400Hover a plate for the plan.
- Eyebrow13 / 13px · 50001
Components
OrielProjectsPracticeResearchAwardsStart a brief
Send this brief
m²
All twelve projects
01
Plan your project in two minutes
See the work, or plan your project with the brief builder.
Shape and motion
- sm · 1px
- md · 2px
- lg · 2px
- pill · 9999px
- shadow sm
- out ·
cubic-bezier(.2, .7, .1, 1) - fast · 250ms
- base · 600ms
- slow · 1100ms
Exports
- DESIGN.md
DESIGN.md21 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.json17 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("oriel") with the MCP server.
- Source
- Oriel template
- Palette
- Sanzo Wada 33: Raw Sienna, Slate Color
- Fonts
- Epilogue (Check the font vendor), Literata (Check the font vendor)
- Themes
- Light and dark
- Contrast
- Text 16.05:1 · muted 8.33: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