CURATED · OPEN · FREE

Hex

An AI-powered analytics platform where trust meets insight.

01

Identity DNA

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

02

Color

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

03

Typography

transitional-serif · geometric-sans · monospace

• display80px · 400
• display280px · 800
• h140px · 400
• body14px · 400
• mono12px · 400

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

04

Spacing

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

05

Surfaces

Subtle, low-contrast borders using the primary ink color at low opacity.

0 0 0 1px rgba(0, 0, 0, 0) · 0px 1px 1px 0px inset rgba(49, 38, 59, 0.14)

06

Layout

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

07

Motion & Interaction

Smooth background-color transitions on hover. · Subtle opacity changes for focus states. · Transformations for interactive elements.

Subtle background color shifts or opacity changes. · Immediate visual feedback via background or border transitions.

08

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.

09

Voice & Don'ts

• Tone Professional, authoritative, yet accessible and inviting.
• Headlines Concise, powerful statements that blend editorial flair with technical precision.
• CTAs Direct and action-oriented, encouraging immediate exploration.

• 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.
• Avoid: Overly technical jargon without context.
• Avoid: Vague or fluffy marketing speak.
• Avoid: Aggressive or loud color palettes.
• Avoid: Overly complex animations.
• Avoid: Cluttered or busy layouts.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko