Hex

# Hex — Style Reference
> Analytical Clarity on Canvas: A pristine digital workspace where data takes center stage, framed by muted sophistication and precise typography.

**Theme:** light

**Site:** https://hex.tech

Hex delivers a sophisticated, data-centric aesthetic, characterized by a clean white canvas that highlights nuanced typography and subtle violet accents. The design balances precise information display with hints of visual depth through soft shadows and varied typefaces. Interactive elements are thoughtfully understated, relying on outlines and muted states rather than bold fills, ensuring the focus remains on the analytical content and user workflow.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Minsk Violet | `#473982` | `--color-minsk-violet` | Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |
| Indigo Punch | `#6f63b7` | `--color-indigo-punch` | Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |
| Lavender Field | `#9e91d6` | `--color-lavender-field` | Secondary data visualization, softened accents — a moderate violet for complementary data representation |
| Rose Quartz | `#f5c0c0` | `--color-rose-quartz` | Subtle indicators, decorative graphic elements — a muted red that provides a soft, warm counterpoint |
| Sunset Fade Gradient | `#cd5973` | `--color-sunset-fade-gradient` | Decorative graphical elements, expressive backgrounds where a dynamic color transition is desired |
| Canvas White | `#fffcfc` | `--color-canvas-white` | Page background, card backgrounds, input fields, primary surfaces — the foundational light backdrop for all content |
| Obsidian Ink | `#01011b` | `--color-obsidian-ink` | Primary text, informational UI elements, card outlines, dark surface accents — a deep, muted violet-black that anchors primary content |
| Eggplant Gray | `#31263b` | `--color-eggplant-gray` | Secondary text, subtle borders, navigation text, and outlined button borders — a dark, desaturated gray with a hint of violet providing subtle contrast; Background for rich data visualization or complex interactive panels, providing a deep, immersive context |
| Charcoal Grey | `#14141c` | `--color-charcoal-grey` | Headings, strong text, navigation text, prominent borders — a slightly warmer, very dark gray for emphasis |
| Cement Gray | `#717a94` | `--color-cement-gray` | Muted helper text, secondary icon fills, faint dividing lines — a cool, light grey for low-emphasis elements |
| Dusk Violet | `#43394c` | `--color-dusk-violet` | Subtle borders, navigation items, descriptive text — a mid-tone desaturated violet for a sense of quiet authority |
| Platinum Mist | `#ecedf2` | `--color-platinum-mist` | Subtle background panels, table headers, soft dividers — a very light, cool gray for secondary surface differentiation |
| Slate Cloud | `#dbd7da` | `--color-slate-cloud` | Light borders, grid lines, subtle component separators — a pale, slightly warm gray |

## Tokens — Typography

### PP Editorial New
- **Substitute:** Playfair Display
- **Weights:** 200
- **Sizes:** 78px
- **Line height:** 1.3
- **Letter spacing:** -0.0240em
- **Role:** Display headlines — an extremely light-weight serif that creates a sense of gravitas and refined authority, setting a delicate, yet prominent tone for key brand statements.

### PP Formula SemiExtended
- **Substitute:** Archivo Expanded
- **Weights:** 700
- **Sizes:** 60px
- **Line height:** 1.3
- **Letter spacing:** -0.0310em
- **Role:** Prominent marketing headlines, impactful feature titles — a bold, semi-extended sans-serif that commands attention with its strong, wide presence.

### PP Formula
- **Substitute:** Archivo Black
- **Weights:** 800
- **Sizes:** 28px
- **Line height:** 1.3
- **Letter spacing:** -0.0250em
- **Role:** Section headings, key UI labels — a very bold, compact sans-serif that delivers high impact in a smaller footprint, excellent for concise titles.

### IBM Plex Sans
- **Substitute:** Inter
- **Weights:** 400, 500, 600, 700
- **Sizes:** 10px, 12px, 16px, 20px, 24px, 26px
- **Line height:** 1.2, 1.3, 1.4, 1.6, 1.83, 2.2, 2.33
- **Letter spacing:** -0.0350em, -0.0250em
- **Role:** General body text, UI labels, subheadings, and data labels — providing legibility and versatility across various content densities and functional needs. Distinctly tight letter-spacing at larger sizes gives a modern, compact feel.

### Lato
- **Substitute:** Open Sans
- **Weights:** 400, 600, 700
- **Sizes:** 10px, 12px, 14px
- **Line height:** 1.2, 1.4, 1.83, 2, 2.2
- **Letter spacing:** -0.0140em
- **Role:** Small text, captions, metadata, and fine print — used for subtle informational text due to its slightly condensed feel and moderate letter-spacing.

### Cinetype
- **Substitute:** Inter
- **Weights:** 300, 400, 500, 700
- **Sizes:** 12px, 14px, 16px, 20px, 24px
- **Line height:** 1, 1.5, 1.57
- **Letter spacing:** normal
- **Role:** Navigation, buttons, and functional UI elements — a versatile geometric sans-serif for interactive components, ensuring clarity and crispness. Normal letter-spacing maintains readability at smaller UI sizes.

### IBM Plex Mono
- **Substitute:** Roboto Mono
- **Weights:** 400
- **Sizes:** 11px
- **Line height:** 1.5
- **Letter spacing:** normal
- **Role:** Code snippets, data fields, and technical information — providing a consistent, fixed-width appearance crucial for displaying code and structured data clearly.

## Tokens — Type Scale

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 10px | 1.2 | -0.14px |
| heading | 24px | 1.3 | — |
| heading-lg | 28px | 1.3 | -0.7px |
| display | 78px | 1.3 | -1.872px |

