Theming
Where the Hexel Studio look comes from, and how to change it.
The site uses the Hexel Studio design language as-is. Nothing here is a new theme: tokens, fonts and components are copied from the homepage and Orbit so the docs read as part of the same product.
Sources
| What | Taken from | Lives in |
|---|---|---|
| Colour, surface and state tokens (Hexel v2) | homepage/app/globals.css | app/globals.css |
| Pill buttons, segmented control, prose links | homepage/app/globals.css | app/globals.css |
| Wordmark, product marks, theme switch, theme provider | homepage/components/hx | components/brand, components/docs, components/theme-provider.tsx |
| Code colours (GitHub Light and Dark) | Orbit's --workspace-code-* tokens | lib/mdx.ts |
| Quiet scrollbars | Orbit's globals.css | app/globals.css |
| Inter and Geist Mono | homepage/app/layout.tsx | app/layout.tsx |
The rules the components follow
- Ink on white. Text is
--inkon--canvas; raised surfaces are warm--paper, separated by--linehairlines. - Colour is for state and product art. Callouts tint only their icon and hairline. Product colour appears only in the product marks.
- Calls to action are black pills.
ButtonLinkuses the homepage.btnclasses. - The brand is always "Hexel Studio", never "Hexel" alone. The header shows the text wordmark.
Main tokens
| Token | Light | Dark | Used for |
|---|---|---|---|
--canvas | #ffffff | #0a0a0b | Page background |
--ink | #0b0b0c | #f4f4f5 | Headings, active items, primary buttons |
--ink-2 | #2b2b2e | #d6d6da | Body text |
--muted-ink | #66666c | #a1a1a8 | Secondary text, labels |
--paper | #f6f6f4 | #141416 | Cards, code blocks, callouts |
--paper-2 | #efefec | #1c1c1f | Active sidebar item, selected tab |
--line | 8% ink | 8% white | Hairlines |
--tone-* | Callout icons and badges |
Dark mode
The theme switch in the header sets light, dark or system; the D key toggles between light and dark. The site starts in light. When the docs run under hexelstudio.com, both apps share the stored choice, because they share an origin and the same next-themes storage key.
Code blocks, including the example on the landing page, follow the theme.
Fonts
Inter carries the brand voice, with its optical-size axis on so large headings use the tighter display cut. Geist Mono carries labels (like On this page) and code. Both load through next/font, so there is no layout shift.