Design System Preview:
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