# Hex — Marketing site Design Spec > 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 `` carries the dark `#14141c` token — the dark ramp is the app-theme half of a shared token set that ships on both surfaces. ## 1. Visual Theme & Atmosphere 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. ## 2. Color Palette & Roles ### Gemstone brand palette (published) | 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) | ### Foreground ramp (rose-tinted neutrals) `fg100 #14141C` · `fg200 #191820` · `fg300 #201d25` · `fg400 #252128` · `fg500 #2b252c` · `fg600 #312a31` · `fg700 #3a3138` · `fg800 #4c3e44` · `fg900 #6a565b` · `fg1000 #786065` · `fg1100 #99797d` · `fg1200 #e3b2b3` ### Alpha ramp — all built on rose quartz `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` ### Grid & background ramps `grid200 #252128` · `grid300 #2b252c` · `grid400 #312a31` · `grid500 #3a3138` · `grid600 #4c3e44` · `grid700 #6a565b` · `grid1200 #e3b2b3` · `bg300 #0f0f15` · `bg400 #111118` · `bg500 #14141c` ### Semantic font colours `fontColorDEFAULT` / `highlightColor` `#F5C0C0` · `fontColorMUTED` `#99797d` · `fontColorLOUD` / `fgLoud` `#ffffff` ### Marketing surfaces (light) `#fffcfc` warm white · `#fcf8f8` warm off-white · `rgba(252,252,252,.40)` translucent · `#f8fafb` cool inset · `#dbd7da` control border ### Data-viz — the viridis colormap `#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. ## 3. Typography Rules Four families, each with a defined job: - Display: `"PP Formula SemiExtended", ui-sans-serif` - Section heads: `"PP Formula", ui-sans-serif` - Body / UI: `Cinetype, ui-sans-serif` - Eyebrow mono: `"Cinetype Mono", ui-monospace` - Product mockups: `"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. ## 4. Component Stylings **Nav** — 62px, transparent, no blur. **Buttons** — notable for being **square (0px radius)**: | Variant | Fill | Text | Border | Radius | Height | Padding | Type | |---|---|---|---|---|---|---|---| | Primary / text | transparent | `#14141c` | none | **0px** | 38px | 0 15px | Cinetype 14/400 | | Outline | transparent | `#31263b` | 1px `#dbd7da` | **0px** | 50px | 0 20px | Cinetype 14/400 | Filled button variants were **not captured** on the landing surface. **Shadows** — an unusually rich set, including inset recipes: - `rgba(49,38,59,0.14) 0 1px 1px 0 inset` — inset hairline - `rgb(239,235,237) 0 0 34px 0 inset, rgba(100,63,63,0.01) 6px 27px 10px 0, rgba(100,63,63,0.04) 4px 4px 10px …` — the warm inner-glow card - `rgba(0,0,0,0.15) 0 4px 24px -4px` — floating panel - `rgba(49,38,59,0.22) 0 0 0 1px, rgba(49,38,59,0.03) 0 103px 103px 0, rgba(49,38,59,0.05) 0 26px 57px …` — a very long-throw layered panel shadow Note every shadow is tinted `rgba(49,38,59,…)` (eggplant) or `rgba(100,63,63,…)` — warm, never neutral black. **Paper texture** — published as tokens: `--texture-paper-img: url('/images/bkg-noise.webp')`, `--texture-paper-size: 200px 200px`, `--texture-paper-mixBlendMode: normal`, `--texture-paper-opacity: 0.0625`. **Embedded notebook** — product mockups render a Hex notebook: an IBM Plex Sans chart card with a Lato-labelled plot using the viridis scale, plus an AI-answer block. **Inputs** — not captured. ## 5. Layout Principles Warm off-white page, transparent 62px nav, a wide SemiExtended hero, mono eyebrows above sections, and large embedded notebook/chart mockups. Radius census is small and mostly square: `1 / 2 / 3 / 5 / 6px`, `50%`, `99px`, `999px`, `9999px` — with buttons at 0px. ## 6. Depth & Elevation Radius scale: `1 / 2 / 3 / 5 / 6px`, `50%` and the pill family (`99 / 999 / 9999px`). Buttons are square. Shadow recipes as listed in §4 — the distinctive ones are the **inset warm inner-glow** (`rgb(239,235,237) 0 0 34px inset`) and the **103px long-throw** layered panel shadow. All shadows are eggplant- or brown-tinted rather than black. ## 7. Motion - `background-color 0.1s linear` - `background-color 0.2s` Short, linear, colour-only. Other properties resolved as `none` or generic `all`. ## 8. Backgrounds, Effects & WebGL The signature effect is the **published paper-noise texture** — a 200×200 tiled `bkg-noise.webp` at **6.25% opacity** in `normal` blend mode, applied as a token set so it can be layered anywhere. No WebGL, canvas or backdrop-filter resolved. Warmth otherwise comes from the rose-tinted ramps and the warm-tinted shadows. ## 9. Do's and Don'ts ### Do - Tint neutrals rose — build the alpha ramp from `rgba(245,192,192,…)` rather than black or white. - Use the gemstone names as the palette vocabulary (obsidian, rose quartz, amethyst, jade, citrine, cement). - Set display type in PP Formula **SemiExtended** at 700 with strongly negative tracking, and pair it with Cinetype body at **300**. - Make eyebrows 10px Cinetype Mono with a sub-font-size line-height (10/8) and **positive** tracking. - Keep buttons **square** (0px radius). - Warm-tint every shadow (`rgba(49,38,59,…)`), never neutral black. - Layer the paper-noise texture at 6.25% opacity. - Reserve the viridis colormap for charts. ### Don't - Don't use neutral grays; every neutral carries a rose cast. - Don't round the buttons — they are 0px. - Don't put viridis or the gemstone accents into chrome. - Don't set body copy heavy; it runs at 300 against a 700 display. - Don't use black drop shadows. - Don't mix marketing type into product mockups — those use IBM Plex and Lato. ## 10. Responsive Behavior Not captured — no media-query census was resolved from the accessible stylesheets. ## 11. Agent Prompt Guide - Canvas `#fffcfc` / `#fcf8f8` · Ink `#14141c` · Body `#31263b` · Muted `#717a94` / `#99797d` · Border `#dbd7da` · Highlight `#F5C0C0` · Dark ground `#14141c` - Font: PP Formula SemiExtended 700 (display), PP Formula 800 (features), Cinetype 300/400 (body/UI), Cinetype Mono 400 (eyebrow), IBM Plex + Lato (mockups) · Body: 24/36 lead · Radius: **0px buttons**, 1-6px surfaces · Control height: 38-50px - Focus: not captured · Texture: `bkg-noise.webp` 200×200 at 0.0625 · Motion `background-color 0.1s linear` / `0.2s` A technical, warm-toned analytics brand built on a gemstone-named palette — obsidian #14141C, rose quartz #F5C0C0, amethyst #A477B2, minsk #473982, eggplant #31263B, jade #5CB198, citrine #CDA849, opal #FBF9F9, violet topaz #5F509D and cement #717A94 — over warm off-white marketing surfaces (#fffcfc, #fcf8f8). The defining move is that NEUTRALS ARE ROSE-TINTED: the fg100-fg1200 ramp runs #14141C up to #e3b2b3, and the entire twelve-step alpha ramp is literally rgba(245,192,192,...) — rose quartz — so even the greys carry a pink cast, and every shadow is warm-tinted rgba(49,38,59,...) or rgba(100,63,63,...) rather than black. Type stacks four families with defined jobs: PP Formula SemiExtended — a WIDENED cut — carries display at 700 with strongly negative tracking (60/78 at -1.848px, 51.2/66.56 at -1.578px), PP Formula handles feature heads at 800, Cinetype carries body at a light 300 (24/36), and eyebrows are the outlier at 10px Cinetype Mono with a line-height BELOW the font size (10/8) and POSITIVE +0.833px tracking; product mockups switch entirely to IBM Plex Sans/Mono and Lato so marketing and product type stay visibly separate. Buttons are SQUARE at 0px radius, 38-50px, transparent or outlined with a 1px #dbd7da border. Depth comes from an unusually rich shadow set including a warm inset inner-glow (rgb(239,235,237) 0 0 34px inset) and a 103px long-throw layered panel shadow, over a small radius scale of 1-6px plus pills. A published paper-noise texture (bkg-noise.webp, 200x200, opacity 0.0625, normal blend) is tokenised so it can be layered anywhere. Charts use the VIRIDIS colormap (#472d7b, #3b528b, #21918c, #5ec962, #addc30, #fde725), the perceptually-uniform scientific standard, which belongs to data and never to chrome. Motion is short and linear: background-color 0.1s linear and 0.2s. Feels: technical, warm-toned, data-literate, editorial. Avoid: neutral grays, rounded buttons, viridis or gemstone accents in chrome, heavy body copy against the 700 display, black drop shadows, and marketing type inside product mockups.