Swiss Tech MonoMotion
The site header: logo, mono caps links with an underline that wipes in on hover, and actions. bar is the full-width bar on a hairline rule; floating is the same bar inset as a square-cornered card (no pill).
The site header: logo, mono caps links with an underline that wipes in on hover, and actions. bar is the full-width bar on a hairline rule; floating is the same bar inset as a square-cornered card (no pill). Under lg the links and actions move into a full-width ink sheet that covers the bar and runs to 16 px above the foot of the viewport (its own bar row with the close button, the column ruler, large indexed links and the actions pinned at the bottom); it opens before hydration, closes on Esc, an outside tap, a link tap or its close button, and focus returns to the menu button. The bar turns solid as the page scrolls (scroll timeline, solid from the start where unsupported). Put GridGuides ruler right after it. Client component.
It is part of Swiss Tech Mono. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
The site header: logo, links and actions. bar is the kit's header: a full-bleed paper bar ruled with 2 px at the bottom, solid from the start, links centred (the current one on paper-2), actions at the end. floating is an inset outlined bar over a paper fade, so nothing shows around it.
The site header: logo, links and actions, as a full-width bar or a floating pill.
The site header: logo, links and actions, as a full-width bar (the links centred in a clay nav pill) or a floating pill.