A warm-toned analytics brand built on a gemstone-named palette — obsidian, rose quartz, amethyst, jade, citrine, cement — whose defining move is that the neutrals are rose-tinted: the whole twelve-step alpha ramp is literally rose quartz at varying opacity, and every shadow is warm-tinted rather than black. Four type families each have a defined job, buttons are square at 0px, a paper-noise texture ships as tokens, and the charts use the perceptually-uniform viridis colormap.
Browse Hex in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: hex.tech (live DOM, computed styles + published CSS custom properties), 2026-07-19. Coverage: home / AI-analytics landing. Logged-in notebook app not captured (needs login). Note: the page is light (warm off-white sections) even though<body>carries the dark#14141ctoken — the dark ramp is the app-theme half of a shared token set that ships on both surfaces.
Hex ships a gemstone-named palette — obsidian, rose quartz, amethyst, minsk, eggplant, jade, citrine, opal, violet topaz, cement — over a warm off-white marketing page (#fffcfc, #fcf8f8). Two things make it distinctive. First, its neutrals are rose-tinted: the fg100–fg1200 ramp runs from #14141c up to #e3b2b3, and the entire alpha ramp is built from rgba(245,192,192,…) — rose quartz — so even the greys carry a pink cast. Second, the data-viz layer is the viridis colormap (#472d7b, #3b528b, #21918c, #5ec962, #addc30, #fde725), the scientific-standard perceptually-uniform scale, used at scale in the embedded charts. Type stacks four families: PP Formula SemiExtended for display, PP Formula for section heads, Cinetype for body, and IBM Plex Sans/Mono inside product mockups. A published paper-noise texture sits over everything at 6.25% opacity. Feels: technical, warm-toned, data-literate, editorial.
| Token | Hex | Role / usage |
|---|---|---|
--black | #01011b | Deepest ink (blue-black) |
--white | #ffffff | White |
--obsidian | #14141C | Primary ink / dark ground |
--roseQuartz | #F5C0C0 | Highlight, and the base of every alpha token |
--amethyst | #A477B2 | Accent |
--minsk | #473982 | Deep violet |
--eggplant | #31263B | Body copy |
--jade | #5CB198 | Accent green |
--citrine | #CDA849 | Accent gold |
--opal | #FBF9F9 | Palest warm ground |
--violetTopaz | #5F509D | Violet accent |
--cement | #717A94 | Muted text (the most common) |
fg100 #14141C · fg200 #191820 · fg300 #201d25 · fg400 #252128 · fg500 #2b252c · fg600 #312a31 · fg700 #3a3138 · fg800 #4c3e44 · fg900 #6a565b · fg1000 #786065 · fg1100 #99797d · fg1200 #e3b2b3
fgA100 rgba(245,192,192,0) · A200 .026 · A300 .056 · A400 .077 · A500 .103 · A600 .129 · A700 .172 · A800 .249 · A900 .386 · A1000 .446 · A1100 .592 · A1200 .923
grid200 #252128 · grid300 #2b252c · grid400 #312a31 · grid500 #3a3138 · grid600 #4c3e44 · grid700 #6a565b · grid1200 #e3b2b3 · bg300 #0f0f15 · bg400 #111118 · bg500 #14141c
fontColorDEFAULT / highlightColor #F5C0C0 · fontColorMUTED #99797d · fontColorLOUD / fgLoud #ffffff
#fffcfc warm white · #fcf8f8 warm off-white · rgba(252,252,252,.40) translucent · #f8fafb cool inset · #dbd7da control border
#472d7b · #3b528b · #21918c · #5ec962 · #addc30 · #fde725
Plus supporting chart hues: #cd5973 · #e7b848 · #5db196 · #544692 · #6f63b7 · #6e8ccf, and syntax/status #22863a · #2458b3.
Rules. Neutrals are rose-tinted, not neutral gray — the alpha ramp is literally rose quartz at 12 opacities. The viridis scale belongs to charts and must not be used for chrome. The gemstone accents (amethyst, jade, citrine, violet topaz) are illustration and category colours.
Four families, each with a defined job:
"PP Formula SemiExtended", ui-sans-serif"PP Formula", ui-sans-serifCinetype, ui-sans-serif"Cinetype Mono", ui-monospace"IBM Plex Sans", "IBM Plex Mono", and Lato inside chart chrome| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Section display | PP Formula SemiExtended | 60/78 | 700 | -1.848px |
| Hero h1 | PP Formula SemiExtended | 51.2/66.56 | 700 | -1.57696px |
| Feature h3 | PP Formula | 28/36.4 | 800 | -0.7px |
| Lead paragraph | Cinetype | 24/36 | 300 | normal (#31263b) |
| Eyebrow h2 | Cinetype Mono | 10/8 | 400 | +0.833px |
| Mockup h2 | IBM Plex Sans | 16/22.4 | 600 | -0.4px |
| Mockup body | IBM Plex Sans | 12/16.8 | 400 | normal |
| Chart label | Lato | 14/19.6 | 700 | -0.2px |
| Button label | Cinetype | 14 | 400 | normal |
Patterns: the display face is SemiExtended — a widened cut — and runs heavy at 700 with strongly negative tracking, while body copy drops to Cinetype at a light 300. That 700-against-300 spread across two different families is the page's main contrast. The eyebrow is the outlier: 10px mono with a line-height of 8px (below the font size) and *positive* +0.833px tracking. Product mockups switch entirely to IBM Plex, so the marketing type and the product type stay visibly separate.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.