Scaffolding — not a design
Foundations for Claude Design.
Mont is wired, the token set resolves in both themes, and the shell behaviours work. Claude Design owns every visual decision from here.
Mont — variable, 100–900
200 ThinDesigns that convert
300 LightDesigns that convert
400 RegularDesigns that convert
500 MediumDesigns that convert
600 SemiBoldDesigns that convert
700 BoldDesigns that convert
800 HeavyDesigns that convert
900 BlackDesigns that convert
One 104 KB variable woff2 covers the whole range — replacing eight-plus static files.
Tokens — toggle the theme to verify both
--color-ethos-blue
#386FFF
--color-ethos-navy
#00132C
--color-background
semantic
--color-surface
semantic
--color-surface-raised
semantic
--color-foreground
semantic
--color-muted
semantic
--color-border
semantic
The mark — inherits currentColor
Shell behaviours to preserve
- Edge menu— 50vh button on the right edge; the drawer traps focus, closes on Escape, locks scroll without layout shift, and restores focus to the trigger.
- Bottom bar— mobile-only 50/50 split, safe-area aware;
bodyreserves matching padding so it never covers content. - Motion — all animation goes through
src/components/motion/; one easing curve, reduced-motion enforced globally. - Theme— class strategy via next-themes; every colour resolves from a token, never a literal.