# Design System
Inspired by Together AI

Auto-generated design token catalog from DESIGN.md

01 / Color Palette

## Color Palette & Roles

### Primary Brand

Brand Magenta
#ef2cc1
Gradient illustrations only, never UI chrome
Brand Orange
#fc4c02
Gradient endpoints, warm accent moments
Dark Blue
#010120
Dark surface, research sections, footer

### Secondary & Accent

Soft Lavender
#bdbbff
Subtle accents, secondary indicators, highlights
Black 40
#00000066
De-emphasized overlays, secondary text

### Surface & Background

Pure White
#ffffff
Primary light-section page background
Dark Blue
#010120
Research, footer, technical sections
Glass Light
rgba(255,255,255,0.12)
Frosted glass button backgrounds on dark
Glass Dark
rgba(0,0,0,0.08)
Subtle tinted surfaces on light sections

### Neutrals & Text

Pure Black
#000000
Primary text on light surfaces
Pure White
#ffffff
Primary text on dark surfaces
Black 8%
rgba(0,0,0,0.08)
Borders on light surfaces
White 12%
rgba(255,255,255,0.12)
Borders on dark surfaces

### Gradient System

Pastel Cloud Gradient
pink -> lavender -> blue
Hero illustrations, decorative backgrounds, abstract forms

02 / Typography Scale

## Typography Rules

Display Hero
Display / Hero -- 64px / 500 / 1.10 / -1.92px -- "The Future" (system-ui)
Section Heading
Section Heading -- 40px / 500 / 1.20 / -0.8px -- "The Future" (system-ui)
Sub-heading
Sub-heading -- 28px / 500 / 1.15 / -0.42px -- "The Future" (system-ui)
Feature Title
Feature Title -- 22px / 500 / 1.15 / -0.22px -- "The Future" (system-ui)
Body large text for descriptions and section introductions. The Future provides geometric modernist aesthetic for all UI copy.
Body Large -- 18px / 400 / 1.30 / -0.18px -- "The Future" (system-ui)
Standard body text for paragraphs, navigation links, and button labels. Tight line-height creates dense, information-rich layouts.
Body / Button -- 16px / 400 / 1.30 / -0.16px -- "The Future" (system-ui)
Caption and metadata text for descriptions
Caption -- 14px / 400 / 1.40 / normal -- "The Future" (system-ui)
MONO SECTION LABEL
Mono Label -- 16px / 500 / 1.00 / 0.08px / uppercase -- "PP Neue Montreal Mono" (Space Mono)
MONO SMALL UPPERCASE TAG
Mono Small -- 11px / 500 / 1.40 / 0.055px / uppercase -- "PP Neue Montreal Mono" (Space Mono)
MONO MICRO LABEL
Mono Micro -- 10px / 400 / 1.40 / 0.05px / uppercase -- "PP Neue Montreal Mono" (Space Mono)

03 / Button Variants

## Buttons

Glass on Dark
Inverted Solid
Outlined
INFERENCE
Badge / Tag
Stats Bar
2x
Faster inference speed
60%
Cost reduction
90%
GPU utilization

04 / Card Examples

## Cards & Containers

CONTAINED

### Standard Card

Content card with 1px solid rgba(255,255,255,0.12) border and 8px radius. The default container for research and technical content on dark surfaces.

ELEVATED

### Shadow Card

Elevated card with dark-blue-tinted shadow. Subtle blue-ish cast ties elevated elements to the midnight-blue dark mode.

ACCENT

### Lavender Accent

Card with soft lavender border accent. Used for highlighted or selected content where a gentle visual distinction is needed.

LIGHT ZONE CARDS
BUSINESS

### Platform Feature

Card on white surface with rgba(0,0,0,0.08) border. Used in bright business sections for approachable platform overview.

FEATURE

### Product Overview

The light zone creates an open, inviting feel that makes enterprise AI infrastructure feel accessible and friendly.

05 / Spacing Scale

## Spacing System

Base unit: 8px. Scale: 1px to 120px.

1px
2px
4px
8px
12px
16px
20px
24px
32px
44px
48px

06 / Border Radius Scale

## Border Radius

Deliberately restrained: only 4px and 8px. No pills, no generous rounding.

4px
Buttons, badges, tags
8px
Cards, containers

07 / Elevation & Depth

## Depth & Elevation

Flat
No shadow, no border. Page background and text blocks.
LEVEL 0
Contained
1px solid rgba(255,255,255,0.12) on dark or rgba(0,0,0,0.08) on light. Cards, badges, containers.
LEVEL 1
Elevated
Dark-blue-tinted shadow: rgba(1,1,32,0.1) 0px 4px 10px. Feature cards and hover states.
LEVEL 2
Light Zone
Pure White (#ffffff) full-width background. Business, platform, stats sections.
LEVEL 3