---
name: Hex
description: "This site is worth including because it perfectly balances a premium, editorial aesthetic with the functional requirements of a developer-facing tool."
version: alpha

colors:
  background: "#FFFCFC"
  primary: "#31263B"
  secondary: "#43394C"
  tertiary: "#E28C8B"
  neutral: "#89828D"
  bg-soft: "#E9E5E8"
  bg-quiet: "#F4F1F2"
  line: "rgba(49, 38, 59, 0.14)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  display2:
    fontFamily: transitional-serif
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 800
    letterSpacing: "-1px"
  h1:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.57
    fontWeight: 400
    letterSpacing: "normal"
  mono:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 2px
  md: 3px
  lg: 4px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

An AI-powered analytics platform where trust meets insight.

*A sophisticated data science notebook that blends editorial elegance with technical rigor.*

## Colors

Grounded and trustworthy neutral palette with a warm, subtle accent.

- **Background (`#FFFCFC`)** — uses `bg` token
- **Primary text (`#31263B`)** — uses `ink` token
- **Secondary text (`#43394C`)** — uses `ink-soft` token
- **Accent (`#E28C8B`)** — uses `accent` token
- **Muted (`#89828D`)** — uses `muted` token
- **Borders (`rgba(49, 38, 59, 0.14)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Standard 4px base grid with comfortable padding for readable content.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 2px
- `md`: 3px
- `lg`: 4px
- `pill`: 9999px

## Components

- **button:** Primary uses a solid background (implied context) with rounded pill shape; secondary uses a subtle outline with rounded corners.
- **card:** Clean cards with very subtle borders and minimal shadows, used for showcasing product features.
- **chip:** Small, pill-shaped tags for categorization with low-contrast backgrounds.
- **input:** Clean text inputs with subtle borders and monospace styling for code-related fields.
- **hero:** Large, impactful hero combining serif and sans-serif typography with product interface snippets.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```