## Tokens — Spacing

- **Max width:** 1200px
- **Section gap:** 70px
- **Card padding:** 12px
- **Element gap:** 8px

## Tokens — Radius

- **Default:** 3px
- **Buttons:** 3px
- **Inputs:** 6px
- **Cards:** 6px
- **badges:** 9999px

## Tokens — Elevation

- **Card:** `rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.09) 0px 103px 103px 0px, rgba(49, 38, 59, 0.1) 0px 26px 57px 0px`
- **Hovered Card:** `rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.1) 0px 26px 57px 0px`
- **Modal/Overlay 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`
- **Input Focus:** `rgb(255, 255, 255) 0px 0px 0px 1px inset`

## Components

### Ghost Button
*Action button*

Transparent background with a 1px Eggplant Gray (#31263b) border, 3px corner radius, and Obsidian Ink (#01011b) text. Padding is 9.6px vertical and 13.6px horizontal, using Cinetype font at 16px.

### Standard Card
*Information container*

Canvas White (#fffcfc) background with a 6px border radius, featuring a layered shadow: rgba(49, 38, 59, 0.22) 0px 0px 0px 1px (thin border), rgba(49, 38, 59, 0.09) 0px 103px 103px 0px (large, distant shadow), rgba(49, 38, 59, 0.1) 0px 26px 57px 0px (closer, softer shadow). No internal padding indicated by default.

### Modal Card
*Interactive container*

Frosted Canvas White (rgba(253, 253, 253, 0.4)) background with a larger 12px border radius. This card uses a complex, soft, multi-layered shadow with an inset #000000 shadow for depth, suggesting a floating, ethereal quality. Internal padding of 38px vertical and 45px horizontal defines its content area.

### Text Input
*Data entry*

Transparent background, Obsidian Ink (#01011b) text and 1px border, with a 6px border radius. Internal padding is 12px on all sides, ensuring ample space for input. Focus states are indicated by an inset white shadow.

### Nav Button
*Navigation link*

Transparent background, Eggplant Gray (#31263b) text, with Cinetype font at 16px. Implicitly, interaction involves a border change or background fill, as seen on the 'Get Started' button when hovered/active.

## Guidelines

### Do

- Prioritize Canvas White (#fffcfc) for all primary backgrounds to maintain a clean, expansive aesthetic.
- Use Obsidian Ink (#01011b) for primary body text and most UI elements, reserving Charcoal Grey (#14141c) for headings.
- Apply Eggplant Gray (#31263b) as the default border color for outlined elements and secondary text.
- Utilize Minsk Violet (#473982) sparingly for accents, interactive states, and to highlight key application functionality.
- Ensure all cards use a 6px border radius and the layered shadow style: rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.09) 0px 103px 103px 0px, rgba(49, 38, 59, 0.1) 0px 26px 57px 0px.
- Implement the display typography in PP Editorial New at 78px, weight 200, with -0.0240em letter-spacing for all hero headlines.
- Maintain a compact spacing density, predominantly using 8px for element gaps and 3px for general corner radii (buttons, links).

### Don't

- Avoid using bold, filled buttons unless explicitly specified for a primary action, favoring ghost buttons with Eggplant Gray (#31263b) borders.
- Do not introduce strong, saturated colors unless they are part of the defined brand or accent palette, maintaining the subdued aesthetic.
- Refrain from using heavily textured or patterned backgrounds; surfaces should remain clean and uniform.
- Do not deviate from the specified typefaces; the interplay of serif for display and sans-serif for UI is crucial to the brand's typographic identity.
- Avoid excessive use of heavy shadows or opaque overlays, as the system relies on subtle depth and clear separation.
- Do not use letter-spacing values greater than normal for any text, especially body or caption text, as the design uses tight tracking to aid clarity.
- Avoid 9999px radius for anything other than small tags or badges; standard components use radii of 3px, 6px, or 12px.

## Agent Prompt Guide

Quick Color Reference:
text: #01011b
background: #fffcfc
border: #31263b
accent: #473982
primary action: #31263b (outlined action border)

Example Component Prompts:
1. Create a Hero Headline section: Canvas White (#fffcfc) background. Headline at 78px PP Editorial New weight 200, Obsidian Ink (#01011b), letter-spacing -1.872px. Subtext at 20px IBM Plex Sans weight 400, Eggplant Gray (#31263b), letter-spacing -0.5px. Add a ghost button: transparent background, 1px Eggplant Gray (#31263b) border, 3px radius, Cinetype font at 16px, Obsidian Ink (#01011b) text, 9.6px vertical padding, 13.6px horizontal padding.
2. Design a Feature Card: Canvas White (#fffcfc) background, 6px radius, with shadow 'rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.09) 0px 103px 103px 0px, rgba(49, 38, 59, 0.1) 0px 26px 57px 0px'. Title in Charcoal Grey (#14141c) at 24px IBM Plex Sans weight 600, body text in Obsidian Ink (#01011b) at 16px IBM Plex Sans weight 400.
3. Create a User Input Field: Canvas White (#fffcfc) background, 1px Obsidian Ink (#01011b) border, 6px radius. Placeholder text in Cement Gray (#717a94) at 16px IBM Plex Sans weight 400. Input text in Obsidian Ink (#01011b) at 16px IBM Plex Sans weight 400. 12px padding on all sides.
4. Build a Navigation Link: Text 'Products' in Eggplant Gray (#31263b) at 16px Cinetype weight 500. No background, no border. On hover, text color changes to Minsk Violet (#473982).