# Hex · Design system migration spec

> Source: https://hex.tech  ·  Curated by OpenDesign  ·  en

> This site is worth including because it perfectly balances a premium, editorial aesthetic with the functional requirements of a developer-facing tool.

## 1. Identity DNA

The system is built around the analogy of a sophisticated data science notebook, one that blends editorial elegance with technical rigor. Every choice in its toolkit—from palette to type—is made to convey trust and insight. It is a design for a platform where clarity is paramount and aesthetic noise is stripped away.

**One-liner:** An AI-powered analytics platform where trust meets insight.
**Keywords:** AI Analytics · Trust · Insight · Data · Platform
**Analogy:** A sophisticated data science notebook that blends editorial elegance with technical rigor.

## 2. Color

The palette is grounded and minimal, built upon a deep purple-ink and off-white foundation. A single, warm dusty rose accent provides subtle emphasis without visual shouting.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFCFC` | main background |
| `--bg-soft` | `#E9E5E8` | card background |
| `--bg-quiet` | `#F4F1F2` | quiet area |
| `--ink` | `#31263B` | body text |
| `--ink-soft` | `#43394C` | secondary text |
| `--muted` | `#89828D` | placeholder |
| `--accent` | `#E28C8B` | single accent |
| `--line` | `rgba(49, 38, 59, 0.14)` | divider |

**Color principle:** Grounded and trustworthy neutral palette with a warm, subtle accent.

Color is used with restraint, ensuring the interface remains a trustworthy backdrop for data and content rather than a distraction.

## 3. Typography

Typographic voice is defined by a deliberate split: a **transitional serif** lends editorial weight to display headlines, while a clean **sans-serif** ensures clarity for all interface and body text.

- **Display:** transitional-serif
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -1px | Hero headline |
| display2 | 80px | 1.0 | 800 | -1px | Hero emphasis |
| h1 | 40px | 1.2 | 400 | normal | Sub-hero |
| body | 14px | 1.57 | 400 | normal | Default text |
| mono | 12px | 1.5 | 400 | normal | Code |

**Type rules:**
- Serif for display headlines to add editorial weight.
- Sans-serif for all body and UI elements for clarity.
- Monospace strictly for code blocks.

## 4. Spacing

A standard 4px base grid establishes a consistent, comfortable rhythm for spacing throughout the system.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid with comfortable padding for readable content.

## 5. Surfaces

Depth is communicated through subtlety, not drama. Surfaces are defined by low-contrast borders and the faintest of inset shadows, maintaining a near-flat, pristine appearance.

- **Radius:** sm 2px · md 3px · lg 4px · pill 9999px
- **Shadows:**
  - 0 0 0 1px rgba(0, 0, 0, 0)
  - 0px 1px 1px 0px inset rgba(49, 38, 59, 0.14)
- **Borders:** Subtle, low-contrast borders using the primary ink color at low opacity.

## 6. Layout

The layout skeleton centers content in a strong column for hero sections, then expands into wider grids for detailed product information. This structure creates a spacious, readable flow that guides the user from overview to detail.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content column for hero sections, with wide content grids for product details.

## 7. Motion & Interaction

Motion is restrained and purposeful, existing to clarify state changes rather than decorate. All transitions follow a defined cubic-bezier curve for a consistently refined feel.

- **Durations:** micro 220ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth background-color transitions on hover.
  - Subtle opacity changes for focus states.
  - Transformations for interactive elements.

- **Hover:** Subtle background color shifts or opacity changes.
- **Click:** Immediate visual feedback via background or border transitions.
- **Transition:** All transitions use the defined cubic-bezier curve for a refined feel.
- **Keyboard:** Standard focus outlines using subtle 1px borders.

## 8. Voice & Don'ts

The editorial voice is professional and authoritative, yet accessible. It favors concise, powerful statements over fluffy marketing speak or unexplained jargon.

- **Tone:** Professional, authoritative, yet accessible and inviting.
- **Headline style:** Concise, powerful statements that blend editorial flair with technical precision.
- **CTA style:** Direct and action-oriented, encouraging immediate exploration.
- **Avoid:** Overly technical jargon without context. / Vague or fluffy marketing speak. / Aggressive or loud color palettes. / Overly complex animations. / Cluttered or busy layouts.

### Don'ts
- ❌ Don't use neon or high-chroma accent colors — screenshot shows a subtle, warm dusty rose accent.
- ❌ Don't use purely geometric sans-serif for headlines — screenshot prominently features a transitional serif for the main hero.
- ❌ Don't use heavy drop shadows or 3D effects — screenshot shows a very flat, subtle design with minimal shadow usage.
- ❌ Don't use rounded-lg or rounded-xl on most elements — screenshot shows mostly sharp corners (2px-4px) or pill shapes (9999px).
- ❌ Don't use bright, saturated backgrounds — screenshot shows mostly off-white (#FFFCFC) and very light grays.
- ❌ Don't use bold weights (700+) for body text — screenshot shows body text consistently at weight 400.

The system deliberately avoids high-chroma accents, geometric sans-serif for display, heavy shadows, and complex animations in favor of clarity and professionalism.

## System Prompt (paste into AI tool)

```
Design a sophisticated AI analytics platform that blends editorial elegance with technical rigor. The identity is grounded in trust and insight. The color palette is minimal and warm: off-white backgrounds (#FFFCFC), deep purple-ink text (#31263B), and a subtle dusty rose accent (#E28C8B). Typography uses a transitional-serif for display headlines to add weight, and a geometric sans-serif for all UI and body text. Key critical donts: do not use neon accents, do not use geometric sans for display headlines, and do not use heavy shadows or 3D effects. The layout should be centered and spacious, emphasizing readability and professional data presentation.
```
