laowang/awesome-design-md
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
necatiozmen
2026-03-31 19:37:25 +03:00
commit 1145c998a1
128 changed files with 51549 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
design-md/together.ai/DESIGN.md Normal file
View File

@@ -0,0 +1,263 @@
# Design System: Together AI
## 1. Visual Theme & Atmosphere
Together AI's interface is a pastel-gradient dreamscape built for enterprise AI infrastructure — a design that somehow makes GPU clusters and model inference feel light, airy, and optimistic. The hero section blooms with soft pink-blue-lavender gradients and abstract, painterly illustrations that evoke clouds and flight, establishing a visual metaphor for the "AI-Native Cloud" proposition. Against this softness, the typography cuts through with precision: "The Future" display font at 64px with aggressive negative tracking (-1.92px) creates dense, authoritative headline blocks.
The design straddles two worlds: a bright, white-canvas light side where pastel gradients and stats cards create an approachable platform overview, and a dark navy universe (`#010120` — not gray-black but a deep midnight blue) where research papers and technical content live. This dual-world approach elegantly separates the "business" messaging (light, friendly, stat-driven) from the "research" messaging (dark, serious, academic).
What makes Together AI distinctive is its type system. "The Future" handles all display and body text with a geometric modernist aesthetic, while "PP Neue Montreal Mono" provides uppercase labels with meticulous letter-spacing — creating a "technical infrastructure company with taste" personality. The brand accents — magenta (`#ef2cc1`) and orange (`#fc4c02`) — appear sparingly in the gradient and illustrations, never polluting the clean UI.
**Key Characteristics:**
- Soft pastel gradients (pink, blue, lavender) against pure white canvas
- Deep midnight blue (`#010120`) for dark/research sections — not gray-black
- Custom "The Future" font with aggressive negative letter-spacing throughout
- PP Neue Montreal Mono for uppercase technical labels
- Sharp geometry (4px, 8px radius) — not rounded, not pill
- Magenta (#ef2cc1) + orange (#fc4c02) brand accents in illustrations only
- Lavender (#bdbbff) as a soft secondary accent
- Enterprise stats prominently displayed (2x, 60%, 90%)
- Dark-blue-tinted shadows (rgba(1, 1, 32, 0.1))
## 2. Color Palette & Roles
### Primary
- **Brand Magenta** (`#ef2cc1`): The primary brand accent — a vivid pink-magenta used in gradient illustrations and the highest-signal brand moments. Never used as UI chrome.
- **Brand Orange** (`#fc4c02`): The secondary brand accent — a vivid orange for gradient endpoints and warm accent moments.
- **Dark Blue** (`#010120`): The primary dark surface — a deep midnight blue-black used for research sections, footer, and dark containers. Not gray, not black — distinctly blue.
### Secondary & Accent
- **Soft Lavender** (`#bdbbff`): A gentle blue-violet used for subtle accents, secondary indicators, and soft UI highlights.
- **Black 40** (`#00000066`): Semi-transparent black for de-emphasized overlays and secondary text.
### Surface & Background
- **Pure White** (`#ffffff`): The primary light-section page background.
- **Dark Blue** (`#010120`): Dark-section backgrounds — research, footer, technical content.
- **Glass Light** (`rgba(255, 255, 255, 0.12)`): Frosted glass button backgrounds on dark sections.
- **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 and subtle containment on light surfaces.
- **White 12%** (`rgba(255, 255, 255, 0.12)`): Borders and containment on dark surfaces.
### Gradient System
- **Pastel Cloud Gradient**: Soft pink → lavender → soft blue gradients in hero illustrations. These appear in abstract, painterly forms — clouds, feathers, flowing shapes — that create visual warmth without literal meaning.
- **Hero Gradient**: The hero background uses soft pastel tints layered over white, creating a dawn-like atmospheric effect.
## 3. Typography Rules
### Font Family
- **Primary**: `The Future`, with fallback: `Arial`
- **Monospace / Labels**: `PP Neue Montreal Mono`, with fallback: `Georgia`
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display / Hero | The Future | 64px (4rem) | 400–500 | 1.00–1.10 (tight) | -1.92px | Maximum impact, dense blocks |
| Section Heading | The Future | 40px (2.5rem) | 500 | 1.20 (tight) | -0.8px | Feature section titles |
| Sub-heading | The Future | 28px (1.75rem) | 500 | 1.15 (tight) | -0.42px | Card headings |
| Feature Title | The Future | 22px (1.38rem) | 500 | 1.15 (tight) | -0.22px | Small feature headings |
| Body Large | The Future | 18px (1.13rem) | 400–500 | 1.30 (tight) | -0.18px | Descriptions, sections |
| Body / Button | The Future | 16px (1rem) | 400–500 | 1.25–1.30 | -0.16px | Standard body, nav, buttons |
| Caption | The Future | 14px (0.88rem) | 400–500 | 1.40 | normal | Metadata, descriptions |
| Mono Label | PP Neue Montreal Mono | 16px (1rem) | 500 | 1.00 (tight) | 0.08px | Uppercase section labels |
| Mono Small | PP Neue Montreal Mono | 11px (0.69rem) | 500 | 1.00–1.40 | 0.055–0.08px | Small uppercase tags |
| Mono Micro | PP Neue Montreal Mono | 10px (0.63rem) | 400 | 1.40 | 0.05px | Smallest uppercase labels |
### Principles
- **Negative tracking everywhere**: Every size of "The Future" uses negative letter-spacing (-0.16px to -1.92px), creating consistently tight, modern text.
- **Mono for structure**: PP Neue Montreal Mono in uppercase with positive letter-spacing creates technical "label" moments that structure the page without competing with display text.
- **Weight 500 as emphasis**: The system uses 400 (regular) and 500 (medium) — no bold. Medium weight marks headings and emphasis.
- **Tight line-heights throughout**: Even body text uses 1.25–1.30 line-height — tighter than typical, creating a dense, information-rich feel.
## 4. Component Stylings
### Buttons
**Glass on Dark**
- Background: `rgba(255, 255, 255, 0.12)` (frosted glass)
- Text: Pure White (`#ffffff`)
- Radius: sharp (4px)
- Opacity: 0.5
- Hover: transparent dark overlay
- Used on dark sections — subtle, glass-like
**Dark Solid**
- Background: Dark Blue (`#010120`) or Pure Black
- Text: Pure White
- Radius: sharp (4px)
- The primary CTA on light surfaces
**Outlined Light**
- Border: `1px solid rgba(0, 0, 0, 0.08)`
- Background: transparent or subtle glass
- Text: Pure Black
- Radius: sharp (4px)
- Secondary actions on light surfaces
### Cards & Containers
- Background: Pure White or subtle glass tint
- Border: `1px solid rgba(0, 0, 0, 0.08)` on light; `1px solid rgba(255, 255, 255, 0.12)` on dark
- Radius: sharp (4px) for badges and small elements; comfortable (8px) for larger containers
- Shadow: dark-blue-tinted (`rgba(1, 1, 32, 0.1) 0px 4px 10px`) — warm and subtle
- Stats cards with large numbers prominently displayed
### Badges / Tags
- Background: `rgba(0, 0, 0, 0.04)` (light) or `rgba(255, 255, 255, 0.12)` (dark)
- Text: Black (light) or White (dark)
- Padding: 2px 8px (compact)
- Radius: sharp (4px)
- Border: `1px solid rgba(0, 0, 0, 0.08)`
- PP Neue Montreal Mono, uppercase, 16px
### Navigation
- Clean horizontal nav on white/transparent
- Logo: Together AI wordmark
- Links: The Future at 16px, weight 400
- CTA: Dark solid button
- Hover: no text-decoration
### Image Treatment
- Abstract pastel gradient illustrations (cloud/feather forms)
- Product UI screenshots on dark/light surfaces
- Team photos in editorial style
- Research paper cards with dark backgrounds
### Distinctive Components
**Stats Bar**
- Large performance metrics (2x, 60%, 90%)
- Bold display numbers
- Short descriptive captions beneath
- Clean horizontal layout
**Mono Section Labels**
- PP Neue Montreal Mono, uppercase, 11px, letter-spacing 0.055px
- Used as navigational signposts throughout the page
- Technical, structured feel
**Research Section**
- Dark Blue (#010120) background
- White text, research paper thumbnails
- Creates a distinct "academic" zone
**Large Footer Logo**
- "together" wordmark rendered at massive scale in the dark footer
- Creates a brand-statement closing moment
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 44px, 48px, 80px, 100px, 120px
- Button/badge padding: 2px 8px (compact)
- Card internal padding: approximately 24–32px
- Section vertical spacing: generous (80–120px)
### Grid & Container
- Max container width: approximately 1200px, centered
- Hero: centered with pastel gradient background
- Feature sections: multi-column card grids
- Stats: horizontal row of metric cards
- Research: dark full-width section
### Whitespace Philosophy
- **Optimistic breathing room**: Generous spacing between sections creates an open, inviting feel that makes enterprise AI infrastructure feel accessible.
- **Dual atmosphere**: Light sections breathe with whitespace; dark sections are denser with content.
- **Stats as visual anchors**: Large numbers with small captions create natural focal points.
### Border Radius Scale
- Sharp (4px): Buttons, badges, tags, small interactive elements — the primary radius
- Comfortable (8px): Larger containers, feature cards
*This is a deliberately restrained radius system — no pills, no generous rounding. The sharp geometry contrasts with the soft pastel gradients.*
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, no border | Page background, text blocks |
| Contained (Level 1) | `1px solid rgba(0,0,0,0.08)` (light) or `rgba(255,255,255,0.12)` (dark) | Cards, badges, containers |
| Elevated (Level 2) | `rgba(1, 1, 32, 0.1) 0px 4px 10px` | Feature cards, hover states |
| Dark Zone (Level 3) | Dark Blue (#010120) full-width background | Research, footer, technical sections |
**Shadow Philosophy**: Together AI uses a single, distinctive shadow — tinted with Dark Blue (`rgba(1, 1, 32, 0.1)`) rather than generic black. This gives elevated elements a subtle blue-ish cast that ties them to the brand's midnight-blue dark mode. The shadow is soft (10px blur, 4px offset) and always downward — creating gentle paper-hover elevation.
## 7. Do's and Don'ts
### Do
- Use pastel gradients (pink/blue/lavender) for hero illustrations and decorative backgrounds
- Use Dark Blue (#010120) for dark sections — never generic gray-black
- Apply negative letter-spacing on all "The Future" text (scaled by size)
- Use PP Neue Montreal Mono in uppercase for section labels and technical markers
- Keep border-radius sharp (4px) for badges and interactive elements
- Use the dark-blue-tinted shadow for elevation
- Maintain the light/dark section duality — business (light) vs research (dark)
- Show enterprise stats prominently with large display numbers
### Don't
- Don't use Brand Magenta (#ef2cc1) or Brand Orange (#fc4c02) as UI colors — they're for illustrations only
- Don't use pill-shaped or generously rounded corners — the geometry is sharp
- Don't use generic gray-black for dark sections — always Dark Blue (#010120)
- Don't use positive letter-spacing on "The Future" — it's always negative
- Don't use bold (700+) weight — 400–500 is the full range
- Don't use warm-toned shadows — always dark-blue-tinted
- Don't reduce section spacing below 48px — the open feeling is core
- Don't mix in additional typefaces — "The Future" + PP Neue Montreal Mono is the pair
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <479px | Compact layout, stacked everything |
| Large Mobile | 479–767px | Single column, hamburger nav |
| Tablet | 768–991px | 2-column grids begin |
| Desktop | 992px+ | Full multi-column layout |
### Touch Targets
- Buttons with adequate padding
- Card surfaces as touch targets
- Navigation links at comfortable 16px
### Collapsing Strategy
- **Navigation**: Collapses to hamburger on mobile
- **Hero text**: 64px → 40px → 28px progressive scaling
- **Stats bar**: Horizontal → stacked vertical
- **Feature grids**: Multi-column → single column
- **Research section**: Cards stack vertically
### Image Behavior
- Pastel illustrations scale proportionally
- Product screenshots maintain aspect ratio
- Team photos scale within containers
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary Text (light): "Pure Black (#000000)"
- Primary Text (dark): "Pure White (#ffffff)"
- Page Background: "Pure White (#ffffff)"
- Dark Surface: "Dark Blue (#010120)"
- Brand Accent 1: "Brand Magenta (#ef2cc1)"
- Brand Accent 2: "Brand Orange (#fc4c02)"
- Soft Accent: "Soft Lavender (#bdbbff)"
- Border (light): "rgba(0, 0, 0, 0.08)"
### Example Component Prompts
- "Create a hero section on white with soft pastel gradients (pink → lavender → blue) as background. Headline at 64px 'The Future' weight 500, line-height 1.10, letter-spacing -1.92px. Pure Black text. Include a dark blue CTA button (#010120, 4px radius)."
- "Design a stats card: large display number (64px, weight 500) with a small caption below (14px). White background, 8px radius, dark-blue-tinted shadow (rgba(1, 1, 32, 0.1) 0px 4px 10px)."
- "Build a section label: PP Neue Montreal Mono, 11px, weight 500, uppercase, letter-spacing 0.055px. Black text on light, white on dark."
- "Create a dark research section: Dark Blue (#010120) background. White text, section heading at 40px 'The Future' weight 500, letter-spacing -0.8px. Cards with rgba(255, 255, 255, 0.12) border."
- "Design a badge: 4px radius, rgba(0, 0, 0, 0.04) background, 1px solid rgba(0, 0, 0, 0.08) border, 'The Future' 16px text. Padding: 2px 8px."
### Iteration Guide
1. Always specify negative letter-spacing for "The Future" — it's scaled by size
2. Dark sections use #010120 (midnight blue), never generic black
3. Shadows are always dark-blue-tinted: rgba(1, 1, 32, 0.1)
4. Mono labels are always uppercase with positive letter-spacing
5. Keep radius sharp (4px or 8px) — no pills, no generous rounding
6. Pastel gradients are for decoration, not UI chrome

25
design-md/together.ai/README.md Normal file
View File

@@ -0,0 +1,25 @@
# Together.ai — Design System
> Design.md extracted from the public [together.ai](https://together.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Together.ai design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Together.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-dark-screenshot.png)
### Light Mode
![Together.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-screenshot.png)

892
design-md/together.ai/preview-dark.html Normal file
View File

@@ -0,0 +1,892 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Together AI (Dark)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--color-brand-magenta: #ef2cc1;
--color-brand-orange: #fc4c02;
--color-dark-blue: #010120;
--color-soft-lavender: #bdbbff;
--color-black-40: #00000066;
--color-white: #ffffff;
--color-black: #000000;
--font-display: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;
--font-mono: 'Space Mono', 'Courier New', Consolas, monospace;
/* Dark mode tokens -- midnight blue, NOT gray-black */
--bg-page: #010120;
--bg-card: #010120;
--bg-nav: rgba(1,1,32,0.95);
--text-primary: #ffffff;
--text-secondary: rgba(255,255,255,0.6);
--text-muted: rgba(255,255,255,0.5);
--border-color: rgba(255,255,255,0.12);
--border-subtle: rgba(255,255,255,0.08);
--glass-bg: rgba(255,255,255,0.12);
--badge-bg: rgba(255,255,255,0.12);
--shadow-card: rgba(1, 1, 32, 0.4) 0px 4px 10px;
--section-label-color: rgba(255,255,255,0.5);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.30;
letter-spacing: -0.16px;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 40px;
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-brand {
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.18px;
display: flex;
align-items: center;
gap: 8px;
color: var(--text-primary);
}
.nav-brand .logo-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-brand-magenta), var(--color-brand-orange));
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-primary);
text-decoration: none;
font-size: 16px;
font-weight: 400;
letter-spacing: -0.16px;
transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 0.6; }
.nav-cta {
background: var(--glass-bg);
color: var(--color-white);
padding: 8px 20px;
border: none;
border-radius: 4px;
font-size: 16px;
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.16px;
cursor: pointer;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg,
rgba(239,44,193,0.12) 0%,
rgba(189,187,255,0.10) 35%,
rgba(130,170,255,0.06) 65%,
rgba(1,1,32,0) 100%
);
pointer-events: none;
}
.hero-gradient-orb {
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 500px;
background: radial-gradient(ellipse at center,
rgba(239,44,193,0.15) 0%,
rgba(189,187,255,0.12) 30%,
rgba(130,170,255,0.06) 60%,
transparent 80%
);
filter: blur(50px);
pointer-events: none;
}
.hero h1 {
font-family: var(--font-display);
font-size: 64px;
font-weight: 500;
line-height: 1.10;
letter-spacing: -1.92px;
margin-bottom: 24px;
position: relative;
color: var(--text-primary);
}
.hero p {
color: var(--text-secondary);
font-size: 18px;
font-weight: 400;
line-height: 1.30;
letter-spacing: -0.18px;
margin-bottom: 40px;
position: relative;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
.btn-glass {
background: var(--glass-bg);
color: var(--color-white);
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.16px;
cursor: pointer;
}
.btn-outlined {
background: transparent;
color: var(--text-primary);
padding: 12px 24px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 16px;
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.16px;
cursor: pointer;
}
/* MONO LABEL */
.mono-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.055px;
color: var(--text-muted);
margin-bottom: 12px;
}
/* SECTIONS */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px;
}
.section-title {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.055px;
color: var(--text-muted);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-display);
font-size: 40px;
font-weight: 500;
line-height: 1.20;
letter-spacing: -0.8px;
margin-bottom: 48px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* COLOR PALETTE */
.color-group { margin-bottom: 40px; }
.color-group-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.22px;
margin-bottom: 20px;
color: var(--text-primary);
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.color-swatch {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
}
.color-swatch-info {
padding: 12px;
background: rgba(255,255,255,0.04);
}
.color-swatch-name {
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.13px;
margin-bottom: 2px;
color: var(--text-primary);
}
.color-swatch-hex {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
margin-bottom: 4px;
}
.color-swatch-role {
font-family: var(--font-display);
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
letter-spacing: -0.12px;
}
/* TYPOGRAPHY */
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-sample-text { margin-bottom: 8px; }
.type-sample-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
}
/* BUTTONS */
.button-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.button-demo { text-align: center; }
.button-demo-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 0.055px;
}
.btn-dark-solid {
background: var(--color-white);
color: var(--color-dark-blue);
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.16px;
cursor: pointer;
}
/* BADGE */
.badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08px;
padding: 2px 8px;
border-radius: 4px;
background: var(--badge-bg);
border: 1px solid var(--border-color);
color: var(--text-primary);
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 8px;
padding: 28px;
}
.card-bordered {
border: 1px solid var(--border-color);
}
.card-elevated {
border: 1px solid var(--border-color);
box-shadow: var(--shadow-card);
}
.card-stat {
border: 1px solid var(--border-color);
text-align: center;
padding: 32px 24px;
}
.card h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.22px;
margin-bottom: 12px;
color: var(--text-primary);
}
.card p {
color: var(--text-secondary);
font-size: 16px;
line-height: 1.30;
letter-spacing: -0.16px;
}
.card-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.055px;
color: var(--text-muted);
margin-bottom: 16px;
}
.stat-number {
font-family: var(--font-display);
font-size: 64px;
font-weight: 500;
line-height: 1.10;
letter-spacing: -1.92px;
margin-bottom: 8px;
color: var(--text-primary);
}
.stat-caption {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
color: var(--text-secondary);
line-height: 1.40;
}
/* LIGHT ZONE CARD PREVIEW */
.light-zone-preview {
background: #ffffff;
border-radius: 8px;
padding: 32px;
margin-top: 24px;
}
.light-zone-preview .card {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
color: #000000;
}
.light-zone-preview .card h3 { color: #000000; }
.light-zone-preview .card p { color: #00000066; }
.light-zone-preview .card-label { color: #00000066; }
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: rgba(189,187,255,0.15);
border: 1px solid rgba(189,187,255,0.35);
border-radius: 2px;
margin-bottom: 8px;
}
.spacing-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
/* RADIUS */
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.radius-item { text-align: center; }
.radius-box {
width: 80px;
height: 80px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-color);
margin-bottom: 8px;
}
.radius-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
.radius-context {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.elevation-card {
background: var(--bg-card);
border-radius: 8px;
padding: 24px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat { border: none; background: var(--bg-page); }
.elevation-contained { border: 1px solid var(--border-color); }
.elevation-elevated { border: 1px solid var(--border-color); box-shadow: var(--shadow-card); }
.elevation-light-zone {
background: #ffffff;
color: #000000;
border: none;
}
.elevation-light-zone .elevation-name { color: #000000; }
.elevation-light-zone .elevation-desc { color: #00000066; }
.elevation-light-zone .elevation-level { color: #00000066; }
.elevation-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.16px;
margin-bottom: 8px;
}
.elevation-desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
letter-spacing: -0.13px;
}
.elevation-level {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.055px;
margin-top: 12px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links a:not(.nav-cta-wrapper) { display: none; }
.hero { padding: 80px 20px 60px; }
.hero h1 { font-size: 40px; letter-spacing: -1.2px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 28px; letter-spacing: -0.42px; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card-grid { grid-template-columns: 1fr; }
.hero-buttons { flex-direction: column; align-items: center; }
.button-row { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-brand"><div class="logo-dot"></div> Together AI</div>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#buttons">Buttons</a>
<a href="#cards">Cards</a>
<a href="#spacing">Spacing</a>
<a href="#elevation">Elevation</a>
<button class="nav-cta">Get Started</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-gradient-orb"></div>
<h1>Design System Preview:<br>Together AI</h1>
<p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons">
<button class="btn-glass">Explore Tokens</button>
<button class="btn-outlined">View Source</button>
</div>
</section>
<hr class="section-divider">
<!-- COLORS -->
<section class="section" id="colors">
<div class="section-title">01 / Color Palette</div>
<h2 class="section-heading">Color Palette & Roles</h2>
<div class="color-group">
<h3 class="color-group-title">Primary Brand</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ef2cc1;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Brand Magenta</div>
<div class="color-swatch-hex">#ef2cc1</div>
<div class="color-swatch-role">Gradient illustrations only, never UI chrome</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fc4c02;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Brand Orange</div>
<div class="color-swatch-hex">#fc4c02</div>
<div class="color-swatch-role">Gradient endpoints, warm accent moments</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #010120; border: 1px solid rgba(255,255,255,0.2);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Dark Blue</div>
<div class="color-swatch-hex">#010120</div>
<div class="color-swatch-role">Dark surface, research sections, footer</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Secondary & Accent</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #bdbbff;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Soft Lavender</div>
<div class="color-swatch-hex">#bdbbff</div>
<div class="color-swatch-role">Subtle accents, secondary indicators, highlights</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #00000066;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Black 40</div>
<div class="color-swatch-hex">#00000066</div>
<div class="color-swatch-role">De-emphasized overlays, secondary text</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Background</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Primary light-section page background</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #010120; border: 1px solid rgba(255,255,255,0.2);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Dark Blue</div>
<div class="color-swatch-hex">#010120</div>
<div class="color-swatch-role">Research, footer, technical sections</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Glass Light</div>
<div class="color-swatch-hex">rgba(255,255,255,0.12)</div>
<div class="color-swatch-role">Frosted glass button backgrounds on dark</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.2);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Glass Dark</div>
<div class="color-swatch-hex">rgba(0,0,0,0.08)</div>
<div class="color-swatch-role">Subtle tinted surfaces on light sections</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Neutrals & Text</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #000000;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure Black</div>
<div class="color-swatch-hex">#000000</div>
<div class="color-swatch-role">Primary text on light surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Primary text on dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.2);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Black 8%</div>
<div class="color-swatch-hex">rgba(0,0,0,0.08)</div>
<div class="color-swatch-role">Borders on light surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">White 12%</div>
<div class="color-swatch-hex">rgba(255,255,255,0.12)</div>
<div class="color-swatch-role">Borders on dark surfaces</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Gradient System</h3>
<div class="color-grid">
<div class="color-swatch" style="grid-column: span 2;">
<div class="color-swatch-block" style="background: linear-gradient(135deg, rgba(239,44,193,0.4), rgba(189,187,255,0.4), rgba(130,170,255,0.3)); height: 100px;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pastel Cloud Gradient</div>
<div class="color-swatch-hex">pink -> lavender -> blue</div>
<div class="color-swatch-role">Hero illustrations, decorative backgrounds, abstract forms</div>
</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<div class="section-title">02 / Typography Scale</div>
<h2 class="section-heading">Typography Rules</h2>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 64px; font-weight: 500; line-height: 1.10; letter-spacing: -1.92px;">Display Hero</div>
<div class="type-sample-label">Display / Hero -- 64px / 500 / 1.10 / -1.92px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1.20; letter-spacing: -0.8px;">Section Heading</div>
<div class="type-sample-label">Section Heading -- 40px / 500 / 1.20 / -0.8px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -0.42px;">Sub-heading</div>
<div class="type-sample-label">Sub-heading -- 28px / 500 / 1.15 / -0.42px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -0.22px;">Feature Title</div>
<div class="type-sample-label">Feature Title -- 22px / 500 / 1.15 / -0.22px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1.30; letter-spacing: -0.18px;">Body large text for descriptions and section introductions. The Future provides geometric modernist aesthetic for all UI copy.</div>
<div class="type-sample-label">Body Large -- 18px / 400 / 1.30 / -0.18px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: 1.30; letter-spacing: -0.16px;">Standard body text for paragraphs, navigation links, and button labels. Tight line-height creates dense, information-rich layouts.</div>
<div class="type-sample-label">Body / Button -- 16px / 400 / 1.30 / -0.16px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 14px; font-weight: 400; line-height: 1.40; color: var(--text-secondary);">Caption and metadata text for descriptions</div>
<div class="type-sample-label">Caption -- 14px / 400 / 1.40 / normal -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 1.00; letter-spacing: 0.08px; text-transform: uppercase;">MONO SECTION LABEL</div>
<div class="type-sample-label">Mono Label -- 16px / 500 / 1.00 / 0.08px / uppercase -- "PP Neue Montreal Mono" (Space Mono)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.40; letter-spacing: 0.055px; text-transform: uppercase; color: var(--text-muted);">MONO SMALL UPPERCASE TAG</div>
<div class="type-sample-label">Mono Small -- 11px / 500 / 1.40 / 0.055px / uppercase -- "PP Neue Montreal Mono" (Space Mono)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1.40; letter-spacing: 0.05px; text-transform: uppercase; color: var(--text-muted);">MONO MICRO LABEL</div>
<div class="type-sample-label">Mono Micro -- 10px / 400 / 1.40 / 0.05px / uppercase -- "PP Neue Montreal Mono" (Space Mono)</div>
</div>
</section>
<hr class="section-divider">
<!-- BUTTONS -->
<section class="section" id="buttons">
<div class="section-title">03 / Button Variants</div>
<h2 class="section-heading">Buttons</h2>
<div class="button-row">
<div class="button-demo">
<button class="btn-glass">Explore</button>
<div class="button-demo-label">Glass on Dark</div>
</div>
<div class="button-demo">
<button class="btn-dark-solid">Get Started</button>
<div class="button-demo-label">Inverted Solid</div>
</div>
<div class="button-demo">
<button class="btn-outlined">View Docs</button>
<div class="button-demo-label">Outlined</div>
</div>
<div class="button-demo">
<span class="badge">INFERENCE</span>
<div class="button-demo-label">Badge / Tag</div>
</div>
</div>
<!-- Stats bar preview -->
<div style="margin-top: 48px;">
<div class="section-title">Stats Bar</div>
<div class="card-grid" style="grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px;">
<div class="card card-stat">
<div class="stat-number">2x</div>
<div class="stat-caption">Faster inference speed</div>
</div>
<div class="card card-stat">
<div class="stat-number">60%</div>
<div class="stat-caption">Cost reduction</div>
</div>
<div class="card card-stat">
<div class="stat-number">90%</div>
<div class="stat-caption">GPU utilization</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-title">04 / Card Examples</div>
<h2 class="section-heading">Cards & Containers</h2>
<div class="card-grid">
<div class="card card-bordered">
<div class="card-label">CONTAINED</div>
<h3>Standard Card</h3>
<p>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.</p>
</div>
<div class="card card-elevated">
<div class="card-label">ELEVATED</div>
<h3>Shadow Card</h3>
<p>Elevated card with dark-blue-tinted shadow. Subtle blue-ish cast ties elevated elements to the midnight-blue dark mode.</p>
</div>
<div class="card card-bordered" style="border-color: var(--color-soft-lavender);">
<div class="card-label" style="color: var(--color-soft-lavender);">ACCENT</div>
<h3>Lavender Accent</h3>
<p>Card with soft lavender border accent. Used for highlighted or selected content where a gentle visual distinction is needed.</p>
</div>
</div>
<div class="light-zone-preview">
<div class="section-title" style="color: #00000066;">LIGHT ZONE CARDS</div>
<div class="card-grid" style="margin-top: 16px;">
<div class="card">
<div class="card-label">BUSINESS</div>
<h3>Platform Feature</h3>
<p>Card on white surface with rgba(0,0,0,0.08) border. Used in bright business sections for approachable platform overview.</p>
</div>
<div class="card">
<div class="card-label">FEATURE</div>
<h3>Product Overview</h3>
<p>The light zone creates an open, inviting feel that makes enterprise AI infrastructure feel accessible and friendly.</p>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- SPACING -->
<section class="section" id="spacing">
<div class="section-title">05 / Spacing Scale</div>
<h2 class="section-heading">Spacing System</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px; font-size: 18px; letter-spacing: -0.18px;">Base unit: 8px. Scale: 1px to 120px.</p>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-box" style="width: 4px; height: 4px;"></div><div class="spacing-label">1px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 176px; height: 176px;"></div><div class="spacing-label">44px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
</div>
</section>
<hr class="section-divider">
<!-- BORDER RADIUS -->
<section class="section">
<div class="section-title">06 / Border Radius Scale</div>
<h2 class="section-heading">Border Radius</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px; font-size: 18px; letter-spacing: -0.18px;">Deliberately restrained: only 4px and 8px. No pills, no generous rounding.</p>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Buttons, badges, tags</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Cards, containers</div></div>
</div>
</section>
<hr class="section-divider">
<!-- ELEVATION -->
<section class="section" id="elevation">
<div class="section-title">07 / Elevation & Depth</div>
<h2 class="section-heading">Depth & Elevation</h2>
<div class="elevation-grid">
<div class="elevation-card elevation-flat">
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow, no border. Page background and text blocks.</div></div>
<div class="elevation-level">LEVEL 0</div>
</div>
<div class="elevation-card elevation-contained">
<div><div class="elevation-name">Contained</div><div class="elevation-desc">1px solid rgba(255,255,255,0.12) on dark or rgba(0,0,0,0.08) on light. Cards, badges, containers.</div></div>
<div class="elevation-level">LEVEL 1</div>
</div>
<div class="elevation-card elevation-elevated">
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Dark-blue-tinted shadow: rgba(1,1,32,0.1) 0px 4px 10px. Feature cards and hover states.</div></div>
<div class="elevation-level">LEVEL 2</div>
</div>
<div class="elevation-card elevation-light-zone">
<div><div class="elevation-name">Light Zone</div><div class="elevation-desc">Pure White (#ffffff) full-width background. Business, platform, stats sections.</div></div>
<div class="elevation-level">LEVEL 3</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>

897
design-md/together.ai/preview.html Normal file
View File

@@ -0,0 +1,897 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Together AI (Light)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--color-brand-magenta: #ef2cc1;
--color-brand-orange: #fc4c02;
--color-dark-blue: #010120;
--color-soft-lavender: #bdbbff;
--color-black-40: #00000066;
--color-white: #ffffff;
--color-black: #000000;
--font-display: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;
--font-mono: 'Space Mono', 'Courier New', Consolas, monospace;
/* Light mode tokens */
--bg-page: #ffffff;
--bg-card: #ffffff;
--bg-nav: rgba(255,255,255,0.95);
--text-primary: #000000;
--text-secondary: #00000066;
--text-muted: #00000066;
--border-color: rgba(0,0,0,0.08);
--border-subtle: rgba(0,0,0,0.08);
--glass-bg: rgba(0,0,0,0.08);
--badge-bg: rgba(0,0,0,0.04);
--shadow-card: rgba(1, 1, 32, 0.1) 0px 4px 10px;
--section-label-color: var(--color-black);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.30;
letter-spacing: -0.16px;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 40px;
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-brand {
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.18px;
display: flex;
align-items: center;
gap: 8px;
}
.nav-brand .logo-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-brand-magenta), var(--color-brand-orange));
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-primary);
text-decoration: none;
font-size: 16px;
font-weight: 400;
letter-spacing: -0.16px;
transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 0.6; }
.nav-cta {
background: var(--color-dark-blue);
color: var(--color-white);
padding: 8px 20px;
border: none;
border-radius: 4px;
font-size: 16px;
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.16px;
cursor: pointer;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg,
rgba(239,44,193,0.08) 0%,
rgba(189,187,255,0.12) 35%,
rgba(130,170,255,0.08) 65%,
rgba(255,255,255,0) 100%
);
pointer-events: none;
}
.hero-gradient-orb {
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 500px;
background: radial-gradient(ellipse at center,
rgba(239,44,193,0.10) 0%,
rgba(189,187,255,0.15) 30%,
rgba(130,170,255,0.08) 60%,
transparent 80%
);
filter: blur(40px);
pointer-events: none;
}
.hero h1 {
font-family: var(--font-display);
font-size: 64px;
font-weight: 500;
line-height: 1.10;
letter-spacing: -1.92px;
margin-bottom: 24px;
position: relative;
color: var(--text-primary);
}
.hero p {
color: var(--text-secondary);
font-size: 18px;
font-weight: 400;
line-height: 1.30;
letter-spacing: -0.18px;
margin-bottom: 40px;
position: relative;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
.btn-dark-solid {
background: var(--color-dark-blue);
color: var(--color-white);
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.16px;
cursor: pointer;
}
.btn-outlined {
background: transparent;
color: var(--text-primary);
padding: 12px 24px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 16px;
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.16px;
cursor: pointer;
}
/* MONO LABEL */
.mono-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.055px;
color: var(--text-secondary);
margin-bottom: 12px;
}
/* SECTIONS */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px;
}
.section-title {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.055px;
color: var(--text-secondary);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-display);
font-size: 40px;
font-weight: 500;
line-height: 1.20;
letter-spacing: -0.8px;
margin-bottom: 48px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* COLOR PALETTE */
.color-group { margin-bottom: 40px; }
.color-group-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.22px;
margin-bottom: 20px;
color: var(--text-primary);
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.color-swatch {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
}
.color-swatch-info {
padding: 12px;
background: var(--bg-card);
}
.color-swatch-name {
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.13px;
margin-bottom: 2px;
}
.color-swatch-hex {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
margin-bottom: 4px;
}
.color-swatch-role {
font-family: var(--font-display);
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
letter-spacing: -0.12px;
}
/* TYPOGRAPHY */
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-sample-text { margin-bottom: 8px; }
.type-sample-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
}
/* BUTTONS */
.button-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.button-demo { text-align: center; }
.button-demo-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 0.055px;
}
.btn-glass-dark {
background: rgba(255,255,255,0.12);
color: var(--color-white);
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.16px;
cursor: pointer;
}
.btn-glass-dark-wrapper {
background: var(--color-dark-blue);
display: inline-block;
padding: 16px;
border-radius: 8px;
}
/* BADGE */
.badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08px;
padding: 2px 8px;
border-radius: 4px;
background: var(--badge-bg);
border: 1px solid var(--border-color);
color: var(--text-primary);
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 8px;
padding: 28px;
}
.card-bordered {
border: 1px solid var(--border-color);
}
.card-elevated {
border: 1px solid var(--border-color);
box-shadow: var(--shadow-card);
}
.card-stat {
border: 1px solid var(--border-color);
text-align: center;
padding: 32px 24px;
}
.card h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.22px;
margin-bottom: 12px;
}
.card p {
color: var(--text-secondary);
font-size: 16px;
line-height: 1.30;
letter-spacing: -0.16px;
}
.card-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.055px;
color: var(--text-muted);
margin-bottom: 16px;
}
.stat-number {
font-family: var(--font-display);
font-size: 64px;
font-weight: 500;
line-height: 1.10;
letter-spacing: -1.92px;
margin-bottom: 8px;
}
.stat-caption {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
color: var(--text-secondary);
line-height: 1.40;
}
/* DARK ZONE CARD PREVIEW */
.dark-zone-preview {
background: var(--color-dark-blue);
border-radius: 8px;
padding: 32px;
margin-top: 24px;
}
.dark-zone-preview .card {
background: transparent;
border: 1px solid rgba(255,255,255,0.12);
color: #ffffff;
}
.dark-zone-preview .card h3 { color: #ffffff; }
.dark-zone-preview .card p { color: rgba(255,255,255,0.6); }
.dark-zone-preview .card-label { color: rgba(255,255,255,0.5); }
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: rgba(189,187,255,0.2);
border: 1px solid rgba(189,187,255,0.5);
border-radius: 2px;
margin-bottom: 8px;
}
.spacing-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
/* RADIUS */
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.radius-item { text-align: center; }
.radius-box {
width: 80px;
height: 80px;
background: var(--bg-card);
border: 1px solid var(--border-color);
margin-bottom: 8px;
}
.radius-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
.radius-context {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.elevation-card {
background: var(--bg-card);
border-radius: 8px;
padding: 24px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat { border: none; background: var(--bg-page); }
.elevation-contained { border: 1px solid var(--border-color); }
.elevation-elevated { border: 1px solid var(--border-color); box-shadow: var(--shadow-card); }
.elevation-dark-zone {
background: var(--color-dark-blue);
color: var(--color-white);
border: none;
}
.elevation-dark-zone .elevation-name,
.elevation-dark-zone .elevation-desc { color: var(--color-white); }
.elevation-dark-zone .elevation-desc { opacity: 0.6; }
.elevation-dark-zone .elevation-level { color: var(--color-soft-lavender); }
.elevation-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.16px;
margin-bottom: 8px;
}
.elevation-desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
letter-spacing: -0.13px;
}
.elevation-level {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.055px;
margin-top: 12px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links a:not(.nav-cta-wrapper) { display: none; }
.hero { padding: 80px 20px 60px; }
.hero h1 { font-size: 40px; letter-spacing: -1.2px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 28px; letter-spacing: -0.42px; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card-grid { grid-template-columns: 1fr; }
.hero-buttons { flex-direction: column; align-items: center; }
.button-row { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-brand"><div class="logo-dot"></div> Together AI</div>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#buttons">Buttons</a>
<a href="#cards">Cards</a>
<a href="#spacing">Spacing</a>
<a href="#elevation">Elevation</a>
<button class="nav-cta">Get Started</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-gradient-orb"></div>
<h1>Design System Preview:<br>Together AI</h1>
<p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons">
<button class="btn-dark-solid">Explore Tokens</button>
<button class="btn-outlined">View Source</button>
</div>
</section>
<hr class="section-divider">
<!-- COLORS -->
<section class="section" id="colors">
<div class="section-title">01 / Color Palette</div>
<h2 class="section-heading">Color Palette & Roles</h2>
<div class="color-group">
<h3 class="color-group-title">Primary Brand</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ef2cc1;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Brand Magenta</div>
<div class="color-swatch-hex">#ef2cc1</div>
<div class="color-swatch-role">Gradient illustrations only, never UI chrome</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fc4c02;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Brand Orange</div>
<div class="color-swatch-hex">#fc4c02</div>
<div class="color-swatch-role">Gradient endpoints, warm accent moments</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #010120; border-bottom: 1px solid rgba(255,255,255,0.12);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Dark Blue</div>
<div class="color-swatch-hex">#010120</div>
<div class="color-swatch-role">Dark surface, research sections, footer</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Secondary & Accent</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #bdbbff;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Soft Lavender</div>
<div class="color-swatch-hex">#bdbbff</div>
<div class="color-swatch-role">Subtle accents, secondary indicators, highlights</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #00000066;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Black 40</div>
<div class="color-swatch-hex">#00000066</div>
<div class="color-swatch-role">De-emphasized overlays, secondary text</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Background</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.08);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Primary light-section page background</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #010120; border-bottom: 1px solid rgba(255,255,255,0.12);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Dark Blue</div>
<div class="color-swatch-hex">#010120</div>
<div class="color-swatch-role">Research, footer, technical sections</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: rgba(255,255,255,0.12); border: 1px solid rgba(0,0,0,0.08);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Glass Light</div>
<div class="color-swatch-hex">rgba(255,255,255,0.12)</div>
<div class="color-swatch-role">Frosted glass button backgrounds on dark</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.08);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Glass Dark</div>
<div class="color-swatch-hex">rgba(0,0,0,0.08)</div>
<div class="color-swatch-role">Subtle tinted surfaces on light sections</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Neutrals & Text</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #000000;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure Black</div>
<div class="color-swatch-hex">#000000</div>
<div class="color-swatch-role">Primary text on light surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.08);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Primary text on dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.08);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Black 8%</div>
<div class="color-swatch-hex">rgba(0,0,0,0.08)</div>
<div class="color-swatch-role">Borders on light surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: rgba(255,255,255,0.12); border: 1px solid rgba(0,0,0,0.08);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">White 12%</div>
<div class="color-swatch-hex">rgba(255,255,255,0.12)</div>
<div class="color-swatch-role">Borders on dark surfaces</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Gradient System</h3>
<div class="color-grid">
<div class="color-swatch" style="grid-column: span 2;">
<div class="color-swatch-block" style="background: linear-gradient(135deg, rgba(239,44,193,0.3), rgba(189,187,255,0.4), rgba(130,170,255,0.3)); height: 100px;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pastel Cloud Gradient</div>
<div class="color-swatch-hex">pink -> lavender -> blue</div>
<div class="color-swatch-role">Hero illustrations, decorative backgrounds, abstract forms</div>
</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<div class="section-title">02 / Typography Scale</div>
<h2 class="section-heading">Typography Rules</h2>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 64px; font-weight: 500; line-height: 1.10; letter-spacing: -1.92px;">Display Hero</div>
<div class="type-sample-label">Display / Hero -- 64px / 500 / 1.10 / -1.92px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1.20; letter-spacing: -0.8px;">Section Heading</div>
<div class="type-sample-label">Section Heading -- 40px / 500 / 1.20 / -0.8px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -0.42px;">Sub-heading</div>
<div class="type-sample-label">Sub-heading -- 28px / 500 / 1.15 / -0.42px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -0.22px;">Feature Title</div>
<div class="type-sample-label">Feature Title -- 22px / 500 / 1.15 / -0.22px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1.30; letter-spacing: -0.18px;">Body large text for descriptions and section introductions. The Future provides geometric modernist aesthetic for all UI copy.</div>
<div class="type-sample-label">Body Large -- 18px / 400 / 1.30 / -0.18px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: 1.30; letter-spacing: -0.16px;">Standard body text for paragraphs, navigation links, and button labels. Tight line-height creates dense, information-rich layouts.</div>
<div class="type-sample-label">Body / Button -- 16px / 400 / 1.30 / -0.16px -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 14px; font-weight: 400; line-height: 1.40; color: var(--text-secondary);">Caption and metadata text for descriptions</div>
<div class="type-sample-label">Caption -- 14px / 400 / 1.40 / normal -- "The Future" (system-ui)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 1.00; letter-spacing: 0.08px; text-transform: uppercase;">MONO SECTION LABEL</div>
<div class="type-sample-label">Mono Label -- 16px / 500 / 1.00 / 0.08px / uppercase -- "PP Neue Montreal Mono" (Space Mono)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.40; letter-spacing: 0.055px; text-transform: uppercase; color: var(--text-muted);">MONO SMALL UPPERCASE TAG</div>
<div class="type-sample-label">Mono Small -- 11px / 500 / 1.40 / 0.055px / uppercase -- "PP Neue Montreal Mono" (Space Mono)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1.40; letter-spacing: 0.05px; text-transform: uppercase; color: var(--text-muted);">MONO MICRO LABEL</div>
<div class="type-sample-label">Mono Micro -- 10px / 400 / 1.40 / 0.05px / uppercase -- "PP Neue Montreal Mono" (Space Mono)</div>
</div>
</section>
<hr class="section-divider">
<!-- BUTTONS -->
<section class="section" id="buttons">
<div class="section-title">03 / Button Variants</div>
<h2 class="section-heading">Buttons</h2>
<div class="button-row">
<div class="button-demo">
<button class="btn-dark-solid">Get Started</button>
<div class="button-demo-label">Dark Solid CTA</div>
</div>
<div class="button-demo">
<button class="btn-outlined">View Docs</button>
<div class="button-demo-label">Outlined Light</div>
</div>
<div class="button-demo">
<div class="btn-glass-dark-wrapper">
<button class="btn-glass-dark">Explore</button>
</div>
<div class="button-demo-label">Glass on Dark</div>
</div>
<div class="button-demo">
<span class="badge">INFERENCE</span>
<div class="button-demo-label">Badge / Tag</div>
</div>
</div>
<!-- Stats bar preview -->
<div style="margin-top: 48px;">
<div class="section-title">Stats Bar</div>
<div class="card-grid" style="grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px;">
<div class="card card-stat">
<div class="stat-number">2x</div>
<div class="stat-caption">Faster inference speed</div>
</div>
<div class="card card-stat">
<div class="stat-number">60%</div>
<div class="stat-caption">Cost reduction</div>
</div>
<div class="card card-stat">
<div class="stat-number">90%</div>
<div class="stat-caption">GPU utilization</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-title">04 / Card Examples</div>
<h2 class="section-heading">Cards & Containers</h2>
<div class="card-grid">
<div class="card card-bordered">
<div class="card-label">CONTAINED</div>
<h3>Standard Card</h3>
<p>Content card with 1px solid rgba(0,0,0,0.08) border and 8px radius. The default container for features and content sections on light surfaces.</p>
</div>
<div class="card card-elevated">
<div class="card-label">ELEVATED</div>
<h3>Shadow Card</h3>
<p>Elevated card with dark-blue-tinted shadow (rgba(1,1,32,0.1) 0px 4px 10px). Used for feature cards and hover states. Subtle blue-ish cast.</p>
</div>
<div class="card card-bordered" style="border-color: var(--color-soft-lavender);">
<div class="card-label" style="color: var(--color-soft-lavender);">ACCENT</div>
<h3>Lavender Accent</h3>
<p>Card with soft lavender border accent. Used for highlighted or selected content where a gentle visual distinction is needed.</p>
</div>
</div>
<div class="dark-zone-preview">
<div class="section-title" style="color: rgba(255,255,255,0.5);">DARK ZONE CARDS</div>
<div class="card-grid" style="margin-top: 16px;">
<div class="card card-bordered">
<div class="card-label">RESEARCH</div>
<h3>Research Paper</h3>
<p>Card on Dark Blue (#010120) surface with rgba(255,255,255,0.12) border. Used in research and technical content sections.</p>
</div>
<div class="card card-bordered">
<div class="card-label">TECHNICAL</div>
<h3>Technical Content</h3>
<p>The dark zone creates a distinct academic atmosphere, separating research messaging from the bright business sections.</p>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- SPACING -->
<section class="section" id="spacing">
<div class="section-title">05 / Spacing Scale</div>
<h2 class="section-heading">Spacing System</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px; font-size: 18px; letter-spacing: -0.18px;">Base unit: 8px. Scale: 1px to 120px.</p>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-box" style="width: 4px; height: 4px;"></div><div class="spacing-label">1px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 176px; height: 176px;"></div><div class="spacing-label">44px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
</div>
</section>
<hr class="section-divider">
<!-- BORDER RADIUS -->
<section class="section">
<div class="section-title">06 / Border Radius Scale</div>
<h2 class="section-heading">Border Radius</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px; font-size: 18px; letter-spacing: -0.18px;">Deliberately restrained: only 4px and 8px. No pills, no generous rounding.</p>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Buttons, badges, tags</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Cards, containers</div></div>
</div>
</section>
<hr class="section-divider">
<!-- ELEVATION -->
<section class="section" id="elevation">
<div class="section-title">07 / Elevation & Depth</div>
<h2 class="section-heading">Depth & Elevation</h2>
<div class="elevation-grid">
<div class="elevation-card elevation-flat">
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow, no border. Page background and text blocks.</div></div>
<div class="elevation-level">LEVEL 0</div>
</div>
<div class="elevation-card elevation-contained">
<div><div class="elevation-name">Contained</div><div class="elevation-desc">1px solid rgba(0,0,0,0.08) on light or rgba(255,255,255,0.12) on dark. Cards, badges, containers.</div></div>
<div class="elevation-level">LEVEL 1</div>
</div>
<div class="elevation-card elevation-elevated">
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Dark-blue-tinted shadow: rgba(1,1,32,0.1) 0px 4px 10px. Feature cards and hover states.</div></div>
<div class="elevation-level">LEVEL 2</div>
</div>
<div class="elevation-card elevation-dark-zone">
<div><div class="elevation-name">Dark Zone</div><div class="elevation-desc">Dark Blue (#010120) full-width background. Research, footer, technical sections.</div></div>
<div class="elevation-level">LEVEL 3</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>