# Hex.tech Design System

> A highly technical, data-dense interface driven by rigid geometric containers, deep obsidian backgrounds, and precision typography.

**Source:** https://hex.tech | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Hex.tech operates as a dense, data-heavy application environment. The palette is anchored by deep obsidian (`#14141c`) and near-black (`#01011b`), contrasted against stark white (`#ffffff`) and technical grays. Typography is highly structured, pairing the extended geometric punch of PP Formula for display with Cinetype and IBM Plex Sans for dense UI data. Components favor sharp edges (`0px` radius) or very subtle rounding (`3px`-`4px`), utilizing inset hairline shadows rather than soft elevations to define boundaries.

## Signature DNA
1. **Dense Typographic Hierarchy:** Pairs PP Formula SemiExtended with Cinetype and IBM Plex Sans to handle complex data density across dashboards and marketing pages.
2. **Sharp Geometric Containers:** Dominant use of `0px` border radius (994 occurrences) for surfaces and buttons, creating a rigid, technical structure.
3. **Subtle Inset Borders:** Uses `rgba(71, 57, 130, 0.1) 0px 0px 0px 1px inset` to define cards without adding physical depth, keeping the UI flat and data-focused.

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--black` | `#01011b` | Text, Background | 915 | 1.0 | `css_variable:--black` |
| `--white` | `#ffffff` | Surface, Text | 163 | 1.0 | `css_variable:--white` |
| `--obsidian` | `#14141c` | Surface, Text | 16 | 1.0 | `css_variable:--obsidian` |
| `--opal` | `#f8fafb` | Surface | 21 | 1.0 | `css_variable:--opal` |
| `--fg400` | `#ebebeb` | Border, Surface | 21 | 1.0 | `css_variable:--fg400` |
| `--grid500` | `#dbd7da` | Border | 8 | 1.0 | `css_variable:--grid500` |
| `--fontColorMUTED` | `#89828d` | Text | 8 | 1.0 | `css_variable:--fontColorMUTED` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--cement` | `#717a94` | Text, Button Text | 227 | 1.0 | `css_variable:--cement` |
| `--roseQuartz` | `#f5c0c0` | Text, Button Text | 98 | 1.0 | `css_variable:--roseQuartz` |
| `--fgA1000` | `#31263b` | Text | 56 | 1.0 | `css_variable:--fgA1000` |
| `--minsk` | `#473982` | Primary Button, Border | 15 | 1.0 | `css_variable:--minsk` |
| `--jade` | `#5db196` | Surface | 12 | 1.0 | `css_variable:--jade` |

### Semantic
| Token | Hex | Role | Source |
|---|---|---|---|
| `--rt-color-success` | `#8dc572` | Success states | `declared_token` |
| `--rt-color-error` | `#be6464` | Error states | `declared_token` |
| `--rt-color-warning` | `#f0ad4e` | Warning states | `declared_token` |
| `--rt-color-info` | `#337ab7` | Info states | `declared_token` |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| PP Formula SemiExtended | 700 | Display | Space Grotesk | Commercial |
| PP Formula | 600, 800 | Heading | Space Grotesk | Commercial |
| Cinetype | 300, 400, 500, 600, 800 | Body, Heading | Inter | Commercial |
| IBM Plex Sans | 400, 500, 600, 700 | Caption, Heading | IBM Plex Sans | OFL |
| Cinetype Mono | 300, 400 | Mono | JetBrains Mono | Commercial |
| IBM Plex Mono | 400 | Mono | IBM Plex Mono | OFL |
| PP Editorial New | 200 | Body | EB Garamond | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 60px | 78px | -1.848px | 700 | Primary hero | `h2.Heading__HeadingInternal` |
| `display-md` | 40px | 52px | -1px | 800 | Secondary hero | `h2.Heading__HeadingInternal` |
| `heading-lg` | 28px | 36.4px | -0.7px | 800 | Section titles | `h3.Heading__HeadingInternal` |
| `heading-sm` | 24px | 31.2px | normal | 700 | Card titles | `div.Sparkline__Value` |
| `body-lg` | 18px | 24px | -0.5px | 400 | Intro text | `div.FAQ__Question` |
| `body-md` | 14px | 18px | normal | 400 | Default body | `div.PlansSummary__ItemText` |
| `caption-md` | 12px | 15.6px | normal | 400 | UI labels | `div.InteractiveFeatureWrapperstyles` |
| `caption-mono` | 11px | 16.5px | normal | 400 | Code blocks | `pre.CodeWindow__CodeBlock` |
| `caption-sm` | 10px | 22px | normal | 400 | Chart ticks | `div.chartSharedStyles__TickText` |

