---
title: "Hex design system"
variant: extended
source: https://hex.tech/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/hex-tech)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Hex · Design System

> Editorial calm meets technical clarity

**Theme:** light · **Industry:** saas · **Source:** https://hex.tech/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Hex pairs a pale, paper-like canvas with dramatic editorial headlines and detailed product interfaces. The long homepage balances confident product storytelling with interface previews, customer proof, integrations, and FAQ content.

## North star

Make a calm editorial canvas carry precise, layered product evidence without competing with it.

## Overview

The page is built on a near-white canvas (#fffcfc) with a subtle warm cast, keeping attention on oversized typography and layered product screenshots. Deep near-black and plum tones anchor headings and body copy; muted gray-purple text supports secondary information, while restrained violet and green accents appear sparingly. The opening headline contrasts a large italic serif phrase with a bold sans-serif statement, establishing an editorial voice against the technical dashboard imagery. Content alternates between centered statements, split text-and-interface sections, and modular card grids. Product screenshots are the primary imagery: crisp, interface-dense, and often overlapped to suggest depth and capability. Fine grid lines, pale section transitions, and thin borders add structure without making the page feel heavy. Generous vertical breathing room separates its many sections, while compact monospace labels and navigation details provide a precise, data-oriented counterpoint.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Paper Veil | `#fffcfc` | `--color-paper-veil` | surface | Primary page canvas and the pale foundation behind the long homepage. |
| Obsidian Ink | `#14141c` | `--color-obsidian-ink` | brand | Dark navigation, headings, and inverse product-interface surfaces. |
| Plum Smoke | `#31263b` | `--color-plum-smoke` | brand | Frequent muted copy, navigation text, and customer-story links. |
| Midnight Type | `#01011b` | `--color-midnight-type` | brand | Primary dark text and high-contrast product-interface content. |
| UI Mist | `#ecedf2` | `--color-ui-mist` | neutral | Subtle borders and separators inside dense interface cards. |
| Warm Hairline | `#dbd7da` | `--color-warm-hairline` | neutral | Button outlines, card edges, navigation rules, and section dividers. |
| Slate Iris | `#717a94` | `--color-slate-iris` | semantic | Occasional subdued text and small badge details. |
| Hex Violet | `#473982` | `--color-hex-violet` | accent | Sparse link and interface emphasis; not a dominant page background. |
| Lilac Haze | `#d6d2d6` | `--color-lilac-haze` | neutral | Soft section-band and gradient tones behind content. |
| Aubergine Ink | `#443a4d` | `--color-aubergine-ink` | brand | Secondary dark text in navigation, headings, and links. |
| Rose Quartz Gray | `#e9e5e8` | `--color-rose-quartz-gray` | neutral | Light card edges and delicate grid-line backgrounds. |
| Dusty Mauve | `#89828d` | `--color-dusty-mauve` | neutral | Occasional subdued supporting text and button details. |
| Cool Graphite | `#6a737d` | `--color-cool-graphite` | neutral | Rare secondary text, mostly inside interface or supporting content. |
| Soft Charcoal | `#1c1b1c` | `--color-soft-charcoal` | semantic | Isolated dark badge and interface-label text. |
| Leaf Signal | `#22863a` | `--color-leaf-signal` | accent | Sparse green text emphasis; not a defining page-wide accent. |
| Fog Blush | `#f8f6f7` | `--color-fog-blush` | surface | Subtle pale section and card fills, close to the page canvas. |

### Semantic aliases

`--color-canvas` → `#fffcfc` (Paper Veil) · `--color-surface` → `#14141c` (Obsidian Ink) · `--color-text` → `#01011b` (Midnight Type) · `--color-text-muted` → `#31263b` (Plum Smoke) · `--color-text-subtle` → `#14141c` (Obsidian Ink) · `--color-border` → `#dbd7da` (Warm Hairline) · `--color-accent` → `#473982` (Hex Violet) · `--color-accent-2` → `#22863a` (Leaf Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#01011b` | `#fffcfc` | 20.15:1 | AAA |
| `#01011b` | `#14141c` | 1.12:1 | fail |
| `#31263b` | `#fffcfc` | 13.99:1 | AAA |
| `#31263b` | `#14141c` | 1.28:1 | fail |
| `#14141c` | `#fffcfc` | 17.95:1 | AAA |
| `#473982` | `#fffcfc` | 9.46:1 | AAA |
| `#473982` | `#14141c` | 1.9:1 | fail |

### Gradients

- `radial-gradient(circle, color(srgb 0.192157 0.14902 0.231373 / 0.05) 50%, color(srgb 0.192157 0.14902 0.231373 / 0.2))`
- `linear-gradient(90deg, rgb(49, 38, 59) 0%, rgb(1, 1, 27) 100%)`
- `linear-gradient(105deg, rgba(245, 192, 192, 0) 10.56%, rgba(245, 192, 192, 0.02) 108.41%), none`
- `linear-gradient(rgb(233, 229, 232) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(to right, rgb(233, 229, 232) 1px, rgba(0, 0, 0, 0) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Cinetype | `--font-body` | webfont | 300, 400, 500, 700 | Headings, body copy, buttons, and much of the navigation | Inter |
| IBM Plex Sans | `--font-ibm-plex-sans` | webfont | 400, 500, 600, 700 | Captions and compact product-interface text | IBM Plex Sans |
| Cinetype Mono | `--font-mono` | webfont | 400, 300 | Compact navigation labels and interface-style annotations | IBM Plex Mono |
| IBM Plex Mono | `--font-ibm-plex-mono` | webfont | 400 | Links, code-like details, and compact technical labels | IBM Plex Mono |
| PP Formula | `--font-display` | webfont | 800, 600 | Display headlines and prominent bold heading moments | Space Grotesk |
| Lato | `--font-lato` | webfont | 400, 700, 600 | Occasional compact badge and interface label | Lato |

- **Cinetype:** Light weights dominate body text; keep copy airy and sentence case.
- **IBM Plex Sans:** Use restrained weights for labels and UI details.
- **Cinetype Mono:** Monospace details are small and technical, not headline treatment.
- **IBM Plex Mono:** Keep small labels precise and unornamented.
- **PP Formula:** Heavy, confident sans-serif contrast; display headings may use tight tracking.
- **Lato:** Use sparingly for small bold UI labels.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1.3 | -0.031em | — | PP Formula SemiExtended | Large hero and editorial display headlines. |
| h1 | 28px | 800 | 1.3 | -0.025em | — | PP Formula | Strong section titles and prominent product statements. |
| h2 | 24px | 300 | 1.5 | 0 | — | Cinetype | Secondary feature and content-section headings. |
| h3 | 20px | 300 | 1.5 | 0 | — | Cinetype | Feature-card and smaller subsection headings. |
| body | 16px | 300 | 1.5 | 0 | — | Cinetype | Explanatory copy, testimonials, and product descriptions. |
| caption | 12px | 400 | 1.4 | 0 | — | IBM Plex Sans | Small interface captions and product-preview details. |
| button | 14px | 400 | 1 | 0 | — | Cinetype | CTA and compact action labels. |
| nav | 12px | 400 | 1.57 | 0 | — | Cinetype Mono | Top navigation and small announcement-strip text. |
| link | 11px | 400 | 1.5 | 0 | — | IBM Plex Mono | Small technical links and inline references. |
| code | 11px | 400 | 1.5 | 0 | — | IBM Plex Mono | Code-like labels and technical interface snippets. |

OpenType features in use: `"calt" 0, "liga" 0`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 5, 6, 7, 8, 10, 12, 14, 16, 20 px.
- Section rhythm 100px · element gap 1px · card padding — · max content width —.

A spacious, centered long-form page with a broad content field and no visibly rigid column system across every section. The hero places a large headline beside explanatory copy, followed by an oversized layered product preview. Later blocks alternate split layouts, centered statements, and two- or three-column cards. Section transitions use ample vertical breathing room, while interface panels introduce denser local grids. Keep text alignment deliberate and let screenshots extend beyond their neighboring copy when needed.

## Shape & elevation

- Radius: button `1px` · input `7px` · card `6px` · media `6px` · badge `5px` · nav `50%` · xs `1px` · sm `2px` · md `3px` · lg `4px` · xl `5px` · 2xl `6px` · pill `9999px`
- Shadow `xl` (card): `rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.03) 0px 103px 103px 0px, rgba(49, 38, 59, 0.05) 0px 26px 57px 0px`
- Shadow `inset` (other, card): `rgba(0, 0, 0, 0.05) 0px 0px 11px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 16px 24px -8px, rgba(0, 0, 0, 0.05) 0px 8px 12px -4px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, rg`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 1px`
- Shadow `inset-2` (text): `rgba(71, 57, 130, 0.1) 0px 0px 0px 1px inset`
- Shadow `sm` (other): `color(srgb 0.807059 0.632157 0.648627) 0px 0px 0px 1px, color(srgb 0.192157 0.14902 0.231373 / 0.03) 0px 0px 0px 5px, color(srgb 0.192157 0.14902 0.231373 / 0.05) 0px 4px 7px 0px`
- Shadow `inset-3` (card): `rgba(0, 0, 0, 0.05) 0px 16px 24px -8px, rgba(0, 0, 0, 0.05) 0px 8px 12px -4px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 0px 11px 0px inset`
- Motion: standard transition `0.1s linear` on interactive elements.

The page is mostly flat, with thin pale borders and delicate grid lines defining sections and cards. Product previews receive the strongest depth through layered overlap and soft shadows; ordinary text cards remain restrained. Avoid heavy drop shadows or dark container fills outside product-interface imagery.

## Imagery

Product-interface screenshots dominate: dashboards, notebooks, charts, and app views are presented as clean, readable evidence rather than decorative mockups. Several panels overlap or sit offset from one another to imply depth. Supporting diagrams use fine outlines and simple geometric forms; small logos and abstract data visuals add variety. Keep imagery crisp against pale backgrounds, with restrained color in charts and minimal photographic treatment.

## Components

### Announcement strip

A narrow top ticker with compact monospace-style updates and links, separated from the navigation by a fine rule.

### Navigation bar

Centered brand mark with compact text links and a lightly outlined 'Get started' action.

### Editorial hero

Large split headline pairs an italic serif phrase with a bold sans statement, alongside short copy and two restrained CTAs.

### Layered product preview

Overlapping notebook and dashboard panels show real-looking interface detail, charts, labels, and side controls.

### Feature split

A text-led explanation sits beside or opposite a large interface image, with a small action link or outlined button.

### Feature cards

Pale modular cards combine concise headings, supporting copy, small diagrams, and fine borders.

### FAQ list

A centered question list uses thin horizontal separators and compact disclosure cues.

### Measured component styles

- **Primary button** (“Codex”): background #f5f2f3 · text #31263b · radius 8px · padding 4px 6px · 400 11px Cinetype Mono
- **Secondary button** (“Get started for free”): transparent background · text #31263b · border 1px solid #dbd7da · radius 0px · padding 0px 20px · 400 14px Cinetype
- **Link** (“dbt”): transparent background · text #31263b · border 1px solid · radius 0px · padding 0px · 400 12px Cinetype
- **Input**: transparent background · text #01011b · radius 7px · padding 12px · 400 12px IBM Plex Sans · shadow rgb(255, 255, 255) 0px 0px 0px 1px inset
- **Card** (“Agentic data notebooks Galactic Revenue ”): background #ffffff · text #01011b · radius 6px · padding 0px · 400 12px IBM Plex Sans · shadow rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.03) 0px 103px 103px 0
- **Badge** (“Suggestions”): background #fdfafa · text #31263b · radius 0px · padding 0px · 400 11px Cinetype Mono
- **Navigation item** (“📊”): transparent background · text #31263b · radius 0px · padding 0px · 400 12px Cinetype Mono

## Do

- Use the pale canvas as the dominant page surface.
- Pair editorial headline contrast with restrained technical UI typography.
- Show product interfaces as detailed, legible evidence.
- Use thin warm-gray rules to organize content.
- Give section transitions generous breathing room.
- Keep violet and green accents sparse.

## Don't

- Do not turn the page into a dark-first theme.
- Do not replace product evidence with generic stock photography.
- Do not use saturated color as a large background field.
- Do not make every section a card grid.
- Do not use heavy shadows on ordinary content blocks.
- Do not crowd the headline and product imagery.

## Agent prompt

Build a new Hex-style SaaS page on a light, spacious canvas. Use Paper Veil (#fffcfc) as the main background, Midnight Type (#01011b) and Obsidian Ink (#14141c) for strong text, and Plum Smoke (#31263b) for muted copy and links. Keep Warm Hairline (#dbd7da) and UI Mist (#ecedf2) for delicate borders; reserve Hex Violet (#473982) and Leaf Signal (#22863a) for rare emphasis. Combine expressive editorial headlines with clean sans-serif body text and small monospace technical labels. Organize content in alternating split sections, centered statements, and modest card grids. Make crisp product screenshots the primary imagery, layering panels gently for depth. Leave generous vertical space, use minimal shadows, and keep controls understated and clearly outlined.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long, single-column page with alternating split sections, centered headings, product previews, and modular card grids. | Persistent top navigation, Repeated product CTAs, Customer proof, FAQ disclosures | Pale canvas, Layered interface previews, Fine borders, Editorial headline contrast |

## Source CSS custom properties (selected)

```css
--colorVars-gray: #f8fafb;
--colorVars-black: #01011b;
--colorVars-white: #fff;
--colorVars-purple: #473982;
--colorVars-lightPurple: #ad8eb6;
--colorVars-lightPink: #f5c0c0;
--colorVars-lightGreen: #43d59d;
--colorVars-lightBlue: #8abbff;
--colorVars-darkGreen: #1c866b;
--colorVars-darkBlue: #215db0;
--colorVars-obsidian: #14141c;
--colorVars-violetTopaz: #5f509d;
--colorVars-lightVioletTopaz: #eae8f0;
--colorVars-lightestVioletTopaz: #faf7ff;
--appUI-borderColor-default: #3f4257;
--appUI-borderColor-muted: #2a2a38;
--appUI-outlinedBorderColor-default: #f5c0c04d;
--appUI-outlinedBorderColor-muted: #f5c0c026;
--appUI-fontColor-default: #e4e6ec;
--appUI-fontColor-muted: #b1b6c4;
--appUI-backgroundColor-default: #1f1f29;
--appUI-backgroundColor-muted: #191922;
--appUI-primaryColor: #f5c0c0;
--appUI-intent-primary: #f5c0c0;
--magicColors-backgroundGradient: linear-gradient(90deg, #6646a81a 0%, #9757ab12 100%);
--magicColors-primaryColor: #f5c0c0;
--magicColors-secondaryColor: #f5c0c0;
--magicColors-tertiaryColor: #f5c0c0;
--magicColors-removingColor: #e85a69;
--fg100: #14141C;
--fg200: #191820;
--fg300: #201d25;
--fg400: #252128;
--fg500: #2b252c;
--fg600: #312a31;
--fg700: #3a3138;
--fg800: #4c3e44;
--fg900: #6a565b;
--fg1000: #786065;
--fg1100: #99797d;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/hex-tech