0 easing curves · 2 keyframes · hover a tile to preview
2 keyframe animations extracted
svelte-curb4c-fade-in
svelte-17u18it-fade
06
Components — the closed vocabulary
10 component families · 25 variants counted on the live DOM
Component
Variants found
links
×10
nav Links
×4
captions
×3
heading H2
×2
buttons
×1
inputs
×1
cta Banner
×1
logo Tile
×1
heading H1
×1
progress Bar
×1
Component style specs (§4)expand
Buttons
Icon Button
Background: transparent
Text: #262626{colors.ink-subtle}
Padding: 0px
Radius: 4px
Font: 10px weight 400
Use: Toolbar/UI icons
Hover: borderColor: #ebebeb
Focus: outline: rgb(212, 48, 8) solid 2px
Light / Invert
Background: #ffffff{colors.on-primary}
Text: #262626{colors.ink-subtle}
Padding: 0px 10px
Radius: 0px
Font: 16px weight 400
Use: Bright CTA on dark sections
Hover: borderColor: #ebebeb
Focus: outline: rgb(212, 48, 8) solid 2px
Inputs & Forms
Text Input
Background: #f2f2f2{colors.surface-2}
Text: #000000
Padding: 7px 7px 5.6px 28px
Radius: 56px
Border: 0px none rgb(0, 0, 0)
Font: 14px weight 400
Use: Text fields, search inputs
Focus: outline: rgb(212, 48, 8) solid 2px
Navigation
Main Nav
Background: #ffffff{colors.on-primary}
Padding: 0px 48px
Radius: none
Font: 10px weight 400
Use: Fixed/sticky grid nav — N/A items
Hover: textDecoration: underline
07
Layout — structure & dimensions
4 layout metrics measured
max Width76rem
header Height64px
sidebar Width0px
container Padding60px 0px 0px
08
Responsive — real breakpoints
fluid system — no hard stops
No distinct @media breakpoints captured at the desktop/mobile pass — this layout is fluid, adapting by ratio rather than hard stops.
09
Do's & Don'ts
18 enforceable rules pulled verbatim from the spec
Do
Use Near-Black (`#262626`) for text — not pure black, it's warmer and more readable
Use EB Garamond as the primary typeface — it defines the brand personality
Keep font weights between 400-500 — the system uses a narrow weight range for subtle hierarchy
Use M Tricolor Red (`#d43008`) as the primary accent — it's the brand's signature interactive color
Keep navigation fixed to the top — the design uses a persistent navigation pattern
Maintain nav height at 60px — consistent vertical space for the navigation bar
Respect the 5px–48px spacing range — the design uses a wide scale for visual breathing room
Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
Make the navigation fixed — it stays visible during scroll, signaling content depth
Include a search input directly in the nav — discoverability is a primary UX value here
Include a theme toggle in the nav — dark mode is a first-class feature
Don't
Don't use pure black (`#000000`) for text — the near-black adds warmth
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't use weight 700 (bold) or above — 500 is the maximum weight in this system
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
Don't put a CTA button in the nav — this design uses links only at the top
Don't over-build the footer — this design keeps it minimal (1 cols, 1 links)
10
Agent guide & export
Paste-ready prompt + the real files behind this page
Build a UI in the svelte.dev design system.
Canvas #ffffff · ink #262626 · accent #d43008.
Type: EB Garamond — respect the size/weight ladder in §3.
Radius, spacing, shadow: use only the extracted scales (no magic numbers).
Full spec follows — paste the DESIGN.md below into your agent.