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

add new designs

Browse Source
This commit is contained in:
necatiozmen
2026-04-01 17:57:27 +03:00
parent ed3c8649c3
commit f6f44a9159
41 changed files with 12076 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
design-md/warp/DESIGN.md Normal file
View File

@@ -0,0 +1,253 @@
# Design System: Warp
## 1. Visual Theme & Atmosphere
Warp's website feels like sitting at a campfire in a deep forest — warm, dark, and alive with quiet confidence. Unlike the cold, blue-tinted blacks favored by most developer tools, Warp wraps everything in a warm near-black that feels like charred wood or dark earth. The text isn't pure white either — it's Warm Parchment (`#faf9f6`), a barely-perceptible cream that softens every headline and makes the dark canvas feel inviting rather than austere.
The typography is the secret weapon: Matter, a geometric sans-serif with distinctive character, deployed at Regular weight across virtually all text. The font choice is unusual for a developer tool — Matter has a softness and humanity that signals "this terminal is for everyone, not just greybeards." Combined with tight line-heights and controlled negative letter-spacing on headlines, the effect is refined and approachable simultaneously. Nature photography is woven between terminal screenshots, creating a visual language that says: this tool brings you closer to flow, to calm productivity.
The overall design philosophy is restraint through warmth. Minimal color (almost monochromatic warm grays), minimal ornamentation, and a focus on product showcases set against cinematic dark landscapes. It's a terminal company that markets like a lifestyle brand.
**Key Characteristics:**
- Warm dark background — not cold black, but earthy near-black with warm gray undertones
- Warm Parchment (`#faf9f6`) text instead of pure white — subtle cream warmth
- Matter font family (Regular weight) — geometric but approachable, not the typical developer-tool typeface
- Nature photography interleaved with product screenshots — lifestyle meets developer tool
- Almost monochromatic warm gray palette — no bold accent colors
- Uppercase labels with wide letter-spacing (2.4px) for categorization — editorial signaling
- Pill-shaped dark buttons (`#353534`, 50px radius) — restrained, muted CTAs
## 2. Color Palette & Roles
### Primary
- **Warm Parchment** (`#faf9f6`): Primary text color — a barely-cream off-white that softens every surface
- **Earth Gray** (`#353534`): Button backgrounds, dark interactive surfaces — warm, not cold
- **Deep Void** (near-black, page background): The warm dark canvas derived from the body background
### Secondary & Accent
- **Stone Gray** (`#868584`): Secondary text, muted descriptions — warm mid-gray
- **Ash Gray** (`#afaeac`): Body text, button text — the workhorse reading color
- **Purple-Tint Gray** (`#666469`): Link text with subtle purple undertone — underlined links in content
### Surface & Background
- **Frosted Veil** (`rgba(255, 255, 255, 0.04)`): Ultra-subtle white overlay for surface differentiation
- **Mist Border** (`rgba(226, 226, 226, 0.35)` / `rgba(227, 227, 227, 0.337)`): Semi-transparent borders for card containment
- **Translucent Parchment** (`rgba(250, 249, 246, 0.9)`): Slightly transparent primary surface, allowing depth
### Neutrals & Text
- **Warm Parchment** (`#faf9f6`): Headlines, high-emphasis text
- **Ash Gray** (`#afaeac`): Body paragraphs, descriptions
- **Stone Gray** (`#868584`): Secondary labels, subdued information
- **Muted Purple** (`#666469`): Underlined links, tertiary content
- **Dark Charcoal** (`#454545` / `#353534`): Borders, button backgrounds
### Semantic & Accent
- Warp operates as an almost monochromatic system — no bold accent colors
- Interactive states are communicated through opacity changes and underline decorations rather than color shifts
- Any accent color would break the warm, restrained palette
### Gradient System
- No explicit gradients on the marketing site
- Depth is created through layered semi-transparent surfaces and photography rather than color gradients
## 3. Typography Rules
### Font Family
- **Display & Body**: `Matter Regular` — geometric sans-serif with soft character. Fallbacks: `Matter Regular Placeholder`, system sans-serif
- **Medium**: `Matter Medium` — weight 500 variant for emphasis. Fallbacks: `Matter Medium Placeholder`
- **Square**: `Matter SQ Regular` — squared variant for select display contexts. Fallbacks: `Matter SQ Regular Placeholder`
- **UI Supplement**: `Inter` — used for specific UI elements. Fallbacks: `Inter Placeholder`
- **Monospace Display**: `Geist Mono` — for code/terminal display headings
- **Monospace Body**: `Matter Mono Regular` — custom mono companion. Fallbacks: `Matter Mono Regular Placeholder`
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Matter Regular | 80px | 400 | 1.00 | -2.4px | Maximum compression, hero impact |
| Section Display | Matter Regular | 56px | 400 | 1.20 | -0.56px | Feature section headings |
| Section Heading | Matter Regular | 48px | 400 | 1.20 | -0.48px to -0.96px | Alternate heading weight |
| Feature Heading | Matter Regular | 40px | 400 | 1.10 | -0.4px | Feature block titles |
| Sub-heading Large | Matter Regular | 36px | 400 | 1.15 | -0.72px | Sub-section headers |
| Card Display | Matter SQ Regular | 42px | 400 | 1.00 | 0px | Squared variant for special display |
| Sub-heading | Matter Regular | 32px | 400 | 1.19 | 0px | Content sub-headings |
| Body Heading | Matter Regular | 24px | 400 | 1.20 | -0.72px to 0px | Bold content intros |
| Card Title | Matter Medium | 22px | 500 | 1.14 | 0px | Emphasized card headers |
| Body Large | Matter Regular | 20px | 400 | 1.40 | -0.2px | Primary body text, relaxed |
| Body | Matter Regular | 18px | 400 | 1.30 | -0.18px | Standard body paragraphs |
| Nav/UI | Matter Regular | 16px | 400 | 1.20 | 0px | Navigation links, UI text |
| Button Text | Matter Medium | 16px | 500 | 1.20 | 0px | Button labels |
| Caption | Matter Regular | 14px | 400 | 1.00 | 1.4px | Uppercase labels (transform: uppercase) |
| Small Label | Matter Regular | 12px | 400 | 1.35 | 2.4px | Uppercase micro-labels (transform: uppercase) |
| Micro | Matter Regular | 11px | 400 | 1.20 | 0px | Smallest text elements |
| Code UI | Geist Mono | 16px | 400 | 1.00 | 0px | Terminal/code display |
| Code Body | Matter Mono Regular | 16px | 400 | 1.00 | -0.2px | Code content |
| UI Supplement | Inter | 16px | 500 | 1.00 | -0.2px | Specific UI elements |
### Principles
- **Regular weight dominance**: Nearly all text uses weight 400 (Regular) — even headlines. Matter Medium (500) appears only for emphasis moments like card titles and buttons. This creates a remarkably even, calm typographic texture
- **Uppercase as editorial signal**: Small labels and categories use uppercase transform with wide letter-spacing (1.4px–2.4px), creating a magazine-editorial categorization system
- **Warm legibility**: The combination of Matter's geometric softness + warm text colors (#faf9f6) + controlled negative tracking creates text that reads as effortlessly human on dark surfaces
- **No bold display**: Zero use of bold (700+) weight anywhere — restraint is the philosophy
## 4. Component Stylings
### Buttons
- **Dark Pill**: `#353534` background, Ash Gray (`#afaeac`) text, pill shape (50px radius), `10px` padding. The primary CTA — warm, muted, understated
- **Frosted Tag**: `rgba(255, 255, 255, 0.16)` background, black text (`rgb(0, 0, 0)`), rectangular (6px radius), `1px 6px` padding. Small inline tag-like buttons
- **Ghost**: No visible background, text-only with underline decoration on hover
- **Hover**: Subtle opacity or brightness shift — no dramatic color changes
### Cards & Containers
- **Photography Cards**: Full-bleed nature imagery with overlay text, 8px–12px border-radius
- **Terminal Screenshot Cards**: Product UI embedded in dark containers with rounded corners (8px–12px)
- **Bordered Cards**: Semi-transparent border (`rgba(226, 226, 226, 0.35)`) for containment, 12px–14px radius
- **Hover**: Minimal — content cards don't dramatically change on hover, maintaining the calm aesthetic
### Inputs & Forms
- Minimal form presence on the marketing site
- Dark background inputs with warm gray text
- Focus: Border brightness increase, no colored rings (consistent with the monochromatic palette)
### Navigation
- **Top nav**: Dark background, warm parchment brand text, Matter Regular at 16px for links
- **Link color**: Stone Gray (`#868584`) for muted nav, Warm Parchment for active/hover
- **CTA button**: Dark pill (#353534) at nav end — restrained, not attention-grabbing
- **Mobile**: Collapses to simplified navigation
- **Sticky**: Nav stays fixed on scroll
### Image Treatment
- **Nature photography**: Landscapes, forests, golden-hour scenes — completely unique for a developer tool
- **Terminal screenshots**: Product UI shown in realistic terminal window frames
- **Mixed composition**: Nature images and terminal screenshots are interleaved, creating a lifestyle-meets-tool narrative
- **Full-bleed**: Images often span full container width with 8px radius
- **Video**: Video elements present with 10px border-radius
### Testimonial Section
- Social proof area ("Don't take our word for it") with quotes
- Muted styling consistent with overall restraint
## 5. Layout Principles
### Spacing System
- **Base unit**: 8px
- **Scale**: 1px, 4px, 5px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 24px, 26px, 30px, 32px, 36px
- **Section padding**: 80px–120px vertical between major sections
- **Card padding**: 16px–32px internal spacing
- **Component gaps**: 8px–16px between related elements
### Grid & Container
- **Max width**: ~1500px container (breakpoint at 1500px), centered
- **Column patterns**: Full-width hero, 2-column feature sections with photography, single-column testimonials
- **Cinematic layout**: Wide containers that let photography breathe
### Whitespace Philosophy
- **Vast and warm**: Generous spacing between sections — the dark background creates a warm void that feels contemplative rather than empty
- **Photography as whitespace**: Nature images serve as visual breathing room between dense product information
- **Editorial pacing**: The layout reads like a magazine — each section is a deliberate page-turn moment
### Border Radius Scale
- **4px**: Small interactive elements — buttons, tags
- **5px–6px**: Standard components — links, small containers
- **8px**: Images, video containers, standard cards
- **10px**: Video elements, medium containers
- **12px**: Feature cards, large images
- **14px**: Large containers, prominent cards
- **40px**: Large rounded sections
- **50px**: Pill buttons — primary CTAs
- **200px**: Progress bars — full pill shape
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Level 0 (Flat) | No shadow, dark background | Page canvas, most surfaces |
| Level 1 (Veil) | `rgba(255, 255, 255, 0.04)` overlay | Subtle surface differentiation |
| Level 2 (Border) | `rgba(226, 226, 226, 0.35) 1px` border | Card containment, section separation |
| Level 3 (Ambient) | `rgba(0, 0, 0, 0.2) 0px 5px 15px` (inferred from design) | Image containers, floating elements |
### Shadow Philosophy
Warp's elevation system is remarkably flat — almost zero shadow usage on the marketing site. Depth is communicated through:
- **Semi-transparent borders** instead of shadows — borders at 35% opacity create a ghostly containment
- **Photography layering** — images create natural depth without artificial shadows
- **Surface opacity shifts** — `rgba(255, 255, 255, 0.04)` overlays create barely-perceptible layer differences
- The effect is calm and grounded — nothing floats, everything rests
### Decorative Depth
- **Photography as depth**: Nature images create atmospheric depth that shadows cannot
- **No glass or blur effects**: The design avoids trendy glassmorphism entirely
- **Warm ambient**: Any glow comes from the photography's natural lighting, not artificial CSS
## 7. Do's and Don'ts
### Do
- Use warm off-white (`#faf9f6`) for text instead of pure white — the cream undertone is essential
- Keep buttons restrained and muted — dark fill (#353534) with muted text (#afaeac), no bright CTAs
- Apply Matter Regular (weight 400) for nearly everything — even headlines. Reserve Medium (500) for emphasis only
- Use uppercase labels with wide letter-spacing (1.4px–2.4px) for categorization
- Interleave nature photography with product screenshots — this is core to the brand identity
- Maintain the almost monochromatic warm gray palette — no bold accent colors
- Use semi-transparent borders (`rgba(226, 226, 226, 0.35)`) for card containment instead of shadows
- Keep negative letter-spacing on headlines (-0.4px to -2.4px) for Matter's compressed display treatment
### Don't
- Use pure white (#ffffff) for text — it's always warm parchment (#faf9f6)
- Add bold accent colors (blue, red, green) — the system is deliberately monochromatic warm grays
- Apply bold weight (700+) to any text — Warp never goes above Medium (500)
- Use heavy drop shadows — depth comes from borders, photography, and opacity shifts
- Create cold or blue-tinted dark backgrounds — the warmth is essential
- Add decorative gradients or glow effects — the photography provides all visual interest
- Use tight, compressed layouts — the editorial spacing is generous and contemplative
- Mix in additional typefaces beyond the Matter family + Inter supplement
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <810px | Single column, stacked sections, hero text reduces to ~48px, hamburger nav |
| Tablet | 810px–1500px | 2-column features begin, photography scales, nav links partially visible |
| Desktop | >1500px | Full cinematic layout, 80px hero display, side-by-side photography + text |
### Touch Targets
- Pill buttons: 50px radius with 10px padding — comfortable touch targets
- Nav links: 16px text with surrounding padding for accessibility
- Mobile CTAs: Full-width pills on mobile for easy thumb reach
### Collapsing Strategy
- **Navigation**: Full horizontal nav → simplified mobile navigation
- **Hero text**: 80px display → 56px → 48px across breakpoints
- **Feature sections**: Side-by-side photography + text → stacked vertically
- **Photography**: Scales within containers, maintains cinematic aspect ratios
- **Section spacing**: Reduces proportionally — generous desktop → compact mobile
### Image Behavior
- Nature photography scales responsively, maintaining wide cinematic ratios
- Terminal screenshots maintain aspect ratios within responsive containers
- Video elements scale with 10px radius maintained
- No art direction changes — same compositions across breakpoints
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary Text: Warm Parchment (`#faf9f6`)
- Secondary Text: Ash Gray (`#afaeac`)
- Tertiary Text: Stone Gray (`#868584`)
- Button Background: Earth Gray (`#353534`)
- Border: Mist Border (`rgba(226, 226, 226, 0.35)`)
- Background: Deep warm near-black (page background)
### Example Component Prompts
- "Create a hero section on warm dark background with 80px Matter Regular heading in warm parchment (#faf9f6), line-height 1.0, letter-spacing -2.4px, and a dark pill button (#353534, 50px radius, #afaeac text)"
- "Design a feature card with semi-transparent border (rgba(226,226,226,0.35)), 12px radius, warm dark background, Matter Regular heading at 24px, and ash gray (#afaeac) body text at 18px"
- "Build a category label using Matter Regular at 12px, uppercase transform, letter-spacing 2.4px, stone gray (#868584) color — editorial magazine style"
- "Create a testimonial section with warm parchment quotes in Matter Regular 24px, attributed in stone gray (#868584), on dark background with minimal ornamentation"
- "Design a navigation bar with warm dark background, Matter Regular links at 16px in stone gray (#868584), hover to warm parchment (#faf9f6), and a dark pill CTA button (#353534) at the right"
### Iteration Guide
When refining existing screens generated with this design system:
1. Verify text color is warm parchment (#faf9f6) not pure white — the warmth is subtle but essential
2. Ensure all buttons use the restrained dark palette (#353534) — no bright or colorful CTAs
3. Check that Matter Regular (400) is the default weight — Medium (500) only for emphasis
4. Confirm uppercase labels have wide letter-spacing (1.4px–2.4px) — tight uppercase feels wrong here
5. The overall tone should feel warm and calm, like a well-designed magazine — not aggressive or tech-flashy

23
design-md/warp/README.md Normal file
View File

@@ -0,0 +1,23 @@
# Warp Inspired Design System
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/warp/DESIGN.md) extracted from the public [warp](https://warp.com/) 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) |
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/warp/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Warp 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
![Warp Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/warp/preview-dark-screenshot.png)
### Light Mode
![Warp Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/warp/preview-screenshot.png)

502
design-md/warp/preview-dark.html Normal file
View File

@@ -0,0 +1,502 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Warp — Dark Mode</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&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #080807;
--bg-surface: #111110;
--parchment: #f5f4f1;
--ash: #a5a4a2;
--stone: #7a7978;
--purple-gray: #5c5a5f;
--earth: #2c2c2b;
--charcoal: #3a3a39;
--border: rgba(200, 200, 198, 0.25);
--border-subtle: rgba(200, 200, 198, 0.1);
--frosted: rgba(255, 255, 255, 0.03);
--frosted-btn: rgba(255, 255, 255, 0.12);
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--parchment);
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
.dark-badge {
position: fixed; top: 14px; right: 14px; z-index: 200;
background: var(--parchment); color: var(--bg);
padding: 5px 12px; border-radius: 50px;
font-size: 11px; font-weight: 500;
}
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 14px 32px;
background: rgba(8, 8, 7, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-subtle);
}
.nav-brand { font-size: 15px; font-weight: 500; color: var(--parchment); letter-spacing: -0.15px; }
.nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
.nav-links a { color: var(--stone); text-decoration: none; font-size: 16px; font-weight: 400; transition: color 0.2s; }
.nav-links a:hover { color: var(--parchment); }
.nav-cta {
background: var(--earth); color: var(--ash) !important;
padding: 8px 20px; border-radius: 50px; font-weight: 500; font-size: 14px;
transition: opacity 0.2s;
}
.nav-cta:hover { opacity: 0.8; }
.hero {
padding: 120px 32px 100px; text-align: center;
max-width: 1200px; margin: 0 auto;
}
.hero h1 {
font-size: 72px; font-weight: 400; letter-spacing: -2.4px; line-height: 1.0;
color: var(--parchment); margin-bottom: 20px;
}
.hero .subtitle {
font-size: 20px; color: var(--ash); letter-spacing: -0.2px;
line-height: 1.4; max-width: 560px; margin: 0 auto 40px;
}
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
display: inline-flex; align-items: center;
background: var(--earth); color: var(--ash);
padding: 12px 28px; border-radius: 50px;
font-size: 16px; font-weight: 500; text-decoration: none;
border: none; cursor: pointer; transition: opacity 0.2s; font-family: var(--font);
}
.btn-primary:hover { opacity: 0.8; }
.btn-secondary {
display: inline-flex; align-items: center;
background: transparent; color: var(--parchment);
padding: 12px 28px; border-radius: 50px;
font-size: 16px; font-weight: 400; text-decoration: none;
border: 1px solid var(--border); cursor: pointer;
transition: opacity 0.2s; font-family: var(--font);
}
.btn-secondary:hover { opacity: 0.7; }
.section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.section-title { font-size: 48px; font-weight: 400; letter-spacing: -0.96px; line-height: 1.2; margin-bottom: 12px; }
.section-desc { font-size: 18px; color: var(--ash); margin-bottom: 48px; letter-spacing: -0.18px; line-height: 1.3; }
.section-divider { border: none; border-top: 1px solid var(--border-subtle); max-width: 1136px; margin: 0 auto; }
.color-group { margin-bottom: 40px; }
.color-group-title { font-size: 12px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 2.4px; margin-bottom: 16px; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.color-swatch { border-radius: 12px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.color-swatch-preview { height: 72px; width: 100%; }
.color-swatch-info { padding: 12px; }
.color-swatch-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.color-swatch-hex { font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
.color-swatch-role { font-size: 11px; color: var(--ash); margin-top: 4px; line-height: 1.4; }
.type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-label { font-size: 12px; color: var(--stone); letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 8px; }
.type-spec { font-size: 12px; color: var(--stone); margin-top: 8px; }
.button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.btn-tag {
background: var(--frosted-btn); color: var(--parchment);
padding: 4px 12px; border-radius: 6px;
font-size: 14px; font-weight: 400; border: none; cursor: pointer;
transition: opacity 0.2s; font-family: var(--font);
}
.btn-tag:hover { opacity: 0.7; }
.btn-ghost {
background: transparent; color: var(--ash);
padding: 12px 28px; border-radius: 50px;
font-size: 16px; font-weight: 400; border: none; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--charcoal);
transition: color 0.2s; font-family: var(--font);
}
.btn-ghost:hover { color: var(--parchment); }
.btn-label { display: block; font-size: 11px; color: var(--stone); margin-top: 8px; text-align: center; }
.btn-item { text-align: center; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card {
background: var(--bg-surface); border-radius: 14px; padding: 28px;
border: 1px solid var(--border); transition: border-color 0.3s;
}
.card:hover { border-color: rgba(200, 200, 198, 0.4); }
.card-title { font-size: 22px; font-weight: 500; margin-bottom: 8px; line-height: 1.14; }
.card-text { font-size: 16px; color: var(--ash); line-height: 1.4; }
.card-tag {
display: inline-block; padding: 2px 8px;
background: var(--frosted-btn); border-radius: 4px;
font-size: 12px; font-weight: 400; color: var(--parchment);
margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1.4px;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 14px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 1.4px; }
.form-input {
background: var(--bg); border: 1px solid var(--border-subtle);
border-radius: 8px; padding: 12px 14px; color: var(--parchment);
font-size: 16px; font-family: var(--font); outline: none; transition: border-color 0.2s;
}
.form-input::placeholder { color: var(--stone); }
.form-input:focus { border-color: var(--ash); }
.form-input-error { border-color: #b04040; }
.form-error-text { font-size: 12px; color: #b04040; }
textarea.form-input { min-height: 100px; resize: vertical; }
.spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.spacing-box { height: 28px; background: var(--ash); border-radius: 4px; opacity: 0.25; }
.spacing-label { font-size: 12px; color: var(--stone); min-width: 50px; text-align: right; font-family: var(--font-mono); }
.radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
.radius-item { text-align: center; }
.radius-box { width: 64px; height: 64px; background: var(--frosted); border: 1px solid var(--border-subtle); margin-bottom: 8px; }
.radius-value { font-size: 11px; color: var(--stone); font-family: var(--font-mono); }
.radius-context { font-size: 10px; color: var(--purple-gray); margin-top: 2px; }
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.elevation-card { padding: 24px; border-radius: 12px; background: var(--bg-surface); min-height: 110px; }
.elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.elevation-desc { font-size: 13px; color: var(--ash); line-height: 1.5; }
.footer { text-align: center; padding: 48px 32px; border-top: 1px solid var(--border-subtle); margin-top: 40px; }
.footer p { font-size: 13px; color: var(--stone); }
.footer a { color: var(--ash); text-decoration: underline; text-decoration-color: var(--charcoal); }
@media (max-width: 768px) {
.hero h1 { font-size: 48px; letter-spacing: -1.5px; }
.section-title { font-size: 36px; letter-spacing: -0.7px; }
.nav-links { display: none; }
.color-grid { grid-template-columns: repeat(2, 1fr); }
.card-grid { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.elevation-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="dark-badge">Dark Mode</div>
<nav class="nav">
<span class="nav-brand">awesome-design-md</span>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#elevation">Elevation</a></li>
<li><a href="#" class="nav-cta">Download</a></li>
</ul>
</nav>
<section class="hero">
<h1>Design System<br>Inspired by Warp</h1>
<p class="subtitle">A visual catalog of design tokens, components, and patterns extracted from Warp's warm-dark marketing site and documented in DESIGN.md.</p>
<div class="hero-buttons">
<a href="#colors" class="btn-primary">Explore Tokens</a>
<a href="#buttons" class="btn-secondary">View Components</a>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<h2 class="section-title">Color Palette</h2>
<p class="section-desc">Almost monochromatic warm grays — from warm parchment text to earth-tone dark surfaces.</p>
<div class="color-group">
<h3 class="color-group-title">Primary</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-preview" style="background: #faf9f6;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Warm Parchment</div>
<div class="color-swatch-hex">#faf9f6</div>
<div class="color-swatch-role">Primary text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: #353534;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Earth Gray</div>
<div class="color-swatch-hex">#353534</div>
<div class="color-swatch-role">Button backgrounds</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: #0e0e0d; border: 1px solid var(--border-subtle);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Deep Void</div>
<div class="color-swatch-hex">#0e0e0d</div>
<div class="color-swatch-role">Page background</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-preview" style="background: #afaeac;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Ash Gray</div>
<div class="color-swatch-hex">#afaeac</div>
<div class="color-swatch-role">Body text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: #868584;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Stone Gray</div>
<div class="color-swatch-hex">#868584</div>
<div class="color-swatch-role">Secondary text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: #666469;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Purple-Tint Gray</div>
<div class="color-swatch-hex">#666469</div>
<div class="color-swatch-role">Link text</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Border</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-preview" style="background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Frosted Veil</div>
<div class="color-swatch-hex">rgba(255,255,255,0.04)</div>
<div class="color-swatch-role">Surface overlay</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: rgba(226,226,226,0.35);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mist Border</div>
<div class="color-swatch-hex">rgba(226,226,226,0.35)</div>
<div class="color-swatch-role">Card borders</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: rgba(255,255,255,0.16);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Frosted Button</div>
<div class="color-swatch-hex">rgba(255,255,255,0.16)</div>
<div class="color-swatch-role">Tag backgrounds</div>
</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<h2 class="section-title">Typography Scale</h2>
<p class="section-desc">Matter font family — geometric but approachable. Regular weight dominance.</p>
<div class="type-sample">
<div class="type-label">Display Hero — 80px / 400 / 1.00 / -2.4px</div>
<div style="font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -2.4px;">The best terminal</div>
<div class="type-spec">Matter Regular (Inter fallback)</div>
</div>
<div class="type-sample">
<div class="type-label">Section Display — 56px / 400 / 1.20 / -0.56px</div>
<div style="font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.56px;">Development environment</div>
<div class="type-spec">Matter Regular</div>
</div>
<div class="type-sample">
<div class="type-label">Body Large — 20px / 400 / 1.40 / -0.2px</div>
<div style="font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: -0.2px; color: var(--ash);">Warp is the terminal reimagined with AI and collaborative tools for modern development teams.</div>
<div class="type-spec">Matter Regular — relaxed reading</div>
</div>
<div class="type-sample">
<div class="type-label">Body — 18px / 400 / 1.30 / -0.18px</div>
<div style="font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: -0.18px; color: var(--ash);">Built from the ground up in Rust for speed, with AI integrated at every level.</div>
<div class="type-spec">Matter Regular</div>
</div>
<div class="type-sample">
<div class="type-label">Uppercase Label — 12px / 400 / 1.35 / 2.4px</div>
<div style="font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 2.4px; text-transform: uppercase; color: var(--stone);">Featured Integration</div>
<div class="type-spec">Matter Regular — editorial wide tracking</div>
</div>
<div class="type-sample">
<div class="type-label">Code — 16px / 400 / 1.00</div>
<div style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.0; color: var(--parchment);">curl -fsSL https://warp.dev/install | bash</div>
<div class="type-spec">Geist Mono</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<h2 class="section-title">Button Variants</h2>
<p class="section-desc">Restrained and muted — dark pills, frosted tags, underline ghosts.</p>
<div class="button-showcase">
<div class="btn-item">
<a href="#" class="btn-primary">Download Warp</a>
<span class="btn-label">Dark Pill</span>
</div>
<div class="btn-item">
<a href="#" class="btn-secondary">Learn More</a>
<span class="btn-label">Border Pill</span>
</div>
<div class="btn-item">
<button class="btn-tag">New Feature</button>
<span class="btn-label">Frosted Tag</span>
</div>
<div class="btn-item">
<button class="btn-ghost">Read the blog</button>
<span class="btn-label">Ghost Underline</span>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<h2 class="section-title">Card Examples</h2>
<p class="section-desc">Semi-transparent borders, warm dark surfaces, editorial tags.</p>
<div class="card-grid">
<div class="card">
<div class="card-tag">Terminal</div>
<h3 class="card-title">Built in Rust</h3>
<p class="card-text">Blazingly fast terminal performance with native rendering and GPU acceleration.</p>
</div>
<div class="card">
<div class="card-tag">AI Agent</div>
<h3 class="card-title">Agent Mode</h3>
<p class="card-text">Let AI agents handle complex terminal workflows while you focus on building.</p>
</div>
<div class="card">
<div class="card-tag">Collaboration</div>
<h3 class="card-title">Shared Workflows</h3>
<p class="card-text">Share terminal sessions, commands, and configurations with your team.</p>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<h2 class="section-title">Form Elements</h2>
<p class="section-desc">Warm dark inputs with subtle borders. No colored focus rings.</p>
<div class="form-grid">
<div class="form-group">
<label class="form-label">Full Name</label>
<input type="text" class="form-input" placeholder="Enter your name">
</div>
<div class="form-group">
<label class="form-label">Email (Focus)</label>
<input type="email" class="form-input" placeholder="you@warp.dev" style="border-color: var(--ash);">
</div>
<div class="form-group">
<label class="form-label">API Key (Error)</label>
<input type="text" class="form-input form-input-error" value="invalid-key">
<span class="form-error-text">Invalid key format</span>
</div>
<div class="form-group">
<label class="form-label">Description</label>
<textarea class="form-input" placeholder="Describe your workflow..."></textarea>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="spacing">
<h2 class="section-title">Spacing Scale</h2>
<p class="section-desc">8px base unit with editorial-grade spacing.</p>
<div>
<div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
<div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 36px;"></div></div>
<div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 56px;"></div></div>
<div class="spacing-row"><span class="spacing-label">16px</span><div class="spacing-box" style="width: 80px;"></div></div>
<div class="spacing-row"><span class="spacing-label">24px</span><div class="spacing-box" style="width: 128px;"></div></div>
<div class="spacing-row"><span class="spacing-label">32px</span><div class="spacing-box" style="width: 180px;"></div></div>
<div class="spacing-row"><span class="spacing-label">36px</span><div class="spacing-box" style="width: 210px;"></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="radius">
<h2 class="section-title">Border Radius Scale</h2>
<p class="section-desc">From small tags to full pill CTAs.</p>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-value">4px</div><div class="radius-context">Tags</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-value">6px</div><div class="radius-context">Buttons</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-value">8px</div><div class="radius-context">Images</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 12px;"></div><div class="radius-value">12px</div><div class="radius-context">Cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 14px;"></div><div class="radius-value">14px</div><div class="radius-context">Large</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 40px;"></div><div class="radius-value">40px</div><div class="radius-context">Sections</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 50px; width: 64px; height: 40px;"></div><div class="radius-value">50px</div><div class="radius-context">Pill</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 200px; width: 120px; height: 12px;"></div><div class="radius-value">200px</div><div class="radius-context">Progress</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="elevation">
<h2 class="section-title">Elevation & Depth</h2>
<p class="section-desc">Remarkably flat — depth through borders and photography.</p>
<div class="elevation-grid">
<div class="elevation-card" style="box-shadow: none; border: 1px solid var(--border-subtle);">
<div class="elevation-label">Level 0 — Flat</div>
<div class="elevation-desc">No shadow. The warm dark canvas baseline.</div>
</div>
<div class="elevation-card" style="background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);">
<div class="elevation-label">Level 1 — Veil</div>
<div class="elevation-desc">Ultra-subtle white overlay.</div>
</div>
<div class="elevation-card" style="border: 1px solid var(--border);">
<div class="elevation-label">Level 2 — Border</div>
<div class="elevation-desc">Semi-transparent border containment.</div>
</div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.25) 0px 5px 15px; border: 1px solid var(--border-subtle);">
<div class="elevation-label">Level 3 — Ambient</div>
<div class="elevation-desc">Subtle shadow for floating elements.</div>
</div>
</div>
</section>
<footer class="footer">
<p>Design system extracted from <a href="https://warp.dev">warp.dev</a> — Generated by awesome-design-md</p>
</footer>
</body>
</html>

535
design-md/warp/preview.html Normal file
View File

@@ -0,0 +1,535 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Inspired by Warp</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&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0e0e0d;
--bg-surface: #161615;
--parchment: #faf9f6;
--ash: #afaeac;
--stone: #868584;
--purple-gray: #666469;
--earth: #353534;
--charcoal: #454545;
--border: rgba(226, 226, 226, 0.35);
--border-subtle: rgba(226, 226, 226, 0.15);
--frosted: rgba(255, 255, 255, 0.04);
--frosted-btn: rgba(255, 255, 255, 0.16);
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--parchment);
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 14px 32px;
background: rgba(14, 14, 13, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-subtle);
}
.nav-brand { font-size: 15px; font-weight: 500; color: var(--parchment); letter-spacing: -0.15px; }
.nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
.nav-links a {
color: var(--stone); text-decoration: none; font-size: 16px; font-weight: 400;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--parchment); }
.nav-cta {
background: var(--earth); color: var(--ash) !important;
padding: 8px 20px; border-radius: 50px; font-weight: 500; font-size: 14px;
transition: opacity 0.2s;
}
.nav-cta:hover { opacity: 0.8; }
.hero {
padding: 120px 32px 100px; text-align: center;
max-width: 1200px; margin: 0 auto;
}
.hero h1 {
font-size: 72px; font-weight: 400; letter-spacing: -2.4px; line-height: 1.0;
color: var(--parchment); margin-bottom: 20px;
}
.hero .subtitle {
font-size: 20px; color: var(--ash); letter-spacing: -0.2px;
line-height: 1.4; max-width: 560px; margin: 0 auto 40px;
}
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
display: inline-flex; align-items: center;
background: var(--earth); color: var(--ash);
padding: 12px 28px; border-radius: 50px;
font-size: 16px; font-weight: 500; text-decoration: none;
border: none; cursor: pointer; transition: opacity 0.2s;
font-family: var(--font);
}
.btn-primary:hover { opacity: 0.8; }
.btn-secondary {
display: inline-flex; align-items: center;
background: transparent; color: var(--parchment);
padding: 12px 28px; border-radius: 50px;
font-size: 16px; font-weight: 400; text-decoration: none;
border: 1px solid var(--border); cursor: pointer;
transition: opacity 0.2s; font-family: var(--font);
}
.btn-secondary:hover { opacity: 0.7; }
.section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.section-title {
font-size: 48px; font-weight: 400; letter-spacing: -0.96px; line-height: 1.2; margin-bottom: 12px;
}
.section-desc { font-size: 18px; color: var(--ash); margin-bottom: 48px; letter-spacing: -0.18px; line-height: 1.3; }
.section-divider {
border: none; border-top: 1px solid var(--border-subtle);
max-width: 1136px; margin: 0 auto;
}
.color-group { margin-bottom: 40px; }
.color-group-title {
font-size: 12px; font-weight: 400; color: var(--stone);
text-transform: uppercase; letter-spacing: 2.4px; margin-bottom: 16px;
}
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.color-swatch {
border-radius: 12px; overflow: hidden;
background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.color-swatch-preview { height: 72px; width: 100%; }
.color-swatch-info { padding: 12px; }
.color-swatch-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.color-swatch-hex { font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
.color-swatch-role { font-size: 11px; color: var(--ash); margin-top: 4px; line-height: 1.4; }
.type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-label {
font-size: 12px; color: var(--stone); letter-spacing: 2.4px;
text-transform: uppercase; margin-bottom: 8px;
}
.type-spec { font-size: 12px; color: var(--stone); margin-top: 8px; }
.button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.btn-tag {
background: var(--frosted-btn); color: var(--parchment);
padding: 4px 12px; border-radius: 6px;
font-size: 14px; font-weight: 400; border: none; cursor: pointer;
transition: opacity 0.2s; font-family: var(--font);
}
.btn-tag:hover { opacity: 0.7; }
.btn-ghost {
background: transparent; color: var(--ash);
padding: 12px 28px; border-radius: 50px;
font-size: 16px; font-weight: 400; border: none; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
text-decoration-color: var(--charcoal);
transition: color 0.2s; font-family: var(--font);
}
.btn-ghost:hover { color: var(--parchment); }
.btn-label { display: block; font-size: 11px; color: var(--stone); margin-top: 8px; text-align: center; }
.btn-item { text-align: center; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card {
background: var(--bg-surface); border-radius: 14px; padding: 28px;
border: 1px solid var(--border); transition: border-color 0.3s;
}
.card:hover { border-color: rgba(226, 226, 226, 0.5); }
.card-title { font-size: 22px; font-weight: 500; margin-bottom: 8px; line-height: 1.14; }
.card-text { font-size: 16px; color: var(--ash); line-height: 1.4; }
.card-tag {
display: inline-block; padding: 2px 8px;
background: var(--frosted-btn); border-radius: 4px;
font-size: 12px; font-weight: 400; color: var(--parchment);
margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1.4px;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 14px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 1.4px; }
.form-input {
background: var(--bg); border: 1px solid var(--border-subtle);
border-radius: 8px; padding: 12px 14px; color: var(--parchment);
font-size: 16px; font-family: var(--font); outline: none;
transition: border-color 0.2s;
}
.form-input::placeholder { color: var(--stone); }
.form-input:focus { border-color: var(--ash); }
.form-input-error { border-color: #c45050; }
.form-error-text { font-size: 12px; color: #c45050; }
textarea.form-input { min-height: 100px; resize: vertical; }
.spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.spacing-box { height: 28px; background: var(--ash); border-radius: 4px; opacity: 0.3; }
.spacing-label { font-size: 12px; color: var(--stone); min-width: 50px; text-align: right; font-family: var(--font-mono); }
.radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
.radius-item { text-align: center; }
.radius-box {
width: 64px; height: 64px;
background: var(--frosted); border: 1px solid var(--border-subtle); margin-bottom: 8px;
}
.radius-value { font-size: 11px; color: var(--stone); font-family: var(--font-mono); }
.radius-context { font-size: 10px; color: var(--purple-gray); margin-top: 2px; }
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.elevation-card { padding: 24px; border-radius: 12px; background: var(--bg-surface); min-height: 110px; }
.elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.elevation-desc { font-size: 13px; color: var(--ash); line-height: 1.5; }
.footer {
text-align: center; padding: 48px 32px;
border-top: 1px solid var(--border-subtle); margin-top: 40px;
}
.footer p { font-size: 13px; color: var(--stone); }
.footer a { color: var(--ash); text-decoration: underline; text-decoration-color: var(--charcoal); }
@media (max-width: 768px) {
.hero h1 { font-size: 48px; letter-spacing: -1.5px; }
.section-title { font-size: 36px; letter-spacing: -0.7px; }
.nav-links { display: none; }
.color-grid { grid-template-columns: repeat(2, 1fr); }
.card-grid { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.elevation-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<nav class="nav">
<span class="nav-brand">awesome-design-md</span>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#elevation">Elevation</a></li>
<li><a href="#" class="nav-cta">Download</a></li>
</ul>
</nav>
<section class="hero">
<h1>Design System<br>Inspired by Warp</h1>
<p class="subtitle">A visual catalog of design tokens, components, and patterns extracted from Warp's warm-dark marketing site and documented in DESIGN.md.</p>
<div class="hero-buttons">
<a href="#colors" class="btn-primary">Explore Tokens</a>
<a href="#buttons" class="btn-secondary">View Components</a>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<h2 class="section-title">Color Palette</h2>
<p class="section-desc">Almost monochromatic warm grays — from warm parchment text to earth-tone dark surfaces. No bold accents.</p>
<div class="color-group">
<h3 class="color-group-title">Primary</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-preview" style="background: #faf9f6;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Warm Parchment</div>
<div class="color-swatch-hex">#faf9f6</div>
<div class="color-swatch-role">Primary text, barely-cream off-white</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: #353534;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Earth Gray</div>
<div class="color-swatch-hex">#353534</div>
<div class="color-swatch-role">Button backgrounds, dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: #0e0e0d; border: 1px solid var(--border-subtle);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Deep Void</div>
<div class="color-swatch-hex">#0e0e0d</div>
<div class="color-swatch-role">Page background, warm near-black</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-preview" style="background: #afaeac;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Ash Gray</div>
<div class="color-swatch-hex">#afaeac</div>
<div class="color-swatch-role">Body text, button text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: #868584;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Stone Gray</div>
<div class="color-swatch-hex">#868584</div>
<div class="color-swatch-role">Secondary text, labels</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: #666469;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Purple-Tint Gray</div>
<div class="color-swatch-hex">#666469</div>
<div class="color-swatch-role">Link text, subtle purple undertone</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Border</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-preview" style="background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Frosted Veil</div>
<div class="color-swatch-hex">rgba(255,255,255,0.04)</div>
<div class="color-swatch-role">Subtle surface overlay</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: rgba(226,226,226,0.35);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mist Border</div>
<div class="color-swatch-hex">rgba(226,226,226,0.35)</div>
<div class="color-swatch-role">Card borders, containment</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-preview" style="background: rgba(255,255,255,0.16);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Frosted Button</div>
<div class="color-swatch-hex">rgba(255,255,255,0.16)</div>
<div class="color-swatch-role">Tag/inline button background</div>
</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<h2 class="section-title">Typography Scale</h2>
<p class="section-desc">Matter font family — geometric but approachable. Regular weight dominance with editorial uppercase labels.</p>
<div class="type-sample">
<div class="type-label">Display Hero — 80px / 400 / 1.00 / -2.4px</div>
<div style="font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -2.4px;">The best terminal</div>
<div class="type-spec">Matter Regular (shown in Inter fallback) — maximum compression</div>
</div>
<div class="type-sample">
<div class="type-label">Section Display — 56px / 400 / 1.20 / -0.56px</div>
<div style="font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.56px;">Development environment</div>
<div class="type-spec">Matter Regular — feature section headings</div>
</div>
<div class="type-sample">
<div class="type-label">Feature Heading — 40px / 400 / 1.10 / -0.4px</div>
<div style="font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.4px;">Agents that actually work</div>
<div class="type-spec">Matter Regular — feature block titles</div>
</div>
<div class="type-sample">
<div class="type-label">Card Title — 22px / 500 / 1.14</div>
<div style="font-size: 22px; font-weight: 500; line-height: 1.14;">Everything you need to ship faster</div>
<div class="type-spec">Matter Medium — emphasized card headers</div>
</div>
<div class="type-sample">
<div class="type-label">Body Large — 20px / 400 / 1.40 / -0.2px</div>
<div style="font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: -0.2px; color: var(--ash);">Warp is the terminal reimagined with AI and collaborative tools for modern development teams.</div>
<div class="type-spec">Matter Regular — relaxed reading rhythm</div>
</div>
<div class="type-sample">
<div class="type-label">Body — 18px / 400 / 1.30 / -0.18px</div>
<div style="font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: -0.18px; color: var(--ash);">Built from the ground up in Rust for speed, with AI integrated at every level.</div>
<div class="type-spec">Matter Regular — standard body paragraphs</div>
</div>
<div class="type-sample">
<div class="type-label">Uppercase Label — 12px / 400 / 1.35 / 2.4px</div>
<div style="font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 2.4px; text-transform: uppercase; color: var(--stone);">Featured Integration</div>
<div class="type-spec">Matter Regular — editorial categorization, wide tracking</div>
</div>
<div class="type-sample">
<div class="type-label">Code — 16px / 400 / 1.00</div>
<div style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.0; color: var(--parchment);">curl -fsSL https://warp.dev/install | bash</div>
<div class="type-spec">Geist Mono / Matter Mono Regular — terminal display</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<h2 class="section-title">Button Variants</h2>
<p class="section-desc">Restrained and muted — dark pills, frosted tags, underline ghosts. No bright CTAs.</p>
<div class="button-showcase">
<div class="btn-item">
<a href="#" class="btn-primary">Download Warp</a>
<span class="btn-label">Dark Pill / Primary</span>
</div>
<div class="btn-item">
<a href="#" class="btn-secondary">Learn More</a>
<span class="btn-label">Border Pill / Secondary</span>
</div>
<div class="btn-item">
<button class="btn-tag">New Feature</button>
<span class="btn-label">Frosted Tag / 6px</span>
</div>
<div class="btn-item">
<button class="btn-ghost">Read the blog</button>
<span class="btn-label">Ghost / Underline</span>
</div>
<div class="btn-item">
<a href="#" class="btn-primary" style="padding: 8px 20px; font-size: 14px;">Sign Up</a>
<span class="btn-label">Small / Nav CTA</span>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<h2 class="section-title">Card Examples</h2>
<p class="section-desc">Semi-transparent borders for containment, warm dark surfaces, editorial category tags.</p>
<div class="card-grid">
<div class="card">
<div class="card-tag">Terminal</div>
<h3 class="card-title">Built in Rust</h3>
<p class="card-text">Blazingly fast terminal performance with native rendering and GPU acceleration for the smoothest experience.</p>
</div>
<div class="card">
<div class="card-tag">AI Agent</div>
<h3 class="card-title">Agent Mode</h3>
<p class="card-text">Let AI agents handle complex terminal workflows — from debugging to deployment — while you focus on building.</p>
</div>
<div class="card">
<div class="card-tag">Collaboration</div>
<h3 class="card-title">Shared Workflows</h3>
<p class="card-text">Share terminal sessions, commands, and configurations with your team. Real-time collaborative development.</p>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<h2 class="section-title">Form Elements</h2>
<p class="section-desc">Warm dark inputs with subtle borders. Focus brightens the border — no colored rings.</p>
<div class="form-grid">
<div class="form-group">
<label class="form-label">Full Name</label>
<input type="text" class="form-input" placeholder="Enter your name">
</div>
<div class="form-group">
<label class="form-label">Email (Focus)</label>
<input type="email" class="form-input" placeholder="you@warp.dev" style="border-color: var(--ash);">
</div>
<div class="form-group">
<label class="form-label">API Key (Error)</label>
<input type="text" class="form-input form-input-error" value="invalid-key">
<span class="form-error-text">Invalid key format</span>
</div>
<div class="form-group">
<label class="form-label">Description</label>
<textarea class="form-input" placeholder="Describe your workflow..."></textarea>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="spacing">
<h2 class="section-title">Spacing Scale</h2>
<p class="section-desc">8px base unit with editorial-grade spacing for the magazine-like layout.</p>
<div>
<div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
<div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 36px;"></div></div>
<div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 56px;"></div></div>
<div class="spacing-row"><span class="spacing-label">16px</span><div class="spacing-box" style="width: 80px;"></div></div>
<div class="spacing-row"><span class="spacing-label">24px</span><div class="spacing-box" style="width: 128px;"></div></div>
<div class="spacing-row"><span class="spacing-label">32px</span><div class="spacing-box" style="width: 180px;"></div></div>
<div class="spacing-row"><span class="spacing-label">36px</span><div class="spacing-box" style="width: 210px;"></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="radius">
<h2 class="section-title">Border Radius Scale</h2>
<p class="section-desc">From small tags to full pill CTAs — radius grows with element prominence.</p>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-value">4px</div><div class="radius-context">Tags</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-value">6px</div><div class="radius-context">Buttons</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-value">8px</div><div class="radius-context">Images</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 12px;"></div><div class="radius-value">12px</div><div class="radius-context">Cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 14px;"></div><div class="radius-value">14px</div><div class="radius-context">Large cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 40px;"></div><div class="radius-value">40px</div><div class="radius-context">Sections</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 50px; width: 64px; height: 40px;"></div><div class="radius-value">50px</div><div class="radius-context">Pill CTA</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 200px; width: 120px; height: 12px;"></div><div class="radius-value">200px</div><div class="radius-context">Progress bar</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="elevation">
<h2 class="section-title">Elevation & Depth</h2>
<p class="section-desc">Remarkably flat — depth through borders and photography, not shadows.</p>
<div class="elevation-grid">
<div class="elevation-card" style="box-shadow: none; border: 1px solid var(--border-subtle);">
<div class="elevation-label">Level 0 — Flat</div>
<div class="elevation-desc">No shadow. The warm dark canvas baseline. Most surfaces rest here.</div>
</div>
<div class="elevation-card" style="background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);">
<div class="elevation-label">Level 1 — Veil</div>
<div class="elevation-desc">Ultra-subtle white overlay (rgba(255,255,255,0.04)). Barely visible differentiation.</div>
</div>
<div class="elevation-card" style="border: 1px solid var(--border);">
<div class="elevation-label">Level 2 — Border</div>
<div class="elevation-desc">Semi-transparent border (rgba(226,226,226,0.35)). Ghostly containment for cards.</div>
</div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.2) 0px 5px 15px; border: 1px solid var(--border-subtle);">
<div class="elevation-label">Level 3 — Ambient</div>
<div class="elevation-desc">Subtle ambient shadow for floating elements. Used sparingly.</div>
</div>
</div>
</section>
<footer class="footer">
<p>Design system extracted from <a href="https://warp.dev">warp.dev</a> — Generated by awesome-design-md</p>
</footer>
</body>
</html>