### Principles
- **Aggressive negative tracking on display:** PP Formula SemiExtended pulls in up to `-1.848px` at 60px to create dense, blocky headlines.
- **Data-density requires small scales:** Extensive use of 10px, 11px, and 12px IBM Plex Sans and Mono for charts, tooltips, and code snippets.
- **Monospace for technical context:** Cinetype Mono and IBM Plex Mono are strictly reserved for code blocks, terminal outputs, and technical metadata.

## Spacing
**Base unit:** 4px

| Token | Value | Occurrences |
|---|---|---|
| `spacing-1` | 4px | 23 |
| `spacing-2` | 8px | 57 |
| `spacing-3` | 12px | 75 |
| `spacing-4` | 16px | 4 |
| `spacing-5` | 20px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Primary surfaces, main buttons | 994 occurrences |
| `radius-sm` | 3px | Small inputs, secondary buttons | 59 occurrences |
| `radius-md` | 4px | Standard inputs, light surfaces | 34 occurrences |
| `radius-lg` | 6px | Feature cards, pricing cards | 17 occurrences |
| `radius-full` | 50px | Pill badges, specific panels | 659 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-inset` | `rgba(71, 57, 130, 0.1) 0px 0px 0px 1px inset` | Flat card borders | 5 occurrences |
| `shadow-inset-white` | `rgb(255, 255, 255) 0px 0px 0px 1px inset` | Dark mode card highlights | 2 occurrences |
| `shadow-deep` | `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` | Floating modals, dropdowns | 3 occurrences |

## Components

### Tier 1: Foundational

#### Surface Sharp
**Role:** Base container for primary layout regions.
**Pages observed:** `https://hex.tech`, `https://hex.tech/pricing`
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#01011b` / Border `#ecedf2` (1px) / Radius `0px` / Padding `0px` / Typography `12px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Button Sharp
**Role:** Primary call to action in structural areas.
**Pages observed:** `https://hex.tech`, `https://hex.tech/pricing`
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#14141c` / Border `rgba(0, 0, 0, 0)` / Radius `0px` / Padding `0px 20px` / Typography `14px` / Shadow `none`
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Rounded Button
**Role:** Secondary actions, inline UI controls.
**Pages observed:** `https://hex.tech`
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#717a94` / Border `#717a94` (0px) / Radius `3px` / Padding `0px 8px` / Typography `12px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Surface Light
**Role:** Highlighted content areas or nested containers.
**Pages observed:** `https://hex.tech`
**Spec:** Background `#f8fafb` / Text `#717a94` / Border `#717a94` (0px) / Radius `4px` / Padding `8px` / Typography `12px` / Shadow `none`
**States observed:** Default | Disabled: not captured

### Tier 3: Surface-specific

#### Transparent Card
**Role:** Feature highlights on dark backgrounds.
**Pages observed:** `https://hex.tech`
**Spec:** Background `rgba(3, 3, 4, 0.16)` / Text `rgba(3, 3, 4, 0.8)` / Border `rgba(3, 3, 4, 0.16)` (1px) / Radius `6px` / Padding `0px` / Typography `8px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Inset Shadow Card
**Role:** Interactive elements requiring subtle definition without physical depth.
**Pages observed:** `https://hex.tech`
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#473982` / Border `#473982` (0px) / Radius `4px` / Padding `8px 12px` / Typography `12px` / Shadow `rgba(71, 57, 130, 0.1) 0px 0px 0px 1px inset`
**States observed:** Default | Disabled: not captured

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
Hex.tech relies on the inherent complexity of data visualization, code blocks, and grid systems for decoration. It avoids soft atmospheric gradients, preferring hard lines, monospace typography, and stark contrasts between obsidian backgrounds and white or technical gray text.

