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

261
design-md/replicate/DESIGN.md Normal file
View File

@@ -0,0 +1,261 @@
# Design System: Replicate
## 1. Visual Theme & Atmosphere
Replicate's interface is a developer playground crackling with creative energy — a bold, high-contrast design that feels more like a music festival poster than a typical API platform. The hero section explodes with a vibrant orange-red-magenta gradient that immediately signals "this is where AI models come alive," while the body of the page grounds itself in a clean white canvas where code snippets and model galleries take center stage.
The design personality is defined by two extreme choices: **massive display typography** (up to 128px) using the custom rb-freigeist-neue face, and **exclusively pill-shaped geometry** (9999px radius on everything). The display font is thick, bold, and confident — its heavy weight at enormous sizes creates text that feels like it's shouting with joy rather than whispering authority. Combined with basier-square for body text (a clean geometric sans) and JetBrains Mono for code, the system serves developers who want power and playfulness in equal measure.
What makes Replicate distinctive is its community-powered energy. The model gallery with AI-generated images, the dotted-underline links, the green status badges, and the "Imagine what you can build" closing manifesto all create a space that feels alive and participatory — not a corporate product page but a launchpad for creative developers.
**Key Characteristics:**
- Explosive orange-red-magenta gradient hero (#ea2804 brand anchor)
- Massive display typography (128px) in heavy rb-freigeist-neue
- Exclusively pill-shaped geometry: 9999px radius on EVERYTHING
- High-contrast black (#202020) and white palette with red brand accent
- Developer-community energy: model galleries, code examples, dotted-underline links
- Green status badges (#2b9a66) for live/operational indicators
- Bold/heavy font weights (600-700) creating maximum typographic impact
- Playful closing manifesto: "Imagine what you can build."
## 2. Color Palette & Roles
### Primary
- **Replicate Dark** (`#202020`): The primary text color and dark surface — a near-black that's the anchor of all text and borders. Slightly warmer than pure #000.
- **Replicate Red** (`#ea2804`): The core brand color — a vivid, saturated orange-red used in the hero gradient, accent borders, and high-signal moments.
- **Secondary Red** (`#dd4425`): A slightly warmer variant for button borders and link hover states.
### Secondary & Accent
- **Status Green** (`#2b9a66`): Badge/pill background for "running" or operational status indicators.
- **GitHub Dark** (`#24292e`): A blue-tinted dark used for code block backgrounds and developer contexts.
### Surface & Background
- **Pure White** (`#ffffff`): The primary page body background.
- **Near White** (`#fcfcfc`): Button text on dark surfaces and the lightest content.
- **Hero Gradient**: A dramatic orange → red → magenta → pink gradient for the hero section. Transitions from warm (#ea2804 family) through hot pink.
### Neutrals & Text
- **Medium Gray** (`#646464`): Secondary body text and de-emphasized content.
- **Warm Gray** (`#4e4e4e`): Emphasized secondary text.
- **Mid Silver** (`#8d8d8d`): Tertiary text, footnotes.
- **Light Silver** (`#bbbbbb`): Dotted-underline link decoration color, muted metadata.
- **Pure Black** (`#000000`): Maximum-emphasis borders and occasional text.
### Gradient System
- **Hero Blaze**: A dramatic multi-stop gradient flowing through orange (`#ea2804`) → red → magenta → hot pink. This gradient occupies the full hero section and is the most visually dominant element on the page.
- **Dark Sections**: Deep dark (#202020) sections with white/near-white text provide contrast against the white body.
## 3. Typography Rules
### Font Family
- **Display**: `rb-freigeist-neue`, with fallbacks: `ui-sans-serif, system-ui`
- **Body / UI**: `basier-square`, with fallbacks: `ui-sans-serif, system-ui`
- **Code**: `jetbrains-mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Mega | rb-freigeist-neue | 128px (8rem) | 700 | 1.00 (tight) | normal | The maximum: closing manifesto |
| Display / Hero | rb-freigeist-neue | 72px (4.5rem) | 700 | 1.00 (tight) | -1.8px | Hero section headline |
| Section Heading | rb-freigeist-neue | 48px (3rem) | 400–700 | 1.00 (tight) | normal | Feature section titles |
| Sub-heading | rb-freigeist-neue | 30px (1.88rem) | 600 | 1.20 (tight) | normal | Card headings |
| Sub-heading Sans | basier-square | 38.4px (2.4rem) | 400 | 0.83 (ultra-tight) | normal | Large body headings |
| Feature Title | basier-square / rb-freigeist-neue | 18px (1.13rem) | 600 | 1.56 | normal | Small section titles, labels |
| Body Large | basier-square | 20px (1.25rem) | 400 | 1.40 | normal | Intro paragraphs |
| Body / Button | basier-square | 16–18px (1–1.13rem) | 400–600 | 1.50–1.56 | normal | Standard text, buttons |
| Caption | basier-square | 14px (0.88rem) | 400–600 | 1.43 | -0.35px to normal | Metadata, descriptions |
| Small / Tag | basier-square | 12px (0.75rem) | 400 | 1.33 | normal | Tags (lowercase transform) |
| Code | jetbrains-mono | 14px (0.88rem) | 400 | 1.43 | normal | Code snippets, API examples |
| Code Small | jetbrains-mono | 11px (0.69rem) | 400 | 1.50 | normal | Tiny code references |
### Principles
- **Heavy display, light body**: rb-freigeist-neue at 700 weight creates thundering headlines, while basier-square at 400 handles body text with quiet efficiency. The contrast is extreme and intentional.
- **128px is a real size**: The closing manifesto "Imagine what you can build." uses 128px — bigger than most mobile screens. This is the design equivalent of shouting from a rooftop.
- **Negative tracking on hero**: -1.8px letter-spacing at 72px creates dense, impactful hero text.
- **Lowercase tags**: 12px basier-square uses `text-transform: lowercase` — an unusual choice that creates a casual, developer-friendly vibe.
- **Weight 600 as emphasis**: When basier-square needs emphasis, it uses 600 (semibold) — never bold (700), which is reserved for rb-freigeist-neue display text.
## 4. Component Stylings
### Buttons
**Dark Solid**
- Background: Replicate Dark (`#202020`)
- Text: Near White (`#fcfcfc`)
- Padding: 0px 4px (extremely compact)
- Outline: Replicate Dark 4px solid
- Radius: pill-shaped (implied by system)
- Maximum emphasis — dark pill on light surface
**White Outlined**
- Background: Pure White (`#ffffff`)
- Text: Replicate Dark (`#202020`)
- Border: `1px solid #202020`
- Radius: pill-shaped
- Clean outlined pill for secondary actions
**Transparent Glass**
- Background: `rgba(255, 255, 255, 0.1)` (frosted glass)
- Text: Replicate Dark (`#202020`)
- Padding: 6px 56px 6px 28px (asymmetric — icon/search layout)
- Border: transparent
- Outline: Light Silver (`#bbbbbb`) 1px solid
- Used for search/input-like buttons
### Cards & Containers
- Background: Pure White or subtle gray
- Border: `1px solid #202020` for prominent containment
- Radius: pill-shaped (9999px) for badges, labels, images
- Shadow: minimal standard shadows
- Model gallery: grid of AI-generated image thumbnails
- Accent border: `1px solid #ea2804` for highlighted/featured items
### Inputs & Forms
- Background: `rgba(255, 255, 255, 0.1)` (frosted glass)
- Text: Replicate Dark (`#202020`)
- Border: transparent with outline
- Padding: 6px 56px 6px 28px (search-bar style)
### Navigation
- Clean horizontal nav on white
- Logo: Replicate wordmark in dark
- Links: dark text with dotted underline on hover
- CTA: Dark pill button
- GitHub link and sign-in
### Image Treatment
- AI-generated model output images in a gallery grid
- Pill-shaped image containers (9999px)
- Full-width gradient hero section
- Product screenshots with dark backgrounds
### Distinctive Components
**Model Gallery Grid**
- Horizontal scrolling or grid of AI-generated images
- Each image in a pill-shaped container
- Model names and run counts displayed
- The visual heart of the community platform
**Dotted Underline Links**
- Links use `text-decoration: underline dotted #bbbbbb`
- A distinctive, developer-notebook aesthetic
- Lighter and more casual than solid underlines
**Status Badges**
- Status Green (`#2b9a66`) background with white text
- Pill-shaped (9999px)
- 14px font size
- Indicates model availability/operational status
**Manifesto Section**
- "Imagine what you can build." at 128px
- Dark background with white text
- Images embedded between words
- The emotional climax of the page
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 160px, 192px
- Button padding: varies widely (0px 4px to 6px 56px)
- Section vertical spacing: very generous (96–192px)
### Grid & Container
- Fluid width with responsive constraints
- Hero: full-width gradient with centered content
- Model gallery: multi-column responsive grid
- Feature sections: mixed layouts
- Code examples: contained dark blocks
### Whitespace Philosophy
- **Bold and generous**: Massive spacing between sections (up to 192px) creates distinct zones.
- **Dense within galleries**: Model images are tightly packed in the grid for browsable density.
- **The gradient IS the whitespace**: The hero gradient section occupies significant vertical space as a colored void.
### Border Radius Scale
- **Pill (9999px)**: The ONLY radius in the system. Everything interactive, every image, every badge, every label, every container uses 9999px. This is the most extreme pill-radius commitment in any major tech brand.
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | White body, text blocks |
| Bordered (Level 1) | `1px solid #202020` | Cards, buttons, containers |
| Accent Border (Level 2) | `1px solid #ea2804` | Featured/highlighted items |
| Gradient Hero (Level 3) | Full-width blaze gradient | Hero section, maximum visual impact |
| Dark Section (Level 4) | Dark bg (#202020) with light text | Manifesto, footer, feature sections |
**Shadow Philosophy**: Replicate relies on **borders and background color** for depth rather than shadows. The `1px solid #202020` border is the primary containment mechanism. The dramatic gradient hero and dark/light section alternation provide all the depth the design needs.
## 7. Do's and Don'ts
### Do
- Use pill-shaped (9999px) radius on EVERYTHING — buttons, images, badges, containers
- Use rb-freigeist-neue at weight 700 for display text — go big (72px+) or go home
- Use the orange-red brand gradient for hero sections
- Use Replicate Dark (#202020) as the primary dark — not pure black
- Apply dotted underline decoration on text links (#bbbbbb)
- Use Status Green (#2b9a66) for operational/success badges
- Keep body text in basier-square at 400–600 weight
- Use JetBrains Mono for all code content
- Create a "manifesto" section with 128px type for emotional impact
### Don't
- Don't use any border-radius other than 9999px — the pill system is absolute
- Don't use the brand red (#ea2804) as a surface/background color — it's for gradients and accent borders
- Don't reduce display text below 48px on desktop — the heavy display font needs size to breathe
- Don't use light/thin font weights on rb-freigeist-neue — 600–700 is the range
- Don't use solid underlines on links — dotted is the signature
- Don't add drop shadows — depth comes from borders and background color
- Don't use warm neutrals — the gray scale is purely neutral (#202020 → #bbbbbb)
- Don't skip the code examples — they're primary content, not decoration
- Don't make the hero gradient subtle — it should be BOLD and vibrant
## 8. Responsive Behavior
### Breakpoints
*No explicit breakpoints detected — likely using fluid/container-query responsive system.*
### Touch Targets
- Pill buttons with generous padding
- Gallery images as large touch targets
- Navigation adequately spaced
### Collapsing Strategy
- **Hero text**: 128px → 72px → 48px progressive scaling
- **Model gallery**: Grid reduces columns
- **Navigation**: Collapses to hamburger
- **Manifesto**: Scales down but maintains impact
### Image Behavior
- AI-generated images scale within pill containers
- Gallery reflows to fewer columns on narrow screens
- Hero gradient maintained at all sizes
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary Text: "Replicate Dark (#202020)"
- Page Background: "Pure White (#ffffff)"
- Brand Accent: "Replicate Red (#ea2804)"
- Secondary Text: "Medium Gray (#646464)"
- Muted/Decoration: "Light Silver (#bbbbbb)"
- Status: "Status Green (#2b9a66)"
- Dark Surface: "Replicate Dark (#202020)"
### Example Component Prompts
- "Create a hero section with a vibrant orange-red-magenta gradient background. Headline at 72px rb-freigeist-neue weight 700, white text, -1.8px letter-spacing. Include a dark pill CTA button and a white outlined pill button."
- "Design a model card with pill-shaped (9999px) image container, model name at 16px basier-square weight 600, run count at 14px in Medium Gray. Border: 1px solid #202020."
- "Build a status badge: pill-shaped (9999px), Status Green (#2b9a66) background, white text at 14px basier-square."
- "Create a manifesto section on Replicate Dark (#202020) with 'Imagine what you can build.' at 128px rb-freigeist-neue weight 700, white text. Embed small AI-generated images between the words."
- "Design a code block: dark background (#24292e), JetBrains Mono at 14px, white text. Pill-shaped container."
### Iteration Guide
1. Everything is pill-shaped — never specify any other border-radius
2. Display text is HEAVY — weight 700, sizes 48px+
3. Links use dotted underline (#bbbbbb) — never solid
4. The gradient hero is the visual anchor — make it bold
5. Use basier-square for body, rb-freigeist-neue for display, JetBrains Mono for code

25
design-md/replicate/README.md Normal file
View File

@@ -0,0 +1,25 @@
# Replicate — Design System
> Design.md extracted from the public [replicate](https://replicate.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 Replicate 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
![Replicate Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/replicate/preview-dark-screenshot.png)
### Light Mode
![Replicate Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/replicate/preview-screenshot.png)

828
design-md/replicate/preview-dark.html Normal file
View File

@@ -0,0 +1,828 @@
<!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: Replicate (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=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
<style>
:root {
--color-replicate-dark: #202020;
--color-replicate-red: #ea2804;
--color-secondary-red: #dd4425;
--color-status-green: #2b9a66;
--color-github-dark: #24292e;
--color-white: #ffffff;
--color-near-white: #fcfcfc;
--color-medium-gray: #646464;
--color-warm-gray: #4e4e4e;
--color-mid-silver: #8d8d8d;
--color-light-silver: #bbbbbb;
--color-pure-black: #000000;
--font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
/* Dark mode */
--bg-page: #202020;
--bg-card: #2a2a2a;
--bg-nav: rgba(32,32,32,0.95);
--text-primary: #fcfcfc;
--text-secondary: #bbbbbb;
--text-muted: #8d8d8d;
--border-color: #4e4e4e;
--border-subtle: #3a3a3a;
--section-label-color: var(--color-replicate-red);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-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: 700;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 8px;
color: var(--text-primary);
}
.nav-brand .logo-icon {
width: 20px;
height: 20px;
background: var(--color-replicate-red);
border-radius: 9999px;
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-secondary);
text-decoration: underline dotted var(--color-warm-gray);
text-underline-offset: 4px;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--color-replicate-red); }
.nav-cta {
background: var(--color-near-white);
color: var(--color-replicate-dark);
padding: 8px 24px;
border: none;
border-radius: 9999px;
font-size: 14px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
overflow: hidden;
background: linear-gradient(135deg, #ea2804 0%, #d42020 25%, #c41858 50%, #e0407a 75%, #f06090 100%);
}
.hero h1 {
font-family: var(--font-display);
font-size: 72px;
font-weight: 700;
line-height: 1.0;
letter-spacing: -1.8px;
margin-bottom: 24px;
color: #ffffff;
position: relative;
}
.hero p {
color: rgba(255,255,255,0.85);
font-size: 20px;
line-height: 1.4;
margin-bottom: 40px;
position: relative;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
.btn-hero-dark {
background: var(--color-replicate-dark);
color: var(--color-near-white);
padding: 12px 32px;
border: none;
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
outline: 4px solid var(--color-replicate-dark);
}
.btn-hero-outlined {
background: rgba(255,255,255,0.15);
color: #ffffff;
padding: 12px 32px;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
backdrop-filter: blur(8px);
}
/* SECTIONS */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px;
}
.section-title {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--section-label-color);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
line-height: 1.0;
letter-spacing: -0.5px;
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-size: 20px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text-secondary);
}
.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: 9999px;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
border-radius: 9999px 9999px 0 0;
}
.color-swatch-info {
padding: 12px 16px;
background: var(--bg-card);
}
.color-swatch-name { font-size: 13px; font-weight: 600; 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-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* 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: 24px;
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: lowercase;
letter-spacing: 0.3px;
}
.btn-dark-solid {
background: var(--color-near-white);
color: var(--color-replicate-dark);
padding: 12px 32px;
border: none;
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
.btn-white-outlined {
background: transparent;
color: var(--color-near-white);
padding: 12px 32px;
border: 1px solid var(--border-color);
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
.btn-frosted-glass {
background: rgba(255,255,255,0.08);
color: var(--color-light-silver);
padding: 6px 56px 6px 28px;
border: none;
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 400;
cursor: pointer;
outline: 1px solid var(--color-warm-gray);
}
.btn-red-accent {
background: transparent;
color: var(--color-replicate-red);
padding: 12px 32px;
border: 1px solid var(--color-replicate-red);
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
.btn-status {
background: var(--color-status-green);
color: #ffffff;
padding: 6px 18px;
border: none;
border-radius: 9999px;
font-size: 14px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 9999px;
padding: 28px 32px;
}
.card-standard { border: 1px solid var(--border-color); }
.card-accent { border: 1px solid var(--color-replicate-red); }
.card-darker {
background: #1a1a1a;
color: var(--color-near-white);
border: 1px solid #3a3a3a;
}
.card h3 {
font-family: var(--font-display);
font-size: 30px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 12px;
}
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.card-darker p { color: var(--color-mid-silver); }
.card-label {
font-family: var(--font-body);
font-size: 12px;
text-transform: lowercase;
letter-spacing: 0.3px;
color: var(--color-replicate-red);
margin-bottom: 16px;
}
/* CODE BLOCK */
.code-block {
background: #1a1a1a;
border: 1px solid var(--border-color);
border-radius: 9999px;
padding: 20px 32px;
margin-top: 24px;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.43;
color: #e6edf3;
overflow-x: auto;
}
.code-block .keyword { color: #ff7b72; }
.code-block .string { color: #a5d6ff; }
.code-block .comment { color: #8b949e; }
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: rgba(234,40,4,0.12);
border: 1px solid rgba(234,40,4,0.3);
border-radius: 9999px;
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: 24px; 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: 9999px;
padding: 24px 28px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat { border: none; background: var(--bg-page); }
.elevation-bordered { border: 1px solid var(--border-color); }
.elevation-accent-border { border: 1px solid var(--color-replicate-red); }
.elevation-gradient {
background: linear-gradient(135deg, #ea2804, #c41858, #e0407a);
color: #ffffff;
}
.elevation-dark-section {
background: #1a1a1a;
color: var(--color-near-white);
border: 1px solid #3a3a3a;
}
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.elevation-gradient .elevation-desc,
.elevation-dark-section .elevation-desc { color: rgba(255,255,255,0.75); }
.elevation-level {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-replicate-red);
text-transform: lowercase;
letter-spacing: 0.3px;
margin-top: 12px;
}
.elevation-gradient .elevation-level,
.elevation-dark-section .elevation-level { color: rgba(255,255,255,0.6); }
/* DOTTED LINK STYLE */
.dotted-link {
color: var(--text-primary);
text-decoration: underline dotted var(--color-warm-gray);
text-underline-offset: 4px;
cursor: pointer;
}
.dotted-link:hover { color: var(--color-replicate-red); }
/* 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: 42px; letter-spacing: -1px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 36px; }
.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-icon"></div> Replicate</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">Sign In</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<h1>Design System Preview:<br>Replicate</h1>
<p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons">
<button class="btn-hero-dark">Explore Tokens</button>
<button class="btn-hero-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</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #202020; border-bottom: 1px solid #4e4e4e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Replicate Dark</div>
<div class="color-swatch-hex">#202020</div>
<div class="color-swatch-role">Primary text, dark surfaces, borders</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ea2804;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Replicate Red</div>
<div class="color-swatch-hex">#ea2804</div>
<div class="color-swatch-role">Core brand, hero gradient, accent borders</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #dd4425;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Secondary Red</div>
<div class="color-swatch-hex">#dd4425</div>
<div class="color-swatch-role">Button borders, link hover states</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: #2b9a66;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Status Green</div>
<div class="color-swatch-hex">#2b9a66</div>
<div class="color-swatch-role">Running/operational status badges</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #24292e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">GitHub Dark</div>
<div class="color-swatch-hex">#24292e</div>
<div class="color-swatch-role">Code block backgrounds</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 #4e4e4e;"></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">Light mode page background</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fcfcfc; border-bottom: 1px solid #4e4e4e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Near White</div>
<div class="color-swatch-hex">#fcfcfc</div>
<div class="color-swatch-role">Button text on dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: linear-gradient(135deg, #ea2804, #c41858, #e0407a, #f06090);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Hero Blaze Gradient</div>
<div class="color-swatch-hex">multi-stop</div>
<div class="color-swatch-role">Hero section, maximum visual impact</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: #646464;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Medium Gray</div>
<div class="color-swatch-hex">#646464</div>
<div class="color-swatch-role">Secondary body text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #4e4e4e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Warm Gray</div>
<div class="color-swatch-hex">#4e4e4e</div>
<div class="color-swatch-role">Emphasized secondary text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #8d8d8d;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mid Silver</div>
<div class="color-swatch-hex">#8d8d8d</div>
<div class="color-swatch-role">Tertiary text, footnotes</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #bbbbbb;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Light Silver</div>
<div class="color-swatch-hex">#bbbbbb</div>
<div class="color-swatch-role">Dotted-underline link decoration</div>
</div>
</div>
<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">Maximum-emphasis borders</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: 72px; font-weight: 700; line-height: 1.0; letter-spacing: -1.8px;">Display Hero</div>
<div class="type-sample-label">Display / Hero &mdash; 72px / 700 / 1.00 / -1.8px &mdash; rb-freigeist-neue (system-ui fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1.0;">Section Heading</div>
<div class="type-sample-label">Section Heading &mdash; 48px / 400-700 / 1.00 / normal &mdash; rb-freigeist-neue (system-ui fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.2;">Sub-heading Display</div>
<div class="type-sample-label">Sub-heading &mdash; 30px / 600 / 1.20 / normal &mdash; rb-freigeist-neue (system-ui fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 38.4px; font-weight: 400; line-height: 0.83;">Sub-heading Sans</div>
<div class="type-sample-label">Sub-heading Sans &mdash; 38.4px / 400 / 0.83 / normal &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.56;">Feature Title</div>
<div class="type-sample-label">Feature Title &mdash; 18px / 600 / 1.56 / normal &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 1.4;">Body large text for intro paragraphs. Basier-square at 400 weight provides quiet geometric precision for all readable content.</div>
<div class="type-sample-label">Body Large &mdash; 20px / 400 / 1.40 / normal &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5;">Standard body text for paragraphs, navigation, and button labels. The workhorse of the type system.</div>
<div class="type-sample-label">Body / Button &mdash; 16px / 400-600 / 1.50 / normal &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);">Caption and metadata descriptions for model cards</div>
<div class="type-sample-label">Caption &mdash; 14px / 400-600 / 1.43 / -0.35px &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.33; text-transform: lowercase; color: var(--text-muted);">small tag / lowercase transform</div>
<div class="type-sample-label">Small / Tag &mdash; 12px / 400 / 1.33 / normal / lowercase &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43;">replicate.run("stability-ai/sdxl", input={"prompt": "..."})</div>
<div class="type-sample-label">Code Body &mdash; 14px / 400 / 1.43 / normal &mdash; JetBrains Mono</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.5;">import replicate</div>
<div class="type-sample-label">Code Small &mdash; 11px / 400 / 1.50 / normal &mdash; JetBrains 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">light solid pill</div>
</div>
<div class="button-demo">
<button class="btn-white-outlined">View Docs</button>
<div class="button-demo-label">outlined pill</div>
</div>
<div class="button-demo">
<button class="btn-frosted-glass">Search models...</button>
<div class="button-demo-label">frosted glass / search</div>
</div>
<div class="button-demo">
<button class="btn-red-accent">Highlighted</button>
<div class="button-demo-label">red accent pill</div>
</div>
<div class="button-demo">
<button class="btn-status">running</button>
<div class="button-demo-label">status badge</div>
</div>
</div>
<div class="code-block" style="margin-top: 40px;">
<span class="comment"># Run a model with Replicate</span><br>
<span class="keyword">import</span> replicate<br>
output = replicate.<span class="keyword">run</span>(<span class="string">"stability-ai/sdxl"</span>)
</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-standard">
<div class="card-label">standard card</div>
<h3>Border Pill Card</h3>
<p>Content card with 1px solid #4e4e4e border and 9999px pill radius. The default container for model galleries and feature sections.</p>
</div>
<div class="card card-accent">
<div class="card-label">accent highlighted</div>
<h3>Red Accent Border</h3>
<p>Featured or highlighted card with 1px solid Replicate Red border. Used for promoted models and primary emphasis.</p>
</div>
<div class="card card-darker">
<div class="card-label">deep surface</div>
<h3>Deep Dark Card</h3>
<p>Deeper dark background for manifesto-style sections, code examples, and high-contrast feature showcases.</p>
</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;">Base unit: 8px. Scale from 1px to 192px with generous section spacing.</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: 24px; height: 24px;"></div><div class="spacing-label">6px</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: 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: 160px; height: 160px;"></div><div class="spacing-label">48px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">64px</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;">Replicate uses exclusively pill-shaped geometry. There is only ONE radius in the entire system.</p>
<div class="radius-row">
<div class="radius-item">
<div class="radius-box" style="border-radius: 9999px;"></div>
<div class="radius-label">9999px</div>
<div class="radius-context">Pill &mdash; the ONLY radius</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 9999px; width: 120px; height: 60px; background: var(--color-near-white);"></div>
<div class="radius-label">9999px</div>
<div class="radius-context">Buttons</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 9999px; width: 160px; height: 80px; border-color: var(--color-replicate-red);"></div>
<div class="radius-label">9999px</div>
<div class="radius-context">Cards</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 9999px; width: 40px; height: 40px; background: var(--color-status-green);"></div>
<div class="radius-label">9999px</div>
<div class="radius-context">Badges</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 9999px; width: 80px; height: 80px; background: linear-gradient(135deg, #ea2804, #e0407a);"></div>
<div class="radius-label">9999px</div>
<div class="radius-context">Images</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. Dark body and inline text blocks.</div></div>
<div class="elevation-level">level 0</div>
</div>
<div class="elevation-card elevation-bordered">
<div><div class="elevation-name">Bordered</div><div class="elevation-desc">1px solid #4e4e4e. Cards, buttons, containers.</div></div>
<div class="elevation-level">level 1</div>
</div>
<div class="elevation-card elevation-accent-border">
<div><div class="elevation-name">Accent Border</div><div class="elevation-desc">1px solid #ea2804. Featured and highlighted items.</div></div>
<div class="elevation-level">level 2</div>
</div>
<div class="elevation-card elevation-gradient">
<div><div class="elevation-name">Gradient Hero</div><div class="elevation-desc">Full-width blaze gradient for maximum visual impact.</div></div>
<div class="elevation-level">level 3</div>
</div>
<div class="elevation-card elevation-dark-section">
<div><div class="elevation-name">Deep Dark</div><div class="elevation-desc">Deeper dark surface for manifesto, footer, feature sections.</div></div>
<div class="elevation-level">level 4</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>

831
design-md/replicate/preview.html Normal file
View File

@@ -0,0 +1,831 @@
<!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: Replicate (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=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
<style>
:root {
--color-replicate-dark: #202020;
--color-replicate-red: #ea2804;
--color-secondary-red: #dd4425;
--color-status-green: #2b9a66;
--color-github-dark: #24292e;
--color-white: #ffffff;
--color-near-white: #fcfcfc;
--color-medium-gray: #646464;
--color-warm-gray: #4e4e4e;
--color-mid-silver: #8d8d8d;
--color-light-silver: #bbbbbb;
--color-pure-black: #000000;
--font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
/* Light mode */
--bg-page: #ffffff;
--bg-card: #ffffff;
--bg-nav: rgba(255,255,255,0.95);
--text-primary: #202020;
--text-secondary: #646464;
--text-muted: #8d8d8d;
--border-color: #202020;
--border-subtle: #e0e0e0;
--section-label-color: var(--color-replicate-red);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-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: 700;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 8px;
color: var(--text-primary);
}
.nav-brand .logo-icon {
width: 20px;
height: 20px;
background: var(--color-replicate-red);
border-radius: 9999px;
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-secondary);
text-decoration: underline dotted var(--color-light-silver);
text-underline-offset: 4px;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--color-replicate-red); }
.nav-cta {
background: var(--color-replicate-dark);
color: var(--color-near-white);
padding: 8px 24px;
border: none;
border-radius: 9999px;
font-size: 14px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
outline: 4px solid var(--color-replicate-dark);
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
overflow: hidden;
background: linear-gradient(135deg, #ea2804 0%, #d42020 25%, #c41858 50%, #e0407a 75%, #f06090 100%);
}
.hero h1 {
font-family: var(--font-display);
font-size: 72px;
font-weight: 700;
line-height: 1.0;
letter-spacing: -1.8px;
margin-bottom: 24px;
color: #ffffff;
position: relative;
}
.hero p {
color: rgba(255,255,255,0.85);
font-size: 20px;
line-height: 1.4;
margin-bottom: 40px;
position: relative;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
.btn-hero-dark {
background: var(--color-replicate-dark);
color: var(--color-near-white);
padding: 12px 32px;
border: none;
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
outline: 4px solid var(--color-replicate-dark);
}
.btn-hero-outlined {
background: rgba(255,255,255,0.15);
color: #ffffff;
padding: 12px 32px;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
backdrop-filter: blur(8px);
}
/* SECTIONS */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px;
}
.section-title {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--section-label-color);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
line-height: 1.0;
letter-spacing: -0.5px;
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-size: 20px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text-secondary);
}
.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: 9999px;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
border-radius: 9999px 9999px 0 0;
}
.color-swatch-info {
padding: 12px 16px;
background: var(--bg-card);
}
.color-swatch-name { font-size: 13px; font-weight: 600; 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-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* 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: 24px;
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: lowercase;
letter-spacing: 0.3px;
}
.btn-dark-solid {
background: var(--color-replicate-dark);
color: var(--color-near-white);
padding: 12px 32px;
border: none;
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
outline: 4px solid var(--color-replicate-dark);
}
.btn-white-outlined {
background: var(--color-white);
color: var(--color-replicate-dark);
padding: 12px 32px;
border: 1px solid var(--color-replicate-dark);
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
.btn-frosted-glass {
background: rgba(255,255,255,0.1);
color: var(--color-replicate-dark);
padding: 6px 56px 6px 28px;
border: none;
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 400;
cursor: pointer;
outline: 1px solid var(--color-light-silver);
}
.btn-red-accent {
background: transparent;
color: var(--color-replicate-red);
padding: 12px 32px;
border: 1px solid var(--color-replicate-red);
border-radius: 9999px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
.btn-status {
background: var(--color-status-green);
color: #ffffff;
padding: 6px 18px;
border: none;
border-radius: 9999px;
font-size: 14px;
font-family: var(--font-body);
font-weight: 500;
cursor: pointer;
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 9999px;
padding: 28px 32px;
}
.card-standard { border: 1px solid var(--color-replicate-dark); }
.card-accent { border: 1px solid var(--color-replicate-red); }
.card-dark {
background: var(--color-replicate-dark);
color: var(--color-near-white);
border: 1px solid var(--color-warm-gray);
}
.card h3 {
font-family: var(--font-display);
font-size: 30px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 12px;
}
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.card-dark p { color: var(--color-light-silver); }
.card-label {
font-family: var(--font-body);
font-size: 12px;
text-transform: lowercase;
letter-spacing: 0.3px;
color: var(--color-replicate-red);
margin-bottom: 16px;
}
.card-dark .card-label { color: var(--color-replicate-red); }
/* CODE BLOCK */
.code-block {
background: var(--color-github-dark);
border: 1px solid var(--color-warm-gray);
border-radius: 9999px;
padding: 20px 32px;
margin-top: 24px;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.43;
color: #e6edf3;
overflow-x: auto;
}
.code-block .keyword { color: #ff7b72; }
.code-block .string { color: #a5d6ff; }
.code-block .comment { color: #8b949e; }
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: rgba(234,40,4,0.08);
border: 1px solid rgba(234,40,4,0.25);
border-radius: 9999px;
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: 24px; 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: 9999px;
padding: 24px 28px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat { border: none; background: var(--bg-page); }
.elevation-bordered { border: 1px solid var(--color-replicate-dark); }
.elevation-accent-border { border: 1px solid var(--color-replicate-red); }
.elevation-gradient {
background: linear-gradient(135deg, #ea2804, #c41858, #e0407a);
color: #ffffff;
}
.elevation-dark-section {
background: var(--color-replicate-dark);
color: var(--color-near-white);
border: 1px solid var(--color-warm-gray);
}
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.elevation-gradient .elevation-desc,
.elevation-dark-section .elevation-desc { color: rgba(255,255,255,0.75); }
.elevation-level {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-replicate-red);
text-transform: lowercase;
letter-spacing: 0.3px;
margin-top: 12px;
}
.elevation-gradient .elevation-level,
.elevation-dark-section .elevation-level { color: rgba(255,255,255,0.6); }
/* DOTTED LINK STYLE */
.dotted-link {
color: var(--text-primary);
text-decoration: underline dotted var(--color-light-silver);
text-underline-offset: 4px;
cursor: pointer;
}
.dotted-link:hover { color: var(--color-replicate-red); }
/* 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: 42px; letter-spacing: -1px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 36px; }
.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-icon"></div> Replicate</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">Sign In</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<h1>Design System Preview:<br>Replicate</h1>
<p>Auto-generated design token catalog from DESIGN.md</p>
<div class="hero-buttons">
<button class="btn-hero-dark">Explore Tokens</button>
<button class="btn-hero-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</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #202020;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Replicate Dark</div>
<div class="color-swatch-hex">#202020</div>
<div class="color-swatch-role">Primary text, dark surfaces, borders</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ea2804;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Replicate Red</div>
<div class="color-swatch-hex">#ea2804</div>
<div class="color-swatch-role">Core brand, hero gradient, accent borders</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #dd4425;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Secondary Red</div>
<div class="color-swatch-hex">#dd4425</div>
<div class="color-swatch-role">Button borders, link hover states</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: #2b9a66;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Status Green</div>
<div class="color-swatch-hex">#2b9a66</div>
<div class="color-swatch-role">Running/operational status badges</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #24292e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">GitHub Dark</div>
<div class="color-swatch-hex">#24292e</div>
<div class="color-swatch-role">Code block backgrounds</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 #e0e0e0;"></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 page body background</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fcfcfc; border-bottom: 1px solid #e0e0e0;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Near White</div>
<div class="color-swatch-hex">#fcfcfc</div>
<div class="color-swatch-role">Button text on dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: linear-gradient(135deg, #ea2804, #c41858, #e0407a, #f06090);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Hero Blaze Gradient</div>
<div class="color-swatch-hex">multi-stop</div>
<div class="color-swatch-role">Hero section, maximum visual impact</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: #646464;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Medium Gray</div>
<div class="color-swatch-hex">#646464</div>
<div class="color-swatch-role">Secondary body text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #4e4e4e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Warm Gray</div>
<div class="color-swatch-hex">#4e4e4e</div>
<div class="color-swatch-role">Emphasized secondary text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #8d8d8d;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mid Silver</div>
<div class="color-swatch-hex">#8d8d8d</div>
<div class="color-swatch-role">Tertiary text, footnotes</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #bbbbbb;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Light Silver</div>
<div class="color-swatch-hex">#bbbbbb</div>
<div class="color-swatch-role">Dotted-underline link decoration</div>
</div>
</div>
<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">Maximum-emphasis borders</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: 72px; font-weight: 700; line-height: 1.0; letter-spacing: -1.8px;">Display Hero</div>
<div class="type-sample-label">Display / Hero &mdash; 72px / 700 / 1.00 / -1.8px &mdash; rb-freigeist-neue (system-ui fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1.0;">Section Heading</div>
<div class="type-sample-label">Section Heading &mdash; 48px / 400-700 / 1.00 / normal &mdash; rb-freigeist-neue (system-ui fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.2;">Sub-heading Display</div>
<div class="type-sample-label">Sub-heading &mdash; 30px / 600 / 1.20 / normal &mdash; rb-freigeist-neue (system-ui fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 38.4px; font-weight: 400; line-height: 0.83;">Sub-heading Sans</div>
<div class="type-sample-label">Sub-heading Sans &mdash; 38.4px / 400 / 0.83 / normal &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.56;">Feature Title</div>
<div class="type-sample-label">Feature Title &mdash; 18px / 600 / 1.56 / normal &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 1.4;">Body large text for intro paragraphs. Basier-square at 400 weight provides quiet geometric precision for all readable content.</div>
<div class="type-sample-label">Body Large &mdash; 20px / 400 / 1.40 / normal &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5;">Standard body text for paragraphs, navigation, and button labels. The workhorse of the type system.</div>
<div class="type-sample-label">Body / Button &mdash; 16px / 400-600 / 1.50 / normal &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);">Caption and metadata descriptions for model cards</div>
<div class="type-sample-label">Caption &mdash; 14px / 400-600 / 1.43 / -0.35px &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.33; text-transform: lowercase; color: var(--text-muted);">small tag / lowercase transform</div>
<div class="type-sample-label">Small / Tag &mdash; 12px / 400 / 1.33 / normal / lowercase &mdash; basier-square (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43;">replicate.run("stability-ai/sdxl", input={"prompt": "..."})</div>
<div class="type-sample-label">Code Body &mdash; 14px / 400 / 1.43 / normal &mdash; JetBrains Mono</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.5;">import replicate</div>
<div class="type-sample-label">Code Small &mdash; 11px / 400 / 1.50 / normal &mdash; JetBrains 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 pill</div>
</div>
<div class="button-demo">
<button class="btn-white-outlined">View Docs</button>
<div class="button-demo-label">white outlined pill</div>
</div>
<div class="button-demo">
<button class="btn-frosted-glass">Search models...</button>
<div class="button-demo-label">frosted glass / search</div>
</div>
<div class="button-demo">
<button class="btn-red-accent">Highlighted</button>
<div class="button-demo-label">red accent pill</div>
</div>
<div class="button-demo">
<button class="btn-status">running</button>
<div class="button-demo-label">status badge</div>
</div>
</div>
<div class="code-block" style="margin-top: 40px;">
<span class="comment"># Run a model with Replicate</span><br>
<span class="keyword">import</span> replicate<br>
output = replicate.<span class="keyword">run</span>(<span class="string">"stability-ai/sdxl"</span>)
</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-standard">
<div class="card-label">standard card</div>
<h3>Hard Border Pill</h3>
<p>Content card with 1px solid #202020 border and 9999px pill radius. The default container for model galleries and feature sections.</p>
</div>
<div class="card card-accent">
<div class="card-label">accent highlighted</div>
<h3>Red Accent Border</h3>
<p>Featured or highlighted card with 1px solid Replicate Red border. Used for promoted models and primary emphasis.</p>
</div>
<div class="card card-dark">
<div class="card-label">dark surface</div>
<h3>Dark Section Card</h3>
<p>Dark background card for manifesto-style sections, code examples, and high-contrast feature showcases.</p>
</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;">Base unit: 8px. Scale from 1px to 192px with generous section spacing.</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: 24px; height: 24px;"></div><div class="spacing-label">6px</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: 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: 160px; height: 160px;"></div><div class="spacing-label">48px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">64px</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;">Replicate uses exclusively pill-shaped geometry. There is only ONE radius in the entire system.</p>
<div class="radius-row">
<div class="radius-item">
<div class="radius-box" style="border-radius: 9999px;"></div>
<div class="radius-label">9999px</div>
<div class="radius-context">Pill &mdash; the ONLY radius</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 9999px; width: 120px; height: 60px; background: var(--color-replicate-dark);"></div>
<div class="radius-label">9999px</div>
<div class="radius-context">Buttons</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 9999px; width: 160px; height: 80px; border-color: var(--color-replicate-red);"></div>
<div class="radius-label">9999px</div>
<div class="radius-context">Cards</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 9999px; width: 40px; height: 40px; background: var(--color-status-green);"></div>
<div class="radius-label">9999px</div>
<div class="radius-context">Badges</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 9999px; width: 80px; height: 80px; background: linear-gradient(135deg, #ea2804, #e0407a);"></div>
<div class="radius-label">9999px</div>
<div class="radius-context">Images</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. White body and inline text blocks.</div></div>
<div class="elevation-level">level 0</div>
</div>
<div class="elevation-card elevation-bordered">
<div><div class="elevation-name">Bordered</div><div class="elevation-desc">1px solid #202020. Cards, buttons, containers.</div></div>
<div class="elevation-level">level 1</div>
</div>
<div class="elevation-card elevation-accent-border">
<div><div class="elevation-name">Accent Border</div><div class="elevation-desc">1px solid #ea2804. Featured and highlighted items.</div></div>
<div class="elevation-level">level 2</div>
</div>
<div class="elevation-card elevation-gradient">
<div><div class="elevation-name">Gradient Hero</div><div class="elevation-desc">Full-width blaze gradient for maximum visual impact.</div></div>
<div class="elevation-level">level 3</div>
</div>
<div class="elevation-card elevation-dark-section">
<div><div class="elevation-name">Dark Section</div><div class="elevation-desc">Dark bg #202020 with light text. Manifesto, footer, features.</div></div>
<div class="elevation-level">level 4</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>