## Do's
- Use `0px` border radius for primary structural components to maintain the technical, rigid aesthetic.
- Apply IBM Plex Mono or Cinetype Mono strictly for code, terminal output, or data values.
- Use inset shadows (`0px 0px 0px 1px inset`) to define card boundaries instead of solid borders when floating elements.
- Maintain high data density by utilizing the 10px and 12px typographic scales for UI labels.
- Use `--minsk` (`#473982`) sparingly for primary interactive highlights.

## Don'ts
- **Wrong:** Using a soft drop shadow (`0 4px 12px rgba(0,0,0,0.1)`) on a standard card.
  **Right:** Using an inset hairline shadow (`rgba(71, 57, 130, 0.1) 0px 0px 0px 1px inset`).
  **Reason:** Hex.tech UI is flat and technical; soft shadows introduce unwanted physical depth.
- **Wrong:** Setting a primary button to have a `8px` border radius.
  **Right:** Setting a primary button to have a `0px` border radius.
  **Reason:** The brand relies on sharp geometry (`0px` radius has 994 occurrences) for structural elements.
- **Wrong:** Using `--roseQuartz` (`#f5c0c0`) as the background for a primary CTA on a white surface.
  **Right:** Using `--minsk` (`#473982`) or `--obsidian` (`#14141c`) for primary CTAs.
  **Reason:** `#f5c0c0` on `#ffffff` fails WCAG AA contrast (1.6:1) and is intended as an accent or text color on dark backgrounds.

## Similar brands
- Linear
- Vercel
- Retool

## Quick start

**CSS Variables:**
```css
:root {
  --black: #01011b;
  --white: #ffffff;
  --obsidian: #14141c;
  --opal: #f8fafb;
  --fg400: #ebebeb;
  --grid500: #dbd7da;
  --fontColorMUTED: #89828d;
  --cement: #717a94;
  --roseQuartz: #f5c0c0;
  --fgA1000: #31263b;
  --minsk: #473982;
  --jade: #5db196;
}
```

**Tailwind v4 @theme:**
```css
@theme {
  --color-black: #01011b;
  --color-white: #ffffff;
  --color-obsidian: #14141c;
  --color-opal: #f8fafb;
  --color-fg400: #ebebeb;
  --color-grid500: #dbd7da;
  --color-muted: #89828d;
  --color-cement: #717a94;
  --color-rosequartz: #f5c0c0;
  --color-minsk: #473982;
  --color-jade: #5db196;
  
  --font-display: "PP Formula SemiExtended", sans-serif;
  --font-heading: "PP Formula", sans-serif;
  --font-body: "Cinetype", sans-serif;
  --font-ui: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}
```

## Agent prompt examples
1. "Create a pricing card using a `6px` border radius, a background of `rgba(235, 235, 235, 0.16)`, and a `1px` border of the same color. Use `IBM Plex Sans` at `24px` for the tier name."
2. "Build a code snippet block using `IBM Plex Mono` at `11px`. The container should have a `0px` border radius and a background of `--obsidian` (`#14141c`)."
3. "Design a primary CTA button with a `0px` border radius, `--minsk` (`#473982`) background, and `14px` Cinetype text."

## Known gaps
Layout grids, responsive breakpoints, and interactive states (hover/focus/active) were not captured in the source evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | `https://hex.tech` | Desktop | 2026-06-06T05:01:01.986Z |
| Pricing | `https://hex.tech/pricing` | Desktop | 2026-06-06T05:01:01.986Z |
| About | `https://hex.tech/about` | Desktop | 2026-06-06T05:01:01.986Z |