add new designs
This commit is contained in:
necatiozmen
246
design-md/airbnb/DESIGN.md
Normal file
246
design-md/airbnb/DESIGN.md
Normal file
@@ -0,0 +1,246 @@
|
||||
# Design System: Airbnb
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Airbnb's website is a warm, photography-forward marketplace that feels like flipping through a travel magazine where every page invites you to book. The design operates on a foundation of pure white (`#ffffff`) with the iconic Rausch Red (`#ff385c`) — named after Airbnb's first street address — serving as the singular brand accent. The result is a clean, airy canvas where listing photography, category icons, and the red CTA button are the only sources of color.
|
||||
|
||||
The typography uses Airbnb Cereal VF — a custom variable font that's warm and approachable, with rounded terminals that echo the brand's "belong anywhere" philosophy. The font operates in a tight weight range: 500 (medium) for most UI, 600 (semibold) for emphasis, and 700 (bold) for primary headings. Slight negative letter-spacing (-0.18px to -0.44px) on headings creates a cozy, intimate reading experience rather than the compressed efficiency of tech companies.
|
||||
|
||||
What distinguishes Airbnb is its palette-based token system (`--palette-*`) and multi-layered shadow approach. The primary card shadow uses a three-layer stack (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`) that creates a subtle, warm lift. Combined with generous border-radius (8px–32px), circular navigation controls (50%), and a category pill bar with horizontal scrolling, the interface feels tactile and inviting — designed for browsing, not commanding.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Pure white canvas with Rausch Red (`#ff385c`) as singular brand accent
|
||||
- Airbnb Cereal VF — custom variable font with warm, rounded terminals
|
||||
- Palette-based token system (`--palette-*`) for systematic color management
|
||||
- Three-layer card shadows: border ring + soft blur + stronger blur
|
||||
- Generous border-radius: 8px buttons, 14px badges, 20px cards, 32px large elements
|
||||
- Circular navigation controls (50% radius)
|
||||
- Photography-first listing cards — images are the hero content
|
||||
- Near-black text (`#222222`) — warm, not cold
|
||||
- Luxe Purple (`#460479`) and Plus Magenta (`#92174d`) for premium tiers
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary Brand
|
||||
- **Rausch Red** (`#ff385c`): `--palette-bg-primary-core`, primary CTA, brand accent, active states
|
||||
- **Deep Rausch** (`#e00b41`): `--palette-bg-tertiary-core`, pressed/dark variant of brand red
|
||||
- **Error Red** (`#c13515`): `--palette-text-primary-error`, error text on light
|
||||
- **Error Dark** (`#b32505`): `--palette-text-secondary-error-hover`, error hover
|
||||
|
||||
### Premium Tiers
|
||||
- **Luxe Purple** (`#460479`): `--palette-bg-primary-luxe`, Airbnb Luxe tier branding
|
||||
- **Plus Magenta** (`#92174d`): `--palette-bg-primary-plus`, Airbnb Plus tier branding
|
||||
|
||||
### Text Scale
|
||||
- **Near Black** (`#222222`): `--palette-text-primary`, primary text — warm, not cold
|
||||
- **Focused Gray** (`#3f3f3f`): `--palette-text-focused`, focused state text
|
||||
- **Secondary Gray** (`#6a6a6a`): Secondary text, descriptions
|
||||
- **Disabled** (`rgba(0,0,0,0.24)`): `--palette-text-material-disabled`, disabled state
|
||||
- **Link Disabled** (`#929292`): `--palette-text-link-disabled`, disabled links
|
||||
|
||||
### Interactive
|
||||
- **Legal Blue** (`#428bff`): `--palette-text-legal`, legal links, informational
|
||||
- **Border Gray** (`#c1c1c1`): Border color for cards and dividers
|
||||
- **Light Surface** (`#f2f2f2`): Circular navigation buttons, secondary surfaces
|
||||
|
||||
### Surface & Shadows
|
||||
- **Pure White** (`#ffffff`): Page background, card surfaces
|
||||
- **Card Shadow** (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`): Three-layer warm lift
|
||||
- **Hover Shadow** (`rgba(0,0,0,0.08) 0px 4px 12px`): Button hover elevation
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Airbnb Cereal VF`, fallbacks: `Circular, -apple-system, system-ui, Roboto, Helvetica Neue`
|
||||
- **OpenType Features**: `"salt"` (stylistic alternates) on specific caption elements
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Section Heading | Airbnb Cereal VF | 28px (1.75rem) | 700 | 1.43 | normal | Primary headings |
|
||||
| Card Heading | Airbnb Cereal VF | 22px (1.38rem) | 600 | 1.18 (tight) | -0.44px | Category/card titles |
|
||||
| Card Heading Medium | Airbnb Cereal VF | 22px (1.38rem) | 500 | 1.18 (tight) | -0.44px | Lighter variant |
|
||||
| Sub-heading | Airbnb Cereal VF | 21px (1.31rem) | 700 | 1.43 | normal | Bold sub-headings |
|
||||
| Feature Title | Airbnb Cereal VF | 20px (1.25rem) | 600 | 1.20 (tight) | -0.18px | Feature headings |
|
||||
| UI Medium | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Nav, emphasized text |
|
||||
| UI Semibold | Airbnb Cereal VF | 16px (1.00rem) | 600 | 1.25 (tight) | normal | Strong emphasis |
|
||||
| Button | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Button labels |
|
||||
| Body / Link | Airbnb Cereal VF | 14px (0.88rem) | 400 | 1.43 | normal | Standard body |
|
||||
| Body Medium | Airbnb Cereal VF | 14px (0.88rem) | 500 | 1.29 (tight) | normal | Medium body |
|
||||
| Caption Salt | Airbnb Cereal VF | 14px (0.88rem) | 600 | 1.43 | normal | `"salt"` feature |
|
||||
| Small | Airbnb Cereal VF | 13px (0.81rem) | 400 | 1.23 (tight) | normal | Descriptions |
|
||||
| Tag | Airbnb Cereal VF | 12px (0.75rem) | 400–700 | 1.33 | normal | Tags, prices |
|
||||
| Badge | Airbnb Cereal VF | 11px (0.69rem) | 600 | 1.18 (tight) | normal | `"salt"` feature |
|
||||
| Micro Uppercase | Airbnb Cereal VF | 8px (0.50rem) | 700 | 1.25 (tight) | 0.32px | `text-transform: uppercase` |
|
||||
|
||||
### Principles
|
||||
- **Warm weight range**: 500–700 dominate. No weight 300 or 400 for headings — Airbnb's type is always at least medium weight, creating a warm, confident voice.
|
||||
- **Negative tracking on headings**: -0.18px to -0.44px letter-spacing on display creates intimate, cozy headings rather than cold, compressed ones.
|
||||
- **"salt" OpenType feature**: Stylistic alternates on specific UI elements (badges, captions) create subtle glyph variations that add visual interest.
|
||||
- **Variable font precision**: Cereal VF enables continuous weight interpolation, though the design system uses discrete stops at 500, 600, and 700.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Dark**
|
||||
- Background: `#222222` (near-black, not pure black)
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 24px
|
||||
- Radius: 8px
|
||||
- Hover: transitions to error/brand accent via `var(--accent-bg-error)`
|
||||
- Focus: `0 0 0 2px var(--palette-grey1000)` ring + scale(0.92)
|
||||
|
||||
**Circular Nav**
|
||||
- Background: `#f2f2f2`
|
||||
- Text: `#222222`
|
||||
- Radius: 50% (circle)
|
||||
- Hover: shadow `rgba(0,0,0,0.08) 0px 4px 12px` + translateX(50%)
|
||||
- Active: 4px white border ring + focus shadow
|
||||
- Focus: scale(0.92) shrink animation
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#ffffff`
|
||||
- Radius: 14px (badges), 20px (cards/buttons), 32px (large)
|
||||
- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` (three-layer)
|
||||
- Listing cards: full-width photography on top, details below
|
||||
- Carousel controls: circular 50% buttons
|
||||
|
||||
### Inputs
|
||||
- Search: `#222222` text
|
||||
- Focus: `var(--palette-bg-primary-error)` background tint + `0 0 0 2px` ring
|
||||
- Radius: depends on context (search bar uses pill-like rounding)
|
||||
|
||||
### Navigation
|
||||
- White sticky header with search bar centered
|
||||
- Airbnb logo (Rausch Red) left-aligned
|
||||
- Category filter pills: horizontal scroll below search
|
||||
- Circular nav controls for carousel navigation
|
||||
- "Become a Host" text link, avatar/menu right-aligned
|
||||
|
||||
### Image Treatment
|
||||
- Listing photography fills card top with generous height
|
||||
- Image carousel with dot indicators
|
||||
- Heart/wishlist icon overlay on images
|
||||
- 8px–14px radius on contained images
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 2px, 3px, 4px, 6px, 8px, 10px, 11px, 12px, 15px, 16px, 22px, 24px, 32px
|
||||
|
||||
### Grid & Container
|
||||
- Full-width header with centered search
|
||||
- Category pill bar: horizontal scrollable row
|
||||
- Listing grid: responsive multi-column (3–5 columns on desktop)
|
||||
- Full-width footer with link columns
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Travel-magazine spacing**: Generous vertical padding between sections creates a leisurely browsing pace — you're meant to scroll slowly, like browsing a magazine.
|
||||
- **Photography density**: Listing cards are packed relatively tightly, but each image is large enough to feel immersive.
|
||||
- **Search bar prominence**: The search bar gets maximum vertical space in the header — finding your destination is the primary action.
|
||||
|
||||
### Border Radius Scale
|
||||
- Subtle (4px): Small links
|
||||
- Standard (8px): Buttons, tabs, search elements
|
||||
- Badge (14px): Status badges, labels
|
||||
- Card (20px): Feature cards, large buttons
|
||||
- Large (32px): Large containers, hero elements
|
||||
- Circle (50%): Nav controls, avatars, icons
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Page background, text blocks |
|
||||
| Card (Level 1) | `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` | Listing cards, search bar |
|
||||
| Hover (Level 2) | `rgba(0,0,0,0.08) 0px 4px 12px` | Button hover, interactive lift |
|
||||
| Active Focus (Level 3) | `rgb(255,255,255) 0px 0px 0px 4px` + focus ring | Active/focused elements |
|
||||
|
||||
**Shadow Philosophy**: Airbnb's three-layer shadow system creates a warm, natural lift. Layer 1 (`0px 0px 0px 1px` at 0.02 opacity) is an ultra-subtle border. Layer 2 (`0px 2px 6px` at 0.04) provides soft ambient shadow. Layer 3 (`0px 4px 8px` at 0.1) adds the primary lift. This graduated approach creates shadows that feel like natural light rather than CSS effects.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use `#222222` (warm near-black) for text — never pure `#000000`
|
||||
- Apply Rausch Red (`#ff385c`) only for primary CTAs and brand moments — it's the singular accent
|
||||
- Use Airbnb Cereal VF at weight 500–700 — the warm weight range is intentional
|
||||
- Apply the three-layer card shadow for all elevated surfaces
|
||||
- Use generous border-radius: 8px for buttons, 20px for cards, 50% for controls
|
||||
- Use photography as the primary visual content — listings are image-first
|
||||
- Apply negative letter-spacing (-0.18px to -0.44px) on headings for intimacy
|
||||
- Use circular (50%) buttons for carousel/navigation controls
|
||||
|
||||
### Don't
|
||||
- Don't use pure black (`#000000`) for text — always `#222222` (warm)
|
||||
- Don't apply Rausch Red to backgrounds or large surfaces — it's an accent only
|
||||
- Don't use thin font weights (300, 400) for headings — 500 minimum
|
||||
- Don't use heavy shadows (>0.1 opacity as primary layer) — keep them warm and graduated
|
||||
- Don't use sharp corners (0–4px) on cards — the generous rounding (20px+) is core
|
||||
- Don't introduce additional brand colors beyond the Rausch/Luxe/Plus system
|
||||
- Don't override the palette token system — use `--palette-*` variables consistently
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <375px | Single column, compact search |
|
||||
| Mobile | 375–550px | Standard mobile listing grid |
|
||||
| Tablet Small | 550–744px | 2-column listings |
|
||||
| Tablet | 744–950px | Search bar expansion |
|
||||
| Desktop Small | 950–1128px | 3-column listings |
|
||||
| Desktop | 1128–1440px | 4-column grid, full header |
|
||||
| Large Desktop | 1440–1920px | 5-column grid |
|
||||
| Ultra-wide | >1920px | Maximum grid width |
|
||||
|
||||
*Note: Airbnb has 61 detected breakpoints — one of the most granular responsive systems observed, reflecting their obsession with layout at every possible screen size.*
|
||||
|
||||
### Touch Targets
|
||||
- Circular nav buttons: adequate 50% radius sizing
|
||||
- Listing cards: full-card tap target on mobile
|
||||
- Search bar: prominently sized for thumb interaction
|
||||
- Category pills: horizontally scrollable with generous padding
|
||||
|
||||
### Collapsing Strategy
|
||||
- Listing grid: 5 → 4 → 3 → 2 → 1 columns
|
||||
- Search: expanded bar → compact bar → overlay
|
||||
- Category pills: horizontal scroll at all sizes
|
||||
- Navigation: full header → mobile simplified
|
||||
- Map: side panel → overlay/toggle
|
||||
|
||||
### Image Behavior
|
||||
- Listing photos: carousel with swipe on mobile
|
||||
- Responsive image sizing with aspect ratio maintained
|
||||
- Heart overlay positioned consistently across sizes
|
||||
- Photo quality adjusts based on viewport
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Text: Near Black (`#222222`)
|
||||
- Brand accent: Rausch Red (`#ff385c`)
|
||||
- Secondary text: `#6a6a6a`
|
||||
- Disabled: `rgba(0,0,0,0.24)`
|
||||
- Card border: `rgba(0,0,0,0.02) 0px 0px 0px 1px`
|
||||
- Card shadow: full three-layer stack
|
||||
- Button surface: `#f2f2f2`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a listing card: white background, 20px radius. Three-layer shadow: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px. Photo area on top (16:10 ratio), details below: 16px Airbnb Cereal VF weight 600 title, 14px weight 400 description in #6a6a6a."
|
||||
- "Design search bar: white background, full card shadow, 32px radius on container. Search text at 14px Cereal VF weight 400. Red search button (#ff385c, 50% radius, white icon)."
|
||||
- "Build category pill bar: horizontal scrollable row. Each pill: 14px Cereal VF weight 600, #222222 text, bottom border on active. Circular prev/next arrows (#f2f2f2 bg, 50% radius)."
|
||||
- "Create a CTA button: #222222 background, white text, 8px radius, 16px Cereal VF weight 500, 0px 24px padding. Hover: brand red accent."
|
||||
- "Design a heart/wishlist button: transparent background, 50% radius, white heart icon with dark shadow outline."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with white — the photography provides all the color
|
||||
2. Rausch Red (#ff385c) is the singular accent — use sparingly for CTAs only
|
||||
3. Near-black (#222222) for text — the warmth matters
|
||||
4. Three-layer shadows create natural, warm lift — always use all three layers
|
||||
5. Generous radius: 8px buttons, 20px cards, 50% controls
|
||||
6. Cereal VF at 500–700 weight — no thin weights for any heading
|
||||
7. Photography is hero — every listing card is image-first
|
||||
23
design-md/airbnb/README.md
Normal file
23
design-md/airbnb/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Airbnb Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) extracted from the public [airbnb](https://airbnb.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/airbnb/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airbnb 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
234
design-md/airbnb/preview-dark.html
Normal file
234
design-md/airbnb/preview-dark.html
Normal file
@@ -0,0 +1,234 @@
|
||||
<!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: Airbnb (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=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #1a1a1a; --near-black: #f0f0f0; --rausch: #ff385c; --deep-rausch: #e00b41;
|
||||
--secondary: #a0a0a0; --disabled: #666666; --border: #3a3a3a; --surface: #2a2a2a;
|
||||
--luxe: #460479; --plus: #92174d; --legal-blue: #428bff; --error: #c13515;
|
||||
--shadow-card: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px;
|
||||
--shadow-hover: rgba(0,0,0,0.08) 0px 4px 12px;
|
||||
--font: 'Nunito Sans', -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--near-black); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.43; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid #2a2a2a; }
|
||||
.nav-brand { font-size:14px; font-weight:600; color:var(--near-black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--secondary); text-decoration:none; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--near-black); }
|
||||
.nav-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; text-decoration:none; border:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; }
|
||||
.hero h1 { font-size:28px; font-weight:700; line-height:1.43; margin-bottom:12px; }
|
||||
.hero h1 span { color:var(--rausch); }
|
||||
.hero p { font-size:16px; font-weight:400; color:var(--secondary); max-width:480px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-dark { display:inline-block; background:var(--near-black); color:var(--white); padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--near-black); padding:12px 24px; border-radius:8px; border:1px solid var(--near-black); font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; }
|
||||
.btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--near-black); width:36px; height:36px; border-radius:50%; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:box-shadow 0.2s; }
|
||||
.btn-circle:hover { box-shadow:var(--shadow-hover); }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:0.32px; margin-bottom:8px; }
|
||||
.section-title { font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid #2a2a2a; margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); }
|
||||
.color-swatch-block { height:64px; width:100%; }
|
||||
.color-swatch-info { padding:10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--secondary); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--disabled); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:700; color:var(--secondary); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--disabled); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--disabled); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }
|
||||
.card-img { height:160px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--disabled); font-size:12px; }
|
||||
.card-body { padding:16px; }
|
||||
.card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
|
||||
.card p { font-size:14px; color:var(--secondary); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
|
||||
.form-input--focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
|
||||
.form-input--error { border-color:var(--error); box-shadow:0 0 0 2px var(--error); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--disabled); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--rausch); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.7; }
|
||||
.spacing-value { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:56px; height:56px; background:var(--surface); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
.radius-context { font-size:8px; color:var(--disabled); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border-radius:20px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; border-top:1px solid #2a2a2a; font-size:12px; color:var(--secondary); }
|
||||
.footer a { color:var(--rausch); text-decoration:underline; }
|
||||
|
||||
@media (max-width:744px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">🔍</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#ff385c;color:#ffffff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by <span>Airbnb</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-dark" href="#">Explore Stays</a>
|
||||
<a class="btn-outline" href="#">Become a Host</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff385c"></div><div class="color-swatch-info"><div class="color-swatch-name">Rausch Red</div><div class="color-swatch-hex">#ff385c</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e00b41"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Rausch</div><div class="color-swatch-hex">#e00b41</div><div class="color-swatch-role">Pressed state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#460479"></div><div class="color-swatch-info"><div class="color-swatch-name">Luxe Purple</div><div class="color-swatch-hex">#460479</div><div class="color-swatch-role">Luxe tier</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#92174d"></div><div class="color-swatch-info"><div class="color-swatch-name">Plus Magenta</div><div class="color-swatch-hex">#92174d</div><div class="color-swatch-role">Plus tier</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Text & Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#222222</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#6a6a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#6a6a6a</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c1c1c1"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c1c1c1</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f2f2"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#f2f2f2</div><div class="color-swatch-role">Circular buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#428bff"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#428bff</div><div class="color-swatch-role">Legal links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c13515"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#c13515</div><div class="color-swatch-role">Error text</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:28px; font-weight:700; line-height:1.43;">Section Heading</div><div class="type-meta">Section — 28px / 700 / 1.43 / Cereal VF</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px;">Card Heading</div><div class="type-meta">Card — 22px / 600 / 1.18 / -0.44px</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.20; letter-spacing:-0.18px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.20 / -0.18px</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">UI Medium — Inspiration for future getaways</div><div class="type-meta">UI — 16px / 500 / 1.25</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; color:var(--secondary);">Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.</div><div class="type-meta">Body — 14px / 400 / 1.43</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:700; line-height:1.33;">Tag Bold — $145 night</div><div class="type-meta">Tag Bold — 12px / 700 / 1.33</div></div>
|
||||
<div class="type-sample"><div style="font-size:8px; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:0.32px;">SUPERHOST</div><div class="type-meta">Micro — 8px / 700 / uppercase / +0.32px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Host</a><div class="button-label">Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">←</a><div class="button-label">Circle Nav</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">→</a><div class="button-label">Circle Nav</div></div>
|
||||
<div class="button-item"><span style="display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;">🔍</span><div class="button-label">Search</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><div class="card-img">Photo placeholder</div><div class="card-body"><h3>Istanbul, Turkey</h3><p>Entire apartment. 2 guests, 1 bed. $78 night.</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:#eee;">Photo placeholder</div><div class="card-body"><h3>Barcelona, Spain</h3><p>Private room. 3 guests, 2 beds. $92 night.</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:#e8e8e8;">Photo placeholder</div><div class="card-body"><h3>Galveston, TX</h3><p>Entire house. 6 guests, 3 beds. $145 night.</p></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Where</label><input class="form-input" type="text" placeholder="Search destinations"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Check in</label><input class="form-input form-input--focus" type="text" value="Apr 15, 2026"><div class="form-state-label">Focus (dark ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Guests</label><input class="form-input form-input--error" type="text" value="0 guests"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Message host</label><textarea class="form-textarea" placeholder="Tell your host about your trip..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:14px"></div><div class="radius-label">14px</div><div class="radius-context">Badges</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div><div class="radius-context">Large</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%; width:56px; height:56px;"></div><div class="radius-label">50%</div><div class="radius-context">Controls</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border:1px solid #ebebeb;"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Three-layer warm</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-hover);"><div class="elevation-label">Hover</div><div class="elevation-desc">Interactive lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px var(--near-black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Dark focus ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://airbnb.com/">airbnb.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
233
design-md/airbnb/preview.html
Normal file
233
design-md/airbnb/preview.html
Normal file
@@ -0,0 +1,233 @@
|
||||
<!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: Airbnb (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=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #ffffff; --near-black: #222222; --rausch: #ff385c; --deep-rausch: #e00b41;
|
||||
--secondary: #6a6a6a; --disabled: #929292; --border: #c1c1c1; --surface: #f2f2f2;
|
||||
--luxe: #460479; --plus: #92174d; --legal-blue: #428bff; --error: #c13515;
|
||||
--shadow-card: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px;
|
||||
--shadow-hover: rgba(0,0,0,0.08) 0px 4px 12px;
|
||||
--font: 'Nunito Sans', -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--near-black); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.43; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid #ebebeb; }
|
||||
.nav-brand { font-size:14px; font-weight:600; color:var(--near-black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--secondary); text-decoration:none; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--near-black); }
|
||||
.nav-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; text-decoration:none; border:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; }
|
||||
.hero h1 { font-size:28px; font-weight:700; line-height:1.43; margin-bottom:12px; }
|
||||
.hero h1 span { color:var(--rausch); }
|
||||
.hero p { font-size:16px; font-weight:400; color:var(--secondary); max-width:480px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-dark { display:inline-block; background:var(--near-black); color:var(--white); padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--near-black); padding:12px 24px; border-radius:8px; border:1px solid var(--near-black); font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; }
|
||||
.btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--near-black); width:36px; height:36px; border-radius:50%; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:box-shadow 0.2s; }
|
||||
.btn-circle:hover { box-shadow:var(--shadow-hover); }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:0.32px; margin-bottom:8px; }
|
||||
.section-title { font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid #ebebeb; margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); }
|
||||
.color-swatch-block { height:64px; width:100%; }
|
||||
.color-swatch-info { padding:10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--secondary); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--disabled); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:700; color:var(--secondary); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--disabled); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--disabled); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }
|
||||
.card-img { height:160px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--disabled); font-size:12px; }
|
||||
.card-body { padding:16px; }
|
||||
.card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
|
||||
.card p { font-size:14px; color:var(--secondary); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
|
||||
.form-input--focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
|
||||
.form-input--error { border-color:var(--error); box-shadow:0 0 0 2px var(--error); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--disabled); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--rausch); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.7; }
|
||||
.spacing-value { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:56px; height:56px; background:var(--surface); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
.radius-context { font-size:8px; color:var(--disabled); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border-radius:20px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--disabled); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; border-top:1px solid #ebebeb; font-size:12px; color:var(--secondary); }
|
||||
.footer a { color:var(--rausch); text-decoration:underline; }
|
||||
|
||||
@media (max-width:744px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">🔍</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by <span>Airbnb</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-dark" href="#">Explore Stays</a>
|
||||
<a class="btn-outline" href="#">Become a Host</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff385c"></div><div class="color-swatch-info"><div class="color-swatch-name">Rausch Red</div><div class="color-swatch-hex">#ff385c</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e00b41"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Rausch</div><div class="color-swatch-hex">#e00b41</div><div class="color-swatch-role">Pressed state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#460479"></div><div class="color-swatch-info"><div class="color-swatch-name">Luxe Purple</div><div class="color-swatch-hex">#460479</div><div class="color-swatch-role">Luxe tier</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#92174d"></div><div class="color-swatch-info"><div class="color-swatch-name">Plus Magenta</div><div class="color-swatch-hex">#92174d</div><div class="color-swatch-role">Plus tier</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Text & Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#222222</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#6a6a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#6a6a6a</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c1c1c1"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c1c1c1</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f2f2"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#f2f2f2</div><div class="color-swatch-role">Circular buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#428bff"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#428bff</div><div class="color-swatch-role">Legal links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c13515"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#c13515</div><div class="color-swatch-role">Error text</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:28px; font-weight:700; line-height:1.43;">Section Heading</div><div class="type-meta">Section — 28px / 700 / 1.43 / Cereal VF</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px;">Card Heading</div><div class="type-meta">Card — 22px / 600 / 1.18 / -0.44px</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.20; letter-spacing:-0.18px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.20 / -0.18px</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">UI Medium — Inspiration for future getaways</div><div class="type-meta">UI — 16px / 500 / 1.25</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; color:var(--secondary);">Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.</div><div class="type-meta">Body — 14px / 400 / 1.43</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:700; line-height:1.33;">Tag Bold — $145 night</div><div class="type-meta">Tag Bold — 12px / 700 / 1.33</div></div>
|
||||
<div class="type-sample"><div style="font-size:8px; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:0.32px;">SUPERHOST</div><div class="type-meta">Micro — 8px / 700 / uppercase / +0.32px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Host</a><div class="button-label">Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">←</a><div class="button-label">Circle Nav</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">→</a><div class="button-label">Circle Nav</div></div>
|
||||
<div class="button-item"><span style="display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;">🔍</span><div class="button-label">Search</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><div class="card-img">Photo placeholder</div><div class="card-body"><h3>Istanbul, Turkey</h3><p>Entire apartment. 2 guests, 1 bed. $78 night.</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:#eee;">Photo placeholder</div><div class="card-body"><h3>Barcelona, Spain</h3><p>Private room. 3 guests, 2 beds. $92 night.</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:#e8e8e8;">Photo placeholder</div><div class="card-body"><h3>Galveston, TX</h3><p>Entire house. 6 guests, 3 beds. $145 night.</p></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Where</label><input class="form-input" type="text" placeholder="Search destinations"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Check in</label><input class="form-input form-input--focus" type="text" value="Apr 15, 2026"><div class="form-state-label">Focus (dark ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Guests</label><input class="form-input form-input--error" type="text" value="0 guests"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Message host</label><textarea class="form-textarea" placeholder="Tell your host about your trip..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:14px"></div><div class="radius-label">14px</div><div class="radius-context">Badges</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div><div class="radius-context">Large</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%; width:56px; height:56px;"></div><div class="radius-label">50%</div><div class="radius-context">Controls</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border:1px solid #ebebeb;"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Three-layer warm</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-hover);"><div class="elevation-label">Hover</div><div class="elevation-desc">Interactive lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px var(--near-black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Dark focus ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://airbnb.com/">airbnb.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
180
design-md/bmw/DESIGN.md
Normal file
180
design-md/bmw/DESIGN.md
Normal file
@@ -0,0 +1,180 @@
|
||||
# Design System: BMW
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
BMW's website is automotive engineering made visual — a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (featuring full-bleed automotive photography) and clean white content areas, creating a cinematic rhythm reminiscent of a luxury car showroom where vehicles are lit against darkness. The BMW CI2020 design language (their corporate identity refresh) defines every element.
|
||||
|
||||
The typography is built on BMWTypeNextLatin — a proprietary typeface in two variants: BMWTypeNextLatin Light (weight 300) for massive uppercase display headings, and BMWTypeNextLatin Regular for body and UI text. The 60px uppercase headline at weight 300 is the defining typographic gesture — light-weight type that whispers authority rather than shouting it. The fallback stack includes Helvetica and Japanese fonts (Hiragino, Meiryo), reflecting BMW's global presence.
|
||||
|
||||
What makes BMW distinctive is its CSS variable-driven theming system. Context-aware variables (`--site-context-highlight-color: #1c69d4`, `--site-context-focus-color: #0653b6`, `--site-context-metainfo-color: #757575`) suggest a design system built for multi-brand, multi-context deployment where colors can be swapped globally. The blue highlight color (`#1c69d4`) is BMW's signature blue — used sparingly for interactive elements and focus states, never decoratively. Zero border-radius was detected — BMW's design is angular, sharp-cornered, and uncompromisingly geometric.
|
||||
|
||||
**Key Characteristics:**
|
||||
- BMWTypeNextLatin Light (weight 300) uppercase for display — whispered authority
|
||||
- BMW Blue (`#1c69d4`) as singular accent — used only for interactive elements
|
||||
- Zero border-radius detected — angular, sharp-cornered, industrial geometry
|
||||
- Dark hero photography + white content sections — showroom lighting rhythm
|
||||
- CSS variable-driven theming: `--site-context-*` tokens for brand flexibility
|
||||
- Weight 900 for navigation emphasis — extreme contrast with 300 display
|
||||
- Tight line-heights (1.15–1.30) throughout — compressed, efficient, German engineering
|
||||
- Full-bleed automotive photography as primary visual content
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary Brand
|
||||
- **Pure White** (`#ffffff`): `--site-context-theme-color`, primary surface, card backgrounds
|
||||
- **BMW Blue** (`#1c69d4`): `--site-context-highlight-color`, primary interactive accent
|
||||
- **BMW Focus Blue** (`#0653b6`): `--site-context-focus-color`, keyboard focus and active states
|
||||
|
||||
### Neutral Scale
|
||||
- **Near Black** (`#262626`): Primary text on light surfaces, dark link text
|
||||
- **Meta Gray** (`#757575`): `--site-context-metainfo-color`, secondary text, metadata
|
||||
- **Silver** (`#bbbbbb`): Tertiary text, muted links, footer elements
|
||||
|
||||
### Interactive States
|
||||
- All links hover to white (`#ffffff`) — suggesting primarily dark-surface navigation
|
||||
- Text links use underline: none on hover — clean interaction
|
||||
|
||||
### Shadows
|
||||
- Minimal shadow system — depth through photography and dark/light section contrast
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display Light**: `BMWTypeNextLatin Light`, fallbacks: `Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo`
|
||||
- **Body / UI**: `BMWTypeNextLatin`, same fallback stack
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Notes |
|
||||
|------|------|------|--------|-------------|-------|
|
||||
| Display Hero | BMWTypeNextLatin Light | 60px (3.75rem) | 300 | 1.30 (tight) | `text-transform: uppercase` |
|
||||
| Section Heading | BMWTypeNextLatin | 32px (2.00rem) | 400 | 1.30 (tight) | Major section titles |
|
||||
| Nav Emphasis | BMWTypeNextLatin | 18px (1.13rem) | 900 | 1.30 (tight) | Navigation bold items |
|
||||
| Body | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard body text |
|
||||
| Button Bold | BMWTypeNextLatin | 16px (1.00rem) | 700 | 1.20–2.88 | CTA buttons |
|
||||
| Button | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard buttons |
|
||||
|
||||
### Principles
|
||||
- **Light display, heavy navigation**: Weight 300 for hero headlines creates whispered elegance; weight 900 for navigation creates stark authority. This extreme weight contrast (300 vs 900) is the signature typographic tension.
|
||||
- **Universal uppercase display**: The 60px hero is always uppercase — creating a monumental, architectural quality.
|
||||
- **Tight everything**: Line-heights from 1.15 to 1.30 across the entire system. Nothing breathes — every line is compressed, efficient, German-engineered.
|
||||
- **Single font family**: BMWTypeNextLatin handles everything from 60px display to 16px body — unity through one typeface at different weights.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
- Text: 16px BMWTypeNextLatin, weight 700 for primary, 400 for secondary
|
||||
- Line-height: 1.15–2.88 (large variation suggests padding-driven sizing)
|
||||
- Border: white bottom-border on dark surfaces (`1px solid #ffffff`)
|
||||
- No border-radius — sharp rectangular buttons
|
||||
|
||||
### Cards & Containers
|
||||
- No border-radius — all containers are sharp-cornered rectangles
|
||||
- White backgrounds on light sections
|
||||
- Dark backgrounds for hero/feature sections
|
||||
- No visible borders on most elements
|
||||
|
||||
### Navigation
|
||||
- BMWTypeNextLatin 18px weight 900 for primary nav links
|
||||
- White text on dark header
|
||||
- BMW logo 54x54px
|
||||
- Hover: remains white, text-decoration none
|
||||
- "Home" text link in header
|
||||
|
||||
### Image Treatment
|
||||
- Full-bleed automotive photography
|
||||
- Dark cinematic lighting
|
||||
- Edge-to-edge hero images
|
||||
- Car photography as primary visual content
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 30px, 32px, 40px, 45px, 56px, 60px
|
||||
|
||||
### Grid & Container
|
||||
- Full-width hero photography
|
||||
- Centered content sections
|
||||
- Footer: multi-column link grid
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Showroom pacing**: Dark hero sections with generous padding create the feeling of walking through a showroom where each vehicle is spotlit in its own space.
|
||||
- **Compressed content**: Body text areas use tight line-heights and compact spacing — information-dense, no waste.
|
||||
|
||||
### Border Radius Scale
|
||||
- **None detected.** BMW uses sharp corners exclusively — every element is a precise rectangle. This is the most angular design system analyzed.
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Photography (Level 0) | Full-bleed dark imagery | Hero backgrounds |
|
||||
| Flat (Level 1) | White surface, no shadow | Content sections |
|
||||
| Focus (Accessibility) | BMW Focus Blue (`#0653b6`) | Focus states |
|
||||
|
||||
**Shadow Philosophy**: BMW uses virtually no shadows. Depth is created entirely through the contrast between dark photographic sections and white content sections — the automotive lighting does the elevation work.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use BMWTypeNextLatin Light (300) uppercase for all display headings
|
||||
- Keep ALL corners sharp (0px radius) — angular geometry is non-negotiable
|
||||
- Use BMW Blue (`#1c69d4`) only for interactive elements — never decoratively
|
||||
- Apply weight 900 for navigation emphasis — the extreme weight contrast is intentional
|
||||
- Use full-bleed automotive photography for hero sections
|
||||
- Keep line-heights tight (1.15–1.30) throughout
|
||||
- Use `--site-context-*` CSS variables for theming
|
||||
|
||||
### Don't
|
||||
- Don't round corners — zero radius is the BMW identity
|
||||
- Don't use BMW Blue for backgrounds or large surfaces — it's an accent only
|
||||
- Don't use medium font weights (500–600) — the system uses 300, 400, 700, 900 extremes
|
||||
- Don't add decorative elements — the photography and typography carry everything
|
||||
- Don't use relaxed line-heights — BMW text is always compressed
|
||||
- Don't lighten the dark hero sections — the contrast with white IS the design
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <375px | Minimum supported |
|
||||
| Mobile | 375–480px | Single column |
|
||||
| Mobile Large | 480–640px | Slight adjustments |
|
||||
| Tablet Small | 640–768px | 2-column begins |
|
||||
| Tablet | 768–920px | Standard tablet |
|
||||
| Desktop Small | 920–1024px | Desktop layout begins |
|
||||
| Desktop | 1024–1280px | Standard desktop |
|
||||
| Large Desktop | 1280–1440px | Expanded |
|
||||
| Ultra-wide | 1440–1600px | Maximum layout |
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 60px → scales down, maintains uppercase
|
||||
- Navigation: horizontal → hamburger
|
||||
- Photography: full-bleed maintained at all sizes
|
||||
- Content sections: stack vertically
|
||||
- Footer: multi-column → stacked
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Text: Near Black (`#262626`)
|
||||
- Secondary text: Meta Gray (`#757575`)
|
||||
- Accent: BMW Blue (`#1c69d4`)
|
||||
- Focus: BMW Focus Blue (`#0653b6`)
|
||||
- Muted: Silver (`#bbbbbb`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero: full-width dark automotive photography background. Heading at 60px BMWTypeNextLatin Light weight 300, uppercase, line-height 1.30, white text. No border-radius anywhere."
|
||||
- "Design navigation: dark background. BMWTypeNextLatin 18px weight 900 for links, white text. BMW logo 54x54. Sharp rectangular layout."
|
||||
- "Build a button: 16px BMWTypeNextLatin weight 700, line-height 1.20. Sharp corners (0px radius). White bottom border on dark surface."
|
||||
- "Create content section: white background. Heading at 32px weight 400, line-height 1.30, #262626. Body at 16px weight 400, line-height 1.15."
|
||||
|
||||
### Iteration Guide
|
||||
1. Zero border-radius — every corner is sharp, no exceptions
|
||||
2. Weight extremes: 300 (display), 400 (body), 700 (buttons), 900 (nav)
|
||||
3. BMW Blue for interactive only — never as background or decoration
|
||||
4. Photography carries emotion — the UI is pure precision
|
||||
5. Tight line-heights everywhere — 1.15 to 1.30 is the range
|
||||
23
design-md/bmw/README.md
Normal file
23
design-md/bmw/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Bmw Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) extracted from the public [bmw](https://bmw.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/bmw/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Bmw 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
211
design-md/bmw/preview-dark.html
Normal file
211
design-md/bmw/preview-dark.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!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: BMW (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@300;400;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #1a1a1a; --black: #e0e0e0; --bmw-blue: #1c69d4; --focus-blue: #0653b6;
|
||||
--meta: #999999; --silver: #666666; --dark: #1a1a1a;
|
||||
--font: 'Inter', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; font-weight:400; line-height:1.15; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:var(--dark); }
|
||||
.nav-brand { font-size:14px; font-weight:400; color:var(--white); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:16px; font-weight:900; color:var(--white); text-decoration:none; line-height:1.30; transition:opacity 0.15s; }
|
||||
.nav-links a:hover { opacity:0.8; }
|
||||
.nav-cta { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:10px 20px; font-size:16px; font-weight:700; text-decoration:none; border-radius:0; }
|
||||
|
||||
.hero { padding:80px 32px; background:var(--dark); text-align:left; color:var(--white); }
|
||||
.hero-inner { max-width:900px; margin:0 auto; }
|
||||
.hero h1 { font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase; margin-bottom:16px; }
|
||||
.hero p { font-size:16px; font-weight:400; line-height:1.30; color:var(--silver); max-width:550px; margin-bottom:32px; }
|
||||
.hero-buttons { display:flex; gap:12px; }
|
||||
.btn-blue { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:12px 24px; font-family:var(--font); font-size:16px; font-weight:700; text-decoration:none; border:none; cursor:pointer; border-radius:0; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--white); padding:12px 24px; border:1px solid var(--white); font-family:var(--font); font-size:16px; font-weight:400; text-decoration:none; cursor:pointer; border-radius:0; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:900; color:var(--meta); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
|
||||
.section-title { font-size:32px; font-weight:400; line-height:1.30; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid #e0e0e0; margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { overflow:hidden; border:1px solid #e0e0e0; }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px 12px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:700; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:11px; color:var(--meta); font-family:monospace; }
|
||||
.color-swatch-role { font-size:10px; color:var(--meta); margin-top:3px; }
|
||||
.color-group-label { font-size:14px; font-weight:700; color:var(--meta); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid #f0f0f0; }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:11px; color:var(--meta); margin-top:6px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:11px; font-weight:700; color:var(--meta); margin-top:8px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border:1px solid #e0e0e0; padding:24px; }
|
||||
.card h3 { font-size:18px; font-weight:700; margin-bottom:8px; line-height:1.30; }
|
||||
.card p { font-size:16px; color:var(--meta); line-height:1.30; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:700; margin-bottom:6px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; outline:none; border-radius:0; }
|
||||
.form-input:focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }
|
||||
.form-input--focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }
|
||||
.form-input--error { border-color:#c00; box-shadow:0 0 0 2px rgba(204,0,0,0.2); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; border-radius:0; }
|
||||
.form-state-label { font-size:10px; color:var(--meta); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--bmw-blue); margin-bottom:6px; height:28px; }
|
||||
.spacing-value { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; background:var(--dark); margin-bottom:6px; }
|
||||
.radius-label { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { background:var(--white); border:1px solid #e0e0e0; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:14px; font-weight:700; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.footer { padding:40px 32px; text-align:center; background:var(--dark); color:var(--silver); font-size:13px; }
|
||||
.footer a { color:var(--bmw-blue); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:36px; } .nav-links { display:none; } .section { padding:48px 20px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Explore</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#1c69d4;color:#ffffff;font-size:11px;font-weight:700;padding:4px 10px;">Dark Mode</div>
|
||||
|
||||
<section class="hero"><div class="hero-inner">
|
||||
<h1>Design System<br>Inspired by BMW</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized with sharp precision.</p>
|
||||
<div class="hero-buttons"><a class="btn-blue" href="#">Explore Models</a><a class="btn-outline" href="#">Find Your BMW</a></div>
|
||||
</div></section>
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c69d4"></div><div class="color-swatch-info"><div class="color-swatch-name">BMW Blue</div><div class="color-swatch-hex">#1c69d4</div><div class="color-swatch-role">Highlight accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0653b6"></div><div class="color-swatch-info"><div class="color-swatch-name">Focus Blue</div><div class="color-swatch-hex">#0653b6</div><div class="color-swatch-role">Focus states</div></div></div>
|
||||
<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">Theme White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary surface</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#262626"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#262626</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#757575"></div><div class="color-swatch-info"><div class="color-swatch-name">Meta Gray</div><div class="color-swatch-hex">#757575</div><div class="color-swatch-role">Secondary text</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">Silver</div><div class="color-swatch-hex">#bbbbbb</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase;">DISPLAY HERO</div><div class="type-meta">Display — 60px / 300 / 1.30 / uppercase / BMWTypeNextLatin Light</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.30;">Section Heading</div><div class="type-meta">Section — 32px / 400 / 1.30 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:900; line-height:1.30;">Nav Emphasis — SHEER DRIVING PLEASURE</div><div class="type-meta">Nav — 18px / 900 / 1.30 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.15;">Body — The ultimate driving machine. Precision engineering meets luxury design.</div><div class="type-meta">Body — 16px / 400 / 1.15 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:700; line-height:1.20;">Button Bold — EXPLORE NOW</div><div class="type-meta">Button — 16px / 700 / 1.20 / BMWTypeNextLatin</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">BMW Blue</a><div class="button-label">Primary</div></div>
|
||||
<div class="button-item"><a class="btn-outline" style="color:var(--black); border-color:var(--black);" href="#">Outlined</a><div class="button-label">Secondary</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--dark); color:var(--white); padding:12px 24px; font-size:16px; font-weight:400;">Dark Surface</span><div class="button-label">Dark</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:var(--meta); margin-top:16px;">All buttons use 0px border-radius — sharp corners are non-negotiable.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>BMW iX</h3><p>The future of sustainable mobility. All-electric, all BMW. Sharp corners, minimal borders.</p></div>
|
||||
<div class="card"><h3>BMW M Series</h3><p>Performance without compromise. Track-ready engineering for the road.</p></div>
|
||||
<div class="card" style="background:var(--dark); color:var(--white); border:none;"><h3 style="color:var(--white);">Dark Variant</h3><p style="color:var(--silver);">Cards on dark surfaces. No border, no radius — pure geometry.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Model</label><input class="form-input" type="text" placeholder="BMW 3 Series"><div class="form-state-label">Default (sharp corners)</div></div>
|
||||
<div class="form-group"><label class="form-label">Location</label><input class="form-input form-input--focus" type="text" value="Munich"><div class="form-state-label">Focus (BMW Focus Blue)</div></div>
|
||||
<div class="form-group"><label class="form-label">VIN</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Your configuration..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:60px"></div><div class="spacing-value">60</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:0px"></div><div class="radius-label">0px</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:var(--meta); margin-top:12px;">BMW uses 0px border-radius exclusively. Every element is a sharp rectangle.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — default</div></div>
|
||||
<div class="elevation-card" style="background:var(--dark); color:var(--white); border:none;"><div class="elevation-label">Photography</div><div class="elevation-desc">Dark hero sections</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px var(--focus-blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">BMW Focus Blue ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://www.bmw.com/">bmw.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
210
design-md/bmw/preview.html
Normal file
210
design-md/bmw/preview.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!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: BMW (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@300;400;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #ffffff; --black: #262626; --bmw-blue: #1c69d4; --focus-blue: #0653b6;
|
||||
--meta: #757575; --silver: #bbbbbb; --dark: #1a1a1a;
|
||||
--font: 'Inter', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; font-weight:400; line-height:1.15; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:var(--dark); }
|
||||
.nav-brand { font-size:14px; font-weight:400; color:var(--white); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:16px; font-weight:900; color:var(--white); text-decoration:none; line-height:1.30; transition:opacity 0.15s; }
|
||||
.nav-links a:hover { opacity:0.8; }
|
||||
.nav-cta { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:10px 20px; font-size:16px; font-weight:700; text-decoration:none; border-radius:0; }
|
||||
|
||||
.hero { padding:80px 32px; background:var(--dark); text-align:left; color:var(--white); }
|
||||
.hero-inner { max-width:900px; margin:0 auto; }
|
||||
.hero h1 { font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase; margin-bottom:16px; }
|
||||
.hero p { font-size:16px; font-weight:400; line-height:1.30; color:var(--silver); max-width:550px; margin-bottom:32px; }
|
||||
.hero-buttons { display:flex; gap:12px; }
|
||||
.btn-blue { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:12px 24px; font-family:var(--font); font-size:16px; font-weight:700; text-decoration:none; border:none; cursor:pointer; border-radius:0; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--white); padding:12px 24px; border:1px solid var(--white); font-family:var(--font); font-size:16px; font-weight:400; text-decoration:none; cursor:pointer; border-radius:0; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:900; color:var(--meta); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
|
||||
.section-title { font-size:32px; font-weight:400; line-height:1.30; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid #e0e0e0; margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { overflow:hidden; border:1px solid #e0e0e0; }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px 12px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:700; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:11px; color:var(--meta); font-family:monospace; }
|
||||
.color-swatch-role { font-size:10px; color:var(--meta); margin-top:3px; }
|
||||
.color-group-label { font-size:14px; font-weight:700; color:var(--meta); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid #f0f0f0; }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:11px; color:var(--meta); margin-top:6px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:11px; font-weight:700; color:var(--meta); margin-top:8px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border:1px solid #e0e0e0; padding:24px; }
|
||||
.card h3 { font-size:18px; font-weight:700; margin-bottom:8px; line-height:1.30; }
|
||||
.card p { font-size:16px; color:var(--meta); line-height:1.30; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:700; margin-bottom:6px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; outline:none; border-radius:0; }
|
||||
.form-input:focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }
|
||||
.form-input--focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }
|
||||
.form-input--error { border-color:#c00; box-shadow:0 0 0 2px rgba(204,0,0,0.2); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; border-radius:0; }
|
||||
.form-state-label { font-size:10px; color:var(--meta); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--bmw-blue); margin-bottom:6px; height:28px; }
|
||||
.spacing-value { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; background:var(--dark); margin-bottom:6px; }
|
||||
.radius-label { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { background:var(--white); border:1px solid #e0e0e0; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:14px; font-weight:700; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:10px; color:var(--meta); font-family:monospace; }
|
||||
|
||||
.footer { padding:40px 32px; text-align:center; background:var(--dark); color:var(--silver); font-size:13px; }
|
||||
.footer a { color:var(--bmw-blue); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:36px; } .nav-links { display:none; } .section { padding:48px 20px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Explore</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero"><div class="hero-inner">
|
||||
<h1>Design System<br>Inspired by BMW</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized with sharp precision.</p>
|
||||
<div class="hero-buttons"><a class="btn-blue" href="#">Explore Models</a><a class="btn-outline" href="#">Find Your BMW</a></div>
|
||||
</div></section>
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c69d4"></div><div class="color-swatch-info"><div class="color-swatch-name">BMW Blue</div><div class="color-swatch-hex">#1c69d4</div><div class="color-swatch-role">Highlight accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0653b6"></div><div class="color-swatch-info"><div class="color-swatch-name">Focus Blue</div><div class="color-swatch-hex">#0653b6</div><div class="color-swatch-role">Focus states</div></div></div>
|
||||
<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">Theme White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary surface</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#262626"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#262626</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#757575"></div><div class="color-swatch-info"><div class="color-swatch-name">Meta Gray</div><div class="color-swatch-hex">#757575</div><div class="color-swatch-role">Secondary text</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">Silver</div><div class="color-swatch-hex">#bbbbbb</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase;">DISPLAY HERO</div><div class="type-meta">Display — 60px / 300 / 1.30 / uppercase / BMWTypeNextLatin Light</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.30;">Section Heading</div><div class="type-meta">Section — 32px / 400 / 1.30 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:900; line-height:1.30;">Nav Emphasis — SHEER DRIVING PLEASURE</div><div class="type-meta">Nav — 18px / 900 / 1.30 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.15;">Body — The ultimate driving machine. Precision engineering meets luxury design.</div><div class="type-meta">Body — 16px / 400 / 1.15 / BMWTypeNextLatin</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:700; line-height:1.20;">Button Bold — EXPLORE NOW</div><div class="type-meta">Button — 16px / 700 / 1.20 / BMWTypeNextLatin</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">BMW Blue</a><div class="button-label">Primary</div></div>
|
||||
<div class="button-item"><a class="btn-outline" style="color:var(--black); border-color:var(--black);" href="#">Outlined</a><div class="button-label">Secondary</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--dark); color:var(--white); padding:12px 24px; font-size:16px; font-weight:400;">Dark Surface</span><div class="button-label">Dark</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:var(--meta); margin-top:16px;">All buttons use 0px border-radius — sharp corners are non-negotiable.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>BMW iX</h3><p>The future of sustainable mobility. All-electric, all BMW. Sharp corners, minimal borders.</p></div>
|
||||
<div class="card"><h3>BMW M Series</h3><p>Performance without compromise. Track-ready engineering for the road.</p></div>
|
||||
<div class="card" style="background:var(--dark); color:var(--white); border:none;"><h3 style="color:var(--white);">Dark Variant</h3><p style="color:var(--silver);">Cards on dark surfaces. No border, no radius — pure geometry.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Model</label><input class="form-input" type="text" placeholder="BMW 3 Series"><div class="form-state-label">Default (sharp corners)</div></div>
|
||||
<div class="form-group"><label class="form-label">Location</label><input class="form-input form-input--focus" type="text" value="Munich"><div class="form-state-label">Focus (BMW Focus Blue)</div></div>
|
||||
<div class="form-group"><label class="form-label">VIN</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Your configuration..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:60px"></div><div class="spacing-value">60</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:0px"></div><div class="radius-label">0px</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:var(--meta); margin-top:12px;">BMW uses 0px border-radius exclusively. Every element is a sharp rectangle.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — default</div></div>
|
||||
<div class="elevation-card" style="background:var(--dark); color:var(--white); border:none;"><div class="elevation-label">Photography</div><div class="elevation-desc">Dark hero sections</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px var(--focus-blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">BMW Focus Blue ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://www.bmw.com/">bmw.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
304
design-md/clay/DESIGN.md
Normal file
304
design-md/clay/DESIGN.md
Normal file
@@ -0,0 +1,304 @@
|
||||
# Design System: Clay
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.
|
||||
|
||||
The typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`) that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.
|
||||
|
||||
What makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), change background to a contrasting swatch color, and cast a hard offset shadow (`rgb(0,0,0) -7px 7px`). This playful hover behavior — where a button literally tilts and jumps on interaction — creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px–40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`) — artisanal, not clinical
|
||||
- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit
|
||||
- Roobert font with 5 OpenType stylistic sets — quirky geometric character
|
||||
- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow
|
||||
- Space Mono for code and technical labels
|
||||
- Generous border radius: 24px cards, 40px sections, 1584px pills
|
||||
- Mixed border styles: solid + dashed in the same interface
|
||||
- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` + `-0.5px`
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`
|
||||
- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text
|
||||
- **Warm Cream** (`#faf9f7`): Page background — the warm, paper-like canvas
|
||||
|
||||
### Swatch Palette — Named Colors
|
||||
|
||||
**Matcha (Green)**
|
||||
- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green accent
|
||||
- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green
|
||||
- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for dark sections
|
||||
|
||||
**Slushie (Cyan)**
|
||||
- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan accent
|
||||
- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal
|
||||
|
||||
**Lemon (Gold)**
|
||||
- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold
|
||||
- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold
|
||||
- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber
|
||||
- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber
|
||||
|
||||
**Ube (Purple)**
|
||||
- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender
|
||||
- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple
|
||||
- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple
|
||||
|
||||
**Pomegranate (Pink/Red)**
|
||||
- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm coral-pink
|
||||
|
||||
**Blueberry (Navy Blue)**
|
||||
- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy
|
||||
|
||||
### Neutral Scale (Warm)
|
||||
- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links
|
||||
- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links
|
||||
- **Dark Charcoal** (`#333333`): Link text on light backgrounds
|
||||
|
||||
### Surface & Border
|
||||
- **Oat Border** (`#dad4c8`): Primary border — warm, cream-toned structural lines
|
||||
- **Oat Light** (`#eee9df`): Secondary lighter border
|
||||
- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections
|
||||
- **Dark Border** (`#525a69`): Border on dark sections
|
||||
- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)
|
||||
|
||||
### Badges
|
||||
- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface
|
||||
- **Badge Blue Text** (`#3859f9`): Vivid blue badge text
|
||||
- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator
|
||||
|
||||
### Shadows
|
||||
- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight — the signature
|
||||
- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state — playful hard shadow
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Primary**: `Roobert`, fallback: `Arial`
|
||||
- **Monospace**: `Space Mono`
|
||||
- **OpenType Features**: `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on all Roobert text (display uses all 5; body/UI uses `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`)
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |
|
||||
| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |
|
||||
| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |
|
||||
| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |
|
||||
| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |
|
||||
| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |
|
||||
| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |
|
||||
| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |
|
||||
| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |
|
||||
| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 stylistic sets |
|
||||
| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |
|
||||
| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |
|
||||
| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |
|
||||
| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |
|
||||
| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 stylistic sets |
|
||||
| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |
|
||||
| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |
|
||||
| Badge | Roobert | 9.6px | 600 | — | — | Pill badges |
|
||||
|
||||
### Principles
|
||||
- **Five stylistic sets as identity**: The combination of `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on Roobert creates a distinctive typographic personality. `ss01` is reserved for headings and emphasis — body text omits it, creating a subtle hierarchy through glyph variation.
|
||||
- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px — the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.
|
||||
- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system where each weight has a strict role.
|
||||
- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (Transparent with Hover Animation)**
|
||||
- Background: transparent (`rgba(239, 241, 243, 0)`)
|
||||
- Text: `#000000`
|
||||
- Padding: 6.4px 12.8px
|
||||
- Border: none (or `1px solid #717989` for outlined variant)
|
||||
- Hover: background shifts to swatch color (e.g., `#434346`), text to white, `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`
|
||||
- Focus: `rgb(20, 110, 245) solid 2px` outline
|
||||
|
||||
**White Solid**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#000000`
|
||||
- Padding: 6.4px
|
||||
- Hover: oat-200 swatch color, animated rotation + shadow
|
||||
- Use: Primary CTA on colored sections
|
||||
|
||||
**Ghost Outlined**
|
||||
- Background: transparent
|
||||
- Text: `#000000`
|
||||
- Padding: 8px
|
||||
- Border: `1px solid #717989`
|
||||
- Radius: 4px
|
||||
- Hover: dragonfruit swatch color, white text, animated rotation
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#ffffff` on cream canvas
|
||||
- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`
|
||||
- Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)
|
||||
- Shadow: `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`
|
||||
- Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)
|
||||
|
||||
### Inputs & Forms
|
||||
- Text: `#000000`
|
||||
- Border: `1px solid #717989`
|
||||
- Radius: 4px
|
||||
- Focus: `rgb(20, 110, 245) solid 2px` outline
|
||||
|
||||
### Navigation
|
||||
- Sticky top nav on cream background
|
||||
- Roobert 15px weight 500 for nav links
|
||||
- Clay logo left-aligned
|
||||
- CTA buttons right-aligned with pill radius
|
||||
- Border bottom: `1px solid #dad4c8`
|
||||
- Mobile: hamburger collapse at 767px
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots in white cards with oat borders
|
||||
- Colorful illustrated sections with swatch background colors
|
||||
- 8px–24px radius on images
|
||||
- Full-width colorful section backgrounds
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Swatch Color Sections**
|
||||
- Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)
|
||||
- White text on dark swatches, black text on light swatches
|
||||
- Each section tells a distinct product story through its color
|
||||
|
||||
**Playful Hover Buttons**
|
||||
- Rotate -8deg + translate upward on hover
|
||||
- Hard offset shadow (`-7px 7px`) instead of soft blur
|
||||
- Background transitions to contrasting swatch color
|
||||
- Creates a physical, toy-like interaction quality
|
||||
|
||||
**Dashed Border Elements**
|
||||
- Dashed borders (`1px dashed #dad4c8`) alongside solid borders
|
||||
- Used for secondary containers and decorative elements
|
||||
- Adds a hand-drawn, craft-like quality
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px
|
||||
|
||||
### Grid & Container
|
||||
- Max content width centered
|
||||
- Feature sections alternate between white cards and colorful swatch backgrounds
|
||||
- Card grids: 2–3 columns on desktop
|
||||
- Full-width colorful sections break the grid
|
||||
- Footer with generous 40px radius container
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Warm, generous breathing**: The cream background provides a warm rest between content blocks. Spacing is generous but not austere — it feels inviting, like a well-set table.
|
||||
- **Color as spatial rhythm**: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own "room."
|
||||
- **Craft-like density inside cards**: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.
|
||||
|
||||
### Border Radius Scale
|
||||
- Sharp (4px): Ghost buttons, inputs
|
||||
- Standard (8px): Small cards, images, links
|
||||
- Badge (11px): Tag badges
|
||||
- Card (12px): Standard cards, buttons
|
||||
- Feature (24px): Feature cards, images, panels
|
||||
- Section (40px): Large sections, footer, containers
|
||||
- Pill (1584px): CTAs, pill-shaped buttons
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, cream canvas | Page background |
|
||||
| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons — multi-layer with inset highlight |
|
||||
| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state — playful hard offset shadow |
|
||||
| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |
|
||||
|
||||
**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`), and a subtle edge (`0px -0.5px 1px`). This creates a "pressed into clay" quality where elements feel both raised AND embedded — like a clay tablet where content is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.
|
||||
|
||||
### Decorative Depth
|
||||
- Full-width swatch-colored sections create dramatic depth through color contrast
|
||||
- Dashed borders add visual texture alongside solid borders
|
||||
- Product illustrations with warm, organic art style
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use warm cream (`#faf9f7`) as the page background — the warmth is the identity
|
||||
- Apply all 5 OpenType stylistic sets on Roobert headings: `"ss01", "ss03", "ss10", "ss11", "ss12"`
|
||||
- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds
|
||||
- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `-7px 7px`
|
||||
- Use warm oat borders (`#dad4c8`) — not neutral gray
|
||||
- Mix solid and dashed borders for visual variety
|
||||
- Use generous radius: 24px for cards, 40px for sections
|
||||
- Use weight 600 exclusively for headings, 500 for UI, 400 for body
|
||||
|
||||
### Don't
|
||||
- Don't use cool gray backgrounds — the warm cream (`#faf9f7`) is non-negotiable
|
||||
- Don't use neutral gray borders (`#ccc`, `#ddd`) — always use the warm oat tones
|
||||
- Don't mix more than 2 swatch colors in the same section
|
||||
- Don't skip the OpenType stylistic sets — they define Roobert's character
|
||||
- Don't use subtle hover effects — the rotation + hard shadow is the signature interaction
|
||||
- Don't use small border radius (<12px) on feature cards — the generous rounding is structural
|
||||
- Don't use standard shadows (blur-based) — Clay uses hard offset and multi-layer inset
|
||||
- Don't forget the uppercase labels with 1.08px tracking — they're the wayfinding system
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <479px | Single column, tight padding |
|
||||
| Mobile | 479–767px | Standard mobile, stacked layout |
|
||||
| Tablet | 768–991px | 2-column grids, condensed nav |
|
||||
| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons: minimum 6.4px + 12.8px padding for adequate touch area
|
||||
- Nav links: 15px font with generous spacing
|
||||
- Mobile: full-width buttons for easy tapping
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 80px → 60px → smaller display text
|
||||
- Navigation: horizontal → hamburger at 767px
|
||||
- Feature sections: multi-column → stacked
|
||||
- Colorful sections: maintain full-width but compress padding
|
||||
- Card grids: 3-column → 2-column → single column
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots scale proportionally
|
||||
- Colorful section illustrations adapt to viewport width
|
||||
- Rounded corners maintained across breakpoints
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Warm Cream (`#faf9f7`)
|
||||
- Text: Clay Black (`#000000`)
|
||||
- Secondary text: Warm Silver (`#9f9b93`)
|
||||
- Border: Oat Border (`#dad4c8`)
|
||||
- Green accent: Matcha 600 (`#078a52`)
|
||||
- Cyan accent: Slushie 500 (`#3bd3fd`)
|
||||
- Gold accent: Lemon 500 (`#fbbd41`)
|
||||
- Purple accent: Ube 800 (`#43089f`)
|
||||
- Pink accent: Pomegranate 400 (`#fc7981`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989)."
|
||||
- "Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius."
|
||||
- "Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px."
|
||||
- "Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px."
|
||||
- "Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with warm cream (#faf9f7) — never cool white
|
||||
2. Swatch colors are for full sections, not small accents — go bold with matcha, slushie, ube
|
||||
3. Oat borders (#dad4c8) everywhere — dashed variants for decoration
|
||||
4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert
|
||||
5. Hover animations are the signature — rotation + hard shadow, not subtle fades
|
||||
6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate
|
||||
7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles
|
||||
23
design-md/clay/README.md
Normal file
23
design-md/clay/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Clay Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) extracted from the public [clay](https://clay.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/clay/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Clay 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
318
design-md/clay/preview-dark.html
Normal file
318
design-md/clay/preview-dark.html
Normal file
@@ -0,0 +1,318 @@
|
||||
<!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: Clay (Dark)</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--cream: #1a1815;
|
||||
--black: #f0ede8;
|
||||
--white: #242220;
|
||||
--oat: #3d3a35;
|
||||
--oat-light: #2e2b27;
|
||||
--silver: #7a766e;
|
||||
--charcoal: #a09c94;
|
||||
--matcha-300: #84e7a5;
|
||||
--matcha-600: #078a52;
|
||||
--matcha-800: #02492a;
|
||||
--slushie-500: #3bd3fd;
|
||||
--slushie-800: #0089ad;
|
||||
--lemon-400: #f8cc65;
|
||||
--lemon-500: #fbbd41;
|
||||
--ube-300: #c1b0ff;
|
||||
--ube-800: #43089f;
|
||||
--pomegranate-400: #fc7981;
|
||||
--blueberry-800: #01418d;
|
||||
--badge-bg: #f0f8ff;
|
||||
--badge-text: #3859f9;
|
||||
--focus: rgb(20,110,245);
|
||||
--font-sans: 'DM Sans', Arial, sans-serif;
|
||||
--font-mono: 'Space Mono', monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--cream);
|
||||
color: var(--black);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-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(26,24,21,0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--oat);
|
||||
}
|
||||
.nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 15px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--black); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--black); color: var(--white);
|
||||
padding: 8px 18px; border-radius: 12px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.3s;
|
||||
}
|
||||
.nav-cta:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgb(0,0,0) -3px 3px; }
|
||||
|
||||
.hero { padding: 80px 32px 64px; max-width: 1000px; margin: 0 auto; }
|
||||
.hero h1 { font-size: 72px; font-weight: 600; line-height: 1.00; letter-spacing: -3.2px; margin-bottom: 16px; }
|
||||
.hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--silver); max-width: 560px; margin-bottom: 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.btn-solid { display: inline-block; background: var(--black); color: var(--white); padding: 10px 20px; border-radius: 12px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s; }
|
||||
.btn-solid:hover { transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }
|
||||
.btn-outline { display: inline-block; background: transparent; color: var(--black); padding: 10px 20px; border-radius: 4px; border: 1px solid #717989; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }
|
||||
.btn-outline:hover { background: var(--ube-800); color: white; transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }
|
||||
.btn-white { display: inline-block; background: var(--white); color: var(--black); padding: 8px 16px; border-radius: 12px; border: 1px solid var(--oat); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }
|
||||
.btn-white:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgba(0,0,0,0.1) -3px 3px; }
|
||||
|
||||
.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.08px; color: var(--silver); margin-bottom: 8px; }
|
||||
.section-title { font-size: 32px; font-weight: 600; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--oat); margin: 0; }
|
||||
.section-divider-dashed { border: none; border-top: 1px dashed var(--oat); margin: 0; }
|
||||
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--oat); background: var(--white); }
|
||||
.color-swatch-block { height: 68px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px; }
|
||||
.color-swatch-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 10px; color: var(--charcoal); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--oat-light); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--silver); margin-top: 6px; }
|
||||
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 11px; font-weight: 500; color: var(--silver); margin-top: 8px; }
|
||||
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
|
||||
.card { background: var(--white); border: 1px solid var(--oat); border-radius: 24px; padding: 24px; box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px; }
|
||||
.card-dashed { background: var(--white); border: 1px dashed var(--oat); border-radius: 24px; padding: 24px; }
|
||||
.card-colored { border-radius: 24px; padding: 24px; color: var(--white); }
|
||||
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 8px; }
|
||||
.card p, .card-dashed p, .card-colored p { font-size: 14px; line-height: 1.50; }
|
||||
.card-badge { display: inline-block; font-size: 9.6px; font-weight: 600; padding: 2px 6px; border-radius: 11px; margin-bottom: 12px; }
|
||||
|
||||
.form-group { margin-bottom: 16px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
|
||||
.form-input { width: 100%; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; outline: none; }
|
||||
.form-input:focus { outline: 2px solid var(--focus); }
|
||||
.form-input--focus { outline: 2px solid var(--focus); }
|
||||
.form-input--error { border-color: var(--pomegranate-400); outline: 2px solid var(--pomegranate-400); }
|
||||
.form-textarea { width: 100%; min-height: 80px; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none; }
|
||||
.form-state-label { font-size: 10px; color: var(--silver); margin-top: 4px; }
|
||||
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--matcha-600); border-radius: 4px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 60px; height: 60px; background: var(--lemon-500); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
.radius-context { font-size: 9px; color: var(--charcoal); }
|
||||
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
|
||||
.elevation-card { background: var(--white); border-radius: 24px; padding: 20px; text-align: center; border: 1px solid var(--oat); }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
|
||||
.footer { padding: 40px 32px; text-align: center; background: var(--white); border-top: 1px solid var(--oat); border-radius: 40px 40px 0 0; font-size: 13px; color: var(--silver); }
|
||||
.footer a { color: var(--matcha-600); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hero h1 { font-size: 44px; letter-spacing: -1.32px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#fbbd41;color:#000000;font-size:11px;font-weight:600;padding:4px 10px;border-radius:11px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Clay</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-solid" href="#">Start Building</a>
|
||||
<a class="btn-outline" href="#">Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Clay Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Cards, buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f7"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f7</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Swatch Palette</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#84e7a5"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 300</div><div class="color-swatch-hex">#84e7a5</div><div class="color-swatch-role">Light green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#078a52"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 600</div><div class="color-swatch-hex">#078a52</div><div class="color-swatch-role">Mid green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#02492a"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 800</div><div class="color-swatch-hex">#02492a</div><div class="color-swatch-role">Deep green sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3bd3fd"></div><div class="color-swatch-info"><div class="color-swatch-name">Slushie 500</div><div class="color-swatch-hex">#3bd3fd</div><div class="color-swatch-role">Bright cyan</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fbbd41"></div><div class="color-swatch-info"><div class="color-swatch-name">Lemon 500</div><div class="color-swatch-hex">#fbbd41</div><div class="color-swatch-role">Primary gold</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c1b0ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Ube 300</div><div class="color-swatch-hex">#c1b0ff</div><div class="color-swatch-role">Soft lavender</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#43089f"></div><div class="color-swatch-info"><div class="color-swatch-name">Ube 800</div><div class="color-swatch-hex">#43089f</div><div class="color-swatch-role">Deep purple</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fc7981"></div><div class="color-swatch-info"><div class="color-swatch-name">Pomegranate 400</div><div class="color-swatch-hex">#fc7981</div><div class="color-swatch-role">Coral pink</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#01418d"></div><div class="color-swatch-info"><div class="color-swatch-name">Blueberry 800</div><div class="color-swatch-hex">#01418d</div><div class="color-swatch-role">Deep navy</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral & Border</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9f9b93"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Silver</div><div class="color-swatch-hex">#9f9b93</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#55534e"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Charcoal</div><div class="color-swatch-hex">#55534e</div><div class="color-swatch-role">Tertiary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#dad4c8"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dad4c8</div><div class="color-swatch-role">Primary border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#eee9df"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Light</div><div class="color-swatch-hex">#eee9df</div><div class="color-swatch-role">Secondary border</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:72px; font-weight:600; line-height:1.00; letter-spacing:-3.2px;">Display Hero</div><div class="type-meta">Display — 80px / 600 / 1.00 / -3.2px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:52px; font-weight:600; line-height:1.00; letter-spacing:-2.4px;">Display Secondary</div><div class="type-meta">Secondary — 60px / 600 / 1.00 / -2.4px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:44px; font-weight:600; line-height:1.10; letter-spacing:-1.32px;">Section Heading</div><div class="type-meta">Section — 44px / 600 / 1.10 / -1.32px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:600; line-height:1.10; letter-spacing:-0.64px;">Card Heading</div><div class="type-meta">Card — 32px / 600 / 1.10 / -0.64px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.4px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.40 / -0.4px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.36px;">Body — Go to market with unique data — and the ability to act on it. Clay helps sales teams build pipeline.</div><div class="type-meta">Body — 18px / 400 / 1.60 / -0.36px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.50; letter-spacing:-0.16px;">Button — Start your free trial</div><div class="type-meta">Button — 16px / 500 / 1.50 / -0.16px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50;">Caption — Updated 3 minutes ago</div><div class="type-meta">Caption — 14px / 400 / 1.50 / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:600; line-height:1.20; text-transform:uppercase; letter-spacing:1.08px;">Uppercase Label</div><div class="type-meta">Label — 12px / 600 / uppercase / 1.08px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50; color:var(--matcha-600);">clay.people.enrich({ email: 'user@company.com' })</div><div class="type-meta">Code — 14px / 400 / Space Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-solid" href="#">Start Building</a><div class="button-label">Primary Solid</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Learn More</a><div class="button-label">White Card</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">View Docs</a><div class="button-label">Ghost Outlined</div></div>
|
||||
<div class="button-item"><span class="card-badge" style="background:var(--badge-bg); color:var(--badge-text);">NEW FEATURE</span><div class="button-label">Badge</div></div>
|
||||
</div>
|
||||
<p style="font-size:13px; color:var(--silver); margin-top:16px;">Hover over buttons to see the playful rotateZ + hard shadow animation.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(7,138,82,0.1); color:var(--matcha-600);">Data Enrichment</div>
|
||||
<h3>Turn data into action</h3>
|
||||
<p style="color:var(--charcoal);">Enrich any record with 100+ data providers. Build automated workflows with Clay tables.</p>
|
||||
</div>
|
||||
<div class="card-dashed">
|
||||
<div class="card-badge" style="background:rgba(67,8,159,0.1); color:var(--ube-800);">Dashed Border</div>
|
||||
<h3>Flexible integrations</h3>
|
||||
<p style="color:var(--charcoal);">Connect to any CRM, email tool, or data source. Dashed border variant for secondary content.</p>
|
||||
</div>
|
||||
<div class="card-colored" style="background:var(--matcha-800);">
|
||||
<div class="card-badge" style="background:rgba(132,231,165,0.2); color:var(--matcha-300);">Colored Section</div>
|
||||
<h3>Growth on autopilot</h3>
|
||||
<p style="color:rgba(255,255,255,0.8);">Full-width colored section using the Matcha 800 swatch background.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Company Name</label><input class="form-input" type="text" placeholder="Acme Corp"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@clay.com"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (pomegranate ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Add enrichment notes..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Feature cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div><div class="radius-context">Sections</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">CTAs</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">Cream canvas</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px;"><div class="elevation-label">Level 1: Clay</div><div class="elevation-desc">Multi-layer + inset</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgb(0,0,0) -7px 7px; transform: rotateZ(-2deg);"><div class="elevation-label">Level 2: Hover Hard</div><div class="elevation-desc">Hard offset shadow</div></div>
|
||||
<div class="elevation-card" style="outline: 2px solid rgb(20,110,245);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue focus ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://clay.com/">clay.com</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
317
design-md/clay/preview.html
Normal file
317
design-md/clay/preview.html
Normal file
@@ -0,0 +1,317 @@
|
||||
<!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: Clay (Light)</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--cream: #faf9f7;
|
||||
--black: #000000;
|
||||
--white: #ffffff;
|
||||
--oat: #dad4c8;
|
||||
--oat-light: #eee9df;
|
||||
--silver: #9f9b93;
|
||||
--charcoal: #55534e;
|
||||
--matcha-300: #84e7a5;
|
||||
--matcha-600: #078a52;
|
||||
--matcha-800: #02492a;
|
||||
--slushie-500: #3bd3fd;
|
||||
--slushie-800: #0089ad;
|
||||
--lemon-400: #f8cc65;
|
||||
--lemon-500: #fbbd41;
|
||||
--ube-300: #c1b0ff;
|
||||
--ube-800: #43089f;
|
||||
--pomegranate-400: #fc7981;
|
||||
--blueberry-800: #01418d;
|
||||
--badge-bg: #f0f8ff;
|
||||
--badge-text: #3859f9;
|
||||
--focus: rgb(20,110,245);
|
||||
--font-sans: 'DM Sans', Arial, sans-serif;
|
||||
--font-mono: 'Space Mono', monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--cream);
|
||||
color: var(--black);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-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(250,249,247,0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--oat);
|
||||
}
|
||||
.nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 15px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--black); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--black); color: var(--white);
|
||||
padding: 8px 18px; border-radius: 12px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.3s;
|
||||
}
|
||||
.nav-cta:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgb(0,0,0) -3px 3px; }
|
||||
|
||||
.hero { padding: 80px 32px 64px; max-width: 1000px; margin: 0 auto; }
|
||||
.hero h1 { font-size: 72px; font-weight: 600; line-height: 1.00; letter-spacing: -3.2px; margin-bottom: 16px; }
|
||||
.hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--silver); max-width: 560px; margin-bottom: 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.btn-solid { display: inline-block; background: var(--black); color: var(--white); padding: 10px 20px; border-radius: 12px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s; }
|
||||
.btn-solid:hover { transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }
|
||||
.btn-outline { display: inline-block; background: transparent; color: var(--black); padding: 10px 20px; border-radius: 4px; border: 1px solid #717989; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }
|
||||
.btn-outline:hover { background: var(--ube-800); color: white; transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }
|
||||
.btn-white { display: inline-block; background: var(--white); color: var(--black); padding: 8px 16px; border-radius: 12px; border: 1px solid var(--oat); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }
|
||||
.btn-white:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgba(0,0,0,0.1) -3px 3px; }
|
||||
|
||||
.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.08px; color: var(--silver); margin-bottom: 8px; }
|
||||
.section-title { font-size: 32px; font-weight: 600; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--oat); margin: 0; }
|
||||
.section-divider-dashed { border: none; border-top: 1px dashed var(--oat); margin: 0; }
|
||||
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--oat); background: var(--white); }
|
||||
.color-swatch-block { height: 68px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px; }
|
||||
.color-swatch-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 10px; color: var(--charcoal); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--oat-light); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--silver); margin-top: 6px; }
|
||||
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 11px; font-weight: 500; color: var(--silver); margin-top: 8px; }
|
||||
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
|
||||
.card { background: var(--white); border: 1px solid var(--oat); border-radius: 24px; padding: 24px; box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px; }
|
||||
.card-dashed { background: var(--white); border: 1px dashed var(--oat); border-radius: 24px; padding: 24px; }
|
||||
.card-colored { border-radius: 24px; padding: 24px; color: var(--white); }
|
||||
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 8px; }
|
||||
.card p, .card-dashed p, .card-colored p { font-size: 14px; line-height: 1.50; }
|
||||
.card-badge { display: inline-block; font-size: 9.6px; font-weight: 600; padding: 2px 6px; border-radius: 11px; margin-bottom: 12px; }
|
||||
|
||||
.form-group { margin-bottom: 16px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
|
||||
.form-input { width: 100%; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; outline: none; }
|
||||
.form-input:focus { outline: 2px solid var(--focus); }
|
||||
.form-input--focus { outline: 2px solid var(--focus); }
|
||||
.form-input--error { border-color: var(--pomegranate-400); outline: 2px solid var(--pomegranate-400); }
|
||||
.form-textarea { width: 100%; min-height: 80px; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none; }
|
||||
.form-state-label { font-size: 10px; color: var(--silver); margin-top: 4px; }
|
||||
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--matcha-600); border-radius: 4px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 60px; height: 60px; background: var(--lemon-500); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
.radius-context { font-size: 9px; color: var(--charcoal); }
|
||||
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
|
||||
.elevation-card { background: var(--white); border-radius: 24px; padding: 20px; text-align: center; border: 1px solid var(--oat); }
|
||||
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }
|
||||
|
||||
.footer { padding: 40px 32px; text-align: center; background: var(--white); border-top: 1px solid var(--oat); border-radius: 40px 40px 0 0; font-size: 13px; color: var(--silver); }
|
||||
.footer a { color: var(--matcha-600); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hero h1 { font-size: 44px; letter-spacing: -1.32px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Clay</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-solid" href="#">Start Building</a>
|
||||
<a class="btn-outline" href="#">Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Clay Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Cards, buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f7"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f7</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Swatch Palette</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#84e7a5"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 300</div><div class="color-swatch-hex">#84e7a5</div><div class="color-swatch-role">Light green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#078a52"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 600</div><div class="color-swatch-hex">#078a52</div><div class="color-swatch-role">Mid green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#02492a"></div><div class="color-swatch-info"><div class="color-swatch-name">Matcha 800</div><div class="color-swatch-hex">#02492a</div><div class="color-swatch-role">Deep green sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3bd3fd"></div><div class="color-swatch-info"><div class="color-swatch-name">Slushie 500</div><div class="color-swatch-hex">#3bd3fd</div><div class="color-swatch-role">Bright cyan</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fbbd41"></div><div class="color-swatch-info"><div class="color-swatch-name">Lemon 500</div><div class="color-swatch-hex">#fbbd41</div><div class="color-swatch-role">Primary gold</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c1b0ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Ube 300</div><div class="color-swatch-hex">#c1b0ff</div><div class="color-swatch-role">Soft lavender</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#43089f"></div><div class="color-swatch-info"><div class="color-swatch-name">Ube 800</div><div class="color-swatch-hex">#43089f</div><div class="color-swatch-role">Deep purple</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#fc7981"></div><div class="color-swatch-info"><div class="color-swatch-name">Pomegranate 400</div><div class="color-swatch-hex">#fc7981</div><div class="color-swatch-role">Coral pink</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#01418d"></div><div class="color-swatch-info"><div class="color-swatch-name">Blueberry 800</div><div class="color-swatch-hex">#01418d</div><div class="color-swatch-role">Deep navy</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral & Border</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9f9b93"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Silver</div><div class="color-swatch-hex">#9f9b93</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#55534e"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Charcoal</div><div class="color-swatch-hex">#55534e</div><div class="color-swatch-role">Tertiary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#dad4c8"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dad4c8</div><div class="color-swatch-role">Primary border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#eee9df"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Light</div><div class="color-swatch-hex">#eee9df</div><div class="color-swatch-role">Secondary border</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:72px; font-weight:600; line-height:1.00; letter-spacing:-3.2px;">Display Hero</div><div class="type-meta">Display — 80px / 600 / 1.00 / -3.2px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:52px; font-weight:600; line-height:1.00; letter-spacing:-2.4px;">Display Secondary</div><div class="type-meta">Secondary — 60px / 600 / 1.00 / -2.4px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:44px; font-weight:600; line-height:1.10; letter-spacing:-1.32px;">Section Heading</div><div class="type-meta">Section — 44px / 600 / 1.10 / -1.32px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:600; line-height:1.10; letter-spacing:-0.64px;">Card Heading</div><div class="type-meta">Card — 32px / 600 / 1.10 / -0.64px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.4px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.40 / -0.4px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.36px;">Body — Go to market with unique data — and the ability to act on it. Clay helps sales teams build pipeline.</div><div class="type-meta">Body — 18px / 400 / 1.60 / -0.36px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.50; letter-spacing:-0.16px;">Button — Start your free trial</div><div class="type-meta">Button — 16px / 500 / 1.50 / -0.16px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50;">Caption — Updated 3 minutes ago</div><div class="type-meta">Caption — 14px / 400 / 1.50 / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:600; line-height:1.20; text-transform:uppercase; letter-spacing:1.08px;">Uppercase Label</div><div class="type-meta">Label — 12px / 600 / uppercase / 1.08px / Roobert</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50; color:var(--matcha-600);">clay.people.enrich({ email: 'user@company.com' })</div><div class="type-meta">Code — 14px / 400 / Space Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-solid" href="#">Start Building</a><div class="button-label">Primary Solid</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Learn More</a><div class="button-label">White Card</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">View Docs</a><div class="button-label">Ghost Outlined</div></div>
|
||||
<div class="button-item"><span class="card-badge" style="background:var(--badge-bg); color:var(--badge-text);">NEW FEATURE</span><div class="button-label">Badge</div></div>
|
||||
</div>
|
||||
<p style="font-size:13px; color:var(--silver); margin-top:16px;">Hover over buttons to see the playful rotateZ + hard shadow animation.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(7,138,82,0.1); color:var(--matcha-600);">Data Enrichment</div>
|
||||
<h3>Turn data into action</h3>
|
||||
<p style="color:var(--charcoal);">Enrich any record with 100+ data providers. Build automated workflows with Clay tables.</p>
|
||||
</div>
|
||||
<div class="card-dashed">
|
||||
<div class="card-badge" style="background:rgba(67,8,159,0.1); color:var(--ube-800);">Dashed Border</div>
|
||||
<h3>Flexible integrations</h3>
|
||||
<p style="color:var(--charcoal);">Connect to any CRM, email tool, or data source. Dashed border variant for secondary content.</p>
|
||||
</div>
|
||||
<div class="card-colored" style="background:var(--matcha-800);">
|
||||
<div class="card-badge" style="background:rgba(132,231,165,0.2); color:var(--matcha-300);">Colored Section</div>
|
||||
<h3>Growth on autopilot</h3>
|
||||
<p style="color:rgba(255,255,255,0.8);">Full-width colored section using the Matcha 800 swatch background.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Company Name</label><input class="form-input" type="text" placeholder="Acme Corp"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@clay.com"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (pomegranate ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Add enrichment notes..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Feature cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div><div class="radius-context">Sections</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">CTAs</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider-dashed">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">Cream canvas</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px;"><div class="elevation-label">Level 1: Clay</div><div class="elevation-desc">Multi-layer + inset</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgb(0,0,0) -7px 7px; transform: rotateZ(-2deg);"><div class="elevation-label">Level 2: Hover Hard</div><div class="elevation-desc">Hard offset shadow</div></div>
|
||||
<div class="elevation-card" style="outline: 2px solid rgb(20,110,245);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue focus ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://clay.com/">clay.com</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
129
design-md/coinbase/DESIGN.md
Normal file
129
design-md/coinbase/DESIGN.md
Normal file
@@ -0,0 +1,129 @@
|
||||
# Design System: Coinbase
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.
|
||||
|
||||
The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (`#578bfa`). The design alternates between white content sections and dark (`#0a0b0d`, `#282b31`) feature sections, creating a professional, financial-grade interface.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Coinbase Blue (`#0052ff`) as singular brand accent
|
||||
- Four-font proprietary family: Display, Sans, Text, Icons
|
||||
- 56px radius pill buttons with blue hover transition
|
||||
- Near-black (`#0a0b0d`) dark sections + white light sections
|
||||
- 1.00 line-height on display headings — ultra-tight
|
||||
- Cool gray secondary surface (`#eef0f3`) with blue tint
|
||||
- `text-transform: lowercase` on some button labels — unusual
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Coinbase Blue** (`#0052ff`): Primary brand, links, CTA borders
|
||||
- **Pure White** (`#ffffff`): Primary light surface
|
||||
- **Near Black** (`#0a0b0d`): Text, dark section backgrounds
|
||||
- **Cool Gray Surface** (`#eef0f3`): Secondary button background
|
||||
|
||||
### Interactive
|
||||
- **Hover Blue** (`#578bfa`): Button hover background
|
||||
- **Link Blue** (`#0667d0`): Secondary link color
|
||||
- **Muted Blue** (`#5b616e`): Border color at 20% opacity
|
||||
|
||||
### Surface
|
||||
- **Dark Card** (`#282b31`): Dark button/card backgrounds
|
||||
- **Light Surface** (`rgba(247,247,247,0.88)`): Subtle surface
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display**: `CoinbaseDisplay` — hero headlines
|
||||
- **UI / Sans**: `CoinbaseSans` — buttons, headings, nav
|
||||
- **Body**: `CoinbaseText` — reading text
|
||||
- **Icons**: `CoinbaseIcons` — icon font
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Notes |
|
||||
|------|------|------|--------|-------------|-------|
|
||||
| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |
|
||||
| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |
|
||||
| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |
|
||||
| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |
|
||||
| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |
|
||||
| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |
|
||||
| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |
|
||||
| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |
|
||||
| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |
|
||||
| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |
|
||||
| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |
|
||||
| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | Metadata |
|
||||
| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Pill (56px radius)**
|
||||
- Background: `#eef0f3` or `#282b31`
|
||||
- Radius: 56px
|
||||
- Border: `1px solid` matching background
|
||||
- Hover: `#578bfa` (light blue)
|
||||
- Focus: `2px solid black` outline
|
||||
|
||||
**Full Pill (100000px radius)**
|
||||
- Used for maximum pill shape
|
||||
|
||||
**Blue Bordered**
|
||||
- Border: `1px solid #0052ff`
|
||||
- Background: transparent
|
||||
|
||||
### Cards & Containers
|
||||
- Radius: 8px–40px range
|
||||
- Borders: `1px solid rgba(91,97,110,0.2)`
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base: 8px
|
||||
- Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px
|
||||
|
||||
### Border Radius Scale
|
||||
- Small (4px–8px): Article links, small cards
|
||||
- Standard (12px–16px): Cards, menus
|
||||
- Large (24px–32px): Feature containers
|
||||
- XL (40px): Large buttons/containers
|
||||
- Pill (56px): Primary CTAs
|
||||
- Full (100000px): Maximum pill
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
Minimal shadow system — depth from color contrast between dark/light sections.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Coinbase Blue (#0052ff) for primary interactive elements
|
||||
- Apply 56px radius for all CTA buttons
|
||||
- Use CoinbaseDisplay for hero headings only
|
||||
- Alternate dark (#0a0b0d) and white sections
|
||||
|
||||
### Don't
|
||||
- Don't use the blue decoratively — it's functional only
|
||||
- Don't use sharp corners on CTAs — 56px minimum
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Brand: Coinbase Blue (`#0052ff`)
|
||||
- Background: White (`#ffffff`)
|
||||
- Dark surface: `#0a0b0d`
|
||||
- Secondary surface: `#eef0f3`
|
||||
- Hover: `#578bfa`
|
||||
- Text: `#0a0b0d`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa."
|
||||
- "Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff)."
|
||||
23
design-md/coinbase/README.md
Normal file
23
design-md/coinbase/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Coinbase Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) extracted from the public [coinbase](https://coinbase.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/coinbase/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Coinbase 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
164
design-md/coinbase/preview-dark.html
Normal file
164
design-md/coinbase/preview-dark.html
Normal file
@@ -0,0 +1,164 @@
|
||||
<!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: Coinbase (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;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --white:#0a0b0d; --black:#eef0f3; --blue:#0052ff; --hover-blue:#578bfa; --gray-surface:#1a1c20; --dark:#282b31; --muted:#8a8f99; --font:'Inter',system-ui,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid #1a1c20; }
|
||||
.nav-brand { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }
|
||||
.nav-links a:hover { color:var(--black); }
|
||||
.nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 24px; border-radius:56px; font-size:14px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.hero { padding:80px 24px; text-align:center; }
|
||||
.hero h1 { font-size:64px; font-weight:400; line-height:1.00; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--blue); }
|
||||
.hero p { font-size:18px; color:var(--muted); max-width:500px; margin:0 auto 32px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
|
||||
.btn-blue:hover { background:var(--hover-blue); }
|
||||
.btn-gray { display:inline-block; background:var(--gray-surface); color:var(--black); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
|
||||
.btn-gray:hover { background:var(--hover-blue); color:var(--black); }
|
||||
.btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--blue); padding:12px 28px; border-radius:56px; border:1px solid var(--blue); font-size:16px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-dark { padding:48px 24px; background:var(--black); color:var(--white); }
|
||||
.section-dark .inner { max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:400; line-height:1.11; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--gray-surface); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--gray-surface); }
|
||||
.color-swatch-block { height:60px; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--muted); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--muted); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #1a1c20; }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--muted); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid rgba(91,97,110,0.2); border-radius:16px; padding:20px; }
|
||||
.card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--muted); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--gray-surface); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--gray-surface); border-radius:16px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; background:var(--black); color:var(--muted); font-size:12px; }
|
||||
.footer a { color:var(--blue); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><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></ul><a class="nav-cta" href="#">Sign up</a></nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#0052ff;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:56px;">Dark Mode</div>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Coinbase</span></h1><p>Every color, font, and component — visualized with crypto-grade precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get Started</a><a class="btn-gray" href="#">Learn More</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0052ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Coinbase Blue</div><div class="color-swatch-hex">#0052ff</div><div class="color-swatch-role">Primary brand</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#578bfa"></div><div class="color-swatch-info"><div class="color-swatch-name">Hover Blue</div><div class="color-swatch-hex">#578bfa</div><div class="color-swatch-role">Hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#eef0f3"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#eef0f3</div><div class="color-swatch-role">Secondary surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0a0b0d"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0a0b0d</div><div class="color-swatch-role">Text, dark sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#282b31"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Card</div><div class="color-swatch-hex">#282b31</div><div class="color-swatch-role">Dark buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5b616e"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted</div><div class="color-swatch-hex">#5b616e</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:64px; font-weight:400; line-height:1.00;">Display Hero</div><div class="type-meta">CoinbaseDisplay — 80px / 400 / 1.00</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:400; line-height:1.11;">Section Heading</div><div class="type-meta">CoinbaseSans — 36px / 400 / 1.11</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.33;">Feature Title</div><div class="type-meta">CoinbaseSans — 18px / 600 / 1.33</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; color:var(--muted);">Body — The future of money is here. Buy, sell, and manage crypto with Coinbase.</div><div class="type-meta">CoinbaseText — 18px / 400 / 1.56</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.20; letter-spacing:0.16px;">Button Label</div><div class="type-meta">CoinbaseSans — 16px / 600 / 1.20 / +0.16px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">Sign Up</a><div class="button-label">Primary Blue</div></div>
|
||||
<div class="button-item"><a class="btn-gray" href="#">Learn More</a><div class="button-label">Gray Surface</div></div>
|
||||
<div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Dark</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Details</a><div class="button-label">Blue Outline</div></div>
|
||||
</div></section>
|
||||
|
||||
<div class="section-dark"><div class="inner" id="cards"><div class="section-label" style="color:rgba(255,255,255,0.5);">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Bitcoin (BTC)</h3><p>The original cryptocurrency. Buy, sell, and send Bitcoin from your Coinbase account.</p></div>
|
||||
<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and dApps. The second-largest crypto by market cap.</p></div>
|
||||
<div class="card"><h3>USDC</h3><p>A dollar-backed stablecoin. The digital dollar for the global crypto economy.</p></div>
|
||||
</div></div></div>
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.5 BTC"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:56px"></div><div class="radius-label">56px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://coinbase.com/">coinbase.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
163
design-md/coinbase/preview.html
Normal file
163
design-md/coinbase/preview.html
Normal file
@@ -0,0 +1,163 @@
|
||||
<!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: Coinbase (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;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --white:#fff; --black:#0a0b0d; --blue:#0052ff; --hover-blue:#578bfa; --gray-surface:#eef0f3; --dark:#282b31; --muted:#5b616e; --font:'Inter',system-ui,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--gray-surface); }
|
||||
.nav-brand { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }
|
||||
.nav-links a:hover { color:var(--black); }
|
||||
.nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 24px; border-radius:56px; font-size:14px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.hero { padding:80px 24px; text-align:center; }
|
||||
.hero h1 { font-size:64px; font-weight:400; line-height:1.00; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--blue); }
|
||||
.hero p { font-size:18px; color:var(--muted); max-width:500px; margin:0 auto 32px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
|
||||
.btn-blue:hover { background:var(--hover-blue); }
|
||||
.btn-gray { display:inline-block; background:var(--gray-surface); color:var(--black); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
|
||||
.btn-gray:hover { background:var(--hover-blue); color:var(--black); }
|
||||
.btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--blue); padding:12px 28px; border-radius:56px; border:1px solid var(--blue); font-size:16px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-dark { padding:48px 24px; background:var(--black); color:var(--white); }
|
||||
.section-dark .inner { max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:400; line-height:1.11; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--gray-surface); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--gray-surface); }
|
||||
.color-swatch-block { height:60px; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--muted); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--muted); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--gray-surface); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--muted); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid rgba(91,97,110,0.2); border-radius:16px; padding:20px; }
|
||||
.card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--muted); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
|
||||
.form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--gray-surface); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--gray-surface); border-radius:16px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; background:var(--black); color:var(--muted); font-size:12px; }
|
||||
.footer a { color:var(--blue); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><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></ul><a class="nav-cta" href="#">Sign up</a></nav>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Coinbase</span></h1><p>Every color, font, and component — visualized with crypto-grade precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get Started</a><a class="btn-gray" href="#">Learn More</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0052ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Coinbase Blue</div><div class="color-swatch-hex">#0052ff</div><div class="color-swatch-role">Primary brand</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#578bfa"></div><div class="color-swatch-info"><div class="color-swatch-name">Hover Blue</div><div class="color-swatch-hex">#578bfa</div><div class="color-swatch-role">Hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#eef0f3"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#eef0f3</div><div class="color-swatch-role">Secondary surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0a0b0d"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0a0b0d</div><div class="color-swatch-role">Text, dark sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#282b31"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Card</div><div class="color-swatch-hex">#282b31</div><div class="color-swatch-role">Dark buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5b616e"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted</div><div class="color-swatch-hex">#5b616e</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:64px; font-weight:400; line-height:1.00;">Display Hero</div><div class="type-meta">CoinbaseDisplay — 80px / 400 / 1.00</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:400; line-height:1.11;">Section Heading</div><div class="type-meta">CoinbaseSans — 36px / 400 / 1.11</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.33;">Feature Title</div><div class="type-meta">CoinbaseSans — 18px / 600 / 1.33</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; color:var(--muted);">Body — The future of money is here. Buy, sell, and manage crypto with Coinbase.</div><div class="type-meta">CoinbaseText — 18px / 400 / 1.56</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.20; letter-spacing:0.16px;">Button Label</div><div class="type-meta">CoinbaseSans — 16px / 600 / 1.20 / +0.16px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-blue" href="#">Sign Up</a><div class="button-label">Primary Blue</div></div>
|
||||
<div class="button-item"><a class="btn-gray" href="#">Learn More</a><div class="button-label">Gray Surface</div></div>
|
||||
<div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Dark</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Details</a><div class="button-label">Blue Outline</div></div>
|
||||
</div></section>
|
||||
|
||||
<div class="section-dark"><div class="inner" id="cards"><div class="section-label" style="color:rgba(255,255,255,0.5);">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Bitcoin (BTC)</h3><p>The original cryptocurrency. Buy, sell, and send Bitcoin from your Coinbase account.</p></div>
|
||||
<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and dApps. The second-largest crypto by market cap.</p></div>
|
||||
<div class="card"><h3>USDC</h3><p>A dollar-backed stablecoin. The digital dollar for the global crypto economy.</p></div>
|
||||
</div></div></div>
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.5 BTC"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:56px"></div><div class="radius-label">56px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://coinbase.com/">coinbase.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
265
design-md/elevenlabs/DESIGN.md
Normal file
265
design-md/elevenlabs/DESIGN.md
Normal file
@@ -0,0 +1,265 @@
|
||||
# Design System: ElevenLabs
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
ElevenLabs' website is a study in restrained elegance — a near-white canvas (`#ffffff`, `#f5f5f5`) where typography and subtle shadows do all the heavy lifting. The design feels like a premium audio product brochure: clean, spacious, and confident enough to let the content speak (literally, given ElevenLabs makes voice AI). There's an almost Apple-like quality to the whitespace strategy, but warmer — the occasional warm stone tint (`#f5f2ef`, `#777169`) prevents the purity from feeling clinical.
|
||||
|
||||
The typography system is built on a fascinating duality: Waldenburg at weight 300 (light) for display headings creates ethereal, whisper-thin titles that feel like sound waves rendered in type — delicate, precise, and surprisingly impactful at large sizes. This light-weight display approach is the design's signature — where most sites use bold headings to grab attention, ElevenLabs uses lightness to create intrigue. Inter handles all body and UI text with workmanlike reliability, using slight positive letter-spacing (0.14px–0.18px) that gives body text an airy, well-spaced quality. WaldenburgFH appears as a bold uppercase variant for specific button labels.
|
||||
|
||||
What makes ElevenLabs distinctive is its multi-layered shadow system. Rather than simple box-shadows, elements use complex stacks: inset border-shadows (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`), outline shadows (`rgba(0,0,0,0.06) 0px 0px 0px 1px`), and soft elevation shadows (`rgba(0,0,0,0.04) 0px 4px 4px`) — all at remarkably low opacities. The result is a design where surfaces seem to barely exist, floating just above the page with the lightest possible touch. Pill-shaped buttons (9999px) with warm-tinted backgrounds (`rgba(245,242,239,0.8)`) and warm shadows (`rgba(78,50,23,0.04)`) add a tactile, physical quality.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Near-white canvas with warm undertones (`#f5f5f5`, `#f5f2ef`)
|
||||
- Waldenburg weight 300 (light) for display — ethereal, whisper-thin headings
|
||||
- Inter with positive letter-spacing (0.14–0.18px) for body — airy readability
|
||||
- Multi-layered shadow stacks at sub-0.1 opacity — surfaces barely exist
|
||||
- Pill buttons (9999px) with warm stone-tinted backgrounds
|
||||
- WaldenburgFH bold uppercase for specific CTA labels
|
||||
- Warm shadow tints: `rgba(78, 50, 23, 0.04)` — shadows have color, not just darkness
|
||||
- Geist Mono / ui-monospace for code snippets
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Pure White** (`#ffffff`): Primary background, card surfaces, button backgrounds
|
||||
- **Light Gray** (`#f5f5f5`): Secondary surface, subtle section differentiation
|
||||
- **Warm Stone** (`#f5f2ef`): Button background (at 80% opacity) — the warm signature
|
||||
- **Black** (`#000000`): Primary text, headings, dark buttons
|
||||
|
||||
### Neutral Scale
|
||||
- **Dark Gray** (`#4e4e4e`): Secondary text, descriptions
|
||||
- **Warm Gray** (`#777169`): Tertiary text, muted links, decorative underlines
|
||||
- **Near White** (`#f6f6f6`): Alternate light surface
|
||||
|
||||
### Interactive
|
||||
- **Grid Cyan** (`#7fffff`): `--grid-column-bg`, at 25% opacity — decorative grid overlay
|
||||
- **Ring Blue** (`rgb(147 197 253 / 0.5)`): `--tw-ring-color`, focus ring
|
||||
- **Border Light** (`#e5e5e5`): Explicit borders
|
||||
- **Border Subtle** (`rgba(0, 0, 0, 0.05)`): Ultra-subtle bottom borders
|
||||
|
||||
### Shadows
|
||||
- **Inset Border** (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`): Internal edge definition
|
||||
- **Inset Dark** (`rgba(0,0,0,0.1) 0px 0px 0px 0.5px inset`): Stronger inset variant
|
||||
- **Outline Ring** (`rgba(0,0,0,0.06) 0px 0px 0px 1px`): Shadow-as-border
|
||||
- **Soft Elevation** (`rgba(0,0,0,0.04) 0px 4px 4px`): Gentle lift
|
||||
- **Card Shadow** (`rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`): Button/card elevation
|
||||
- **Warm Shadow** (`rgba(78,50,23,0.04) 0px 6px 16px`): Warm-tinted button shadow
|
||||
- **Edge Shadow** (`rgba(0,0,0,0.08) 0px 0px 0px 0.5px`): Subtle edge definition
|
||||
- **Inset Ring** (`rgba(0,0,0,0.1) 0px 0px 0px 1px inset`): Strong inset border
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display**: `Waldenburg`, fallback: `Waldenburg Fallback`
|
||||
- **Display Bold**: `WaldenburgFH`, fallback: `WaldenburgFH Fallback`
|
||||
- **Body / UI**: `Inter`, fallback: `Inter Fallback`
|
||||
- **Monospace**: `Geist Mono` or `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | Waldenburg | 48px (3.00rem) | 300 | 1.08 (tight) | -0.96px | Whisper-thin, ethereal |
|
||||
| Section Heading | Waldenburg | 36px (2.25rem) | 300 | 1.17 (tight) | normal | Light display |
|
||||
| Card Heading | Waldenburg | 32px (2.00rem) | 300 | 1.13 (tight) | normal | Light card titles |
|
||||
| Body Large | Inter | 20px (1.25rem) | 400 | 1.35 | normal | Introductions |
|
||||
| Body | Inter | 18px (1.13rem) | 400 | 1.44–1.60 | 0.18px | Standard reading text |
|
||||
| Body Standard | Inter | 16px (1.00rem) | 400 | 1.50 | 0.16px | UI text |
|
||||
| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | 0.16px | Emphasized body |
|
||||
| Nav / UI | Inter | 15px (0.94rem) | 500 | 1.33–1.47 | 0.15px | Navigation links |
|
||||
| Button | Inter | 15px (0.94rem) | 500 | 1.47 | normal | Button labels |
|
||||
| Button Uppercase | WaldenburgFH | 14px (0.88rem) | 700 | 1.10 (tight) | 0.7px | `text-transform: uppercase` |
|
||||
| Caption | Inter | 14px (0.88rem) | 400–500 | 1.43–1.50 | 0.14px | Metadata |
|
||||
| Small | Inter | 13px (0.81rem) | 500 | 1.38 | normal | Tags, badges |
|
||||
| Code | Geist Mono | 13px (0.81rem) | 400 | 1.85 (relaxed) | normal | Code blocks |
|
||||
| Micro | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Tiny labels |
|
||||
| Tiny | Inter | 10px (0.63rem) | 400 | 1.60 (relaxed) | normal | Fine print |
|
||||
|
||||
### Principles
|
||||
- **Light as the hero weight**: Waldenburg at 300 is the defining typographic choice. Where other design systems use bold for impact, ElevenLabs uses lightness — thin strokes that feel like audio waveforms, creating intrigue through restraint.
|
||||
- **Positive letter-spacing on body**: Inter uses +0.14px to +0.18px tracking across body text, creating an airy, well-spaced reading rhythm that contrasts with the tight display tracking (-0.96px).
|
||||
- **WaldenburgFH for emphasis**: A bold (700) uppercase variant of Waldenburg appears only in specific CTA button labels with 0.7px letter-spacing — the one place where the type system gets loud.
|
||||
- **Monospace as ambient**: Geist Mono at relaxed line-height (1.85) for code blocks feels unhurried and readable.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Black Pill**
|
||||
- Background: `#000000`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 14px
|
||||
- Radius: 9999px (full pill)
|
||||
- Use: Primary CTA
|
||||
|
||||
**White Pill (Shadow-bordered)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#000000`
|
||||
- Radius: 9999px
|
||||
- Shadow: `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`
|
||||
- Use: Secondary CTA on white
|
||||
|
||||
**Warm Stone Pill**
|
||||
- Background: `rgba(245, 242, 239, 0.8)` (warm translucent)
|
||||
- Text: `#000000`
|
||||
- Padding: 12px 20px 12px 14px (asymmetric)
|
||||
- Radius: 30px
|
||||
- Shadow: `rgba(78, 50, 23, 0.04) 0px 6px 16px` (warm-tinted)
|
||||
- Use: Featured CTA, hero action — the signature warm button
|
||||
|
||||
**Uppercase Waldenburg Button**
|
||||
- Font: WaldenburgFH 14px weight 700
|
||||
- Text-transform: uppercase
|
||||
- Letter-spacing: 0.7px
|
||||
- Use: Specific bold CTA labels
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#ffffff`
|
||||
- Border: `1px solid #e5e5e5` or shadow-as-border
|
||||
- Radius: 16px–24px
|
||||
- Shadow: multi-layer stack (inset + outline + elevation)
|
||||
- Content: product screenshots, code examples, audio waveform previews
|
||||
|
||||
### Inputs & Forms
|
||||
- Textarea: padding 12px 20px, transparent text at default
|
||||
- Select: white background, standard styling
|
||||
- Radio: standard with tw-ring focus
|
||||
- Focus: `var(--tw-ring-offset-shadow)` ring system
|
||||
|
||||
### Navigation
|
||||
- Clean white sticky header
|
||||
- Inter 15px weight 500 for nav links
|
||||
- Pill CTAs right-aligned (black primary, white secondary)
|
||||
- Mobile: hamburger collapse at 1024px
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots and audio waveform visualizations
|
||||
- Warm gradient backgrounds in feature sections
|
||||
- 20px–24px radius on image containers
|
||||
- Full-width sections alternating white and light gray
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Audio Waveform Sections**
|
||||
- Colorful gradient backgrounds showcasing voice AI capabilities
|
||||
- Warm amber, blue, and green gradients behind product demos
|
||||
- Screenshots of the ElevenLabs product interface
|
||||
|
||||
**Warm Stone CTA Block**
|
||||
- `rgba(245,242,239,0.8)` background with warm shadow
|
||||
- Asymmetric padding (more right padding)
|
||||
- Creates a physical, tactile quality unique to ElevenLabs
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 3px, 4px, 8px, 9px, 10px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 40px
|
||||
|
||||
### Grid & Container
|
||||
- Centered content with generous max-width
|
||||
- Single-column hero, expanding to feature grids
|
||||
- Full-width gradient sections for product showcases
|
||||
- White card grids on light gray backgrounds
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Apple-like generosity**: Massive vertical spacing between sections creates a premium, unhurried pace. Each section is an exhibit.
|
||||
- **Warm emptiness**: The whitespace isn't cold — the warm stone undertones and warm shadows give empty space a tactile, physical quality.
|
||||
- **Typography-led rhythm**: The light-weight Waldenburg headings create visual "whispers" that draw the eye through vast white space.
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (2px): Small links, inline elements
|
||||
- Subtle (4px): Nav items, tab panels, tags
|
||||
- Standard (8px): Small containers
|
||||
- Comfortable (10px–12px): Medium cards, dropdowns
|
||||
- Card (16px): Standard cards, articles
|
||||
- Large (18px–20px): Featured cards, code panels
|
||||
- Section (24px): Large panels, section containers
|
||||
- Warm Button (30px): Warm stone CTA
|
||||
- Pill (9999px): Primary buttons, navigation pills
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Page background, text blocks |
|
||||
| Inset Edge (Level 0.5) | `rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset, #fff 0px 0px 0px 0px inset` | Internal border definition |
|
||||
| Outline Ring (Level 1) | `rgba(0,0,0,0.06) 0px 0px 0px 1px` + `rgba(0,0,0,0.04) 0px 1px 2px` + `rgba(0,0,0,0.04) 0px 2px 4px` | Shadow-as-border for cards |
|
||||
| Card (Level 2) | `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px` | Button elevation, prominent cards |
|
||||
| Warm Lift (Level 3) | `rgba(78,50,23,0.04) 0px 6px 16px` | Featured CTAs — warm-tinted |
|
||||
| Focus (Accessibility) | `var(--tw-ring-offset-shadow)` blue ring | Keyboard focus |
|
||||
|
||||
**Shadow Philosophy**: ElevenLabs uses the most refined shadow system of any design system analyzed. Every shadow is at sub-0.1 opacity, many include both outward cast AND inward inset components, and the warm CTA shadows use an actual warm color (`rgba(78,50,23,...)`) rather than neutral black. The inset half-pixel borders (`0px 0px 0px 0.5px inset`) create edges so subtle they're felt rather than seen — surfaces define themselves through the lightest possible touch.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Waldenburg weight 300 for all display headings — the lightness IS the brand
|
||||
- Apply multi-layer shadows (inset + outline + elevation) at sub-0.1 opacity
|
||||
- Use warm stone tints (`#f5f2ef`, `rgba(245,242,239,0.8)`) for featured elements
|
||||
- Apply positive letter-spacing (+0.14px to +0.18px) on Inter body text
|
||||
- Use 9999px radius for primary buttons — pill shape is standard
|
||||
- Use warm-tinted shadows (`rgba(78,50,23,0.04)`) on featured CTAs
|
||||
- Keep the page predominantly white with subtle gray section differentiation
|
||||
- Use WaldenburgFH bold uppercase ONLY for specific CTA button labels
|
||||
|
||||
### Don't
|
||||
- Don't use bold (700) Waldenburg for headings — weight 300 is non-negotiable
|
||||
- Don't use heavy shadows (>0.1 opacity) — the ethereal quality requires whisper-level depth
|
||||
- Don't use cool gray borders — the system is warm-tinted throughout
|
||||
- Don't skip the inset shadow component — half-pixel inset borders define edges
|
||||
- Don't apply negative letter-spacing to body text — Inter uses positive tracking
|
||||
- Don't use sharp corners (<8px) on cards — the generous radius is structural
|
||||
- Don't introduce brand colors — the palette is intentionally achromatic with warm undertones
|
||||
- Don't make buttons opaque and heavy — the warm translucent stone treatment is the signature
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <1024px | Single column, hamburger nav, stacked sections |
|
||||
| Desktop | >1024px | Full layout, horizontal nav, multi-column grids |
|
||||
|
||||
### Touch Targets
|
||||
- Pill buttons with generous padding (12px–20px)
|
||||
- Navigation links at 15px with adequate spacing
|
||||
- Select dropdowns maintain comfortable sizing
|
||||
|
||||
### Collapsing Strategy
|
||||
- Navigation: horizontal → hamburger at 1024px
|
||||
- Feature grids: multi-column → stacked
|
||||
- Hero: maintains centered layout, font scales proportionally
|
||||
- Gradient sections: full-width maintained, content stacks
|
||||
- Spacing compresses proportionally
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots scale responsively
|
||||
- Gradient backgrounds simplify on mobile
|
||||
- Audio waveform previews maintain aspect ratio
|
||||
- Rounded corners maintained across breakpoints
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Pure White (`#ffffff`) or Light Gray (`#f5f5f5`)
|
||||
- Text: Black (`#000000`)
|
||||
- Secondary text: Dark Gray (`#4e4e4e`)
|
||||
- Muted text: Warm Gray (`#777169`)
|
||||
- Warm surface: Warm Stone (`rgba(245, 242, 239, 0.8)`)
|
||||
- Border: `#e5e5e5` or `rgba(0,0,0,0.05)`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero on white background. Headline at 48px Waldenburg weight 300, line-height 1.08, letter-spacing -0.96px, black text. Subtitle at 18px Inter weight 400, line-height 1.60, letter-spacing 0.18px, #4e4e4e text. Two pill buttons: black (9999px, 0px 14px padding) and warm stone (rgba(245,242,239,0.8), 30px radius, 12px 20px padding, warm shadow rgba(78,50,23,0.04) 0px 6px 16px)."
|
||||
- "Design a card: white background, 20px radius. Shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px. Title at 32px Waldenburg weight 300, body at 16px Inter weight 400 letter-spacing 0.16px, #4e4e4e."
|
||||
- "Build a white pill button: white bg, 9999px radius. Shadow: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px. Text at 15px Inter weight 500."
|
||||
- "Create an uppercase CTA label: 14px WaldenburgFH weight 700, text-transform uppercase, letter-spacing 0.7px."
|
||||
- "Design navigation: white sticky header. Inter 15px weight 500. Black pill CTA right-aligned. Border-bottom: rgba(0,0,0,0.05)."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with white — the warm undertone comes from shadows and stone surfaces, not backgrounds
|
||||
2. Waldenburg 300 for headings — never bold, the lightness is the identity
|
||||
3. Multi-layer shadows: always include inset + outline + elevation at sub-0.1 opacity
|
||||
4. Positive letter-spacing on Inter body (+0.14px to +0.18px) — the airy reading quality
|
||||
5. Warm stone CTA is the signature — `rgba(245,242,239,0.8)` with `rgba(78,50,23,0.04)` shadow
|
||||
6. Pill (9999px) for buttons, generous radius (16px–24px) for cards
|
||||
23
design-md/elevenlabs/README.md
Normal file
23
design-md/elevenlabs/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Elevenlabs Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/elevenlabs/DESIGN.md) extracted from the public [elevenlabs](https://elevenlabs.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/elevenlabs/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Elevenlabs 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
254
design-md/elevenlabs/preview-dark.html
Normal file
254
design-md/elevenlabs/preview-dark.html
Normal file
@@ -0,0 +1,254 @@
|
||||
<!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: ElevenLabs (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@300;400;500;700&family=Geist+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #0a0a0a; --light: #141414; --warm-stone: rgba(245,242,239,0.8);
|
||||
--black: #f0f0f0; --dark-gray: #a0a0a0; --warm-gray: #8a8580;
|
||||
--border: #2a2a2a; --border-subtle: rgba(255,255,255,0.08);
|
||||
--shadow-card: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px;
|
||||
--shadow-btn: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;
|
||||
--shadow-warm: rgba(78,50,23,0.04) 0px 6px 16px;
|
||||
--shadow-inset: rgb(255,255,255) 0px 0px 0px 0px inset, rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset;
|
||||
--font-sans: 'Inter', system-ui, sans-serif;
|
||||
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.16px; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(10,10,10,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle); }
|
||||
.nav-brand { font-size:14px; font-weight:500; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:15px; font-weight:500; color:var(--dark-gray); text-decoration:none; letter-spacing:0.15px; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--black); }
|
||||
.nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:6px 16px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.hero { padding:100px 32px 80px; text-align:center; }
|
||||
.hero h1 { font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px; margin-bottom:16px; }
|
||||
.hero p { font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px; color:var(--dark-gray); max-width:520px; margin:0 auto 32px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-black { display:inline-block; background:var(--black); color:var(--white); padding:8px 20px; border-radius:9999px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-warm { display:inline-block; background:var(--warm-stone); color:var(--black); padding:10px 20px; border-radius:30px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-warm); }
|
||||
.btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-btn); }
|
||||
.btn-upper { display:inline-block; background:var(--black); color:var(--white); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:0.7px; border:none; cursor:pointer; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--warm-gray); margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:300; line-height:1.17; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-inset); }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px 12px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:11px; color:var(--warm-gray); font-family:var(--font-mono); }
|
||||
.color-swatch-role { font-size:10px; color:var(--warm-gray); margin-top:3px; }
|
||||
.color-group-label { font-size:14px; font-weight:500; color:var(--dark-gray); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--light); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-family:var(--font-mono); font-size:11px; color:var(--warm-gray); margin-top:6px; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:11px; font-weight:500; color:var(--warm-gray); margin-top:8px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border-radius:20px; padding:24px; box-shadow:var(--shadow-card); }
|
||||
.card h3 { font-size:20px; font-weight:300; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--dark-gray); line-height:1.50; letter-spacing:0.14px; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; letter-spacing:0.14px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; outline:none; box-shadow:var(--shadow-inset); transition:box-shadow 0.15s; }
|
||||
.form-input:focus { box-shadow:0 0 0 2px rgb(147,197,253); }
|
||||
.form-input--focus { box-shadow:0 0 0 2px rgb(147,197,253); }
|
||||
.form-input--error { border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,0.3); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; resize:vertical; outline:none; box-shadow:var(--shadow-inset); }
|
||||
.form-state-label { font-size:10px; color:var(--warm-gray); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--black); border-radius:4px; margin-bottom:6px; height:28px; opacity:0.15; }
|
||||
.spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; background:var(--light); margin-bottom:6px; box-shadow:var(--shadow-inset); }
|
||||
.radius-label { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
.radius-context { font-size:9px; color:var(--warm-gray); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { background:var(--white); border-radius:20px; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }
|
||||
.elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
|
||||
.footer { padding:32px; text-align:center; border-top:1px solid var(--border); font-size:13px; color:var(--warm-gray); letter-spacing:0.13px; }
|
||||
.footer a { color:var(--black); text-decoration:underline; }
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.hero h1 { font-size:36px; }
|
||||
.nav-links { display:none; }
|
||||
.section { padding:48px 20px; }
|
||||
.card-grid { grid-template-columns:1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#f0f0f0;color:#0a0a0a;font-size:11px;font-weight:500;padding:4px 10px;border-radius:9999px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by ElevenLabs</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-black" href="#">Try for Free</a>
|
||||
<a class="btn-warm" href="#">Explore Voice AI</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f5f5f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Gray</div><div class="color-swatch-hex">#f5f5f5</div><div class="color-swatch-role">Section background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(245,242,239,0.8)"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Stone</div><div class="color-swatch-hex">rgba(245,242,239,0.8)</div><div class="color-swatch-role">Featured CTA</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">Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text, buttons</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#4e4e4e"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#4e4e4e</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#777169"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray</div><div class="color-swatch-hex">#777169</div><div class="color-swatch-role">Muted text, links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5e5e5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e5e5e5</div><div class="color-swatch-role">Borders, dividers</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#292524"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#292524</div><div class="color-swatch-role">Dark sections</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px;">Display Hero</div><div class="type-meta">Display — 48px / 300 / 1.08 / -0.96px / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:300; line-height:1.17;">Section Heading</div><div class="type-meta">Section — 36px / 300 / 1.17 / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:300; line-height:1.13;">Card Heading</div><div class="type-meta">Card — 32px / 300 / 1.13 / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.35;">Body Large — Bringing every conversation to life</div><div class="type-meta">Body Large — 20px / 400 / 1.35 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px;">Body — The most realistic AI voice platform. Create natural-sounding speech in any language.</div><div class="type-meta">Body — 18px / 400 / 1.60 / +0.18px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.47; letter-spacing:0.15px;">Nav / Button</div><div class="type-meta">Nav — 15px / 500 / 1.47 / +0.15px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:700; line-height:1.10; text-transform:uppercase; letter-spacing:0.7px;">Uppercase CTA</div><div class="type-meta">CTA — 14px / 700 / uppercase / +0.7px / WaldenburgFH</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.14px;">Caption — Last updated 3 hours ago</div><div class="type-meta">Caption — 14px / 400 / 1.43 / +0.14px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:13px; font-weight:400; line-height:1.85; color:var(--dark-gray);">const audio = await elevenlabs.generate({ text: "Hello" })</div><div class="type-meta">Code — 13px / 400 / 1.85 / Geist Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-black" href="#">Try for Free</a><div class="button-label">Black Pill</div></div>
|
||||
<div class="button-item"><a class="btn-warm" href="#">Explore Voice AI</a><div class="button-label">Warm Stone</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Learn More</a><div class="button-label">White Shadow</div></div>
|
||||
<div class="button-item"><a class="btn-upper" href="#">Get Started</a><div class="button-label">Uppercase Bold</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Text to Speech</h3><p>Generate natural, expressive speech from text in any language with the most realistic AI voices.</p></div>
|
||||
<div class="card" style="box-shadow:rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;"><h3>Voice Cloning</h3><p>Create a digital replica of any voice with just a few minutes of audio. Elevated shadow variant.</p></div>
|
||||
<div class="card" style="background:var(--light);"><h3>Audio Native</h3><p>Turn any written content into engaging audio. Light gray background variant for section differentiation.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Voice Name</label><input class="form-input" type="text" placeholder="My Custom Voice"><div class="form-state-label">Default (inset border shadow)</div></div>
|
||||
<div class="form-group"><label class="form-label">Language</label><input class="form-input form-input--focus" type="text" value="English"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--error" type="text" value="invalid_key"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Text Input</label><textarea class="form-textarea" placeholder="Enter text to convert to speech..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Tags</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Sections</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">Buttons</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-inset);"><div class="elevation-label">Inset Edge</div><div class="elevation-desc">0.5px inset border</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Outline + subtle lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-btn);"><div class="elevation-label">Button</div><div class="elevation-desc">Strong outline + lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-warm);"><div class="elevation-label">Warm Lift</div><div class="elevation-desc">Warm-tinted shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px rgb(147,197,253);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://elevenlabs.io/">elevenlabs.io</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
253
design-md/elevenlabs/preview.html
Normal file
253
design-md/elevenlabs/preview.html
Normal file
@@ -0,0 +1,253 @@
|
||||
<!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: ElevenLabs (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@300;400;500;700&family=Geist+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white: #ffffff; --light: #f5f5f5; --warm-stone: rgba(245,242,239,0.8);
|
||||
--black: #000000; --dark-gray: #4e4e4e; --warm-gray: #777169;
|
||||
--border: #e5e5e5; --border-subtle: rgba(0,0,0,0.05);
|
||||
--shadow-card: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px;
|
||||
--shadow-btn: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;
|
||||
--shadow-warm: rgba(78,50,23,0.04) 0px 6px 16px;
|
||||
--shadow-inset: rgb(255,255,255) 0px 0px 0px 0px inset, rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset;
|
||||
--font-sans: 'Inter', system-ui, sans-serif;
|
||||
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.16px; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle); }
|
||||
.nav-brand { font-size:14px; font-weight:500; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:15px; font-weight:500; color:var(--dark-gray); text-decoration:none; letter-spacing:0.15px; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--black); }
|
||||
.nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:6px 16px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.hero { padding:100px 32px 80px; text-align:center; }
|
||||
.hero h1 { font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px; margin-bottom:16px; }
|
||||
.hero p { font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px; color:var(--dark-gray); max-width:520px; margin:0 auto 32px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-black { display:inline-block; background:var(--black); color:var(--white); padding:8px 20px; border-radius:9999px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-warm { display:inline-block; background:var(--warm-stone); color:var(--black); padding:10px 20px; border-radius:30px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-warm); }
|
||||
.btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-btn); }
|
||||
.btn-upper { display:inline-block; background:var(--black); color:var(--white); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:0.7px; border:none; cursor:pointer; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--warm-gray); margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:300; line-height:1.17; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-inset); }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px 12px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:11px; color:var(--warm-gray); font-family:var(--font-mono); }
|
||||
.color-swatch-role { font-size:10px; color:var(--warm-gray); margin-top:3px; }
|
||||
.color-group-label { font-size:14px; font-weight:500; color:var(--dark-gray); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--light); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-family:var(--font-mono); font-size:11px; color:var(--warm-gray); margin-top:6px; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:11px; font-weight:500; color:var(--warm-gray); margin-top:8px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border-radius:20px; padding:24px; box-shadow:var(--shadow-card); }
|
||||
.card h3 { font-size:20px; font-weight:300; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--dark-gray); line-height:1.50; letter-spacing:0.14px; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; letter-spacing:0.14px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; outline:none; box-shadow:var(--shadow-inset); transition:box-shadow 0.15s; }
|
||||
.form-input:focus { box-shadow:0 0 0 2px rgb(147,197,253); }
|
||||
.form-input--focus { box-shadow:0 0 0 2px rgb(147,197,253); }
|
||||
.form-input--error { border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,0.3); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; resize:vertical; outline:none; box-shadow:var(--shadow-inset); }
|
||||
.form-state-label { font-size:10px; color:var(--warm-gray); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--black); border-radius:4px; margin-bottom:6px; height:28px; opacity:0.15; }
|
||||
.spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; background:var(--light); margin-bottom:6px; box-shadow:var(--shadow-inset); }
|
||||
.radius-label { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
.radius-context { font-size:9px; color:var(--warm-gray); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { background:var(--white); border-radius:20px; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }
|
||||
.elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }
|
||||
|
||||
.footer { padding:32px; text-align:center; border-top:1px solid var(--border); font-size:13px; color:var(--warm-gray); letter-spacing:0.13px; }
|
||||
.footer a { color:var(--black); text-decoration:underline; }
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.hero h1 { font-size:36px; }
|
||||
.nav-links { display:none; }
|
||||
.section { padding:48px 20px; }
|
||||
.card-grid { grid-template-columns:1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by ElevenLabs</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-black" href="#">Try for Free</a>
|
||||
<a class="btn-warm" href="#">Explore Voice AI</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f5f5f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Gray</div><div class="color-swatch-hex">#f5f5f5</div><div class="color-swatch-role">Section background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(245,242,239,0.8)"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Stone</div><div class="color-swatch-hex">rgba(245,242,239,0.8)</div><div class="color-swatch-role">Featured CTA</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">Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Text, buttons</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#4e4e4e"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#4e4e4e</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#777169"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray</div><div class="color-swatch-hex">#777169</div><div class="color-swatch-role">Muted text, links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5e5e5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e5e5e5</div><div class="color-swatch-role">Borders, dividers</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#292524"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#292524</div><div class="color-swatch-role">Dark sections</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px;">Display Hero</div><div class="type-meta">Display — 48px / 300 / 1.08 / -0.96px / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:300; line-height:1.17;">Section Heading</div><div class="type-meta">Section — 36px / 300 / 1.17 / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:300; line-height:1.13;">Card Heading</div><div class="type-meta">Card — 32px / 300 / 1.13 / Waldenburg</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.35;">Body Large — Bringing every conversation to life</div><div class="type-meta">Body Large — 20px / 400 / 1.35 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px;">Body — The most realistic AI voice platform. Create natural-sounding speech in any language.</div><div class="type-meta">Body — 18px / 400 / 1.60 / +0.18px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.47; letter-spacing:0.15px;">Nav / Button</div><div class="type-meta">Nav — 15px / 500 / 1.47 / +0.15px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:700; line-height:1.10; text-transform:uppercase; letter-spacing:0.7px;">Uppercase CTA</div><div class="type-meta">CTA — 14px / 700 / uppercase / +0.7px / WaldenburgFH</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.14px;">Caption — Last updated 3 hours ago</div><div class="type-meta">Caption — 14px / 400 / 1.43 / +0.14px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:13px; font-weight:400; line-height:1.85; color:var(--dark-gray);">const audio = await elevenlabs.generate({ text: "Hello" })</div><div class="type-meta">Code — 13px / 400 / 1.85 / Geist Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-black" href="#">Try for Free</a><div class="button-label">Black Pill</div></div>
|
||||
<div class="button-item"><a class="btn-warm" href="#">Explore Voice AI</a><div class="button-label">Warm Stone</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Learn More</a><div class="button-label">White Shadow</div></div>
|
||||
<div class="button-item"><a class="btn-upper" href="#">Get Started</a><div class="button-label">Uppercase Bold</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Text to Speech</h3><p>Generate natural, expressive speech from text in any language with the most realistic AI voices.</p></div>
|
||||
<div class="card" style="box-shadow:rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;"><h3>Voice Cloning</h3><p>Create a digital replica of any voice with just a few minutes of audio. Elevated shadow variant.</p></div>
|
||||
<div class="card" style="background:var(--light);"><h3>Audio Native</h3><p>Turn any written content into engaging audio. Light gray background variant for section differentiation.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Voice Name</label><input class="form-input" type="text" placeholder="My Custom Voice"><div class="form-state-label">Default (inset border shadow)</div></div>
|
||||
<div class="form-group"><label class="form-label">Language</label><input class="form-input form-input--focus" type="text" value="English"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--error" type="text" value="invalid_key"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Text Input</label><textarea class="form-textarea" placeholder="Enter text to convert to speech..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Tags</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Sections</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">Buttons</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-inset);"><div class="elevation-label">Inset Edge</div><div class="elevation-desc">0.5px inset border</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Outline + subtle lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-btn);"><div class="elevation-label">Button</div><div class="elevation-desc">Strong outline + lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-warm);"><div class="elevation-label">Warm Lift</div><div class="elevation-desc">Warm-tinted shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px rgb(147,197,253);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://elevenlabs.io/">elevenlabs.io</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
125
design-md/kraken/DESIGN.md
Normal file
125
design-md/kraken/DESIGN.md
Normal file
@@ -0,0 +1,125 @@
|
||||
# Design System: Kraken
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Kraken Purple (`#7132f5`) as primary brand with darker variants (`#5741d8`, `#5b1ecf`)
|
||||
- Kraken-Brand (display) + Kraken-Product (UI) dual font system
|
||||
- Near-black (`#101114`) text with cool blue-gray neutral scale
|
||||
- 12px radius buttons (rounded but not pill)
|
||||
- Subtle shadows (`rgba(0,0,0,0.03) 0px 4px 24px`) — whisper-level
|
||||
- Green accent (`#149e61`) for positive/success states
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Kraken Purple** (`#7132f5`): Primary CTA, brand accent, links
|
||||
- **Purple Dark** (`#5741d8`): Button borders, outlined variants
|
||||
- **Purple Deep** (`#5b1ecf`): Deepest purple
|
||||
- **Purple Subtle** (`rgba(133,91,251,0.16)`): Purple at 16% — subtle button backgrounds
|
||||
- **Near Black** (`#101114`): Primary text
|
||||
|
||||
### Neutral
|
||||
- **Cool Gray** (`#686b82`): Primary neutral, borders at 24% opacity
|
||||
- **Silver Blue** (`#9497a9`): Secondary text, muted elements
|
||||
- **White** (`#ffffff`): Primary surface
|
||||
- **Border Gray** (`#dedee5`): Divider borders
|
||||
|
||||
### Semantic
|
||||
- **Green** (`#149e61`): Success/positive at 16% opacity for badges
|
||||
- **Green Dark** (`#026b3f`): Badge text
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display**: `Kraken-Brand`, fallbacks: `IBM Plex Sans, Helvetica, Arial`
|
||||
- **UI / Body**: `Kraken-Product`, fallbacks: `Helvetica Neue, Helvetica, Arial`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing |
|
||||
|------|------|------|--------|-------------|----------------|
|
||||
| Display Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |
|
||||
| Section Heading | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |
|
||||
| Sub-heading | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |
|
||||
| Feature Title | Kraken-Product | 22px | 600 | 1.20 | normal |
|
||||
| Body | Kraken-Product | 16px | 400 | 1.38 | normal |
|
||||
| Body Medium | Kraken-Product | 16px | 500 | 1.38 | normal |
|
||||
| Button | Kraken-Product | 16px | 500–600 | 1.38 | normal |
|
||||
| Caption | Kraken-Product | 14px | 400–700 | 1.43–1.71 | normal |
|
||||
| Small | Kraken-Product | 12px | 400–500 | 1.33 | normal |
|
||||
| Micro | Kraken-Product | 7px | 500 | 1.00 | uppercase |
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Purple**
|
||||
- Background: `#7132f5`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 13px 16px
|
||||
- Radius: 12px
|
||||
|
||||
**Purple Outlined**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#5741d8`
|
||||
- Border: `1px solid #5741d8`
|
||||
- Radius: 12px
|
||||
|
||||
**Purple Subtle**
|
||||
- Background: `rgba(133,91,251,0.16)`
|
||||
- Text: `#7132f5`
|
||||
- Padding: 8px
|
||||
- Radius: 12px
|
||||
|
||||
**White Button**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#101114`
|
||||
- Radius: 10px
|
||||
- Shadow: `rgba(0,0,0,0.03) 0px 4px 24px`
|
||||
|
||||
**Secondary Gray**
|
||||
- Background: `rgba(148,151,169,0.08)`
|
||||
- Text: `#101114`
|
||||
- Radius: 12px
|
||||
|
||||
### Badges
|
||||
- Success: `rgba(20,158,97,0.16)` bg, `#026b3f` text, 6px radius
|
||||
- Neutral: `rgba(104,107,130,0.12)` bg, `#484b5e` text, 8px radius
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px
|
||||
### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%
|
||||
|
||||
## 6. Depth & Elevation
|
||||
- Subtle: `rgba(0,0,0,0.03) 0px 4px 24px`
|
||||
- Micro: `rgba(16,24,40,0.04) 0px 1px 4px`
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Kraken Purple (#7132f5) for CTAs and links
|
||||
- Apply 12px radius on all buttons
|
||||
- Use Kraken-Brand for headings, Kraken-Product for body
|
||||
|
||||
### Don't
|
||||
- Don't use pill buttons — 12px is the max radius for buttons
|
||||
- Don't use other purples outside the defined scale
|
||||
|
||||
## 8. Responsive Behavior
|
||||
Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Brand: Kraken Purple (`#7132f5`)
|
||||
- Dark variant: `#5741d8`
|
||||
- Text: Near Black (`#101114`)
|
||||
- Secondary text: `#9497a9`
|
||||
- Background: White (`#ffffff`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding)."
|
||||
23
design-md/kraken/README.md
Normal file
23
design-md/kraken/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Kraken Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/kraken/DESIGN.md) extracted from the public [kraken](https://kraken.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/kraken/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Kraken 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
169
design-md/kraken/preview-dark.html
Normal file
169
design-md/kraken/preview-dark.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<!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: Kraken (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=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --white:#101114; --black:#e8e8ec; --purple:#7132f5; --purple-dark:#5741d8; --purple-subtle:rgba(133,91,251,0.16); --gray:#9497a9; --silver:#686b82; --border:#2a2c34; --green:rgba(20,158,97,0.16); --green-text:#026b3f; --font:'IBM Plex Sans',Helvetica,Arial,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.38; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--border); }
|
||||
.nav-brand { font-size:16px; font-weight:700; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
|
||||
.nav-links a:hover { color:var(--purple); }
|
||||
.nav-cta { display:inline-block; background:var(--purple); color:var(--white); padding:10px 20px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; }
|
||||
.hero h1 { font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--purple); }
|
||||
.hero p { font-size:16px; color:var(--silver); max-width:480px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-purple { display:inline-block; background:var(--purple); color:var(--white); padding:13px 24px; border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-outline { display:inline-block; background:var(--white); color:var(--purple-dark); padding:12px 24px; border-radius:12px; border:1px solid var(--purple-dark); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }
|
||||
.btn-subtle { display:inline-block; background:var(--purple-subtle); color:var(--purple); padding:8px 16px; border-radius:12px; font-size:14px; font-weight:500; text-decoration:none; }
|
||||
.btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:500; text-decoration:none; box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:600; color:var(--silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--border); }
|
||||
.color-swatch-block { height:60px; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--silver); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--gray); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(222,222,229,0.5); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--silver); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--silver); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; }
|
||||
.card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--silver); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
|
||||
.form-input--focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
|
||||
.form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--silver); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--purple); border-radius:3px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--purple-subtle); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; background:var(--black); color:var(--silver); font-size:12px; }
|
||||
.footer a { color:var(--purple); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><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></ul><a class="nav-cta" href="#">Sign Up</a></nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#7132f5;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:12px;">Dark Mode</div>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7132f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Kraken Purple</div><div class="color-swatch-hex">#7132f5</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5741d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Dark</div><div class="color-swatch-hex">#5741d8</div><div class="color-swatch-role">Borders, outlined</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5b1ecf"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#5b1ecf</div><div class="color-swatch-role">Deepest variant</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(133,91,251,0.16)"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Subtle</div><div class="color-swatch-hex">rgba(133,91,251,0.16)</div><div class="color-swatch-role">Subtle button bg</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#101114"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#101114</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#686b82"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#686b82</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9497a9"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver Blue</div><div class="color-swatch-hex">#9497a9</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px;">Display Hero</div><div class="type-meta">Kraken-Brand — 48px / 700 / 1.17 / -1px</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px;">Section Heading</div><div class="type-meta">Kraken-Brand — 36px / 700 / 1.22 / -0.5px</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.20;">Feature Title</div><div class="type-meta">Kraken-Product — 22px / 600 / 1.20</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.38; color:var(--silver);">Body — Buy, sell, and trade crypto with Kraken. Trusted by millions worldwide.</div><div class="type-meta">Kraken-Product — 16px / 400 / 1.38</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.71; color:var(--silver);">Caption — Last updated 2 min ago</div><div class="type-meta">Kraken-Product — 14px / 600 / 1.71</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-purple" href="#">Create Account</a><div class="button-label">Primary Purple</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Explore</a><div class="button-label">Purple Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-subtle" href="#">Learn</a><div class="button-label">Purple Subtle</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Details</a><div class="button-label">White Shadow</div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Bitcoin (BTC)</h3><p>The most trusted cryptocurrency. Buy and sell with low fees on Kraken.</p></div>
|
||||
<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and DeFi. Trade ETH and hundreds of tokens.</p></div>
|
||||
<div class="card"><h3>Staking</h3><p>Earn rewards by staking your crypto. Flexible and bonded options available.</p></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.25 BTC"><div class="form-state-label">Focus (purple ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://kraken.com/">kraken.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
168
design-md/kraken/preview.html
Normal file
168
design-md/kraken/preview.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!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: Kraken (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=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --white:#fff; --black:#101114; --purple:#7132f5; --purple-dark:#5741d8; --purple-subtle:rgba(133,91,251,0.16); --gray:#686b82; --silver:#9497a9; --border:#dedee5; --green:rgba(20,158,97,0.16); --green-text:#026b3f; --font:'IBM Plex Sans',Helvetica,Arial,sans-serif; }
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.38; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--border); }
|
||||
.nav-brand { font-size:16px; font-weight:700; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
|
||||
.nav-links a:hover { color:var(--purple); }
|
||||
.nav-cta { display:inline-block; background:var(--purple); color:var(--white); padding:10px 20px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; }
|
||||
.hero h1 { font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--purple); }
|
||||
.hero p { font-size:16px; color:var(--silver); max-width:480px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-purple { display:inline-block; background:var(--purple); color:var(--white); padding:13px 24px; border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-outline { display:inline-block; background:var(--white); color:var(--purple-dark); padding:12px 24px; border-radius:12px; border:1px solid var(--purple-dark); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }
|
||||
.btn-subtle { display:inline-block; background:var(--purple-subtle); color:var(--purple); padding:8px 16px; border-radius:12px; font-size:14px; font-weight:500; text-decoration:none; }
|
||||
.btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:500; text-decoration:none; box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:600; color:var(--silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--border); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--border); }
|
||||
.color-swatch-block { height:60px; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--silver); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--gray); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(222,222,229,0.5); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--silver); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--silver); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; }
|
||||
.card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:var(--silver); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
|
||||
.form-input--focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
|
||||
.form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--silver); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--purple); border-radius:3px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--purple-subtle); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--silver); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; background:var(--black); color:var(--silver); font-size:12px; }
|
||||
.footer a { color:var(--purple); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><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></ul><a class="nav-cta" href="#">Sign Up</a></nav>
|
||||
|
||||
<section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7132f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Kraken Purple</div><div class="color-swatch-hex">#7132f5</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5741d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Dark</div><div class="color-swatch-hex">#5741d8</div><div class="color-swatch-role">Borders, outlined</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5b1ecf"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#5b1ecf</div><div class="color-swatch-role">Deepest variant</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(133,91,251,0.16)"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Subtle</div><div class="color-swatch-hex">rgba(133,91,251,0.16)</div><div class="color-swatch-role">Subtle button bg</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#101114"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#101114</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#686b82"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#686b82</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9497a9"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver Blue</div><div class="color-swatch-hex">#9497a9</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px;">Display Hero</div><div class="type-meta">Kraken-Brand — 48px / 700 / 1.17 / -1px</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px;">Section Heading</div><div class="type-meta">Kraken-Brand — 36px / 700 / 1.22 / -0.5px</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.20;">Feature Title</div><div class="type-meta">Kraken-Product — 22px / 600 / 1.20</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.38; color:var(--silver);">Body — Buy, sell, and trade crypto with Kraken. Trusted by millions worldwide.</div><div class="type-meta">Kraken-Product — 16px / 400 / 1.38</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.71; color:var(--silver);">Caption — Last updated 2 min ago</div><div class="type-meta">Kraken-Product — 14px / 600 / 1.71</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-purple" href="#">Create Account</a><div class="button-label">Primary Purple</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Explore</a><div class="button-label">Purple Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-subtle" href="#">Learn</a><div class="button-label">Purple Subtle</div></div>
|
||||
<div class="button-item"><a class="btn-white" href="#">Details</a><div class="button-label">White Shadow</div></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Bitcoin (BTC)</h3><p>The most trusted cryptocurrency. Buy and sell with low fees on Kraken.</p></div>
|
||||
<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and DeFi. Trade ETH and hundreds of tokens.</p></div>
|
||||
<div class="card"><h3>Staking</h3><p>Earn rewards by staking your crypto. Flexible and bonded options available.</p></div>
|
||||
</div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.25 BTC"><div class="form-state-label">Focus (purple ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://kraken.com/">kraken.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
266
design-md/mongodb/DESIGN.md
Normal file
266
design-md/mongodb/DESIGN.md
Normal file
@@ -0,0 +1,266 @@
|
||||
# Design System: MongoDB
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
MongoDB's website is a deep-forest-meets-terminal experience — a design system rooted in the darkest teal-black (`#001e2b`) that evokes both the density of a database and the depth of a forest canopy. Against this near-black canvas, a striking neon green (`#00ed64`) pulses as the brand accent — bright enough to feel electric, organic enough to feel alive. This isn't the cold neon of cyberpunk; it's the bioluminescent green of something growing in the dark.
|
||||
|
||||
The typography system is architecturally ambitious: MongoDB Value Serif for massive hero headlines (96px) creates an editorial, authoritative presence — serif type at database-company scale is a bold choice that says "we're not just another tech company." Euclid Circular A handles the heavy lifting of body and UI text with an unusually wide weight range (300–700), while Source Code Pro serves as the code and label font with distinctive uppercase treatments featuring very wide letter-spacing (1px–3px). This three-font system creates a hierarchy that spans editorial elegance → geometric professionalism → engineering precision.
|
||||
|
||||
What makes MongoDB distinctive is its dual-mode design: a dark hero/feature section world (`#001e2b` with neon green accents) and a light content world (white with teal-gray borders `#b8c4c2`). The transition between these modes creates dramatic contrast. The shadow system uses teal-tinted dark shadows (`rgba(0, 30, 43, 0.12)`) that maintain the forest-dark atmosphere even on light surfaces. Buttons use pill shapes (100px–999px radius) with MongoDB Green borders (`#00684a`), and the entire component system references the LeafyGreen design system.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Deep teal-black backgrounds (`#001e2b`) — forest-dark, not space-dark
|
||||
- Neon MongoDB Green (`#00ed64`) as the singular brand accent — electric and organic
|
||||
- MongoDB Value Serif for hero headlines — editorial authority at tech scale
|
||||
- Euclid Circular A for body with weight 300 (light) as a distinctive body weight
|
||||
- Source Code Pro with wide uppercase letter-spacing (1px–3px) for technical labels
|
||||
- Teal-tinted shadows: `rgba(0, 30, 43, 0.12)` — shadows carry the forest color
|
||||
- Dual-mode: dark teal hero sections + light white content sections
|
||||
- Pill buttons (100px radius) with green borders (`#00684a`)
|
||||
- Link Blue (`#006cfa`) and hover transition to `#3860be`
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary Brand
|
||||
- **Forest Black** (`#001e2b`): Primary dark background — the deepest teal-black
|
||||
- **MongoDB Green** (`#00ed64`): Primary brand accent — neon green for highlights, underlines, gradients
|
||||
- **Dark Green** (`#00684a`): Button borders, link text on light — muted green for functional use
|
||||
|
||||
### Interactive
|
||||
- **Action Blue** (`#006cfa`): Secondary accent — links, interactive highlights
|
||||
- **Hover Blue** (`#3860be`): All link hover states transition to this blue
|
||||
- **Teal Active** (`#1eaedb`): Button hover background — bright teal
|
||||
|
||||
### Neutral Scale
|
||||
- **Deep Teal** (`#1c2d38`): Dark button backgrounds, secondary dark surfaces
|
||||
- **Teal Gray** (`#3d4f58`): Dark borders on dark surfaces
|
||||
- **Dark Slate** (`#21313c`): Dark link text variant
|
||||
- **Cool Gray** (`#5c6c75`): Muted text on dark, secondary button text
|
||||
- **Silver Teal** (`#b8c4c2`): Borders on light surfaces, dividers
|
||||
- **Light Input** (`#e8edeb`): Input text on dark surfaces
|
||||
- **Pure White** (`#ffffff`): Light section background, button text on dark
|
||||
- **Black** (`#000000`): Text on light surfaces, darkest elements
|
||||
|
||||
### Shadows
|
||||
- **Forest Shadow** (`rgba(0, 30, 43, 0.12) 0px 26px 44px, rgba(0, 0, 0, 0.13) 0px 7px 13px`): Primary card elevation — teal-tinted
|
||||
- **Standard Shadow** (`rgba(0, 0, 0, 0.15) 0px 3px 20px`): General elevation
|
||||
- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 2px 4px`): Light card lift
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display Serif**: `MongoDB Value Serif` — editorial hero headlines
|
||||
- **Body / UI**: `Euclid Circular A` — geometric sans-serif workhorse
|
||||
- **Code / Labels**: `Source Code Pro` — monospace with uppercase label treatments
|
||||
- **Fallbacks**: `Akzidenz-Grotesk Std` (with CJK: Noto Sans KR/SC/JP), `Times`, `Arial`, `system-ui`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | MongoDB Value Serif | 96px (6.00rem) | 400 | 1.20 (tight) | normal | Serif authority |
|
||||
| Display Secondary | MongoDB Value Serif | 64px (4.00rem) | 400 | 1.00 (tight) | normal | Serif sub-hero |
|
||||
| Section Heading | Euclid Circular A | 36px (2.25rem) | 500 | 1.33 | normal | Geometric precision |
|
||||
| Sub-heading | Euclid Circular A | 24px (1.50rem) | 500 | 1.33 | normal | Feature titles |
|
||||
| Body Large | Euclid Circular A | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Introductions |
|
||||
| Body | Euclid Circular A | 18px (1.13rem) | 400 | 1.33 | normal | Standard body |
|
||||
| Body Light | Euclid Circular A | 16px (1.00rem) | 300 | 1.50–2.00 | normal | Light-weight reading text |
|
||||
| Nav / UI | Euclid Circular A | 16px (1.00rem) | 500 | 1.00–1.88 | 0.16px | Navigation, emphasized |
|
||||
| Body Bold | Euclid Circular A | 15px (0.94rem) | 700 | 1.50 | normal | Strong emphasis |
|
||||
| Button | Euclid Circular A | 13.5px–16px | 500–700 | 1.00 | 0.135px–0.9px | CTA labels |
|
||||
| Caption | Euclid Circular A | 14px (0.88rem) | 400 | 1.71 (relaxed) | normal | Metadata |
|
||||
| Small | Euclid Circular A | 11px (0.69rem) | 600 | 1.82 (relaxed) | 0.2px | Tags, annotations |
|
||||
| Code Heading | Source Code Pro | 40px (2.50rem) | 400 | 1.60 (relaxed) | normal | Code showcase titles |
|
||||
| Code Body | Source Code Pro | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |
|
||||
| Code Label | Source Code Pro | 14px (0.88rem) | 400–500 | 1.14 (tight) | 1px–2px | `text-transform: uppercase` |
|
||||
| Code Micro | Source Code Pro | 9px (0.56rem) | 600 | 2.67 (relaxed) | 2.5px | `text-transform: uppercase` |
|
||||
|
||||
### Principles
|
||||
- **Serif for authority**: MongoDB Value Serif at hero scale creates an editorial presence unusual in tech — it communicates that MongoDB is an institution, not a startup.
|
||||
- **Weight 300 as body default**: Euclid Circular A uses light (300) for body text, creating an airy reading experience that contrasts with the dense, dark backgrounds.
|
||||
- **Wide-tracked monospace labels**: Source Code Pro uppercase at 1px–3px letter-spacing creates technical signposts that feel like database field labels — systematic, structured, classified.
|
||||
- **Four-weight range**: 300 (light body) → 400 (standard) → 500 (UI/nav) → 700 (bold CTA) — a wider range than most systems, enabling fine-grained hierarchy.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Green (Dark Surface)**
|
||||
- Background: `#00684a` (muted MongoDB green)
|
||||
- Text: `#000000`
|
||||
- Radius: 50% (circular) or 100px (pill)
|
||||
- Border: `1px solid #00684a`
|
||||
- Shadow: `rgba(0,0,0,0.06) 0px 1px 6px`
|
||||
- Hover: scale 1.1
|
||||
- Active: scale 0.85
|
||||
|
||||
**Dark Teal Button**
|
||||
- Background: `#1c2d38`
|
||||
- Text: `#5c6c75`
|
||||
- Radius: 100px (pill)
|
||||
- Border: `1px solid #3d4f58`
|
||||
- Hover: background `#1eaedb`, text white, translateX(5px)
|
||||
|
||||
**Outlined Button (Light Surface)**
|
||||
- Background: transparent
|
||||
- Text: `#001e2b`
|
||||
- Border: `1px solid #b8c4c2`
|
||||
- Radius: 4px–8px
|
||||
- Hover: background tint
|
||||
|
||||
### Cards & Containers
|
||||
- Light mode: white background with `1px solid #b8c4c2` border
|
||||
- Dark mode: `#001e2b` or `#1c2d38` background with `1px solid #3d4f58`
|
||||
- Radius: 16px (standard), 24px (medium), 48px (large/hero)
|
||||
- Shadow: `rgba(0,30,43,0.12) 0px 26px 44px` (forest-tinted)
|
||||
- Image containers: 30px–32px radius
|
||||
|
||||
### Inputs & Forms
|
||||
- Textarea: text `#e8edeb`, padding 12px 12px 12px 8px
|
||||
- Borders: `1px solid #b8c4c2` on light, `1px solid #3d4f58` on dark
|
||||
- Input radius: 4px
|
||||
|
||||
### Navigation
|
||||
- Dark header on forest-black background
|
||||
- Euclid Circular A 16px weight 500 for nav links
|
||||
- MongoDB logo (leaf icon + wordmark) left-aligned
|
||||
- Green CTA pill buttons right-aligned
|
||||
- Mega-menu dropdowns with product categories
|
||||
|
||||
### Image Treatment
|
||||
- Dashboard screenshots on dark backgrounds
|
||||
- Green-accented UI elements in screenshots
|
||||
- 30px–32px radius on image containers
|
||||
- Full-width dark sections for product showcases
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Neon Green Accent Underlines**
|
||||
- `0px 2px 2px 0px solid #00ed64` — bottom + right border creating accent underlines
|
||||
- Used on feature headings and highlighted text
|
||||
- Also appears as `#006cfa` (blue) variant
|
||||
|
||||
**Source Code Label System**
|
||||
- 14px uppercase Source Code Pro with 1px–2px letter-spacing
|
||||
- Used as section category markers above headings
|
||||
- Creates a "database field label" aesthetic
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 4px, 7px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px
|
||||
|
||||
### Grid & Container
|
||||
- Max content width centered
|
||||
- Dark hero section with contained content
|
||||
- Light content sections below
|
||||
- Card grids: 2–3 columns
|
||||
- Full-width dark footer
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Dramatic mode transitions**: The shift from dark teal sections to white content creates built-in visual breathing through contrast, not just space.
|
||||
- **Generous dark sections**: Dark hero and feature areas use extra vertical padding (80px+) to let the forest-dark background breathe.
|
||||
- **Compact light sections**: White content areas are denser, with tighter card grids and less vertical spacing.
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (1px–2px): Small spans, badges
|
||||
- Subtle (4px): Inputs, small buttons
|
||||
- Standard (8px): Cards, links
|
||||
- Card (16px): Standard cards, containers
|
||||
- Toggle (20px): Switch elements
|
||||
- Large (24px): Large panels
|
||||
- Image (30px–32px): Image containers
|
||||
- Hero (48px): Hero cards
|
||||
- Pill (100px–999px): Buttons, navigation pills
|
||||
- Full (9999px): Maximum pill
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Default surfaces |
|
||||
| Subtle (Level 1) | `rgba(0,0,0,0.1) 0px 2px 4px` | Light card lift |
|
||||
| Standard (Level 2) | `rgba(0,0,0,0.15) 0px 3px 9px` | Standard cards |
|
||||
| Prominent (Level 3) | `rgba(0,0,0,0.15) 0px 3px 20px` | Elevated panels |
|
||||
| Forest (Level 4) | `rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px` | Hero cards — teal-tinted |
|
||||
|
||||
**Shadow Philosophy**: MongoDB's shadow system is unique in that the primary elevation shadow uses `rgba(0, 30, 43, 0.12)` — a teal-tinted shadow that carries the forest-dark brand color into the depth system. This means even on white surfaces, shadows feel like they belong to the MongoDB color world rather than being generic neutral black.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use `#001e2b` (forest-black) for dark sections — not pure black
|
||||
- Apply MongoDB Green (`#00ed64`) sparingly for maximum electric impact
|
||||
- Use MongoDB Value Serif ONLY for hero/display headings — Euclid Circular A for everything else
|
||||
- Apply Source Code Pro uppercase with wide tracking (1px–3px) for technical labels
|
||||
- Use teal-tinted shadows (`rgba(0,30,43,0.12)`) for primary card elevation
|
||||
- Maintain the dark/light section duality — dramatic contrast between modes
|
||||
- Use weight 300 for body text — the light weight is the readable voice
|
||||
- Apply pill radius (100px) to primary action buttons
|
||||
|
||||
### Don't
|
||||
- Don't use pure black (`#000000`) for dark backgrounds — always use teal-black (`#001e2b`)
|
||||
- Don't use MongoDB Green (`#00ed64`) on backgrounds — it's an accent for text, underlines, and small highlights
|
||||
- Don't use standard gray shadows — always use teal-tinted (`rgba(0,30,43,...)`)
|
||||
- Don't apply serif font to body text — MongoDB Value Serif is hero-only
|
||||
- Don't use narrow letter-spacing on Source Code Pro labels — the wide tracking IS the identity
|
||||
- Don't mix dark and light section treatments within the same section
|
||||
- Don't use warm colors — the palette is strictly cool (teal, green, blue)
|
||||
- Don't forget the green accent underlines — they're the signature decorative element
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | Tight single column |
|
||||
| Mobile | 425–768px | Standard mobile |
|
||||
| Tablet | 768–1024px | 2-column grids begin |
|
||||
| Desktop | 1024–1280px | Standard layout |
|
||||
| Large Desktop | 1280–1440px | Expanded layout |
|
||||
| Ultra-wide | >1440px | Maximum width, generous margins |
|
||||
|
||||
### Touch Targets
|
||||
- Pill buttons with generous padding
|
||||
- Navigation links at 16px with adequate spacing
|
||||
- Card surfaces as full-area touch targets
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: MongoDB Value Serif 96px → 64px → scales further
|
||||
- Navigation: horizontal mega-menu → hamburger
|
||||
- Feature cards: multi-column → stacked
|
||||
- Dark/light sections maintain their mode at all sizes
|
||||
- Source Code Pro labels maintain uppercase treatment
|
||||
|
||||
### Image Behavior
|
||||
- Dashboard screenshots scale proportionally
|
||||
- Dark section backgrounds maintained full-width
|
||||
- Image radius maintained across breakpoints
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Dark background: Forest Black (`#001e2b`)
|
||||
- Brand accent: MongoDB Green (`#00ed64`)
|
||||
- Functional green: Dark Green (`#00684a`)
|
||||
- Link blue: Action Blue (`#006cfa`)
|
||||
- Text on light: Black (`#000000`)
|
||||
- Text on dark: White (`#ffffff`) or Light Input (`#e8edeb`)
|
||||
- Border light: Silver Teal (`#b8c4c2`)
|
||||
- Border dark: Teal Gray (`#3d4f58`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero on forest-black (#001e2b) background. Headline at 96px MongoDB Value Serif weight 400, line-height 1.20, white text with 'potential' highlighted in MongoDB Green (#00ed64). Subtitle at 18px Euclid Circular A weight 400. Green pill CTA (#00684a, 100px radius). Neon green gradient glow behind product screenshot."
|
||||
- "Design a card on white background: 1px solid #b8c4c2 border, 16px radius, shadow rgba(0,30,43,0.12) 0px 26px 44px. Title at 24px Euclid Circular A weight 500. Body at 16px weight 300. Source Code Pro 14px uppercase label above title with 2px letter-spacing."
|
||||
- "Build a dark section: #001e2b background, 1px solid #3d4f58 border on cards. White text. MongoDB Green (#00ed64) accent underlines on headings using bottom-border 2px solid."
|
||||
- "Create technical label: Source Code Pro 14px, text-transform uppercase, letter-spacing 2px, weight 500, #00ed64 color on dark background."
|
||||
- "Design a pill button: #1c2d38 background, 1px solid #3d4f58 border, 100px radius, #5c6c75 text. Hover: #1eaedb background, white text, translateX(5px)."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with the mode decision: dark (#001e2b) for hero/features, white for content
|
||||
2. MongoDB Green (#00ed64) is electric — use once per section for maximum impact
|
||||
3. Serif headlines (MongoDB Value Serif) create the editorial authority — never use for body
|
||||
4. Weight 300 body text creates the airy reading experience — don't default to 400
|
||||
5. Source Code Pro uppercase with wide tracking for technical labels — the database voice
|
||||
6. Teal-tinted shadows keep everything in the MongoDB color world
|
||||
23
design-md/mongodb/README.md
Normal file
23
design-md/mongodb/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Mongodb Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mongodb/DESIGN.md) extracted from the public [mongodb](https://mongodb.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/mongodb/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Mongodb 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
262
design-md/mongodb/preview-dark.html
Normal file
262
design-md/mongodb/preview-dark.html
Normal file
@@ -0,0 +1,262 @@
|
||||
<!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: MongoDB (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=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--forest: #001e2b; --green: #00ed64; --dark-green: #00684a; --blue: #006cfa;
|
||||
--hover-blue: #3860be; --teal: #1c2d38; --teal-gray: #3d4f58; --cool-gray: #8a9ba2;
|
||||
--silver: #3d4f58; --white: #001e2b; --black: #e8edeb;
|
||||
--shadow-forest: rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;
|
||||
--font-serif: 'DM Serif Display', Georgia, serif;
|
||||
--font-sans: 'Inter', system-ui, sans-serif;
|
||||
--font-mono: 'Source Code Pro', ui-monospace, monospace;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:300; line-height:1.50; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:var(--forest); }
|
||||
.nav-brand { font-size:14px; font-weight:500; color:var(--white); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:rgba(255,255,255,0.7); text-decoration:none; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--white); }
|
||||
.nav-cta { display:inline-block; background:var(--dark-green); color:var(--white); padding:8px 18px; border-radius:100px; font-size:14px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.hero { padding:80px 32px; background:var(--forest); text-align:center; color:var(--white); }
|
||||
.hero h1 { font-family:var(--font-serif); font-size:72px; font-weight:400; line-height:1.10; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--green); }
|
||||
.hero p { font-size:18px; font-weight:300; line-height:1.50; color:rgba(255,255,255,0.7); max-width:550px; margin:0 auto 32px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-green { display:inline-block; background:var(--dark-green); color:var(--white); padding:10px 24px; border-radius:100px; border:1px solid var(--dark-green); font-family:var(--font-sans); font-size:14px; font-weight:600; text-decoration:none; }
|
||||
.btn-outline-light { display:inline-block; background:transparent; color:var(--white); padding:10px 24px; border-radius:100px; border:1px solid var(--teal-gray); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-dark { padding:64px 32px; background:var(--forest); color:var(--white); }
|
||||
.section-dark .section-inner { max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--green); margin-bottom:8px; }
|
||||
.section-label-light { font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green); margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:500; line-height:1.33; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--silver); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { border-radius:16px; overflow:hidden; border:1px solid var(--silver); }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px 12px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:11px; color:var(--cool-gray); font-family:var(--font-mono); }
|
||||
.color-swatch-role { font-size:10px; color:var(--cool-gray); margin-top:3px; }
|
||||
.color-group-label { font-size:14px; font-weight:500; color:var(--cool-gray); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(184,196,194,0.5); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-family:var(--font-mono); font-size:11px; color:var(--cool-gray); margin-top:6px; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:11px; font-weight:500; color:var(--cool-gray); margin-top:8px; }
|
||||
.btn-teal { display:inline-block; background:var(--teal); color:var(--cool-gray); padding:10px 20px; border-radius:100px; border:1px solid var(--teal-gray); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }
|
||||
.btn-outline-dark { display:inline-block; background:transparent; color:var(--forest); padding:10px 20px; border-radius:8px; border:1px solid var(--silver); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border:1px solid var(--silver); border-radius:16px; padding:24px; }
|
||||
.card h3 { font-size:24px; font-weight:500; margin-bottom:8px; }
|
||||
.card p { font-size:16px; font-weight:300; color:var(--cool-gray); line-height:1.50; }
|
||||
.card-accent { border-bottom:2px solid var(--green); display:inline-block; padding-bottom:2px; margin-bottom:12px; font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; border-radius:4px; font-family:var(--font-sans); font-size:16px; font-weight:300; outline:none; }
|
||||
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(0,108,250,0.2); }
|
||||
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(0,108,250,0.2); }
|
||||
.form-input--error { border-color:#e53e3e; box-shadow:0 0 0 2px rgba(229,62,62,0.2); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; border-radius:4px; font-family:var(--font-sans); font-size:16px; font-weight:300; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:10px; color:var(--cool-gray); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--green); border-radius:4px; margin-bottom:6px; height:28px; }
|
||||
.spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; background:var(--dark-green); margin-bottom:6px; }
|
||||
.radius-label { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }
|
||||
.radius-context { font-size:9px; color:var(--cool-gray); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--silver); border-radius:16px; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }
|
||||
.elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }
|
||||
|
||||
.footer { padding:40px 32px; text-align:center; background:var(--forest); color:rgba(255,255,255,0.5); font-size:13px; }
|
||||
.footer a { color:var(--green); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) {
|
||||
.hero h1 { font-size:48px; }
|
||||
.nav-links { display:none; }
|
||||
.section { padding:48px 20px; }
|
||||
.card-grid { grid-template-columns:1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Try Free</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#00ed64;color:#001e2b;font-size:11px;font-weight:600;padding:4px 10px;border-radius:100px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by <span>MongoDB</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-green" href="#">Try Free</a>
|
||||
<a class="btn-outline-light" href="#">Contact Sales</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label-light">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#001e2b"></div><div class="color-swatch-info"><div class="color-swatch-name">Forest Black</div><div class="color-swatch-hex">#001e2b</div><div class="color-swatch-role">Dark background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#00ed64"></div><div class="color-swatch-info"><div class="color-swatch-name">MongoDB Green</div><div class="color-swatch-hex">#00ed64</div><div class="color-swatch-role">Brand accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#00684a"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Green</div><div class="color-swatch-hex">#00684a</div><div class="color-swatch-role">Buttons, links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#006cfa"></div><div class="color-swatch-info"><div class="color-swatch-name">Action Blue</div><div class="color-swatch-hex">#006cfa</div><div class="color-swatch-role">Links, interactive</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c2d38"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Teal</div><div class="color-swatch-hex">#1c2d38</div><div class="color-swatch-role">Dark buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3d4f58"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal Gray</div><div class="color-swatch-hex">#3d4f58</div><div class="color-swatch-role">Dark borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5c6c75"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#5c6c75</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b8c4c2"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver Teal</div><div class="color-swatch-hex">#b8c4c2</div><div class="color-swatch-role">Light borders</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label-light">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:72px; font-weight:400; line-height:1.10;">Display Hero</div><div class="type-meta">Display — 96px / 400 / 1.20 / MongoDB Value Serif</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:500; line-height:1.33;">Section Heading</div><div class="type-meta">Section — 36px / 500 / 1.33 / Euclid Circular A</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:500; line-height:1.33;">Sub-heading</div><div class="type-meta">Sub — 24px / 500 / 1.33 / Euclid Circular A</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:300; line-height:1.50;">Body Light — Build faster with MongoDB. The developer data platform for modern applications.</div><div class="type-meta">Body — 16px / 300 / 1.50 / Euclid Circular A</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green);">DATABASE COLLECTION</div><div class="type-meta">Code Label — 14px / uppercase / +2px / Source Code Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:16px; color:var(--cool-gray);">db.collection.find({ status: "active" })</div><div class="type-meta">Code Body — 16px / 400 / Source Code Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:2.5px; color:var(--green);">AGGREGATION PIPELINE</div><div class="type-meta">Code Micro — 9px / 600 / uppercase / +2.5px / Source Code Pro</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label-light">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-green" href="#">Try Free</a><div class="button-label">Green Pill</div></div>
|
||||
<div class="button-item"><a class="btn-teal" href="#">Explore</a><div class="button-label">Dark Teal</div></div>
|
||||
<div class="button-item"><a class="btn-outline-dark" href="#">Learn More</a><div class="button-label">Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-outline-light" style="color:var(--cool-gray); border-color:var(--teal-gray);" href="#">Dark Context</a><div class="button-label">Dark Outlined</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="section-dark">
|
||||
<div class="section-inner" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card" style="background:var(--teal); border-color:var(--teal-gray); color:var(--white);">
|
||||
<div class="card-accent" style="color:var(--green); border-color:var(--green);">Atlas</div>
|
||||
<h3 style="color:var(--white);">Document Model</h3>
|
||||
<p style="color:rgba(255,255,255,0.6);">Map your data naturally with flexible documents. No rigid schemas, no complex joins.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-accent">Search</div>
|
||||
<h3>Full-text Search</h3>
|
||||
<p>Build rich search experiences using the same data you already have in Atlas.</p>
|
||||
</div>
|
||||
<div class="card" style="box-shadow: rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;">
|
||||
<div class="card-accent" style="border-color:var(--blue); color:var(--blue);">Elevated</div>
|
||||
<h3>Vector Search</h3>
|
||||
<p>Build AI-powered applications with native vector search. Forest-tinted shadow elevation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label-light">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Cluster Name</label><input class="form-input" type="text" placeholder="my-cluster-0"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Connection String</label><input class="form-input form-input--focus" type="text" value="mongodb+srv://..."><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Database</label><input class="form-input form-input--error" type="text" value="invalid name"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Query</label><textarea class="form-textarea" placeholder='{ "status": "active" }'></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label-light">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label-light">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Links</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:48px"></div><div class="radius-label">48px</div><div class="radius-context">Hero cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">Buttons</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label-light">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Level 0</div><div class="elevation-desc">Flat — no shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:rgba(0,0,0,0.1) 0px 2px 4px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">Light lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:rgba(0,0,0,0.15) 0px 3px 20px;"><div class="elevation-label">Standard</div><div class="elevation-desc">General elevation</div></div>
|
||||
<div class="elevation-card" style="box-shadow:rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;"><div class="elevation-label">Forest</div><div class="elevation-desc">Teal-tinted primary</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://www.mongodb.com/">mongodb.com</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
261
design-md/mongodb/preview.html
Normal file
261
design-md/mongodb/preview.html
Normal file
@@ -0,0 +1,261 @@
|
||||
<!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: MongoDB (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=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--forest: #001e2b; --green: #00ed64; --dark-green: #00684a; --blue: #006cfa;
|
||||
--hover-blue: #3860be; --teal: #1c2d38; --teal-gray: #3d4f58; --cool-gray: #5c6c75;
|
||||
--silver: #b8c4c2; --white: #ffffff; --black: #000000;
|
||||
--shadow-forest: rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;
|
||||
--font-serif: 'DM Serif Display', Georgia, serif;
|
||||
--font-sans: 'Inter', system-ui, sans-serif;
|
||||
--font-mono: 'Source Code Pro', ui-monospace, monospace;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:300; line-height:1.50; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:var(--forest); }
|
||||
.nav-brand { font-size:14px; font-weight:500; color:var(--white); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:rgba(255,255,255,0.7); text-decoration:none; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--white); }
|
||||
.nav-cta { display:inline-block; background:var(--dark-green); color:var(--white); padding:8px 18px; border-radius:100px; font-size:14px; font-weight:600; text-decoration:none; }
|
||||
|
||||
.hero { padding:80px 32px; background:var(--forest); text-align:center; color:var(--white); }
|
||||
.hero h1 { font-family:var(--font-serif); font-size:72px; font-weight:400; line-height:1.10; margin-bottom:16px; }
|
||||
.hero h1 span { color:var(--green); }
|
||||
.hero p { font-size:18px; font-weight:300; line-height:1.50; color:rgba(255,255,255,0.7); max-width:550px; margin:0 auto 32px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; }
|
||||
.btn-green { display:inline-block; background:var(--dark-green); color:var(--white); padding:10px 24px; border-radius:100px; border:1px solid var(--dark-green); font-family:var(--font-sans); font-size:14px; font-weight:600; text-decoration:none; }
|
||||
.btn-outline-light { display:inline-block; background:transparent; color:var(--white); padding:10px 24px; border-radius:100px; border:1px solid var(--teal-gray); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-dark { padding:64px 32px; background:var(--forest); color:var(--white); }
|
||||
.section-dark .section-inner { max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--green); margin-bottom:8px; }
|
||||
.section-label-light { font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green); margin-bottom:8px; }
|
||||
.section-title { font-size:36px; font-weight:500; line-height:1.33; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--silver); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { border-radius:16px; overflow:hidden; border:1px solid var(--silver); }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px 12px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:11px; color:var(--cool-gray); font-family:var(--font-mono); }
|
||||
.color-swatch-role { font-size:10px; color:var(--cool-gray); margin-top:3px; }
|
||||
.color-group-label { font-size:14px; font-weight:500; color:var(--cool-gray); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(184,196,194,0.5); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-family:var(--font-mono); font-size:11px; color:var(--cool-gray); margin-top:6px; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:11px; font-weight:500; color:var(--cool-gray); margin-top:8px; }
|
||||
.btn-teal { display:inline-block; background:var(--teal); color:var(--cool-gray); padding:10px 20px; border-radius:100px; border:1px solid var(--teal-gray); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }
|
||||
.btn-outline-dark { display:inline-block; background:transparent; color:var(--forest); padding:10px 20px; border-radius:8px; border:1px solid var(--silver); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border:1px solid var(--silver); border-radius:16px; padding:24px; }
|
||||
.card h3 { font-size:24px; font-weight:500; margin-bottom:8px; }
|
||||
.card p { font-size:16px; font-weight:300; color:var(--cool-gray); line-height:1.50; }
|
||||
.card-accent { border-bottom:2px solid var(--green); display:inline-block; padding-bottom:2px; margin-bottom:12px; font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; border-radius:4px; font-family:var(--font-sans); font-size:16px; font-weight:300; outline:none; }
|
||||
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(0,108,250,0.2); }
|
||||
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(0,108,250,0.2); }
|
||||
.form-input--error { border-color:#e53e3e; box-shadow:0 0 0 2px rgba(229,62,62,0.2); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; border-radius:4px; font-family:var(--font-sans); font-size:16px; font-weight:300; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:10px; color:var(--cool-gray); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--green); border-radius:4px; margin-bottom:6px; height:28px; }
|
||||
.spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; background:var(--dark-green); margin-bottom:6px; }
|
||||
.radius-label { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }
|
||||
.radius-context { font-size:9px; color:var(--cool-gray); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--silver); border-radius:16px; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }
|
||||
.elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }
|
||||
|
||||
.footer { padding:40px 32px; text-align:center; background:var(--forest); color:rgba(255,255,255,0.5); font-size:13px; }
|
||||
.footer a { color:var(--green); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) {
|
||||
.hero h1 { font-size:48px; }
|
||||
.nav-links { display:none; }
|
||||
.section { padding:48px 20px; }
|
||||
.card-grid { grid-template-columns:1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Try Free</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by <span>MongoDB</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-green" href="#">Try Free</a>
|
||||
<a class="btn-outline-light" href="#">Contact Sales</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label-light">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#001e2b"></div><div class="color-swatch-info"><div class="color-swatch-name">Forest Black</div><div class="color-swatch-hex">#001e2b</div><div class="color-swatch-role">Dark background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#00ed64"></div><div class="color-swatch-info"><div class="color-swatch-name">MongoDB Green</div><div class="color-swatch-hex">#00ed64</div><div class="color-swatch-role">Brand accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#00684a"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Green</div><div class="color-swatch-hex">#00684a</div><div class="color-swatch-role">Buttons, links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#006cfa"></div><div class="color-swatch-info"><div class="color-swatch-name">Action Blue</div><div class="color-swatch-hex">#006cfa</div><div class="color-swatch-role">Links, interactive</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c2d38"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Teal</div><div class="color-swatch-hex">#1c2d38</div><div class="color-swatch-role">Dark buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3d4f58"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal Gray</div><div class="color-swatch-hex">#3d4f58</div><div class="color-swatch-role">Dark borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5c6c75"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#5c6c75</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b8c4c2"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver Teal</div><div class="color-swatch-hex">#b8c4c2</div><div class="color-swatch-role">Light borders</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label-light">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:72px; font-weight:400; line-height:1.10;">Display Hero</div><div class="type-meta">Display — 96px / 400 / 1.20 / MongoDB Value Serif</div></div>
|
||||
<div class="type-sample"><div style="font-size:36px; font-weight:500; line-height:1.33;">Section Heading</div><div class="type-meta">Section — 36px / 500 / 1.33 / Euclid Circular A</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:500; line-height:1.33;">Sub-heading</div><div class="type-meta">Sub — 24px / 500 / 1.33 / Euclid Circular A</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:300; line-height:1.50;">Body Light — Build faster with MongoDB. The developer data platform for modern applications.</div><div class="type-meta">Body — 16px / 300 / 1.50 / Euclid Circular A</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green);">DATABASE COLLECTION</div><div class="type-meta">Code Label — 14px / uppercase / +2px / Source Code Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:16px; color:var(--cool-gray);">db.collection.find({ status: "active" })</div><div class="type-meta">Code Body — 16px / 400 / Source Code Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:2.5px; color:var(--green);">AGGREGATION PIPELINE</div><div class="type-meta">Code Micro — 9px / 600 / uppercase / +2.5px / Source Code Pro</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label-light">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-green" href="#">Try Free</a><div class="button-label">Green Pill</div></div>
|
||||
<div class="button-item"><a class="btn-teal" href="#">Explore</a><div class="button-label">Dark Teal</div></div>
|
||||
<div class="button-item"><a class="btn-outline-dark" href="#">Learn More</a><div class="button-label">Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-outline-light" style="color:var(--cool-gray); border-color:var(--teal-gray);" href="#">Dark Context</a><div class="button-label">Dark Outlined</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="section-dark">
|
||||
<div class="section-inner" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card" style="background:var(--teal); border-color:var(--teal-gray); color:var(--white);">
|
||||
<div class="card-accent" style="color:var(--green); border-color:var(--green);">Atlas</div>
|
||||
<h3 style="color:var(--white);">Document Model</h3>
|
||||
<p style="color:rgba(255,255,255,0.6);">Map your data naturally with flexible documents. No rigid schemas, no complex joins.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-accent">Search</div>
|
||||
<h3>Full-text Search</h3>
|
||||
<p>Build rich search experiences using the same data you already have in Atlas.</p>
|
||||
</div>
|
||||
<div class="card" style="box-shadow: rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;">
|
||||
<div class="card-accent" style="border-color:var(--blue); color:var(--blue);">Elevated</div>
|
||||
<h3>Vector Search</h3>
|
||||
<p>Build AI-powered applications with native vector search. Forest-tinted shadow elevation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label-light">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Cluster Name</label><input class="form-input" type="text" placeholder="my-cluster-0"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Connection String</label><input class="form-input form-input--focus" type="text" value="mongodb+srv://..."><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Database</label><input class="form-input form-input--error" type="text" value="invalid name"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Query</label><textarea class="form-textarea" placeholder='{ "status": "active" }'></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label-light">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label-light">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Links</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:48px"></div><div class="radius-label">48px</div><div class="radius-context">Hero cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:999px; width:60px; height:60px;"></div><div class="radius-label">pill</div><div class="radius-context">Buttons</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label-light">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Level 0</div><div class="elevation-desc">Flat — no shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:rgba(0,0,0,0.1) 0px 2px 4px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">Light lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow:rgba(0,0,0,0.15) 0px 3px 20px;"><div class="elevation-label">Standard</div><div class="elevation-desc">General elevation</div></div>
|
||||
<div class="elevation-card" style="box-shadow:rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;"><div class="elevation-label">Forest</div><div class="elevation-desc">Teal-tinted primary</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://www.mongodb.com/">mongodb.com</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
230
design-md/pinterest/DESIGN.md
Normal file
230
design-md/pinterest/DESIGN.md
Normal file
@@ -0,0 +1,230 @@
|
||||
# Design System: Pinterest
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Pinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (`#e60023`) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone — grays lean toward olive/sand (`#91918c`, `#62625b`, `#e5e5e0`) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing.
|
||||
|
||||
The typography uses Pin Sans — a custom proprietary font with a broad fallback stack including Japanese fonts, reflecting Pinterest's global reach. At display scale (70px, weight 600), Pin Sans creates large, inviting headlines. At smaller sizes, the system is compact: buttons at 12px, captions at 12–14px. The CSS variable naming system (`--comp-*`, `--sema-*`, `--base-*`) reveals a sophisticated three-tier design token architecture: component-level, semantic-level, and base-level tokens.
|
||||
|
||||
What distinguishes Pinterest is its generous border-radius system (12px–40px, plus 50% for circles) and warm-tinted button backgrounds. The secondary button (`#e5e5e0`) has a distinctly warm, sand-like tone rather than cold gray. The primary red button uses 16px radius — rounded but not pill-shaped. Combined with warm badge backgrounds (`hsla(60,20%,98%,.5)` — a subtle yellow-warm wash) and photography-dominant layouts, the result is a design that feels handcrafted and personal, not corporate and sterile.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm white canvas with olive/sand-toned neutrals — cozy, not clinical
|
||||
- Pinterest Red (`#e60023`) as singular bold accent — never subtle, always confident
|
||||
- Pin Sans custom font with global fallback stack (including CJK)
|
||||
- Three-tier token architecture: `--comp-*` / `--sema-*` / `--base-*`
|
||||
- Warm secondary surfaces: sand gray (`#e5e5e0`), warm badge (`hsla(60,20%,98%,.5)`)
|
||||
- Generous border-radius: 16px standard, up to 40px for large containers
|
||||
- Photography-first content — pins/images are the primary visual element
|
||||
- Dark near-purple text (`#211922`) — warm, with a hint of plum
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary Brand
|
||||
- **Pinterest Red** (`#e60023`): Primary CTA, brand accent — bold, confident red
|
||||
- **Green 700** (`#103c25`): `--base-color-green-700`, success/nature accent
|
||||
- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, pressed green
|
||||
|
||||
### Text
|
||||
- **Plum Black** (`#211922`): Primary text — warm near-black with plum undertone
|
||||
- **Black** (`#000000`): Secondary text, button text
|
||||
- **Olive Gray** (`#62625b`): Secondary descriptions, muted text
|
||||
- **Warm Silver** (`#91918c`): `--comp-button-color-text-transparent-disabled`, disabled text, input borders
|
||||
- **White** (`#ffffff`): Text on dark/colored surfaces
|
||||
|
||||
### Interactive
|
||||
- **Focus Blue** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, focus rings
|
||||
- **Performance Purple** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, performance features
|
||||
- **Recommendation Purple** (`#7e238b`): `--sema-color-hover-text-recommendation`, AI recommendation
|
||||
- **Link Blue** (`#2b48d4`): Link text color
|
||||
- **Facebook Blue** (`#0866ff`): `--facebook-background-color`, social login
|
||||
- **Pressed Blue** (`#617bff`): `--base-color-pressed-blue-200`, pressed state
|
||||
|
||||
### Surface & Border
|
||||
- **Sand Gray** (`#e5e5e0`): Secondary button background — warm, craft-like
|
||||
- **Warm Light** (`#e0e0d9`): Circular button backgrounds, badges
|
||||
- **Warm Wash** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtle warm badge bg
|
||||
- **Fog** (`#f6f6f3`): Light surface (at 50% opacity)
|
||||
- **Border Disabled** (`#c8c8c1`): `--sema-color-border-disabled`, disabled borders
|
||||
- **Hover Gray** (`#bcbcb3`): `--base-color-hover-grayscale-150`, hover border
|
||||
- **Dark Surface** (`#33332e`): Dark section backgrounds
|
||||
|
||||
### Semantic
|
||||
- **Error Red** (`#9e0a0a`): Checkbox/form error states
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Pin Sans`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Maximum impact |
|
||||
| Section Heading | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Negative tracking |
|
||||
| Body | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Standard reading |
|
||||
| Caption Bold | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Strong metadata |
|
||||
| Caption | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | Small text, tags |
|
||||
| Button | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Button labels |
|
||||
|
||||
### Principles
|
||||
- **Compact type scale**: The range is 12px–70px with a dramatic jump — most functional text is 12–16px, creating a dense, app-like information hierarchy.
|
||||
- **Warm weight distribution**: 600–700 for headings, 400–500 for body. No ultra-light weights — the type always feels substantial.
|
||||
- **Negative tracking on headings**: -1.2px on 28px headings creates cozy, intimate section titles.
|
||||
- **Single font family**: Pin Sans handles everything — no secondary display or monospace font detected.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Red**
|
||||
- Background: `#e60023` (Pinterest Red)
|
||||
- Text: `#000000` (black — unusual choice for contrast on red)
|
||||
- Padding: 6px 14px
|
||||
- Radius: 16px (generously rounded, not pill)
|
||||
- Border: `2px solid rgba(255, 255, 255, 0)` (transparent)
|
||||
- Focus: semantic border + outline via CSS variables
|
||||
|
||||
**Secondary Sand**
|
||||
- Background: `#e5e5e0` (warm sand gray)
|
||||
- Text: `#000000`
|
||||
- Padding: 6px 14px
|
||||
- Radius: 16px
|
||||
- Focus: same semantic border system
|
||||
|
||||
**Circular Action**
|
||||
- Background: `#e0e0d9` (warm light)
|
||||
- Text: `#211922` (plum black)
|
||||
- Radius: 50% (circle)
|
||||
- Use: Pin actions, navigation controls
|
||||
|
||||
**Ghost / Transparent**
|
||||
- Background: transparent
|
||||
- Text: `#000000`
|
||||
- No border
|
||||
- Use: Tertiary actions
|
||||
|
||||
### Cards & Containers
|
||||
- Photography-first pin cards with generous radius (12px–20px)
|
||||
- No traditional box-shadow on most cards
|
||||
- White or warm fog backgrounds
|
||||
- 8px white thick border on some image containers
|
||||
|
||||
### Inputs
|
||||
- Email input: white background, `1px solid #91918c` border, 16px radius, 11px 15px padding
|
||||
- Focus: semantic border + outline system via CSS variables
|
||||
|
||||
### Navigation
|
||||
- Clean header on white or warm background
|
||||
- Pinterest logo + search bar centered
|
||||
- Pin Sans 16px for nav links
|
||||
- Pinterest Red accents for active states
|
||||
|
||||
### Image Treatment
|
||||
- Pin-style masonry grid (signature Pinterest layout)
|
||||
- Rounded corners: 12px–20px on images
|
||||
- Photography as primary content — every pin is an image
|
||||
- Thick white borders (8px) on featured image containers
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
|
||||
- Large jumps: 32px → 80px → 100px for section spacing
|
||||
|
||||
### Grid & Container
|
||||
- Masonry grid for pin content (signature layout)
|
||||
- Centered content sections with generous max-width
|
||||
- Full-width dark footer
|
||||
- Search bar as primary navigation element
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Inspiration density**: The masonry grid packs pins tightly — the content density IS the value proposition. Whitespace exists between sections, not within the grid.
|
||||
- **Breathing above, density below**: Hero/feature sections get generous padding; the pin grid is compact and immersive.
|
||||
|
||||
### Border Radius Scale
|
||||
- Standard (12px): Small cards, links
|
||||
- Button (16px): Buttons, inputs, medium cards
|
||||
- Comfortable (20px): Feature cards
|
||||
- Large (28px): Large containers
|
||||
- Section (32px): Tab elements, large panels
|
||||
- Hero (40px): Hero containers, large feature blocks
|
||||
- Circle (50%): Action buttons, tab indicators
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Default — pins rely on content, not shadow |
|
||||
| Subtle (Level 1) | Minimal shadow (from tokens) | Elevated overlays, dropdowns |
|
||||
| Focus (Accessibility) | `--sema-color-border-focus-outer-default` ring | Focus states |
|
||||
|
||||
**Shadow Philosophy**: Pinterest uses minimal shadows. The masonry grid relies on content (photography) to create visual interest rather than elevation effects. Depth comes from the warmth of surface colors and the generous rounding of containers.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use warm neutrals (`#e5e5e0`, `#e0e0d9`, `#91918c`) — the warm olive/sand tone is the identity
|
||||
- Apply Pinterest Red (`#e60023`) only for primary CTAs — it's bold and singular
|
||||
- Use Pin Sans exclusively — one font for everything
|
||||
- Apply generous border-radius: 16px for buttons/inputs, 20px+ for cards
|
||||
- Keep the masonry grid dense — content density is the value
|
||||
- Use warm badge backgrounds (`hsla(60,20%,98%,.5)`) for subtle warm washes
|
||||
- Use `#211922` (plum black) for primary text — it's warmer than pure black
|
||||
|
||||
### Don't
|
||||
- Don't use cool gray neutrals — always warm/olive-toned
|
||||
- Don't use pure black (`#000000`) as primary text — use plum black (`#211922`)
|
||||
- Don't use pill-shaped buttons — 16px radius is rounded but not pill
|
||||
- Don't add heavy shadows — Pinterest is flat by design, depth from content
|
||||
- Don't use small border-radius (<12px) on cards — the generous rounding is core
|
||||
- Don't introduce additional brand colors — red + warm neutrals is the complete palette
|
||||
- Don't use thin font weights — Pin Sans at 400 minimum
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <576px | Single column, compact layout |
|
||||
| Mobile Large | 576–768px | 2-column pin grid |
|
||||
| Tablet | 768–890px | Expanded grid |
|
||||
| Desktop Small | 890–1312px | Standard masonry grid |
|
||||
| Desktop | 1312–1440px | Full layout |
|
||||
| Large Desktop | 1440–1680px | Expanded grid columns |
|
||||
| Ultra-wide | >1680px | Maximum grid density |
|
||||
|
||||
### Collapsing Strategy
|
||||
- Pin grid: 5+ columns → 3 → 2 → 1
|
||||
- Navigation: search bar + icons → simplified mobile nav
|
||||
- Feature sections: side-by-side → stacked
|
||||
- Hero: 70px → scales down proportionally
|
||||
- Footer: dark multi-column → stacked
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Brand: Pinterest Red (`#e60023`)
|
||||
- Background: White (`#ffffff`)
|
||||
- Text: Plum Black (`#211922`)
|
||||
- Secondary text: Olive Gray (`#62625b`)
|
||||
- Button surface: Sand Gray (`#e5e5e0`)
|
||||
- Border: Warm Silver (`#91918c`)
|
||||
- Focus: Focus Blue (`#435ee5`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero: white background. Headline at 70px Pin Sans weight 600, plum black (#211922). Red CTA button (#e60023, 16px radius, 6px 14px padding). Secondary sand button (#e5e5e0, 16px radius)."
|
||||
- "Design a pin card: white background, 16px radius, no shadow. Photography fills top, 16px Pin Sans weight 400 description below in #62625b."
|
||||
- "Build a circular action button: #e0e0d9 background, 50% radius, #211922 icon."
|
||||
- "Create an input field: white background, 1px solid #91918c, 16px radius, 11px 15px padding. Focus: blue outline via semantic tokens."
|
||||
- "Design the dark footer: #33332e background. Pinterest script logo in white. 12px Pin Sans links in #91918c."
|
||||
|
||||
### Iteration Guide
|
||||
1. Warm neutrals everywhere — olive/sand grays, never cool steel
|
||||
2. Pinterest Red for CTAs only — bold and singular
|
||||
3. 16px radius on buttons/inputs, 20px+ on cards — generous but not pill
|
||||
4. Pin Sans is the only font — compact at 12px for UI, 70px for display
|
||||
5. Photography carries the design — the UI stays warm and minimal
|
||||
6. Plum black (#211922) for text — warmer than pure black
|
||||
23
design-md/pinterest/README.md
Normal file
23
design-md/pinterest/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Pinterest Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/pinterest/DESIGN.md) extracted from the public [pinterest](https://pinterest.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/pinterest/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Pinterest 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
233
design-md/pinterest/preview-dark.html
Normal file
233
design-md/pinterest/preview-dark.html
Normal file
@@ -0,0 +1,233 @@
|
||||
<!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: Pinterest (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=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white:#1a1916; --plum:#e8e5de; --red:#e60023; --olive:#a0a099; --warm-silver:#6a6a64;
|
||||
--sand:#33332e; --warm-light:#e0e0d9; --fog:#252520; --dark:#33332e;
|
||||
--focus-blue:#435ee5; --link-blue:#2b48d4;
|
||||
--font:'Nunito Sans',-apple-system,system-ui,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--plum); font-family:var(--font); font-size:16px; font-weight:400; line-height:1.40; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid #33332e; }
|
||||
.nav-brand { font-size:14px; font-weight:700; color:var(--plum); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--olive); text-decoration:none; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--plum); }
|
||||
.nav-cta { display:inline-block; background:var(--red); color:var(--white); padding:8px 18px; border-radius:16px; font-size:14px; font-weight:700; text-decoration:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; }
|
||||
.hero h1 { font-size:56px; font-weight:600; line-height:1.10; margin-bottom:12px; }
|
||||
.hero h1 span { color:var(--red); }
|
||||
.hero p { font-size:16px; color:var(--olive); max-width:480px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-red { display:inline-block; background:var(--red); color:var(--white); padding:10px 24px; border-radius:16px; font-family:var(--font); font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-sand { display:inline-block; background:var(--sand); color:var(--plum); padding:10px 24px; border-radius:16px; font-family:var(--font); font-size:14px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--warm-light); color:var(--plum); width:40px; height:40px; border-radius:50%; font-size:16px; text-decoration:none; border:none; cursor:pointer; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:700; color:var(--warm-silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:28px; font-weight:700; line-height:1.20; letter-spacing:-1.2px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--sand); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:16px; overflow:hidden; border:1px solid var(--sand); }
|
||||
.color-swatch-block { height:64px; width:100%; }
|
||||
.color-swatch-info { padding:10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:700; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--warm-silver); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--warm-silver); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:700; color:var(--olive); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--fog); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--warm-silver); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--warm-silver); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid var(--sand); border-radius:20px; overflow:hidden; }
|
||||
.card-img { height:140px; background:var(--fog); display:flex; align-items:center; justify-content:center; color:var(--warm-silver); font-size:12px; }
|
||||
.card-body { padding:12px 16px; }
|
||||
.card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }
|
||||
.card p { font-size:12px; color:var(--olive); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:700; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--plum); border:1px solid var(--warm-silver); padding:11px 15px; border-radius:16px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(67,94,229,0.3); }
|
||||
.form-input--focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(67,94,229,0.3); }
|
||||
.form-input--error { border-color:#9e0a0a; box-shadow:0 0 0 2px rgba(158,10,10,0.2); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--plum); border:1px solid var(--warm-silver); padding:11px 15px; border-radius:16px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--warm-silver); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--red); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.6; }
|
||||
.spacing-value { font-size:9px; color:var(--warm-silver); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--sand); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--warm-silver); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--sand); border-radius:20px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:700; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--warm-silver); font-family:monospace; }
|
||||
|
||||
.footer { padding:32px; text-align:center; background:var(--dark); color:var(--warm-silver); font-size:12px; border-radius:40px 40px 0 0; }
|
||||
.footer a { color:var(--white); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:36px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Sign up</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#e60023;color:#ffffff;font-size:10px;font-weight:700;padding:4px 12px;border-radius:16px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by <span>Pinterest</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with warm craft.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-red" href="#">Sign up</a>
|
||||
<a class="btn-sand" href="#">Log in</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e60023"></div><div class="color-swatch-info"><div class="color-swatch-name">Pinterest Red</div><div class="color-swatch-hex">#e60023</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#211922"></div><div class="color-swatch-info"><div class="color-swatch-name">Plum Black</div><div class="color-swatch-hex">#211922</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#103c25"></div><div class="color-swatch-info"><div class="color-swatch-name">Green 700</div><div class="color-swatch-hex">#103c25</div><div class="color-swatch-role">Success</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Warm Neutrals</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#62625b"></div><div class="color-swatch-info"><div class="color-swatch-name">Olive Gray</div><div class="color-swatch-hex">#62625b</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#91918c"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Silver</div><div class="color-swatch-hex">#91918c</div><div class="color-swatch-role">Borders, muted</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5e5e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Sand Gray</div><div class="color-swatch-hex">#e5e5e0</div><div class="color-swatch-role">Secondary button</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e0e0d9"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Light</div><div class="color-swatch-hex">#e0e0d9</div><div class="color-swatch-role">Circular buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f6f6f3"></div><div class="color-swatch-info"><div class="color-swatch-name">Fog</div><div class="color-swatch-hex">#f6f6f3</div><div class="color-swatch-role">Light surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#33332e"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark</div><div class="color-swatch-hex">#33332e</div><div class="color-swatch-role">Footer</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Interactive</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#435ee5"></div><div class="color-swatch-info"><div class="color-swatch-name">Focus Blue</div><div class="color-swatch-hex">#435ee5</div><div class="color-swatch-role">Focus ring</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2b48d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Link Blue</div><div class="color-swatch-hex">#2b48d4</div><div class="color-swatch-role">Links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#6845ab"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple</div><div class="color-swatch-hex">#6845ab</div><div class="color-swatch-role">Performance</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:56px; font-weight:600; line-height:1.10;">Display Hero</div><div class="type-meta">Display — 70px / 600 / Pin Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:28px; font-weight:700; letter-spacing:-1.2px;">Section Heading</div><div class="type-meta">Section — 28px / 700 / -1.2px</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.40; color:var(--olive);">Body — Find ideas for weeknight dinner. With Pinterest, discover creative ideas that spark joy.</div><div class="type-meta">Body — 16px / 400 / 1.40 / Pin Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:700;">Caption Bold — Trending now</div><div class="type-meta">Caption Bold — 14px / 700</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:500; color:var(--warm-silver);">Small — 1,234 pins</div><div class="type-meta">Small — 12px / 500</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-red" href="#">Sign up</a><div class="button-label">Primary Red</div></div>
|
||||
<div class="button-item"><a class="btn-sand" href="#">Log in</a><div class="button-label">Secondary Sand</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">❤</a><div class="button-label">Circular</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:transparent; color:var(--plum); padding:6px 14px; font-size:12px;">Ghost</span><div class="button-label">Transparent</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><div class="card-img">Pin photo</div><div class="card-body"><h3>Weeknight Dinner</h3><p>Quick recipes for busy evenings</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:var(--sand);">Pin photo</div><div class="card-body"><h3>Home Decor</h3><p>Inspiration for every room</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:#eee;">Pin photo</div><div class="card-body"><h3>Travel Ideas</h3><p>Destinations worth exploring</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:var(--warm-light);">Pin photo</div><div class="card-body"><h3>Fashion</h3><p>Outfit ideas for every season</p></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="Email address"><div class="form-state-label">Default (warm silver border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Username</label><input class="form-input form-input--focus" type="text" value="pinner123"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Password</label><input class="form-input form-input--error" type="password" value="short"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">About you</label><textarea class="form-textarea" placeholder="Tell us about yourself..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:28px"></div><div class="radius-label">28px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%; width:52px; height:52px;"></div><div class="radius-label">50%</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — content driven</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px var(--focus-blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue focus ring</div></div>
|
||||
</div>
|
||||
<p style="font-size:11px; color:var(--warm-silver); margin-top:12px;">Pinterest uses minimal shadows — depth comes from photography and warm surface colors.</p>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://pinterest.com/">pinterest.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
232
design-md/pinterest/preview.html
Normal file
232
design-md/pinterest/preview.html
Normal file
@@ -0,0 +1,232 @@
|
||||
<!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: Pinterest (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=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white:#ffffff; --plum:#211922; --red:#e60023; --olive:#62625b; --warm-silver:#91918c;
|
||||
--sand:#e5e5e0; --warm-light:#e0e0d9; --fog:#f6f6f3; --dark:#33332e;
|
||||
--focus-blue:#435ee5; --link-blue:#2b48d4;
|
||||
--font:'Nunito Sans',-apple-system,system-ui,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--plum); font-family:var(--font); font-size:16px; font-weight:400; line-height:1.40; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--sand); }
|
||||
.nav-brand { font-size:14px; font-weight:700; color:var(--plum); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:500; color:var(--olive); text-decoration:none; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--plum); }
|
||||
.nav-cta { display:inline-block; background:var(--red); color:var(--white); padding:8px 18px; border-radius:16px; font-size:14px; font-weight:700; text-decoration:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; }
|
||||
.hero h1 { font-size:56px; font-weight:600; line-height:1.10; margin-bottom:12px; }
|
||||
.hero h1 span { color:var(--red); }
|
||||
.hero p { font-size:16px; color:var(--olive); max-width:480px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-red { display:inline-block; background:var(--red); color:var(--white); padding:10px 24px; border-radius:16px; font-family:var(--font); font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-sand { display:inline-block; background:var(--sand); color:var(--plum); padding:10px 24px; border-radius:16px; font-family:var(--font); font-size:14px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
|
||||
.btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--warm-light); color:var(--plum); width:40px; height:40px; border-radius:50%; font-size:16px; text-decoration:none; border:none; cursor:pointer; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:700; color:var(--warm-silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:28px; font-weight:700; line-height:1.20; letter-spacing:-1.2px; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--sand); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:16px; overflow:hidden; border:1px solid var(--sand); }
|
||||
.color-swatch-block { height:64px; width:100%; }
|
||||
.color-swatch-info { padding:10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:700; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--warm-silver); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--warm-silver); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:700; color:var(--olive); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--fog); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--warm-silver); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--warm-silver); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; }
|
||||
.card { background:var(--white); border:1px solid var(--sand); border-radius:20px; overflow:hidden; }
|
||||
.card-img { height:140px; background:var(--fog); display:flex; align-items:center; justify-content:center; color:var(--warm-silver); font-size:12px; }
|
||||
.card-body { padding:12px 16px; }
|
||||
.card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }
|
||||
.card p { font-size:12px; color:var(--olive); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:700; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--plum); border:1px solid var(--warm-silver); padding:11px 15px; border-radius:16px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(67,94,229,0.3); }
|
||||
.form-input--focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(67,94,229,0.3); }
|
||||
.form-input--error { border-color:#9e0a0a; box-shadow:0 0 0 2px rgba(158,10,10,0.2); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--plum); border:1px solid var(--warm-silver); padding:11px 15px; border-radius:16px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--warm-silver); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--red); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.6; }
|
||||
.spacing-value { font-size:9px; color:var(--warm-silver); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--sand); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--warm-silver); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--sand); border-radius:20px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:700; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--warm-silver); font-family:monospace; }
|
||||
|
||||
.footer { padding:32px; text-align:center; background:var(--dark); color:var(--warm-silver); font-size:12px; border-radius:40px 40px 0 0; }
|
||||
.footer a { color:var(--white); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .hero h1 { font-size:36px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Sign up</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by <span>Pinterest</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with warm craft.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-red" href="#">Sign up</a>
|
||||
<a class="btn-sand" href="#">Log in</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e60023"></div><div class="color-swatch-info"><div class="color-swatch-name">Pinterest Red</div><div class="color-swatch-hex">#e60023</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#211922"></div><div class="color-swatch-info"><div class="color-swatch-name">Plum Black</div><div class="color-swatch-hex">#211922</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#103c25"></div><div class="color-swatch-info"><div class="color-swatch-name">Green 700</div><div class="color-swatch-hex">#103c25</div><div class="color-swatch-role">Success</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Warm Neutrals</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#62625b"></div><div class="color-swatch-info"><div class="color-swatch-name">Olive Gray</div><div class="color-swatch-hex">#62625b</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#91918c"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Silver</div><div class="color-swatch-hex">#91918c</div><div class="color-swatch-role">Borders, muted</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5e5e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Sand Gray</div><div class="color-swatch-hex">#e5e5e0</div><div class="color-swatch-role">Secondary button</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e0e0d9"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Light</div><div class="color-swatch-hex">#e0e0d9</div><div class="color-swatch-role">Circular buttons</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f6f6f3"></div><div class="color-swatch-info"><div class="color-swatch-name">Fog</div><div class="color-swatch-hex">#f6f6f3</div><div class="color-swatch-role">Light surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#33332e"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark</div><div class="color-swatch-hex">#33332e</div><div class="color-swatch-role">Footer</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Interactive</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#435ee5"></div><div class="color-swatch-info"><div class="color-swatch-name">Focus Blue</div><div class="color-swatch-hex">#435ee5</div><div class="color-swatch-role">Focus ring</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2b48d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Link Blue</div><div class="color-swatch-hex">#2b48d4</div><div class="color-swatch-role">Links</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#6845ab"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple</div><div class="color-swatch-hex">#6845ab</div><div class="color-swatch-role">Performance</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:56px; font-weight:600; line-height:1.10;">Display Hero</div><div class="type-meta">Display — 70px / 600 / Pin Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:28px; font-weight:700; letter-spacing:-1.2px;">Section Heading</div><div class="type-meta">Section — 28px / 700 / -1.2px</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.40; color:var(--olive);">Body — Find ideas for weeknight dinner. With Pinterest, discover creative ideas that spark joy.</div><div class="type-meta">Body — 16px / 400 / 1.40 / Pin Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:700;">Caption Bold — Trending now</div><div class="type-meta">Caption Bold — 14px / 700</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:500; color:var(--warm-silver);">Small — 1,234 pins</div><div class="type-meta">Small — 12px / 500</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-red" href="#">Sign up</a><div class="button-label">Primary Red</div></div>
|
||||
<div class="button-item"><a class="btn-sand" href="#">Log in</a><div class="button-label">Secondary Sand</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">❤</a><div class="button-label">Circular</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:transparent; color:var(--plum); padding:6px 14px; font-size:12px;">Ghost</span><div class="button-label">Transparent</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><div class="card-img">Pin photo</div><div class="card-body"><h3>Weeknight Dinner</h3><p>Quick recipes for busy evenings</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:var(--sand);">Pin photo</div><div class="card-body"><h3>Home Decor</h3><p>Inspiration for every room</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:#eee;">Pin photo</div><div class="card-body"><h3>Travel Ideas</h3><p>Destinations worth exploring</p></div></div>
|
||||
<div class="card"><div class="card-img" style="background:var(--warm-light);">Pin photo</div><div class="card-body"><h3>Fashion</h3><p>Outfit ideas for every season</p></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="Email address"><div class="form-state-label">Default (warm silver border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Username</label><input class="form-input form-input--focus" type="text" value="pinner123"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Password</label><input class="form-input form-input--error" type="password" value="short"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">About you</label><textarea class="form-textarea" placeholder="Tell us about yourself..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:28px"></div><div class="radius-label">28px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%; width:52px; height:52px;"></div><div class="radius-label">50%</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — content driven</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 2px var(--focus-blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue focus ring</div></div>
|
||||
</div>
|
||||
<p style="font-size:11px; color:var(--warm-silver); margin-top:12px;">Pinterest uses minimal shadows — depth comes from photography and warm surface colors.</p>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://pinterest.com/">pinterest.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
303
design-md/resend/DESIGN.md
Normal file
303
design-md/resend/DESIGN.md
Normal file
@@ -0,0 +1,303 @@
|
||||
# Design System: Resend
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Resend's website is a dark, cinematic canvas that treats email infrastructure like a luxury product. The entire page is draped in pure black (`#000000`) with text that glows in near-white (`#f0f0f0`), creating a theater-like experience where content performs on a void stage. This isn't the typical developer-tool darkness — it's the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention.
|
||||
|
||||
The typography system is the star of the show. Three carefully chosen typefaces create a hierarchy that feels both editorial and technical: Domaine Display (a Klim Type Foundry serif) appears at massive 96px for hero headlines with barely-there line-height (1.00) and negative tracking (-0.96px), creating display text that feels like a magazine cover. ABC Favorit (by Dinamo) handles section headings with an even more aggressive letter-spacing (-2.8px at 56px), giving a compressed, engineered quality to mid-tier text. Inter takes over for body and UI, providing the clean readability that lets the display fonts shine. Commit Mono rounds out the family for code blocks.
|
||||
|
||||
What makes Resend distinctive is its icy, blue-tinted border system. Instead of neutral gray borders, Resend uses `rgba(214, 235, 253, 0.19)` — a frosty, slightly blue-tinted line at 19% opacity that gives every container and divider a cold, crystalline quality against the black background. Combined with pill-shaped buttons (9999px radius), multi-color accent system (orange, green, blue, yellow, red — each with its own CSS variable scale), and OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`), the result is a design system that feels premium, precise, and quietly confident.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Pure black background with near-white (`#f0f0f0`) text — theatrical, gallery-like darkness
|
||||
- Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body/UI)
|
||||
- Icy blue-tinted borders: `rgba(214, 235, 253, 0.19)` — every border has a cold, crystalline shimmer
|
||||
- Multi-color accent system: orange, green, blue, yellow, red — each with numbered CSS variable scales
|
||||
- Pill-shaped buttons and tags (9999px radius) with transparent backgrounds
|
||||
- OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`) on display fonts
|
||||
- Commit Mono for code — monospace as a design element, not an afterthought
|
||||
- Whisper-level shadows using blue-tinted ring: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Void Black** (`#000000`): Page background, the defining canvas color (95% opacity via `--color-black-12`)
|
||||
- **Near White** (`#f0f0f0`): Primary text, button text, high-contrast elements
|
||||
- **Pure White** (`#ffffff`): `--color-white`, maximum emphasis text, link highlights
|
||||
|
||||
### Accent Scale — Orange
|
||||
- **Orange 4** (`#ff5900`): `--color-orange-4`, at 22% opacity — subtle warm glow
|
||||
- **Orange 10** (`#ff801f`): `--color-orange-10`, primary orange accent — warm, energetic
|
||||
- **Orange 11** (`#ffa057`): `--color-orange-11`, lighter orange for secondary use
|
||||
|
||||
### Accent Scale — Green
|
||||
- **Green 3** (`#22ff99`): `--color-green-3`, at 12% opacity — faint emerald wash
|
||||
- **Green 4** (`#11ff99`): `--color-green-4`, at 18% opacity — success indicator glow
|
||||
|
||||
### Accent Scale — Blue
|
||||
- **Blue 4** (`#0075ff`): `--color-blue-4`, at 34% opacity — medium blue accent
|
||||
- **Blue 5** (`#0081fd`): `--color-blue-5`, at 42% opacity — stronger blue
|
||||
- **Blue 10** (`#3b9eff`): `--color-blue-10`, bright blue — links, interactive elements
|
||||
|
||||
### Accent Scale — Other
|
||||
- **Yellow 9** (`#ffc53d`): `--color-yellow-9`, warm gold for warnings or highlights
|
||||
- **Red 5** (`#ff2047`): `--color-red-5`, at 34% opacity — error states, destructive actions
|
||||
|
||||
### Neutral Scale
|
||||
- **Silver** (`#a1a4a5`): Secondary text, muted links, descriptions
|
||||
- **Dark Gray** (`#464a4d`): Tertiary text, de-emphasized content
|
||||
- **Mid Gray** (`#5c5c5c`): Hover states, subtle emphasis
|
||||
- **Medium Gray** (`#494949`): Quaternary text
|
||||
- **Light Gray** (`#f8f8f8`): Light mode surface (if applicable)
|
||||
- **Border Gray** (`#eaeaea`): Light context borders
|
||||
- **Edge Gray** (`#ececec`): Subtle borders on light surfaces
|
||||
- **Mist Gray** (`#dedfdf`): Light dividers
|
||||
- **Soft Gray** (`#e5e6e6`): Alternate light border
|
||||
|
||||
### Surface & Overlay
|
||||
- **Frost Primary** (`#fcfdff`): Primary color token (slight blue tint, 94% opacity)
|
||||
- **White Hover** (`rgba(255, 255, 255, 0.28)`): Button hover state on dark
|
||||
- **White 60%** (`oklab(0.999994 ... / 0.577)`): Semi-transparent white for muted text
|
||||
- **White 64%** (`oklab(0.999994 ... / 0.642)`): Slightly brighter semi-transparent white
|
||||
|
||||
### Borders & Shadows
|
||||
- **Frost Border** (`rgba(214, 235, 253, 0.19)`): The signature — icy blue-tinted borders at 19% opacity
|
||||
- **Frost Border Alt** (`rgba(217, 237, 254, 0.145)`): Slightly lighter variant for list items
|
||||
- **Ring Shadow** (`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`): Blue-tinted shadow-as-border
|
||||
- **Focus Ring** (`rgb(0, 0, 0) 0px 0px 0px 8px`): Heavy black focus ring
|
||||
- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`): Minimal card elevation
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display Serif**: `domaine` (Domaine Display by Klim Type Foundry) — hero headlines
|
||||
- **Display Sans**: `aBCFavorit` (ABC Favorit by Dinamo), fallbacks: `ui-sans-serif, system-ui` — section headings
|
||||
- **Body / UI**: `inter`, fallbacks: `ui-sans-serif, system-ui` — body text, buttons, navigation
|
||||
- **Monospace**: `commitMono`, fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
|
||||
- **Secondary**: `Helvetica` — fallback for specific UI contexts
|
||||
- **System**: `-apple-system, system-ui, Segoe UI, Roboto` — embedded content
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | domaine | 96px (6.00rem) | 400 | 1.00 (tight) | -0.96px | `"ss01", "ss04", "ss11"` |
|
||||
| Display Hero Mobile | domaine | 76.8px (4.80rem) | 400 | 1.00 (tight) | -0.768px | Scaled for mobile |
|
||||
| Section Heading | aBCFavorit | 56px (3.50rem) | 400 | 1.20 (tight) | -2.8px | `"ss01", "ss04", "ss11"` |
|
||||
| Sub-heading | aBCFavorit | 20px (1.25rem) | 400 | 1.30 (tight) | normal | `"ss01", "ss04", "ss11"` |
|
||||
| Sub-heading Compact | aBCFavorit | 16px (1.00rem) | 400 | 1.50 | -0.8px | `"ss01", "ss04", "ss11"` |
|
||||
| Feature Title | inter | 24px (1.50rem) | 500 | 1.50 | normal | Section sub-headings |
|
||||
| Body Large | inter | 18px (1.13rem) | 400 | 1.50 | normal | Introductions |
|
||||
| Body | inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |
|
||||
| Body Semibold | inter | 16px (1.00rem) | 600 | 1.50 | normal | Emphasis, active states |
|
||||
| Nav Link | aBCFavorit | 14px (0.88rem) | 500 | 1.43 | 0.35px | `"ss01", "ss03", "ss04"` — positive tracking |
|
||||
| Button / Link | inter | 14px (0.88rem) | 500–600 | 1.43 | normal | Buttons, nav, CTAs |
|
||||
| Caption | inter | 14px (0.88rem) | 400 | 1.60 (relaxed) | normal | Descriptions |
|
||||
| Helvetica Caption | Helvetica | 14px (0.88rem) | 400–600 | 1.00–1.71 | normal | UI elements |
|
||||
| Small | inter | 12px (0.75rem) | 400–500 | 1.33 | normal | Tags, meta, fine print |
|
||||
| Small Uppercase | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: uppercase` |
|
||||
| Small Capitalize | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Code Body | commitMono | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |
|
||||
| Code Small | commitMono | 14px (0.88rem) | 400 | 1.43 | normal | Inline code |
|
||||
| Code Tiny | commitMono | 12px (0.75rem) | 400 | 1.33 | normal | Small code labels |
|
||||
| Heading (Helvetica) | Helvetica | 24px (1.50rem) | 400 | 1.40 | normal | Alternate heading context |
|
||||
|
||||
### Principles
|
||||
- **Three-font editorial hierarchy**: Domaine Display (serif, hero), ABC Favorit (geometric sans, sections), Inter (readable body). Each font has a strict role — they never cross lanes.
|
||||
- **Aggressive negative tracking on display**: Domaine at -0.96px, ABC Favorit at -2.8px. The display type feels compressed, urgent, and designed — like a magazine masthead.
|
||||
- **Positive tracking on nav**: ABC Favorit nav links use +0.35px letter-spacing — the only positive tracking in the system. This creates airy, spaced-out navigation text that contrasts with the compressed headings.
|
||||
- **OpenType as identity**: The `"ss01"`, `"ss03"`, `"ss04"`, `"ss11"` stylistic sets are enabled on all ABC Favorit and Domaine text, activating alternate glyphs that give Resend's typography its unique character.
|
||||
- **Commit Mono as design element**: The monospace font isn't hidden in code blocks — it's used prominently for code examples and technical content, treated as a first-class visual element.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Transparent Pill**
|
||||
- Background: transparent
|
||||
- Text: `#f0f0f0`
|
||||
- Padding: 5px 12px
|
||||
- Radius: 9999px (full pill)
|
||||
- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
|
||||
- Hover: background `rgba(255, 255, 255, 0.28)` (white glass)
|
||||
- Use: Primary CTA on dark backgrounds
|
||||
|
||||
**White Solid Pill**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#000000`
|
||||
- Padding: 5px 12px
|
||||
- Radius: 9999px
|
||||
- Use: High-contrast CTA ("Get started")
|
||||
|
||||
**Ghost Button**
|
||||
- Background: transparent
|
||||
- Text: `#f0f0f0`
|
||||
- Radius: 4px
|
||||
- No border
|
||||
- Hover: subtle background tint
|
||||
- Use: Secondary actions, tab items
|
||||
|
||||
### Cards & Containers
|
||||
- Background: transparent or very subtle dark tint
|
||||
- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
|
||||
- Radius: 16px (standard cards), 24px (large sections/panels)
|
||||
- Shadow: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` (ring shadow)
|
||||
- Dark product screenshots and code demos as card content
|
||||
- No traditional box-shadow elevation
|
||||
|
||||
### Inputs & Forms
|
||||
- Text: `#f0f0f0` on dark, `#000000` on light
|
||||
- Radius: 4px
|
||||
- Focus: shadow-based ring
|
||||
- Minimal styling — inherits dark theme
|
||||
|
||||
### Navigation
|
||||
- Sticky dark header with frost border bottom: `1px solid rgba(214, 235, 253, 0.19)`
|
||||
- "Resend" wordmark left-aligned
|
||||
- ABC Favorit 14px weight 500 with +0.35px tracking for nav links
|
||||
- Pill CTAs right-aligned
|
||||
- Mobile: hamburger collapse
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots and code demos dominate content sections
|
||||
- Dark-themed screenshots on dark background — seamless integration
|
||||
- Rounded corners: 12px–16px on images
|
||||
- Full-width sections with subtle gradient overlays
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Tab Navigation**
|
||||
- Horizontal tabs with subtle selection indicator
|
||||
- Tab items: 8px radius
|
||||
- Active state with subtle background differentiation
|
||||
|
||||
**Code Preview Panels**
|
||||
- Dark code blocks using Commit Mono
|
||||
- Frost borders (`rgba(214, 235, 253, 0.19)`)
|
||||
- Syntax-highlighted with multi-color accent tokens (orange, blue, green, yellow)
|
||||
|
||||
**Multi-color Accent Badges**
|
||||
- Each product feature has its own accent color from the CSS variable scale
|
||||
- Badges use the accent color at low opacity (12–42%) for background, full opacity for text
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px, 32px, 40px
|
||||
|
||||
### Grid & Container
|
||||
- Centered content with generous max-width
|
||||
- Full-width black sections with contained inner content
|
||||
- Single-column hero, expanding to feature grids below
|
||||
- Code preview panels as full-width or contained showcases
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Cinematic black space**: The black background IS the whitespace. Generous vertical spacing (80px–120px+) between sections creates a scroll-through-darkness experience where each section emerges like a scene.
|
||||
- **Tight content, vast surrounds**: Text blocks and cards are compact internally, but float in vast dark space — creating isolated "islands" of content.
|
||||
- **Typography-led rhythm**: The massive display fonts (96px) create their own vertical rhythm — each headline is a visual event that anchors the surrounding space.
|
||||
|
||||
### Border Radius Scale
|
||||
- Sharp (4px): Buttons (ghost), inputs, small interactive elements
|
||||
- Subtle (6px): Menu panels, navigation items
|
||||
- Standard (8px): Tabs, content blocks
|
||||
- Comfortable (10px): Accent elements
|
||||
- Card (12px): Clipboard buttons, medium containers
|
||||
- Large (16px): Feature cards, images, main buttons
|
||||
- Section (24px): Large panels, section containers
|
||||
- Pill (9999px): Primary CTAs, tags, badges
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, transparent background | Default — most elements on dark void |
|
||||
| Ring (Level 1) | `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` | Shadow-as-border for cards, containers |
|
||||
| Frost Border (Level 1b) | `1px solid rgba(214, 235, 253, 0.19)` | Explicit borders — buttons, dividers, tabs |
|
||||
| Subtle (Level 2) | `rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Light card elevation |
|
||||
| Focus (Level 3) | `rgb(0, 0, 0) 0px 0px 0px 8px` | Heavy black focus ring — accessibility |
|
||||
|
||||
**Shadow Philosophy**: Resend barely uses shadows at all. On a pure black background, traditional shadows are invisible — you can't cast a shadow into the void. Instead, Resend creates depth through its signature frost borders (`rgba(214, 235, 253, 0.19)`) — thin, icy blue-tinted lines that catch light against the darkness. This creates a "glass panel floating in space" aesthetic where borders are the primary depth mechanism.
|
||||
|
||||
### Decorative Depth
|
||||
- Subtle warm gradient glows behind hero content (orange/amber tints)
|
||||
- Product screenshots create visual depth through their own internal UI
|
||||
- No gradient backgrounds — depth comes from border luminance and content contrast
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use pure black (`#000000`) as the page background — the void is the canvas
|
||||
- Apply frost borders (`rgba(214, 235, 253, 0.19)`) for all structural lines — they're the blue-tinted signature
|
||||
- Use Domaine Display ONLY for hero headings (96px), ABC Favorit for section headings, Inter for everything else
|
||||
- Enable OpenType `"ss01"`, `"ss04"`, `"ss11"` on Domaine and ABC Favorit text
|
||||
- Apply pill radius (9999px) to primary CTAs and tags
|
||||
- Use the multi-color accent scale (orange/green/blue/yellow/red) with opacity variants for context-specific highlighting
|
||||
- Keep shadows at ring level (`0px 0px 0px 1px`) — on black, traditional shadows don't work
|
||||
- Use +0.35px letter-spacing on ABC Favorit nav links — the only positive tracking
|
||||
|
||||
### Don't
|
||||
- Don't lighten the background above `#000000` — the pure black void is non-negotiable
|
||||
- Don't use neutral gray borders — all borders must have the frost blue tint
|
||||
- Don't apply Domaine Display to body text — it's a display-only serif
|
||||
- Don't mix accent colors in the same component — each feature gets one accent color
|
||||
- Don't use box-shadow for elevation on the dark background — use frost borders instead
|
||||
- Don't skip the OpenType stylistic sets — they define the typographic character
|
||||
- Don't use negative letter-spacing on nav links — ABC Favorit nav uses positive +0.35px
|
||||
- Don't make buttons opaque on dark — transparency with frost border is the pattern
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <480px | Single column, tight padding, 76.8px hero |
|
||||
| Mobile | 480–600px | Standard mobile, stacked layout |
|
||||
| Desktop | >600px | Full layout, 96px hero, expanded sections |
|
||||
|
||||
*Note: Resend uses a minimal breakpoint system — only 480px and 600px detected. The design is desktop-first with a clean mobile collapse.*
|
||||
|
||||
### Touch Targets
|
||||
- Pill buttons: adequate padding (5px 12px minimum)
|
||||
- Tab items: 8px radius with comfortable hit areas
|
||||
- Navigation links spaced with 0.35px tracking for visual separation
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: Domaine 96px → 76.8px on mobile
|
||||
- Navigation: horizontal → hamburger
|
||||
- Feature sections: side-by-side → stacked
|
||||
- Code panels: maintain width, horizontal scroll if needed
|
||||
- Spacing compresses proportionally
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots maintain aspect ratio
|
||||
- Dark screenshots blend seamlessly with dark background at all sizes
|
||||
- Rounded corners (12px–16px) maintained across breakpoints
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Void Black (`#000000`)
|
||||
- Primary text: Near White (`#f0f0f0`)
|
||||
- Secondary text: Silver (`#a1a4a5`)
|
||||
- Border: Frost Border (`rgba(214, 235, 253, 0.19)`)
|
||||
- Orange accent: `#ff801f`
|
||||
- Green accent: `#11ff99` (at 18% opacity)
|
||||
- Blue accent: `#3b9eff`
|
||||
- Focus ring: `rgb(0, 0, 0) 0px 0px 0px 8px`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on pure black (#000000) background. Headline at 96px Domaine Display weight 400, line-height 1.00, letter-spacing -0.96px, near-white (#f0f0f0) text, OpenType 'ss01 ss04 ss11'. Subtitle at 20px ABC Favorit weight 400, line-height 1.30. Two pill buttons: white solid (#ffffff, 9999px radius) and transparent with frost border (rgba(214,235,253,0.19))."
|
||||
- "Design a navigation bar: dark background with frost border bottom (1px solid rgba(214,235,253,0.19)). Nav links at 14px ABC Favorit weight 500, letter-spacing +0.35px, OpenType 'ss01 ss03 ss04'. White pill CTA right-aligned."
|
||||
- "Build a feature card: transparent background, frost border (rgba(214,235,253,0.19)), 16px radius. Title at 56px ABC Favorit weight 400, letter-spacing -2.8px. Body at 16px Inter weight 400, #a1a4a5 text."
|
||||
- "Create a code block using Commit Mono 16px on dark background. Frost border container (24px radius). Syntax colors: orange (#ff801f), blue (#3b9eff), green (#11ff99), yellow (#ffc53d)."
|
||||
- "Design an accent badge: background #ff5900 at 22% opacity, text #ffa057, 9999px radius, 12px Inter weight 500."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with pure black — everything floats in the void
|
||||
2. Frost borders (`rgba(214, 235, 253, 0.19)`) are the universal structural element — not gray, not neutral
|
||||
3. Three fonts, three roles: Domaine (hero), ABC Favorit (sections), Inter (body) — never cross
|
||||
4. OpenType stylistic sets are mandatory on display fonts — they define the character
|
||||
5. Multi-color accents at low opacity (12–42%) for backgrounds, full opacity for text
|
||||
6. Pill shape (9999px) for CTAs and badges, standard radius (4px–16px) for containers
|
||||
7. No shadows — use frost borders for depth against the void
|
||||
23
design-md/resend/README.md
Normal file
23
design-md/resend/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Resend Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/resend/DESIGN.md) extracted from the public [resend](https://resend.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/resend/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Resend 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
357
design-md/resend/preview-dark.html
Normal file
357
design-md/resend/preview-dark.html
Normal file
@@ -0,0 +1,357 @@
|
||||
<!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: Resend (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=DM+Serif+Display&family=Commit+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--void: #050505;
|
||||
--near-white: #f0f0f0;
|
||||
--white: #ffffff;
|
||||
--silver: #a1a4a5;
|
||||
--dark-gray: #464a4d;
|
||||
--mid-gray: #5c5c5c;
|
||||
--orange-10: #ff801f;
|
||||
--orange-11: #ffa057;
|
||||
--green-4: #11ff99;
|
||||
--blue-10: #3b9eff;
|
||||
--yellow-9: #ffc53d;
|
||||
--red-5: #ff2047;
|
||||
--frost-border: rgba(214, 235, 253, 0.19);
|
||||
--frost-border-alt: rgba(217, 237, 254, 0.145);
|
||||
--ring-shadow: rgba(176, 199, 217, 0.145) 0px 0px 0px 1px;
|
||||
--font-serif: 'DM Serif Display', Georgia, serif;
|
||||
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--void);
|
||||
color: var(--near-white);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(5,5,5,0.9);
|
||||
backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--frost-border);
|
||||
}
|
||||
.nav-brand { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--near-white); text-decoration: none; letter-spacing: 0.35px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 500; color: var(--silver); text-decoration: none; letter-spacing: 0.35px; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--near-white); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--white); color: var(--void);
|
||||
padding: 5px 14px; border-radius: 9999px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.85; }
|
||||
|
||||
.hero {
|
||||
padding: 100px 32px 80px; text-align: center;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
|
||||
width: 600px; height: 400px;
|
||||
background: radial-gradient(ellipse, rgba(255,128,31,0.08) 0%, rgba(0,0,0,0) 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
|
||||
.hero h1 {
|
||||
font-family: var(--font-serif); font-size: 88px; font-weight: 400;
|
||||
line-height: 1.00; letter-spacing: -0.96px; margin-bottom: 20px;
|
||||
}
|
||||
.hero p { font-size: 20px; font-weight: 400; line-height: 1.30; color: var(--silver); max-width: 500px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-white {
|
||||
display: inline-block; background: var(--white); color: var(--void);
|
||||
padding: 8px 20px; border-radius: 9999px; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-white:hover { opacity: 0.85; }
|
||||
.btn-frost {
|
||||
display: inline-block; background: transparent; color: var(--near-white);
|
||||
padding: 8px 20px; border-radius: 9999px;
|
||||
border: 1px solid var(--frost-border);
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-frost:hover { background: rgba(255,255,255,0.08); }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: transparent; color: var(--near-white);
|
||||
padding: 8px 14px; border-radius: 4px; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer;
|
||||
}
|
||||
|
||||
.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--mid-gray); text-transform: uppercase; margin-bottom: 8px; }
|
||||
.section-title { font-family: var(--font-sans); font-size: 28px; font-weight: 500; line-height: 1.30; letter-spacing: -1.4px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--frost-border); margin: 0; }
|
||||
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--frost-border); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 10px; color: var(--mid-gray); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 500; color: var(--silver); margin: 24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(214,235,253,0.1); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--mid-gray); margin-top: 8px; }
|
||||
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); margin-top: 8px; }
|
||||
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
|
||||
.card { background: transparent; border: 1px solid var(--frost-border); border-radius: 16px; padding: 24px; transition: border-color 0.2s; }
|
||||
.card:hover { border-color: rgba(214,235,253,0.35); }
|
||||
.card h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
|
||||
.card p { font-size: 14px; color: var(--silver); line-height: 1.50; }
|
||||
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 9999px; margin-bottom: 12px; }
|
||||
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--near-white); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: transparent; color: var(--near-white);
|
||||
border: 1px solid var(--frost-border); padding: 8px 12px; border-radius: 4px;
|
||||
font-family: var(--font-sans); font-size: 14px; outline: none; transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--blue-10); }
|
||||
.form-input--focus { border-color: var(--blue-10); }
|
||||
.form-input--error { border-color: var(--red-5); box-shadow: 0 0 0 1px rgba(255,32,71,0.3); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: transparent; color: var(--near-white);
|
||||
border: 1px solid var(--frost-border); padding: 8px 12px; border-radius: 4px;
|
||||
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
|
||||
}
|
||||
.form-state-label { font-size: 10px; color: var(--mid-gray); margin-top: 4px; }
|
||||
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--orange-10); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
|
||||
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 60px; height: 60px; border: 1px solid var(--frost-border); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
|
||||
.radius-context { font-size: 9px; color: var(--dark-gray); }
|
||||
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
|
||||
.elevation-card { background: transparent; border-radius: 12px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
|
||||
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--frost-border); font-size: 13px; color: var(--silver); }
|
||||
.footer a { color: var(--orange-10); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hero h1 { font-size: 56px; letter-spacing: -0.56px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#ff801f;color:#000000;font-size:11px;font-weight:600;padding:4px 10px;border-radius:9999px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Design System<br>Inspired by Resend</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-white" href="#">Get Started</a>
|
||||
<a class="btn-frost" href="#">Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Void Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f0f0f0"></div><div class="color-swatch-info"><div class="color-swatch-name">Near White</div><div class="color-swatch-hex">#f0f0f0</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Maximum emphasis</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Accent Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff801f"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange 10</div><div class="color-swatch-hex">#ff801f</div><div class="color-swatch-role">Primary orange accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffa057"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange 11</div><div class="color-swatch-hex">#ffa057</div><div class="color-swatch-role">Light orange</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#11ff99"></div><div class="color-swatch-info"><div class="color-swatch-name">Green 4</div><div class="color-swatch-hex">#11ff99</div><div class="color-swatch-role">Success / green accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3b9eff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 10</div><div class="color-swatch-hex">#3b9eff</div><div class="color-swatch-role">Interactive blue</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc53d"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow 9</div><div class="color-swatch-hex">#ffc53d</div><div class="color-swatch-role">Warning / gold</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2047"></div><div class="color-swatch-info"><div class="color-swatch-name">Red 5</div><div class="color-swatch-hex">#ff2047</div><div class="color-swatch-role">Error / destructive</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#a1a4a5"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#a1a4a5</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5c5c5c"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#5c5c5c</div><div class="color-swatch-role">Muted labels</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#464a4d"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#464a4d</div><div class="color-swatch-role">Tertiary text</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Border & Surface</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: rgba(214,235,253,0.19); border: 1px solid rgba(214,235,253,0.3)"></div><div class="color-swatch-info"><div class="color-swatch-name">Frost Border</div><div class="color-swatch-hex">rgba(214,235,253,0.19)</div><div class="color-swatch-role">Signature icy border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: rgba(255,255,255,0.28)"></div><div class="color-swatch-info"><div class="color-swatch-name">White Hover</div><div class="color-swatch-hex">rgba(255,255,255,0.28)</div><div class="color-swatch-role">Button hover</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:88px; font-weight:400; line-height:1.00; letter-spacing:-0.96px;">Display Hero</div><div class="type-meta">Display Hero — 96px / 400 / 1.00 / -0.96px / Domaine Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:48px; font-weight:400; line-height:1.20; letter-spacing:-2.8px;">Section Heading</div><div class="type-meta">Section Heading — 56px / 400 / 1.20 / -2.8px / ABC Favorit</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:20px; font-weight:400; line-height:1.30;">Sub-heading text</div><div class="type-meta">Sub-heading — 20px / 400 / 1.30 / ABC Favorit</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:24px; font-weight:500; line-height:1.50;">Feature Title</div><div class="type-meta">Feature Title — 24px / 500 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:18px; font-weight:400; line-height:1.50;">Body Large — Email for developers. Build, test, and deliver transactional emails at scale.</div><div class="type-meta">Body Large — 18px / 400 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50;">Body — The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.</div><div class="type-meta">Body — 16px / 400 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43; letter-spacing:0.35px;">Nav Link</div><div class="type-meta">Nav Link — 14px / 500 / 1.43 / +0.35px / ABC Favorit</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43;">Button / Link</div><div class="type-meta">Button — 14px / 500 / 1.43 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:12px; font-weight:500; line-height:1.33; text-transform:uppercase;">Small Uppercase</div><div class="type-meta">Small Uppercase — 12px / 500 / uppercase / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:16px; font-weight:400; line-height:1.50; color:var(--orange-10);">resend.emails.send({ to: 'user@example.com' })</div><div class="type-meta">Code Body — 16px / 400 / 1.50 / Commit Mono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.33; color:var(--silver);">npm install resend</div><div class="type-meta">Code Small — 12px / 400 / 1.33 / Commit Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-white" href="#">Get Started</a><div class="button-label">White Solid Pill</div></div>
|
||||
<div class="button-item"><a class="btn-frost" href="#">Documentation</a><div class="button-label">Frost Pill</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Learn more</a><div class="button-label">Ghost</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(255,128,31,0.15); color:var(--orange-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Email API</span><div class="button-label">Accent Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(59,158,255,0.15); color:var(--blue-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Webhooks</span><div class="button-label">Blue Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(17,255,153,0.12); color:var(--green-4); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Delivered</span><div class="button-label">Green Badge</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(255,128,31,0.12); color:var(--orange-10);">Email API</div>
|
||||
<h3>First-class developer experience</h3>
|
||||
<p>Build with a simple, elegant interface that gets out of your way. Send emails with just a few lines of code.</p>
|
||||
</div>
|
||||
<div class="card" style="border-color: rgba(214,235,253,0.35);">
|
||||
<div class="card-badge" style="background:rgba(59,158,255,0.12); color:var(--blue-10);">Elevated</div>
|
||||
<h3>Reach humans, not spam</h3>
|
||||
<p>Deliver transactional emails at scale. Card shown with brighter frost border on hover.</p>
|
||||
</div>
|
||||
<div class="card" style="border-radius: 24px;">
|
||||
<div class="card-badge" style="background:rgba(17,255,153,0.12); color:var(--green-4);">Section</div>
|
||||
<h3>React Email</h3>
|
||||
<p>Build beautiful emails using React components. 24px radius section panel variant.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">API Key</label><input class="form-input" type="text" placeholder="re_123456789"><div class="form-state-label">Default (frost border)</div></div>
|
||||
<div class="form-group"><label class="form-label">To Address</label><input class="form-input form-input--focus" type="email" value="user@example.com"><div class="form-state-label">Focus (blue border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid-domain"><div class="form-state-label">Error (red border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Email Body</label><textarea class="form-textarea" placeholder="Write your email content..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Menus</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Tabs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Containers</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Sections</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid rgba(214,235,253,0.08);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow — void background</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(176,199,217,0.145) 0px 0px 0px 1px;"><div class="elevation-label">Level 1: Ring</div><div class="elevation-desc">Blue-tinted ring shadow</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid rgba(214,235,253,0.19);"><div class="elevation-label">Level 1b: Frost</div><div class="elevation-desc">Icy frost border</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px;"><div class="elevation-label">Level 2: Subtle</div><div class="elevation-desc">Minimal card elevation</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgb(0,0,0) 0px 0px 0px 8px;"><div class="elevation-label">Focus</div><div class="elevation-desc">Heavy black focus ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://resend.com/">resend.com</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
356
design-md/resend/preview.html
Normal file
356
design-md/resend/preview.html
Normal file
@@ -0,0 +1,356 @@
|
||||
<!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: Resend (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=DM+Serif+Display&family=Commit+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--void: #000000;
|
||||
--near-white: #f0f0f0;
|
||||
--white: #ffffff;
|
||||
--silver: #a1a4a5;
|
||||
--dark-gray: #464a4d;
|
||||
--mid-gray: #5c5c5c;
|
||||
--orange-10: #ff801f;
|
||||
--orange-11: #ffa057;
|
||||
--green-4: #11ff99;
|
||||
--blue-10: #3b9eff;
|
||||
--yellow-9: #ffc53d;
|
||||
--red-5: #ff2047;
|
||||
--frost-border: rgba(214, 235, 253, 0.19);
|
||||
--frost-border-alt: rgba(217, 237, 254, 0.145);
|
||||
--ring-shadow: rgba(176, 199, 217, 0.145) 0px 0px 0px 1px;
|
||||
--font-serif: 'DM Serif Display', Georgia, serif;
|
||||
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--void);
|
||||
color: var(--near-white);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(0,0,0,0.85);
|
||||
backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--frost-border);
|
||||
}
|
||||
.nav-brand { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--near-white); text-decoration: none; letter-spacing: 0.35px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 500; color: var(--silver); text-decoration: none; letter-spacing: 0.35px; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--near-white); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--white); color: var(--void);
|
||||
padding: 5px 14px; border-radius: 9999px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.85; }
|
||||
|
||||
.hero {
|
||||
padding: 100px 32px 80px; text-align: center;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
|
||||
width: 600px; height: 400px;
|
||||
background: radial-gradient(ellipse, rgba(255,128,31,0.08) 0%, rgba(0,0,0,0) 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
|
||||
.hero h1 {
|
||||
font-family: var(--font-serif); font-size: 88px; font-weight: 400;
|
||||
line-height: 1.00; letter-spacing: -0.96px; margin-bottom: 20px;
|
||||
}
|
||||
.hero p { font-size: 20px; font-weight: 400; line-height: 1.30; color: var(--silver); max-width: 500px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-white {
|
||||
display: inline-block; background: var(--white); color: var(--void);
|
||||
padding: 8px 20px; border-radius: 9999px; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-white:hover { opacity: 0.85; }
|
||||
.btn-frost {
|
||||
display: inline-block; background: transparent; color: var(--near-white);
|
||||
padding: 8px 20px; border-radius: 9999px;
|
||||
border: 1px solid var(--frost-border);
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.btn-frost:hover { background: rgba(255,255,255,0.08); }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: transparent; color: var(--near-white);
|
||||
padding: 8px 14px; border-radius: 4px; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer;
|
||||
}
|
||||
|
||||
.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--mid-gray); text-transform: uppercase; margin-bottom: 8px; }
|
||||
.section-title { font-family: var(--font-sans); font-size: 28px; font-weight: 500; line-height: 1.30; letter-spacing: -1.4px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--frost-border); margin: 0; }
|
||||
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--frost-border); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 10px; color: var(--mid-gray); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 500; color: var(--silver); margin: 24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(214,235,253,0.1); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--mid-gray); margin-top: 8px; }
|
||||
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); margin-top: 8px; }
|
||||
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
|
||||
.card { background: transparent; border: 1px solid var(--frost-border); border-radius: 16px; padding: 24px; transition: border-color 0.2s; }
|
||||
.card:hover { border-color: rgba(214,235,253,0.35); }
|
||||
.card h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
|
||||
.card p { font-size: 14px; color: var(--silver); line-height: 1.50; }
|
||||
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 9999px; margin-bottom: 12px; }
|
||||
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--near-white); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: transparent; color: var(--near-white);
|
||||
border: 1px solid var(--frost-border); padding: 8px 12px; border-radius: 4px;
|
||||
font-family: var(--font-sans); font-size: 14px; outline: none; transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--blue-10); }
|
||||
.form-input--focus { border-color: var(--blue-10); }
|
||||
.form-input--error { border-color: var(--red-5); box-shadow: 0 0 0 1px rgba(255,32,71,0.3); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: transparent; color: var(--near-white);
|
||||
border: 1px solid var(--frost-border); padding: 8px 12px; border-radius: 4px;
|
||||
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
|
||||
}
|
||||
.form-state-label { font-size: 10px; color: var(--mid-gray); margin-top: 4px; }
|
||||
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--orange-10); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
|
||||
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 60px; height: 60px; border: 1px solid var(--frost-border); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
|
||||
.radius-context { font-size: 9px; color: var(--dark-gray); }
|
||||
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
|
||||
.elevation-card { background: transparent; border-radius: 12px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }
|
||||
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--frost-border); font-size: 13px; color: var(--silver); }
|
||||
.footer a { color: var(--orange-10); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hero h1 { font-size: 56px; letter-spacing: -0.56px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Design System<br>Inspired by Resend</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-white" href="#">Get Started</a>
|
||||
<a class="btn-frost" href="#">Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Void Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f0f0f0"></div><div class="color-swatch-info"><div class="color-swatch-name">Near White</div><div class="color-swatch-hex">#f0f0f0</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Maximum emphasis</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Accent Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff801f"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange 10</div><div class="color-swatch-hex">#ff801f</div><div class="color-swatch-role">Primary orange accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffa057"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange 11</div><div class="color-swatch-hex">#ffa057</div><div class="color-swatch-role">Light orange</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#11ff99"></div><div class="color-swatch-info"><div class="color-swatch-name">Green 4</div><div class="color-swatch-hex">#11ff99</div><div class="color-swatch-role">Success / green accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3b9eff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 10</div><div class="color-swatch-hex">#3b9eff</div><div class="color-swatch-role">Interactive blue</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc53d"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow 9</div><div class="color-swatch-hex">#ffc53d</div><div class="color-swatch-role">Warning / gold</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2047"></div><div class="color-swatch-info"><div class="color-swatch-name">Red 5</div><div class="color-swatch-hex">#ff2047</div><div class="color-swatch-role">Error / destructive</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#a1a4a5"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#a1a4a5</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5c5c5c"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#5c5c5c</div><div class="color-swatch-role">Muted labels</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#464a4d"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#464a4d</div><div class="color-swatch-role">Tertiary text</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Border & Surface</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: rgba(214,235,253,0.19); border: 1px solid rgba(214,235,253,0.3)"></div><div class="color-swatch-info"><div class="color-swatch-name">Frost Border</div><div class="color-swatch-hex">rgba(214,235,253,0.19)</div><div class="color-swatch-role">Signature icy border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background: rgba(255,255,255,0.28)"></div><div class="color-swatch-info"><div class="color-swatch-name">White Hover</div><div class="color-swatch-hex">rgba(255,255,255,0.28)</div><div class="color-swatch-role">Button hover</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:88px; font-weight:400; line-height:1.00; letter-spacing:-0.96px;">Display Hero</div><div class="type-meta">Display Hero — 96px / 400 / 1.00 / -0.96px / Domaine Display</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:48px; font-weight:400; line-height:1.20; letter-spacing:-2.8px;">Section Heading</div><div class="type-meta">Section Heading — 56px / 400 / 1.20 / -2.8px / ABC Favorit</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:20px; font-weight:400; line-height:1.30;">Sub-heading text</div><div class="type-meta">Sub-heading — 20px / 400 / 1.30 / ABC Favorit</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:24px; font-weight:500; line-height:1.50;">Feature Title</div><div class="type-meta">Feature Title — 24px / 500 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:18px; font-weight:400; line-height:1.50;">Body Large — Email for developers. Build, test, and deliver transactional emails at scale.</div><div class="type-meta">Body Large — 18px / 400 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50;">Body — The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.</div><div class="type-meta">Body — 16px / 400 / 1.50 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43; letter-spacing:0.35px;">Nav Link</div><div class="type-meta">Nav Link — 14px / 500 / 1.43 / +0.35px / ABC Favorit</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43;">Button / Link</div><div class="type-meta">Button — 14px / 500 / 1.43 / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-sans); font-size:12px; font-weight:500; line-height:1.33; text-transform:uppercase;">Small Uppercase</div><div class="type-meta">Small Uppercase — 12px / 500 / uppercase / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:16px; font-weight:400; line-height:1.50; color:var(--orange-10);">resend.emails.send({ to: 'user@example.com' })</div><div class="type-meta">Code Body — 16px / 400 / 1.50 / Commit Mono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.33; color:var(--silver);">npm install resend</div><div class="type-meta">Code Small — 12px / 400 / 1.33 / Commit Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-white" href="#">Get Started</a><div class="button-label">White Solid Pill</div></div>
|
||||
<div class="button-item"><a class="btn-frost" href="#">Documentation</a><div class="button-label">Frost Pill</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Learn more</a><div class="button-label">Ghost</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(255,128,31,0.15); color:var(--orange-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Email API</span><div class="button-label">Accent Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(59,158,255,0.15); color:var(--blue-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Webhooks</span><div class="button-label">Blue Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(17,255,153,0.12); color:var(--green-4); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;">Delivered</span><div class="button-label">Green Badge</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(255,128,31,0.12); color:var(--orange-10);">Email API</div>
|
||||
<h3>First-class developer experience</h3>
|
||||
<p>Build with a simple, elegant interface that gets out of your way. Send emails with just a few lines of code.</p>
|
||||
</div>
|
||||
<div class="card" style="border-color: rgba(214,235,253,0.35);">
|
||||
<div class="card-badge" style="background:rgba(59,158,255,0.12); color:var(--blue-10);">Elevated</div>
|
||||
<h3>Reach humans, not spam</h3>
|
||||
<p>Deliver transactional emails at scale. Card shown with brighter frost border on hover.</p>
|
||||
</div>
|
||||
<div class="card" style="border-radius: 24px;">
|
||||
<div class="card-badge" style="background:rgba(17,255,153,0.12); color:var(--green-4);">Section</div>
|
||||
<h3>React Email</h3>
|
||||
<p>Build beautiful emails using React components. 24px radius section panel variant.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">API Key</label><input class="form-input" type="text" placeholder="re_123456789"><div class="form-state-label">Default (frost border)</div></div>
|
||||
<div class="form-group"><label class="form-label">To Address</label><input class="form-input form-input--focus" type="email" value="user@example.com"><div class="form-state-label">Focus (blue border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid-domain"><div class="form-state-label">Error (red border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Email Body</label><textarea class="form-textarea" placeholder="Write your email content..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Menus</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Tabs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Containers</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div><div class="radius-context">Sections</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:60px; height:60px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid rgba(214,235,253,0.08);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow — void background</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(176,199,217,0.145) 0px 0px 0px 1px;"><div class="elevation-label">Level 1: Ring</div><div class="elevation-desc">Blue-tinted ring shadow</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid rgba(214,235,253,0.19);"><div class="elevation-label">Level 1b: Frost</div><div class="elevation-desc">Icy frost border</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px;"><div class="elevation-label">Level 2: Subtle</div><div class="elevation-desc">Minimal card elevation</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgb(0,0,0) 0px 0px 0px 8px;"><div class="elevation-label">Focus</div><div class="elevation-desc">Heavy black focus ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://resend.com/">resend.com</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
185
design-md/revolut/DESIGN.md
Normal file
185
design-md/revolut/DESIGN.md
Normal file
@@ -0,0 +1,185 @@
|
||||
# Design System: Revolut
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.
|
||||
|
||||
The color system is built on a comprehensive `--rui-*` (Revolut UI) token architecture with semantic naming for every state: danger (`#e23b4a`), warning (`#ec7e00`), teal (`#00a87e`), blue (`#494fdf`), deep-pink (`#e61e49`), and more. But the marketing surface itself is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.
|
||||
|
||||
What distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (`#191c1f`), secondary light (`#f4f4f4`), outlined (`transparent + 2px solid`), and ghost on dark (`rgba(244,244,244,0.1) + 2px solid`). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines
|
||||
- Near-black (`#191c1f`) + white binary with comprehensive `--rui-*` semantic tokens
|
||||
- Universal pill buttons (9999px radius) with generous padding (14px 32px)
|
||||
- Inter for body text with positive letter-spacing (0.16px–0.24px)
|
||||
- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning
|
||||
- Zero shadows detected — depth through color contrast only
|
||||
- Tight display line-heights (1.00) with relaxed body (1.50–1.56)
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Revolut Dark** (`#191c1f`): Primary dark surface, button background, near-black text
|
||||
- **Pure White** (`#ffffff`): `--rui-color-action-label`, primary light surface
|
||||
- **Light Surface** (`#f4f4f4`): Secondary button background, subtle surface
|
||||
|
||||
### Brand / Interactive
|
||||
- **Revolut Blue** (`#494fdf`): `--rui-color-blue`, primary brand blue
|
||||
- **Action Blue** (`#4f55f1`): `--rui-color-action-photo-header-text`, header accent
|
||||
- **Blue Text** (`#376cd5`): `--website-color-blue-text`, link blue
|
||||
|
||||
### Semantic
|
||||
- **Danger Red** (`#e23b4a`): `--rui-color-danger`, error/destructive
|
||||
- **Deep Pink** (`#e61e49`): `--rui-color-deep-pink`, critical accent
|
||||
- **Warning Orange** (`#ec7e00`): `--rui-color-warning`, warning states
|
||||
- **Yellow** (`#b09000`): `--rui-color-yellow`, attention
|
||||
- **Teal** (`#00a87e`): `--rui-color-teal`, success/positive
|
||||
- **Light Green** (`#428619`): `--rui-color-light-green`, secondary success
|
||||
- **Green Text** (`#006400`): `--website-color-green-text`, green text
|
||||
- **Light Blue** (`#007bc2`): `--rui-color-light-blue`, informational
|
||||
- **Brown** (`#936d62`): `--rui-color-brown`, warm neutral accent
|
||||
- **Red Text** (`#8b0000`): `--website-color-red-text`, dark red text
|
||||
|
||||
### Neutral Scale
|
||||
- **Mid Slate** (`#505a63`): Secondary text
|
||||
- **Cool Gray** (`#8d969e`): Muted text, tertiary
|
||||
- **Gray Tone** (`#c9c9cd`): `--rui-color-grey-tone-20`, borders/dividers
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display**: `Aeonik Pro` — geometric grotesque, no detected fallbacks
|
||||
- **Body / UI**: `Inter` — standard system sans
|
||||
- **Fallback**: `Arial` for specific button contexts
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |
|
||||
| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |
|
||||
| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |
|
||||
| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |
|
||||
| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |
|
||||
| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |
|
||||
| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |
|
||||
| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |
|
||||
| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |
|
||||
| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |
|
||||
| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |
|
||||
|
||||
### Principles
|
||||
- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.
|
||||
- **Billboard tracking**: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.
|
||||
- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Dark Pill**
|
||||
- Background: `#191c1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 14px 32px
|
||||
- Radius: 9999px (full pill)
|
||||
- Hover: opacity 0.85
|
||||
- Focus: `0 0 0 0.125rem` ring
|
||||
|
||||
**Secondary Light Pill**
|
||||
- Background: `#f4f4f4`
|
||||
- Text: `#000000`
|
||||
- Padding: 14px 34px
|
||||
- Radius: 9999px
|
||||
- Hover: opacity 0.85
|
||||
|
||||
**Outlined Pill**
|
||||
- Background: transparent
|
||||
- Text: `#191c1f`
|
||||
- Border: `2px solid #191c1f`
|
||||
- Padding: 14px 32px
|
||||
- Radius: 9999px
|
||||
|
||||
**Ghost on Dark**
|
||||
- Background: `rgba(244, 244, 244, 0.1)`
|
||||
- Text: `#f4f4f4`
|
||||
- Border: `2px solid #f4f4f4`
|
||||
- Padding: 14px 32px
|
||||
- Radius: 9999px
|
||||
|
||||
### Cards & Containers
|
||||
- Radius: 12px (small), 20px (cards)
|
||||
- No shadows — flat surfaces with color contrast
|
||||
- Dark and light section alternation
|
||||
|
||||
### Navigation
|
||||
- Aeonik Pro 20px weight 500
|
||||
- Clean header, hamburger toggle at 12px radius
|
||||
- Pill CTAs right-aligned
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px
|
||||
- Large section spacing: 80px–120px
|
||||
|
||||
### Border Radius Scale
|
||||
- Standard (12px): Navigation, small buttons
|
||||
- Card (20px): Feature cards
|
||||
- Pill (9999px): All buttons
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |
|
||||
| Focus | `0 0 0 0.125rem` ring | Accessibility focus |
|
||||
|
||||
**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Aeonik Pro weight 500 for all display headings
|
||||
- Apply 9999px radius to all buttons — pill shape is universal
|
||||
- Use generous button padding (14px 32px)
|
||||
- Keep the palette to near-black + white for marketing surfaces
|
||||
- Apply positive letter-spacing on Inter body text
|
||||
|
||||
### Don't
|
||||
- Don't use shadows — Revolut is flat by design
|
||||
- Don't use bold (700) for Aeonik Pro headings — 500 is the weight
|
||||
- Don't use small buttons — the generous padding is intentional
|
||||
- Don't apply semantic colors to marketing surfaces — they're for the product
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <400px | Compact, single column |
|
||||
| Mobile | 400–720px | Standard mobile |
|
||||
| Tablet | 720–1024px | 2-column layouts |
|
||||
| Desktop | 1024–1280px | Standard desktop |
|
||||
| Large | 1280–1920px | Full layout |
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Dark: Revolut Dark (`#191c1f`)
|
||||
- Light: White (`#ffffff`)
|
||||
- Surface: Light (`#f4f4f4`)
|
||||
- Blue: Revolut Blue (`#494fdf`)
|
||||
- Danger: Red (`#e23b4a`)
|
||||
- Success: Teal (`#00a87e`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f)."
|
||||
- "Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85."
|
||||
|
||||
### Iteration Guide
|
||||
1. Aeonik Pro 500 for headings — never bold
|
||||
2. All buttons are pills (9999px) with generous padding
|
||||
3. Zero shadows — flat is the Revolut identity
|
||||
4. Near-black + white for marketing, semantic colors for product
|
||||
23
design-md/revolut/README.md
Normal file
23
design-md/revolut/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Revolut Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/revolut/DESIGN.md) extracted from the public [revolut](https://revolut.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/revolut/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Revolut 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
234
design-md/revolut/preview-dark.html
Normal file
234
design-md/revolut/preview-dark.html
Normal file
@@ -0,0 +1,234 @@
|
||||
<!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: Revolut (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;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white:#0d0e10; --dark:#f4f4f4; --light:#1e2124; --blue:#494fdf; --action:#4f55f1;
|
||||
--danger:#e23b4a; --pink:#e61e49; --warning:#ec7e00; --teal:#00a87e; --yellow:#b09000;
|
||||
--gray:#6a7078; --slate:#a0a8b0; --border:#2e3236;
|
||||
--font-display:'DM Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--dark); font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.24px; -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:var(--white); }
|
||||
.nav-brand { font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--dark); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--slate); text-decoration:none; transition:opacity 0.15s; }
|
||||
.nav-links a:hover { opacity:0.7; }
|
||||
.nav-cta { display:inline-block; background:var(--dark); color:var(--white); padding:10px 24px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.hero { padding:80px 32px; text-align:center; }
|
||||
.hero h1 { font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px; margin-bottom:16px; }
|
||||
.hero p { font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; letter-spacing:-0.09px; line-height:1.56; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:14px 32px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
|
||||
.btn-dark:hover { opacity:0.85; }
|
||||
.btn-light { display:inline-block; background:var(--light); color:var(--dark); padding:14px 34px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
|
||||
.btn-light:hover { opacity:0.85; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--dark); padding:14px 32px; border-radius:9999px; border:2px solid var(--dark); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; transition:opacity 0.15s; }
|
||||
.btn-outline:hover { opacity:0.85; }
|
||||
.btn-ghost-dark { display:inline-block; background:rgba(244,244,244,0.1); color:var(--light); padding:14px 32px; border-radius:9999px; border:2px solid var(--light); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-dark { padding:64px 32px; background:var(--dark); color:var(--white); }
|
||||
.section-dark .inner { max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-label-light { font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--light); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--light); }
|
||||
.color-swatch-block { height:60px; width:100%; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:500; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--slate); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--gray); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border-radius:20px; padding:24px; border:1px solid var(--light); }
|
||||
.card h3 { font-family:var(--font-display); font-size:24px; font-weight:500; margin-bottom:8px; }
|
||||
.card p { font-size:16px; color:var(--slate); letter-spacing:0.24px; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; letter-spacing:0.16px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; outline:none; letter-spacing:0.24px; }
|
||||
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
|
||||
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
|
||||
.form-input--error { border-color:var(--danger); box-shadow:0 0 0 0.125rem rgba(226,59,74,0.3); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--dark); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--light); border-radius:20px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:500; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.footer { padding:32px; text-align:center; background:var(--dark); color:var(--gray); font-size:13px; }
|
||||
.footer a { color:var(--white); text-decoration:underline; }
|
||||
|
||||
@media (max-width:720px) { .hero h1 { font-size:40px; letter-spacing:-0.8px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#494fdf;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:9999px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Revolut</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with fintech precision.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-dark" href="#">Get Started</a>
|
||||
<a class="btn-outline" href="#">Learn More</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#191c1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Revolut Dark</div><div class="color-swatch-hex">#191c1f</div><div class="color-swatch-role">Dark surface, text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Light surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f4f4f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f4f4f4</div><div class="color-swatch-role">Secondary surface</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Semantic</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#494fdf"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#494fdf</div><div class="color-swatch-role">Brand blue</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e23b4a"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#e23b4a</div><div class="color-swatch-role">Error</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#00a87e"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal</div><div class="color-swatch-hex">#00a87e</div><div class="color-swatch-role">Success</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ec7e00"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ec7e00</div><div class="color-swatch-role">Warning</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e61e49"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Pink</div><div class="color-swatch-hex">#e61e49</div><div class="color-swatch-role">Critical</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b09000"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#b09000</div><div class="color-swatch-role">Attention</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#505a63"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#505a63</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#8d969e"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#8d969e</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c9c9cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c9c9cd</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px;">Display Mega</div><div class="type-meta">Display — 136px / 500 / 1.00 / -2.72px / Aeonik Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:48px; font-weight:500; line-height:1.21; letter-spacing:-0.48px;">Section Heading</div><div class="type-meta">Section — 48px / 500 / 1.21 / -0.48px / Aeonik Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px;">Card Title</div><div class="type-meta">Card — 32px / 500 / 1.19 / -0.32px / Aeonik Pro</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; letter-spacing:-0.09px; color:var(--slate);">Body Large — One app for all things money. From spending to saving, to investing and beyond.</div><div class="type-meta">Body — 18px / 400 / 1.56 / -0.09px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.50; letter-spacing:0.16px;">Body Semibold — Account details</div><div class="type-meta">Semibold — 16px / 600 / 1.50 / +0.16px / Inter</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Get Started</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-light" href="#">Learn More</a><div class="button-label">Secondary Light</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
|
||||
</div>
|
||||
<div style="background:var(--dark); padding:16px 20px; border-radius:20px; margin-top:16px; display:inline-flex; gap:12px;">
|
||||
<a class="btn-ghost-dark" href="#">Ghost on Dark</a>
|
||||
</div>
|
||||
<div class="button-label" style="margin-top:8px;">Ghost variant on dark surface</div>
|
||||
</section>
|
||||
|
||||
<div class="section-dark">
|
||||
<div class="inner" id="cards">
|
||||
<div class="section-label-light">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Spending</h3><p>Track your spending in real-time. Get instant notifications for every transaction.</p></div>
|
||||
<div class="card"><h3>Saving</h3><p>Set saving goals and round up spare change automatically into your vaults.</p></div>
|
||||
<div class="card"><h3>Investing</h3><p>Buy and sell stocks, crypto, and commodities commission-free from your phone.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Phone number</label><input class="form-input" type="tel" placeholder="+44 7700 900000"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@revolut.com"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--error" type="text" value="-500"><div class="form-state-label">Error (danger ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:80px"></div><div class="spacing-value">80</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — Revolut is flat</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3);"><div class="elevation-label">Focus</div><div class="elevation-desc">0.125rem ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://revolut.com/">revolut.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
233
design-md/revolut/preview.html
Normal file
233
design-md/revolut/preview.html
Normal file
@@ -0,0 +1,233 @@
|
||||
<!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: Revolut (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;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white:#ffffff; --dark:#191c1f; --light:#f4f4f4; --blue:#494fdf; --action:#4f55f1;
|
||||
--danger:#e23b4a; --pink:#e61e49; --warning:#ec7e00; --teal:#00a87e; --yellow:#b09000;
|
||||
--gray:#8d969e; --slate:#505a63; --border:#c9c9cd;
|
||||
--font-display:'DM Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--dark); font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.24px; -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:var(--white); }
|
||||
.nav-brand { font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--dark); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--slate); text-decoration:none; transition:opacity 0.15s; }
|
||||
.nav-links a:hover { opacity:0.7; }
|
||||
.nav-cta { display:inline-block; background:var(--dark); color:var(--white); padding:10px 24px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.hero { padding:80px 32px; text-align:center; }
|
||||
.hero h1 { font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px; margin-bottom:16px; }
|
||||
.hero p { font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; letter-spacing:-0.09px; line-height:1.56; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:14px 32px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
|
||||
.btn-dark:hover { opacity:0.85; }
|
||||
.btn-light { display:inline-block; background:var(--light); color:var(--dark); padding:14px 34px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }
|
||||
.btn-light:hover { opacity:0.85; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--dark); padding:14px 32px; border-radius:9999px; border:2px solid var(--dark); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; transition:opacity 0.15s; }
|
||||
.btn-outline:hover { opacity:0.85; }
|
||||
.btn-ghost-dark { display:inline-block; background:rgba(244,244,244,0.1); color:var(--light); padding:14px 32px; border-radius:9999px; border:2px solid var(--light); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }
|
||||
|
||||
.section { padding:64px 32px; max-width:1100px; margin:0 auto; }
|
||||
.section-dark { padding:64px 32px; background:var(--dark); color:var(--white); }
|
||||
.section-dark .inner { max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-label-light { font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid var(--light); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--light); }
|
||||
.color-swatch-block { height:60px; width:100%; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:500; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--slate); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--gray); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border-radius:20px; padding:24px; border:1px solid var(--light); }
|
||||
.card h3 { font-family:var(--font-display); font-size:24px; font-weight:500; margin-bottom:8px; }
|
||||
.card p { font-size:16px; color:var(--slate); letter-spacing:0.24px; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; letter-spacing:0.16px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; outline:none; letter-spacing:0.24px; }
|
||||
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
|
||||
.form-input--focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }
|
||||
.form-input--error { border-color:var(--danger); box-shadow:0 0 0 0.125rem rgba(226,59,74,0.3); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--dark); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid var(--light); border-radius:20px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:500; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.footer { padding:32px; text-align:center; background:var(--dark); color:var(--gray); font-size:13px; }
|
||||
.footer a { color:var(--white); text-decoration:underline; }
|
||||
|
||||
@media (max-width:720px) { .hero h1 { font-size:40px; letter-spacing:-0.8px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Revolut</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with fintech precision.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-dark" href="#">Get Started</a>
|
||||
<a class="btn-outline" href="#">Learn More</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#191c1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Revolut Dark</div><div class="color-swatch-hex">#191c1f</div><div class="color-swatch-role">Dark surface, text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Light surface</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f4f4f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f4f4f4</div><div class="color-swatch-role">Secondary surface</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Semantic</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#494fdf"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#494fdf</div><div class="color-swatch-role">Brand blue</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e23b4a"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#e23b4a</div><div class="color-swatch-role">Error</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#00a87e"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal</div><div class="color-swatch-hex">#00a87e</div><div class="color-swatch-role">Success</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ec7e00"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ec7e00</div><div class="color-swatch-role">Warning</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e61e49"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Pink</div><div class="color-swatch-hex">#e61e49</div><div class="color-swatch-role">Critical</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b09000"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#b09000</div><div class="color-swatch-role">Attention</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#505a63"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#505a63</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#8d969e"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#8d969e</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#c9c9cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c9c9cd</div><div class="color-swatch-role">Borders</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px;">Display Mega</div><div class="type-meta">Display — 136px / 500 / 1.00 / -2.72px / Aeonik Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:48px; font-weight:500; line-height:1.21; letter-spacing:-0.48px;">Section Heading</div><div class="type-meta">Section — 48px / 500 / 1.21 / -0.48px / Aeonik Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px;">Card Title</div><div class="type-meta">Card — 32px / 500 / 1.19 / -0.32px / Aeonik Pro</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; letter-spacing:-0.09px; color:var(--slate);">Body Large — One app for all things money. From spending to saving, to investing and beyond.</div><div class="type-meta">Body — 18px / 400 / 1.56 / -0.09px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.50; letter-spacing:0.16px;">Body Semibold — Account details</div><div class="type-meta">Semibold — 16px / 600 / 1.50 / +0.16px / Inter</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-dark" href="#">Get Started</a><div class="button-label">Primary Dark</div></div>
|
||||
<div class="button-item"><a class="btn-light" href="#">Learn More</a><div class="button-label">Secondary Light</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
|
||||
</div>
|
||||
<div style="background:var(--dark); padding:16px 20px; border-radius:20px; margin-top:16px; display:inline-flex; gap:12px;">
|
||||
<a class="btn-ghost-dark" href="#">Ghost on Dark</a>
|
||||
</div>
|
||||
<div class="button-label" style="margin-top:8px;">Ghost variant on dark surface</div>
|
||||
</section>
|
||||
|
||||
<div class="section-dark">
|
||||
<div class="inner" id="cards">
|
||||
<div class="section-label-light">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Spending</h3><p>Track your spending in real-time. Get instant notifications for every transaction.</p></div>
|
||||
<div class="card"><h3>Saving</h3><p>Set saving goals and round up spare change automatically into your vaults.</p></div>
|
||||
<div class="card"><h3>Investing</h3><p>Buy and sell stocks, crypto, and commodities commission-free from your phone.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Phone number</label><input class="form-input" type="tel" placeholder="+44 7700 900000"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--focus" type="email" value="user@revolut.com"><div class="form-state-label">Focus (blue ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--error" type="text" value="-500"><div class="form-state-label">Error (danger ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:80px"></div><div class="spacing-value">80</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — Revolut is flat</div></div>
|
||||
<div class="elevation-card" style="box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3);"><div class="elevation-label">Focus</div><div class="elevation-desc">0.125rem ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://revolut.com/">revolut.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
194
design-md/spacex/DESIGN.md
Normal file
194
design-md/spacex/DESIGN.md
Normal file
@@ -0,0 +1,194 @@
|
||||
# Design System: SpaceX
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
SpaceX's website is a full-screen cinematic experience that treats aerospace engineering like a film — every section is a scene, every photograph is a frame, and the interface disappears entirely behind the imagery. The design is pure black (`#000000`) with photography of rockets, space, and planets occupying 100% of the viewport. Text overlays sit directly on these photographs with no background panels, cards, or containers — just type on image, bold and unapologetic.
|
||||
|
||||
The typography system uses D-DIN, an industrial geometric typeface with DIN heritage (the German industrial standard). The defining characteristic is that virtually ALL text is uppercase with positive letter-spacing (0.96px–1.17px), creating a military/aerospace labeling system where every word feels stenciled onto a spacecraft hull. D-DIN-Bold at 48px with uppercase and 0.96px tracking for the hero creates headlines that feel like mission briefing titles. Even body text at 16px maintains the uppercase/tracked treatment at smaller scales.
|
||||
|
||||
What makes SpaceX distinctive is its radical minimalism: no shadows, no borders (except one ghost button border at `rgba(240,240,250,0.35)`), no color (only black and a spectral near-white `#f0f0fa`), no cards, no grids. The only visual element is photography + text. The ghost button with `rgba(240,240,250,0.1)` background and 32px radius is the sole interactive element — barely visible, floating over the imagery like a heads-up display. This isn't a design system in the traditional sense — it's a photographic exhibition with a type system and a single button.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Pure black canvas with full-viewport cinematic photography — the interface is invisible
|
||||
- D-DIN / D-DIN-Bold — industrial DIN-heritage typeface
|
||||
- Universal uppercase + positive letter-spacing (0.96px–1.17px) — aerospace stencil aesthetic
|
||||
- Near-white spectral text (`#f0f0fa`) — not pure white, a slight blue-violet tint
|
||||
- Zero shadows, zero cards, zero containers — text on image only
|
||||
- Single ghost button: `rgba(240,240,250,0.1)` background with spectral border
|
||||
- Full-viewport sections — each section is a cinematic "scene"
|
||||
- No decorative elements — every pixel serves the photography
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Space Black** (`#000000`): Page background, the void of space — at 50% opacity for overlay gradient
|
||||
- **Spectral White** (`#f0f0fa`): Text color — not pure white, a slight blue-violet tint that mimics starlight
|
||||
|
||||
### Interactive
|
||||
- **Ghost Surface** (`rgba(240, 240, 250, 0.1)`): Button background — nearly invisible, 10% opacity
|
||||
- **Ghost Border** (`rgba(240, 240, 250, 0.35)`): Button border — spectral, 35% opacity
|
||||
- **Hover White** (`var(--white-100)`): Link hover state — full spectral white
|
||||
|
||||
### Gradient
|
||||
- **Dark Overlay** (`rgba(0, 0, 0, 0.5)`): Gradient overlay on photographs to ensure text legibility
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display**: `D-DIN-Bold` — bold industrial geometric
|
||||
- **Body / UI**: `D-DIN`, fallbacks: `Arial, Verdana`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | D-DIN-Bold | 48px (3.00rem) | 700 | 1.00 (tight) | 0.96px | `text-transform: uppercase` |
|
||||
| Body | D-DIN | 16px (1.00rem) | 400 | 1.50–1.70 | normal | Standard reading text |
|
||||
| Nav Link Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | `text-transform: uppercase` |
|
||||
| Nav Link | D-DIN | 12px (0.75rem) | 400 | 2.00 (relaxed) | normal | `text-transform: uppercase` |
|
||||
| Caption Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | `text-transform: uppercase` |
|
||||
| Caption | D-DIN | 12px (0.75rem) | 400 | 1.00 (tight) | normal | `text-transform: uppercase` |
|
||||
| Micro | D-DIN | 10px (0.63rem) | 400 | 0.94 (tight) | 1px | `text-transform: uppercase` |
|
||||
|
||||
### Principles
|
||||
- **Universal uppercase**: Nearly every text element uses `text-transform: uppercase`. This creates a systematic military/aerospace voice where all communication feels like official documentation.
|
||||
- **Positive letter-spacing as identity**: 0.96px on display, 1.17px on nav — the wide tracking creates the stenciled, industrial feel that connects to DIN's heritage as a German engineering standard.
|
||||
- **Two weights, strict hierarchy**: D-DIN-Bold (700) for headlines and nav emphasis, D-DIN (400) for body. No medium or semibold weights exist in the system.
|
||||
- **Tight line-heights**: 0.94–1.00 across most text — compressed, efficient, mission-critical communication.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Ghost Button**
|
||||
- Background: `rgba(240, 240, 250, 0.1)` (barely visible)
|
||||
- Text: Spectral White (`#f0f0fa`)
|
||||
- Padding: 18px
|
||||
- Radius: 32px
|
||||
- Border: `1px solid rgba(240, 240, 250, 0.35)`
|
||||
- Hover: background brightens, text to `var(--white-100)`
|
||||
- Use: The only button variant — "LEARN MORE" CTAs on photography
|
||||
|
||||
### Cards & Containers
|
||||
- **None.** SpaceX does not use cards, panels, or containers. All content is text directly on full-viewport photographs. The absence of containers IS the design.
|
||||
|
||||
### Inputs & Forms
|
||||
- Not present on the homepage. The site is purely presentational.
|
||||
|
||||
### Navigation
|
||||
- Transparent overlay nav on photography
|
||||
- D-DIN 13px weight 700, uppercase, 1.17px tracking
|
||||
- Spectral white text on dark imagery
|
||||
- Logo: SpaceX wordmark at 147x19px
|
||||
- Mobile: hamburger collapse
|
||||
|
||||
### Image Treatment
|
||||
- Full-viewport (100vh) photography sections
|
||||
- Professional aerospace photography: rockets, Mars, space
|
||||
- Dark gradient overlays (`rgba(0,0,0,0.5)`) for text legibility
|
||||
- Each section = one full-screen photograph with text overlay
|
||||
- No border radius, no frames — edge-to-edge imagery
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 3px, 5px, 12px, 15px, 18px, 20px, 24px, 30px
|
||||
- Minimal scale — spacing is not the organizing principle; photography is
|
||||
|
||||
### Grid & Container
|
||||
- No traditional grid — each section is a full-viewport cinematic frame
|
||||
- Text is positioned absolutely or with generous padding over imagery
|
||||
- Left-aligned text blocks on photography backgrounds
|
||||
- No max-width container — content bleeds to viewport edges
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Photography IS the whitespace**: Empty space in the design is never empty — it's filled with the dark expanse of space, the curve of a planet, or the flame of a rocket engine. Traditional whitespace concepts don't apply.
|
||||
- **Vertical pacing through viewport**: Each section is exactly one viewport tall, creating a rhythmic scroll where each "page" reveals a new scene.
|
||||
|
||||
### Border Radius Scale
|
||||
- Sharp (4px): Small dividers, utility elements
|
||||
- Button (32px): Ghost buttons — the only rounded element
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Photography (Level 0) | Full-viewport imagery | Background layer — always present |
|
||||
| Overlay (Level 1) | `rgba(0, 0, 0, 0.5)` gradient | Text legibility layer over photography |
|
||||
| Text (Level 2) | Spectral white text, no shadow | Content layer — text floats directly on image |
|
||||
| Ghost (Level 3) | `rgba(240, 240, 250, 0.1)` surface | Barely-visible interactive layer |
|
||||
|
||||
**Shadow Philosophy**: SpaceX uses ZERO shadows. In a design built entirely on photography, shadows are meaningless — every surface is already a photograph with natural lighting. Depth comes from the photographic content itself: the receding curvature of Earth, the diminishing trail of a rocket, the atmospheric haze around Mars.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use full-viewport photography as the primary design element — every section is a scene
|
||||
- Apply uppercase + positive letter-spacing to ALL text — the aerospace stencil voice
|
||||
- Use D-DIN exclusively — no other fonts exist in the system
|
||||
- Keep the color palette to black + spectral white (`#f0f0fa`) only
|
||||
- Use ghost buttons (`rgba(240,240,250,0.1)`) as the sole interactive element
|
||||
- Apply dark gradient overlays for text legibility on photographs
|
||||
- Let photography carry the emotional weight — the type system is functional, not expressive
|
||||
|
||||
### Don't
|
||||
- Don't add cards, panels, or containers — text sits directly on photography
|
||||
- Don't use shadows — they have no meaning in a photographic context
|
||||
- Don't introduce colors — the palette is strictly achromatic with spectral tint
|
||||
- Don't use sentence case — everything is uppercase
|
||||
- Don't use negative letter-spacing — all tracking is positive (0.96px–1.17px)
|
||||
- Don't reduce photography to thumbnails — every image is full-viewport
|
||||
- Don't add decorative elements (icons, badges, dividers) — the design is photography + type + one button
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <600px | Stacked, reduced padding, smaller type |
|
||||
| Tablet Small | 600–960px | Adjusted layout |
|
||||
| Tablet | 960–1280px | Standard scaling |
|
||||
| Desktop | 1280–1350px | Full layout |
|
||||
| Large Desktop | 1350–1500px | Expanded |
|
||||
| Ultra-wide | >1500px | Maximum viewport |
|
||||
|
||||
### Touch Targets
|
||||
- Ghost buttons: 18px padding provides adequate touch area
|
||||
- Navigation links: uppercase with generous letter-spacing aids readability
|
||||
|
||||
### Collapsing Strategy
|
||||
- Photography: maintains full-viewport at all sizes, content reposition
|
||||
- Hero text: 48px → scales down proportionally
|
||||
- Navigation: horizontal → hamburger
|
||||
- Text blocks: reposition but maintain overlay-on-photography pattern
|
||||
- Full-viewport sections maintained on mobile
|
||||
|
||||
### Image Behavior
|
||||
- Edge-to-edge photography at all viewport sizes
|
||||
- Background-size: cover with center focus
|
||||
- Dark overlay gradients adapt to content position
|
||||
- No art direction changes — same photographs, responsive positioning
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Space Black (`#000000`)
|
||||
- Text: Spectral White (`#f0f0fa`)
|
||||
- Button background: Ghost (`rgba(240, 240, 250, 0.1)`)
|
||||
- Button border: Ghost Border (`rgba(240, 240, 250, 0.35)`)
|
||||
- Overlay: `rgba(0, 0, 0, 0.5)`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a full-viewport hero: background-image covering 100vh, dark gradient overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase, letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button: rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px radius, 18px padding."
|
||||
- "Design a navigation: transparent over photography. D-DIN 13px weight 700, uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark left-aligned."
|
||||
- "Build a content section: full-viewport height, background photography with dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading, 16px D-DIN body text, and ghost button below."
|
||||
- "Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral white, line-height 0.94."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with photography — the image IS the design
|
||||
2. All text is uppercase with positive letter-spacing — no exceptions
|
||||
3. Only two colors: black and spectral white (#f0f0fa)
|
||||
4. Ghost buttons are the only interactive element — transparent, spectral-bordered
|
||||
5. Zero shadows, zero cards, zero decorative elements
|
||||
6. Every section is full-viewport (100vh) — cinematic pacing
|
||||
23
design-md/spacex/README.md
Normal file
23
design-md/spacex/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Spacex Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/spacex/DESIGN.md) extracted from the public [spacex](https://spacex.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/spacex/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Spacex 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
223
design-md/spacex/preview-dark.html
Normal file
223
design-md/spacex/preview-dark.html
Normal file
@@ -0,0 +1,223 @@
|
||||
<!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: SpaceX (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=Share+Tech&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--black: #000000; --spectral: #f0f0fa; --ghost-bg: rgba(240,240,250,0.1);
|
||||
--ghost-border: rgba(240,240,250,0.35); --overlay: rgba(0,0,0,0.5);
|
||||
--font: 'Share Tech', Arial, Verdana, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--black); color:var(--spectral); font-family:var(--font); font-size:16px; line-height:1.50; text-transform:uppercase; letter-spacing:0.5px; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); }
|
||||
.nav-brand { font-size:13px; font-weight:700; color:var(--spectral); text-decoration:none; letter-spacing:1.17px; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:12px; font-weight:400; color:rgba(240,240,250,0.7); text-decoration:none; letter-spacing:1px; transition:color 0.2s; }
|
||||
.nav-links a:hover { color:var(--spectral); }
|
||||
.nav-cta { display:inline-block; background:var(--ghost-bg); color:var(--spectral); padding:8px 18px; border-radius:32px; border:1px solid var(--ghost-border); font-size:12px; font-weight:700; letter-spacing:1.17px; text-decoration:none; }
|
||||
|
||||
.hero { padding:120px 32px 80px; text-align:left; max-width:900px; margin:0 auto; background:linear-gradient(180deg, rgba(0,0,20,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.9) 100%); min-height:60vh; display:flex; flex-direction:column; justify-content:center; }
|
||||
.hero h1 { font-size:48px; font-weight:700; line-height:1.00; letter-spacing:0.96px; margin-bottom:16px; }
|
||||
.hero p { font-size:16px; font-weight:400; line-height:1.70; letter-spacing:0.5px; color:rgba(240,240,250,0.7); max-width:500px; margin-bottom:32px; text-transform:none; }
|
||||
.hero-buttons { display:flex; gap:12px; }
|
||||
.btn-ghost { display:inline-block; background:var(--ghost-bg); color:var(--spectral); padding:14px 24px; border-radius:32px; border:1px solid var(--ghost-border); font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:1.17px; text-decoration:none; cursor:pointer; transition:background 0.2s; }
|
||||
.btn-ghost:hover { background:rgba(240,240,250,0.2); }
|
||||
|
||||
.section { padding:64px 32px; max-width:900px; margin:0 auto; }
|
||||
.section-label { font-size:10px; font-weight:400; letter-spacing:1px; color:rgba(240,240,250,0.5); margin-bottom:8px; }
|
||||
.section-title { font-size:32px; font-weight:700; line-height:1.00; letter-spacing:0.96px; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid rgba(240,240,250,0.1); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { border-radius:4px; overflow:hidden; border:1px solid rgba(240,240,250,0.15); }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px; }
|
||||
.color-swatch-name { font-size:11px; font-weight:700; letter-spacing:0.5px; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:rgba(240,240,250,0.5); }
|
||||
.color-swatch-role { font-size:9px; color:rgba(240,240,250,0.4); margin-top:3px; text-transform:none; }
|
||||
.color-group-label { font-size:12px; font-weight:700; letter-spacing:1px; color:rgba(240,240,250,0.6); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(240,240,250,0.08); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:rgba(240,240,250,0.4); margin-top:6px; letter-spacing:0.5px; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:rgba(240,240,250,0.4); margin-top:8px; letter-spacing:0.5px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; }
|
||||
.card { background:rgba(240,240,250,0.03); border:1px solid rgba(240,240,250,0.1); border-radius:4px; padding:24px; }
|
||||
.card h3 { font-size:16px; font-weight:700; letter-spacing:0.96px; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:rgba(240,240,250,0.6); line-height:1.50; text-transform:none; letter-spacing:normal; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:12px; font-weight:700; letter-spacing:1px; margin-bottom:6px; }
|
||||
.form-input { width:100%; background:rgba(240,240,250,0.05); color:var(--spectral); border:1px solid var(--ghost-border); padding:12px 16px; border-radius:4px; font-family:var(--font); font-size:14px; outline:none; text-transform:none; letter-spacing:normal; }
|
||||
.form-input:focus { border-color:var(--spectral); }
|
||||
.form-input--focus { border-color:var(--spectral); }
|
||||
.form-input--error { border-color:#ff4444; }
|
||||
.form-textarea { width:100%; min-height:80px; background:rgba(240,240,250,0.05); color:var(--spectral); border:1px solid var(--ghost-border); padding:12px 16px; border-radius:4px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; text-transform:none; letter-spacing:normal; }
|
||||
.form-state-label { font-size:9px; color:rgba(240,240,250,0.4); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--spectral); opacity:0.2; border-radius:2px; margin-bottom:6px; height:28px; }
|
||||
.spacing-value { font-size:10px; color:rgba(240,240,250,0.4); }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; border:1px solid rgba(240,240,250,0.2); margin-bottom:6px; }
|
||||
.radius-label { font-size:10px; color:rgba(240,240,250,0.4); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { border:1px solid rgba(240,240,250,0.08); border-radius:4px; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:700; letter-spacing:0.5px; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:10px; color:rgba(240,240,250,0.4); text-transform:none; letter-spacing:normal; }
|
||||
|
||||
.footer { padding:32px; text-align:center; border-top:1px solid rgba(240,240,250,0.1); font-size:11px; color:rgba(240,240,250,0.4); }
|
||||
.footer a { color:var(--spectral); text-decoration:underline; }
|
||||
|
||||
@media (max-width:600px) {
|
||||
.hero h1 { font-size:32px; }
|
||||
.nav-links { display:none; }
|
||||
.section { padding:48px 20px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Learn More</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#f0f0fa;color:#000000;font-size:10px;font-weight:700;padding:4px 10px;border-radius:32px;text-transform:uppercase;letter-spacing:1px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by SpaceX</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, and spacing value — visualized against the void.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-ghost" href="#">Explore Tokens</a>
|
||||
<a class="btn-ghost" href="#">View Source</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Space Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f0f0fa"></div><div class="color-swatch-info"><div class="color-swatch-name">Spectral White</div><div class="color-swatch-hex">#f0f0fa</div><div class="color-swatch-role">Text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(240,240,250,0.1); border:1px solid rgba(240,240,250,0.3)"></div><div class="color-swatch-info"><div class="color-swatch-name">Ghost Surface</div><div class="color-swatch-hex">rgba(f0f0fa, 0.1)</div><div class="color-swatch-role">Button background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(0,0,0,0.5)"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Overlay</div><div class="color-swatch-hex">rgba(0,0,0,0.5)</div><div class="color-swatch-role">Photo overlay</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.00; letter-spacing:0.96px;">MAKING LIFE MULTIPLANETARY</div><div class="type-meta">Display — 48px / bold / 1.00 / +0.96px / D-DIN-Bold / uppercase</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.70; text-transform:none; letter-spacing:normal;">SpaceX designs, manufactures and launches advanced rockets and spacecraft. The company was founded to revolutionize space technology.</div><div class="type-meta">Body — 16px / 400 / 1.70 / D-DIN</div></div>
|
||||
<div class="type-sample"><div style="font-size:13px; font-weight:700; line-height:0.94; letter-spacing:1.17px;">FALCON 9 · STARSHIP · DRAGON</div><div class="type-meta">Nav Bold — 13px / 700 / 0.94 / +1.17px / uppercase</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:400; line-height:1.00; letter-spacing:1px;">MISSION OVERVIEW</div><div class="type-meta">Caption — 12px / 400 / 1.00 / uppercase / +1px</div></div>
|
||||
<div class="type-sample"><div style="font-size:10px; font-weight:400; line-height:0.94; letter-spacing:1px;">LAUNCH DATE: 2026-04-15</div><div class="type-meta">Micro — 10px / 400 / 0.94 / uppercase / +1px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Learn More</a><div class="button-label">Ghost Button</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" style="background:rgba(240,240,250,0.2);" href="#">Hover State</a><div class="button-label">Ghost Hover</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:rgba(240,240,250,0.4); margin-top:16px; text-transform:none; letter-spacing:normal;">SpaceX uses only one button variant — the ghost button. The absence of variety IS the design.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Content Sections</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Falcon 9</h3><p>The world's first orbital-class reusable rocket. Designed for reliable and safe transport of people and payloads.</p></div>
|
||||
<div class="card"><h3>Starship</h3><p>The most powerful launch vehicle ever developed. Designed to carry crew and cargo to Mars and beyond.</p></div>
|
||||
</div>
|
||||
<p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:16px; text-transform:none; letter-spacing:normal;">Note: SpaceX does not use traditional cards — all content sits directly on full-viewport photography. These are representational.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Mission Name</label><input class="form-input" type="text" placeholder="STARSHIP MISSION"><div class="form-state-label">Default (ghost border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Launch Site</label><input class="form-input form-input--focus" type="text" value="STARBASE, TEXAS"><div class="form-state-label">Focus (spectral white border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Payload</label><input class="form-input form-input--error" type="text" value="EXCEEDS CAPACITY"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Mission briefing notes..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:3px"></div><div class="spacing-value">3</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:5px"></div><div class="spacing-value">5</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:18px"></div><div class="spacing-value">18</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:30px"></div><div class="spacing-value">30</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div>
|
||||
</div>
|
||||
<p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;">Minimal radius system — 4px for utility, 32px for buttons.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Photography</div><div class="elevation-desc">Full-viewport imagery</div></div>
|
||||
<div class="elevation-card" style="background:rgba(0,0,0,0.5);"><div class="elevation-label">Overlay</div><div class="elevation-desc">Dark gradient for text</div></div>
|
||||
<div class="elevation-card" style="background:var(--ghost-bg); border-color:var(--ghost-border);"><div class="elevation-label">Ghost</div><div class="elevation-desc">Interactive surface</div></div>
|
||||
</div>
|
||||
<p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;">Zero shadows. Depth from photography only.</p>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://spacex.com/">spacex.com</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
222
design-md/spacex/preview.html
Normal file
222
design-md/spacex/preview.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!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: SpaceX (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=Share+Tech&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--black: #000000; --spectral: #f0f0fa; --ghost-bg: rgba(240,240,250,0.1);
|
||||
--ghost-border: rgba(240,240,250,0.35); --overlay: rgba(0,0,0,0.5);
|
||||
--font: 'Share Tech', Arial, Verdana, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--black); color:var(--spectral); font-family:var(--font); font-size:16px; line-height:1.50; text-transform:uppercase; letter-spacing:0.5px; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); }
|
||||
.nav-brand { font-size:13px; font-weight:700; color:var(--spectral); text-decoration:none; letter-spacing:1.17px; }
|
||||
.nav-links { display:flex; gap:24px; list-style:none; }
|
||||
.nav-links a { font-size:12px; font-weight:400; color:rgba(240,240,250,0.7); text-decoration:none; letter-spacing:1px; transition:color 0.2s; }
|
||||
.nav-links a:hover { color:var(--spectral); }
|
||||
.nav-cta { display:inline-block; background:var(--ghost-bg); color:var(--spectral); padding:8px 18px; border-radius:32px; border:1px solid var(--ghost-border); font-size:12px; font-weight:700; letter-spacing:1.17px; text-decoration:none; }
|
||||
|
||||
.hero { padding:120px 32px 80px; text-align:left; max-width:900px; margin:0 auto; background:linear-gradient(180deg, rgba(0,0,20,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.9) 100%); min-height:60vh; display:flex; flex-direction:column; justify-content:center; }
|
||||
.hero h1 { font-size:48px; font-weight:700; line-height:1.00; letter-spacing:0.96px; margin-bottom:16px; }
|
||||
.hero p { font-size:16px; font-weight:400; line-height:1.70; letter-spacing:0.5px; color:rgba(240,240,250,0.7); max-width:500px; margin-bottom:32px; text-transform:none; }
|
||||
.hero-buttons { display:flex; gap:12px; }
|
||||
.btn-ghost { display:inline-block; background:var(--ghost-bg); color:var(--spectral); padding:14px 24px; border-radius:32px; border:1px solid var(--ghost-border); font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:1.17px; text-decoration:none; cursor:pointer; transition:background 0.2s; }
|
||||
.btn-ghost:hover { background:rgba(240,240,250,0.2); }
|
||||
|
||||
.section { padding:64px 32px; max-width:900px; margin:0 auto; }
|
||||
.section-label { font-size:10px; font-weight:400; letter-spacing:1px; color:rgba(240,240,250,0.5); margin-bottom:8px; }
|
||||
.section-title { font-size:32px; font-weight:700; line-height:1.00; letter-spacing:0.96px; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid rgba(240,240,250,0.1); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
|
||||
.color-swatch { border-radius:4px; overflow:hidden; border:1px solid rgba(240,240,250,0.15); }
|
||||
.color-swatch-block { height:72px; width:100%; }
|
||||
.color-swatch-info { padding:10px; }
|
||||
.color-swatch-name { font-size:11px; font-weight:700; letter-spacing:0.5px; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:rgba(240,240,250,0.5); }
|
||||
.color-swatch-role { font-size:9px; color:rgba(240,240,250,0.4); margin-top:3px; text-transform:none; }
|
||||
.color-group-label { font-size:12px; font-weight:700; letter-spacing:1px; color:rgba(240,240,250,0.6); margin:24px 0 10px; }
|
||||
|
||||
.type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(240,240,250,0.08); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:rgba(240,240,250,0.4); margin-top:6px; letter-spacing:0.5px; }
|
||||
|
||||
.button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:rgba(240,240,250,0.4); margin-top:8px; letter-spacing:0.5px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; }
|
||||
.card { background:rgba(240,240,250,0.03); border:1px solid rgba(240,240,250,0.1); border-radius:4px; padding:24px; }
|
||||
.card h3 { font-size:16px; font-weight:700; letter-spacing:0.96px; margin-bottom:8px; }
|
||||
.card p { font-size:14px; color:rgba(240,240,250,0.6); line-height:1.50; text-transform:none; letter-spacing:normal; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:12px; font-weight:700; letter-spacing:1px; margin-bottom:6px; }
|
||||
.form-input { width:100%; background:rgba(240,240,250,0.05); color:var(--spectral); border:1px solid var(--ghost-border); padding:12px 16px; border-radius:4px; font-family:var(--font); font-size:14px; outline:none; text-transform:none; letter-spacing:normal; }
|
||||
.form-input:focus { border-color:var(--spectral); }
|
||||
.form-input--focus { border-color:var(--spectral); }
|
||||
.form-input--error { border-color:#ff4444; }
|
||||
.form-textarea { width:100%; min-height:80px; background:rgba(240,240,250,0.05); color:var(--spectral); border:1px solid var(--ghost-border); padding:12px 16px; border-radius:4px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; text-transform:none; letter-spacing:normal; }
|
||||
.form-state-label { font-size:9px; color:rgba(240,240,250,0.4); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--spectral); opacity:0.2; border-radius:2px; margin-bottom:6px; height:28px; }
|
||||
.spacing-value { font-size:10px; color:rgba(240,240,250,0.4); }
|
||||
|
||||
.radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:60px; height:60px; border:1px solid rgba(240,240,250,0.2); margin-bottom:6px; }
|
||||
.radius-label { font-size:10px; color:rgba(240,240,250,0.4); }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
|
||||
.elevation-card { border:1px solid rgba(240,240,250,0.08); border-radius:4px; padding:20px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:700; letter-spacing:0.5px; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:10px; color:rgba(240,240,250,0.4); text-transform:none; letter-spacing:normal; }
|
||||
|
||||
.footer { padding:32px; text-align:center; border-top:1px solid rgba(240,240,250,0.1); font-size:11px; color:rgba(240,240,250,0.4); }
|
||||
.footer a { color:var(--spectral); text-decoration:underline; }
|
||||
|
||||
@media (max-width:600px) {
|
||||
.hero h1 { font-size:32px; }
|
||||
.nav-links { display:none; }
|
||||
.section { padding:48px 20px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Learn More</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by SpaceX</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, and spacing value — visualized against the void.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-ghost" href="#">Explore Tokens</a>
|
||||
<a class="btn-ghost" href="#">View Source</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#000000"></div><div class="color-swatch-info"><div class="color-swatch-name">Space Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f0f0fa"></div><div class="color-swatch-info"><div class="color-swatch-name">Spectral White</div><div class="color-swatch-hex">#f0f0fa</div><div class="color-swatch-role">Text, headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(240,240,250,0.1); border:1px solid rgba(240,240,250,0.3)"></div><div class="color-swatch-info"><div class="color-swatch-name">Ghost Surface</div><div class="color-swatch-hex">rgba(f0f0fa, 0.1)</div><div class="color-swatch-role">Button background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(0,0,0,0.5)"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Overlay</div><div class="color-swatch-hex">rgba(0,0,0,0.5)</div><div class="color-swatch-role">Photo overlay</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.00; letter-spacing:0.96px;">MAKING LIFE MULTIPLANETARY</div><div class="type-meta">Display — 48px / bold / 1.00 / +0.96px / D-DIN-Bold / uppercase</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.70; text-transform:none; letter-spacing:normal;">SpaceX designs, manufactures and launches advanced rockets and spacecraft. The company was founded to revolutionize space technology.</div><div class="type-meta">Body — 16px / 400 / 1.70 / D-DIN</div></div>
|
||||
<div class="type-sample"><div style="font-size:13px; font-weight:700; line-height:0.94; letter-spacing:1.17px;">FALCON 9 · STARSHIP · DRAGON</div><div class="type-meta">Nav Bold — 13px / 700 / 0.94 / +1.17px / uppercase</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:400; line-height:1.00; letter-spacing:1px;">MISSION OVERVIEW</div><div class="type-meta">Caption — 12px / 400 / 1.00 / uppercase / +1px</div></div>
|
||||
<div class="type-sample"><div style="font-size:10px; font-weight:400; line-height:0.94; letter-spacing:1px;">LAUNCH DATE: 2026-04-15</div><div class="type-meta">Micro — 10px / 400 / 0.94 / uppercase / +1px</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Learn More</a><div class="button-label">Ghost Button</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" style="background:rgba(240,240,250,0.2);" href="#">Hover State</a><div class="button-label">Ghost Hover</div></div>
|
||||
</div>
|
||||
<p style="font-size:12px; color:rgba(240,240,250,0.4); margin-top:16px; text-transform:none; letter-spacing:normal;">SpaceX uses only one button variant — the ghost button. The absence of variety IS the design.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Content Sections</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Falcon 9</h3><p>The world's first orbital-class reusable rocket. Designed for reliable and safe transport of people and payloads.</p></div>
|
||||
<div class="card"><h3>Starship</h3><p>The most powerful launch vehicle ever developed. Designed to carry crew and cargo to Mars and beyond.</p></div>
|
||||
</div>
|
||||
<p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:16px; text-transform:none; letter-spacing:normal;">Note: SpaceX does not use traditional cards — all content sits directly on full-viewport photography. These are representational.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Mission Name</label><input class="form-input" type="text" placeholder="STARSHIP MISSION"><div class="form-state-label">Default (ghost border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Launch Site</label><input class="form-input form-input--focus" type="text" value="STARBASE, TEXAS"><div class="form-state-label">Focus (spectral white border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Payload</label><input class="form-input form-input--error" type="text" value="EXCEEDS CAPACITY"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-textarea" placeholder="Mission briefing notes..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:3px"></div><div class="spacing-value">3</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:5px"></div><div class="spacing-value">5</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:18px"></div><div class="spacing-value">18</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:30px"></div><div class="spacing-value">30</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div>
|
||||
</div>
|
||||
<p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;">Minimal radius system — 4px for utility, 32px for buttons.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Photography</div><div class="elevation-desc">Full-viewport imagery</div></div>
|
||||
<div class="elevation-card" style="background:rgba(0,0,0,0.5);"><div class="elevation-label">Overlay</div><div class="elevation-desc">Dark gradient for text</div></div>
|
||||
<div class="elevation-card" style="background:var(--ghost-bg); border-color:var(--ghost-border);"><div class="elevation-label">Ghost</div><div class="elevation-desc">Interactive surface</div></div>
|
||||
</div>
|
||||
<p style="font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;">Zero shadows. Depth from photography only.</p>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://spacex.com/">spacex.com</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
246
design-md/spotify/DESIGN.md
Normal file
246
design-md/spotify/DESIGN.md
Normal file
@@ -0,0 +1,246 @@
|
||||
# Design System: Spotify
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color. The design philosophy is "content-first darkness" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (`#1ed760`) and the album artwork itself.
|
||||
|
||||
The typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px–2px) for a systematic, label-like quality.
|
||||
|
||||
What distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Near-black immersive dark theme (`#121212`–`#1f1f1f`) — UI disappears behind content
|
||||
- Spotify Green (`#1ed760`) as singular brand accent — never decorative, always functional
|
||||
- SpotifyMixUI/CircularSp font family with global script support
|
||||
- Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized
|
||||
- Uppercase button labels with wide letter-spacing (1.4px–2px)
|
||||
- Heavy shadows on elevated elements (`rgba(0,0,0,0.5) 0px 8px 24px`)
|
||||
- Semantic colors: negative red (`#f3727f`), warning orange (`#ffa42b`), announcement blue (`#539df5`)
|
||||
- Album art as the primary color source — the UI is achromatic by design
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary Brand
|
||||
- **Spotify Green** (`#1ed760`): Primary brand accent — play buttons, active states, CTAs
|
||||
- **Near Black** (`#121212`): Deepest background surface
|
||||
- **Dark Surface** (`#181818`): Cards, containers, elevated surfaces
|
||||
- **Mid Dark** (`#1f1f1f`): Button backgrounds, interactive surfaces
|
||||
|
||||
### Text
|
||||
- **White** (`#ffffff`): `--text-base`, primary text
|
||||
- **Silver** (`#b3b3b3`): Secondary text, muted labels, inactive nav
|
||||
- **Near White** (`#cbcbcb`): Slightly brighter secondary text
|
||||
- **Light** (`#fdfdfd`): Near-pure white for maximum emphasis
|
||||
|
||||
### Semantic
|
||||
- **Negative Red** (`#f3727f`): `--text-negative`, error states
|
||||
- **Warning Orange** (`#ffa42b`): `--text-warning`, warning states
|
||||
- **Announcement Blue** (`#539df5`): `--text-announcement`, info states
|
||||
|
||||
### Surface & Border
|
||||
- **Dark Card** (`#252525`): Elevated card surface
|
||||
- **Mid Card** (`#272727`): Alternate card surface
|
||||
- **Border Gray** (`#4d4d4d`): Button borders on dark
|
||||
- **Light Border** (`#7c7c7c`): Outlined button borders, muted links
|
||||
- **Separator** (`#b3b3b3`): Divider lines
|
||||
- **Light Surface** (`#eeeeee`): Light-mode buttons (rare)
|
||||
- **Spotify Green Border** (`#1db954`): Green accent border variant
|
||||
|
||||
### Shadows
|
||||
- **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialogs, menus, elevated panels
|
||||
- **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`): Cards, dropdowns
|
||||
- **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Input border-shadow combo
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Title**: `SpotifyMixUITitle`, fallbacks: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
|
||||
- **UI / Body**: `SpotifyMixUI`, same fallback stack
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bold title weight |
|
||||
| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Semibold section heads |
|
||||
| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Emphasized text |
|
||||
| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard body |
|
||||
| Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 1.4px–2px | `text-transform: uppercase` |
|
||||
| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard button |
|
||||
| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |
|
||||
| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactive nav |
|
||||
| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Bold metadata |
|
||||
| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |
|
||||
| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, counts |
|
||||
| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Fine print |
|
||||
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
|
||||
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Smallest text |
|
||||
|
||||
### Principles
|
||||
- **Bold/regular binary**: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.
|
||||
- **Uppercase buttons as system**: Button labels use uppercase + wide letter-spacing (1.4px–2px), creating a systematic "label" voice distinct from content text.
|
||||
- **Compact sizing**: The range is 10px–24px — narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles.
|
||||
- **Global script support**: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Dark Pill**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff` or `#b3b3b3`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 9999px (full pill)
|
||||
- Use: Navigation pills, secondary actions
|
||||
|
||||
**Dark Large Pill**
|
||||
- Background: `#181818`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 0px 43px
|
||||
- Radius: 500px
|
||||
- Use: Primary app navigation buttons
|
||||
|
||||
**Light Pill**
|
||||
- Background: `#eeeeee`
|
||||
- Text: `#181818`
|
||||
- Radius: 500px
|
||||
- Use: Light-mode CTAs (cookie consent, marketing)
|
||||
|
||||
**Outlined Pill**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Border: `1px solid #7c7c7c`
|
||||
- Padding: 4px 16px 4px 36px (asymmetric for icon)
|
||||
- Radius: 9999px
|
||||
- Use: Follow buttons, secondary actions
|
||||
|
||||
**Circular Play**
|
||||
- Background: `#1f1f1f`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px
|
||||
- Radius: 50% (circle)
|
||||
- Use: Play/pause controls
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#181818` or `#1f1f1f`
|
||||
- Radius: 6px–8px
|
||||
- No visible borders on most cards
|
||||
- Hover: slight background lightening
|
||||
- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` on elevated
|
||||
|
||||
### Inputs
|
||||
- Search input: `#1f1f1f` background, `#ffffff` text
|
||||
- Radius: 500px (pill)
|
||||
- Padding: 12px 96px 12px 48px (icon-aware)
|
||||
- Focus: border becomes `#000000`, outline `1px solid`
|
||||
|
||||
### Navigation
|
||||
- Dark sidebar with SpotifyMixUI 14px weight 700 for active, 400 for inactive
|
||||
- `#b3b3b3` muted color for inactive items, `#ffffff` for active
|
||||
- Circular icon buttons (50% radius)
|
||||
- Spotify logo top-left in green
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
|
||||
|
||||
### Grid & Container
|
||||
- Sidebar (fixed) + main content area
|
||||
- Grid-based album/playlist cards
|
||||
- Full-width now-playing bar at bottom
|
||||
- Responsive content area fills remaining space
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Dark compression**: Spotify packs content densely — playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps.
|
||||
- **Content density over breathing room**: This is an app, not a marketing site. Every pixel serves the listening experience.
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (2px): Badges, explicit tags
|
||||
- Subtle (4px): Inputs, small elements
|
||||
- Standard (6px): Album art containers, cards
|
||||
- Comfortable (8px): Sections, dialogs
|
||||
- Medium (10px–20px): Panels, overlay elements
|
||||
- Large (100px): Large pill buttons
|
||||
- Pill (500px): Primary buttons, search input
|
||||
- Full Pill (9999px): Navigation pills, search
|
||||
- Circle (50%): Play buttons, avatars, icons
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Base (Level 0) | `#121212` background | Deepest layer, page background |
|
||||
| Surface (Level 1) | `#181818` or `#1f1f1f` | Cards, sidebar, containers |
|
||||
| Elevated (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Dropdown menus, hover cards |
|
||||
| Dialog (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modals, overlays, menus |
|
||||
| Inset (Border) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Input borders |
|
||||
|
||||
**Shadow Philosophy**: Spotify uses notably heavy shadows for a dark-themed app. The 0.5 opacity shadow at 24px blur creates a dramatic "floating in darkness" effect for dialogs and menus, while the 0.3 opacity at 8px blur provides a more subtle card lift. The unique inset border-shadow combination on inputs creates a recessed, tactile quality.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use near-black backgrounds (`#121212`–`#1f1f1f`) — depth through shade variation
|
||||
- Apply Spotify Green (`#1ed760`) only for play controls, active states, and primary CTAs
|
||||
- Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls
|
||||
- Apply uppercase + wide letter-spacing (1.4px–2px) on button labels
|
||||
- Keep typography compact (10px–24px range) — this is an app, not a magazine
|
||||
- Use heavy shadows (`0.3–0.5 opacity`) for elevated elements on dark backgrounds
|
||||
- Let album art provide color — the UI itself is achromatic
|
||||
|
||||
### Don't
|
||||
- Don't use Spotify Green decoratively or on backgrounds — it's functional only
|
||||
- Don't use light backgrounds for primary surfaces — the dark immersion is core
|
||||
- Don't skip the pill/circle geometry on buttons — square buttons break the identity
|
||||
- Don't use thin/subtle shadows — on dark backgrounds, shadows need to be heavy to be visible
|
||||
- Don't add additional brand colors — green + achromatic grays is the complete palette
|
||||
- Don't use relaxed line-heights — Spotify's typography is compact and dense
|
||||
- Don't expose raw gray borders — use shadow-based or inset borders instead
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | Compact mobile layout |
|
||||
| Mobile | 425–576px | Standard mobile |
|
||||
| Tablet | 576–768px | 2-column grid |
|
||||
| Tablet Large | 768–896px | Expanded layout |
|
||||
| Desktop Small | 896–1024px | Sidebar visible |
|
||||
| Desktop | 1024–1280px | Full desktop layout |
|
||||
| Large Desktop | >1280px | Expanded grid |
|
||||
|
||||
### Collapsing Strategy
|
||||
- Sidebar: full → collapsed → hidden
|
||||
- Album grid: 5 columns → 3 → 2 → 1
|
||||
- Now-playing bar: maintained at all sizes
|
||||
- Search: pill input maintained, width adjusts
|
||||
- Navigation: sidebar → bottom bar on mobile
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Near Black (`#121212`)
|
||||
- Surface: Dark Card (`#181818`)
|
||||
- Text: White (`#ffffff`)
|
||||
- Secondary text: Silver (`#b3b3b3`)
|
||||
- Accent: Spotify Green (`#1ed760`)
|
||||
- Border: `#4d4d4d`
|
||||
- Error: Negative Red (`#f3727f`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
|
||||
- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
|
||||
- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
|
||||
- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
|
||||
- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with #121212 — everything lives in near-black darkness
|
||||
2. Spotify Green for functional highlights only (play, active, CTA)
|
||||
3. Pill everything — 500px for large, 9999px for small, 50% for circular
|
||||
4. Uppercase + wide tracking on buttons — the systematic label voice
|
||||
5. Heavy shadows (0.3–0.5 opacity) for elevation — light shadows are invisible on dark
|
||||
6. Album art provides all the color — the UI stays achromatic
|
||||
23
design-md/spotify/README.md
Normal file
23
design-md/spotify/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Spotify Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/spotify/DESIGN.md) extracted from the public [spotify](https://spotify.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/spotify/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Spotify 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
231
design-md/spotify/preview-dark.html
Normal file
231
design-md/spotify/preview-dark.html
Normal file
@@ -0,0 +1,231 @@
|
||||
<!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: Spotify (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;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a; --surface: #111111; --mid: #1f1f1f; --card: #252525;
|
||||
--green: #1ed760; --white: #ffffff; --silver: #b3b3b3; --muted: #7c7c7c;
|
||||
--neg: #f3727f; --warn: #ffa42b; --info: #539df5;
|
||||
--border: #4d4d4d; --light-border: #7c7c7c;
|
||||
--shadow-heavy: rgba(0,0,0,0.5) 0px 8px 24px;
|
||||
--shadow-med: rgba(0,0,0,0.3) 0px 8px 8px;
|
||||
--font: 'Inter', Helvetica Neue, helvetica, arial, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--bg); color:var(--white); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.40; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--surface); }
|
||||
.nav-brand { font-size:14px; font-weight:700; color:var(--white); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:16px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:400; color:var(--silver); text-decoration:none; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--white); }
|
||||
.nav-cta { display:inline-block; background:var(--green); color:#000; padding:8px 20px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; background:var(--bg); }
|
||||
.hero h1 { font-size:24px; font-weight:700; margin-bottom:12px; }
|
||||
.hero h1 span { color:var(--green); }
|
||||
.hero p { font-size:14px; color:var(--silver); max-width:500px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-green { display:inline-block; background:var(--green); color:#000; padding:10px 24px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--white); padding:10px 24px; border-radius:9999px; border:1px solid var(--light-border); font-family:var(--font); font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }
|
||||
.btn-dark { display:inline-block; background:var(--mid); color:var(--white); padding:8px 16px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; }
|
||||
.btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--green); color:#000; width:48px; height:48px; border-radius:50%; font-size:20px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1000px; margin:0 auto; }
|
||||
.section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--silver); margin-bottom:8px; }
|
||||
.section-title { font-size:18px; font-weight:700; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
|
||||
.color-swatch-block { height:60px; width:100%; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:700; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:700; color:var(--silver); margin:20px 0 8px; text-transform:uppercase; letter-spacing:1px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.05); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:0.5px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.card { background:var(--surface); border-radius:8px; padding:16px; transition:background 0.2s; }
|
||||
.card:hover { background:var(--card); }
|
||||
.card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }
|
||||
.card p { font-size:12px; color:var(--silver); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:12px; font-weight:700; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
|
||||
.form-input { width:100%; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:500px; font-family:var(--font); font-size:14px; outline:none; box-shadow:rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset; }
|
||||
.form-input:focus { box-shadow:0 0 0 2px var(--green); }
|
||||
.form-input--focus { box-shadow:0 0 0 2px var(--green); }
|
||||
.form-input--error { box-shadow:0 0 0 2px var(--neg); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; box-shadow:rgb(124,124,124) 0px 0px 0px 1px inset; }
|
||||
.form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--mid); border:1px solid rgba(255,255,255,0.1); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--surface); border-radius:8px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:700; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; border-top:1px solid rgba(255,255,255,0.05); font-size:12px; color:var(--muted); }
|
||||
.footer a { color:var(--green); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Open Spotify</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#1ed760;color:#000;font-size:10px;font-weight:700;padding:4px 10px;border-radius:500px;text-transform:uppercase;letter-spacing:1px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by <span>Spotify</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized in the dark.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-green" href="#">Get Spotify Free</a>
|
||||
<a class="btn-outline" href="#">Learn More</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1ed760"></div><div class="color-swatch-info"><div class="color-swatch-name">Spotify Green</div><div class="color-swatch-hex">#1ed760</div><div class="color-swatch-role">Brand accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#121212"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#121212</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#181818"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#181818</div><div class="color-swatch-role">Cards, containers</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1f1f1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Dark</div><div class="color-swatch-hex">#1f1f1f</div><div class="color-swatch-role">Buttons, inputs</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Text & Semantic</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b3b3b3"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#b3b3b3</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f3727f"></div><div class="color-swatch-info"><div class="color-swatch-name">Negative</div><div class="color-swatch-hex">#f3727f</div><div class="color-swatch-role">Error states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffa42b"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ffa42b</div><div class="color-swatch-role">Warning states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#539df5"></div><div class="color-swatch-info"><div class="color-swatch-name">Announcement</div><div class="color-swatch-hex">#539df5</div><div class="color-swatch-role">Info states</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:700;">Section Title — Your Playlists</div><div class="type-meta">Title — 24px / 700 / SpotifyMixUITitle</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.30;">Feature Heading</div><div class="type-meta">Feature — 18px / 600 / 1.30</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:700;">Body Bold — Liked Songs</div><div class="type-meta">Body Bold — 16px / 700</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; color:var(--silver);">Caption — 3 min 42 sec</div><div class="type-meta">Caption — 14px / 400</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px;">SHUFFLE PLAY</div><div class="type-meta">Button Uppercase — 14px / 700 / uppercase / +1.4px</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:700; color:var(--silver);">Small Bold — 1,234 songs</div><div class="type-meta">Small Bold — 12px / 700</div></div>
|
||||
<div class="type-sample"><div style="font-size:10.5px; font-weight:600; text-transform:capitalize; color:var(--silver);">Badge</div><div class="type-meta">Badge — 10.5px / 600 / capitalize</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-green" href="#">Shuffle Play</a><div class="button-label">Green Pill</div></div>
|
||||
<div class="button-item"><a class="btn-dark" href="#">Browse</a><div class="button-label">Dark Pill</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Follow</a><div class="button-label">Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">▶</a><div class="button-label">Play Circle</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Discover Weekly</h3><p>Your personal playlist, updated every Monday.</p></div>
|
||||
<div class="card" style="box-shadow:var(--shadow-med);"><h3>Release Radar</h3><p>New releases from artists you follow. Elevated shadow.</p></div>
|
||||
<div class="card"><h3>Daily Mix 1</h3><p>Made for you based on your listening.</p></div>
|
||||
<div class="card"><h3>Liked Songs</h3><p>Your saved songs collection.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Search</label><input class="form-input" type="search" placeholder="Artists, songs, or podcasts"><div class="form-state-label">Default (inset border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Playlist Name</label><input class="form-input form-input--focus" type="text" value="Chill Vibes"><div class="form-state-label">Focus (green ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--error" type="email" value="invalid"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Add a description..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:500px"></div><div class="radius-label">500px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%; width:52px; height:52px;"></div><div class="radius-label">50%</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Base</div><div class="elevation-desc">#121212 background</div></div>
|
||||
<div class="elevation-card" style="background:var(--mid);"><div class="elevation-label">Surface</div><div class="elevation-desc">#1f1f1f</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-med);"><div class="elevation-label">Elevated</div><div class="elevation-desc">0.3 opacity 8px</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-heavy);"><div class="elevation-label">Dialog</div><div class="elevation-desc">0.5 opacity 24px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://spotify.com/">spotify.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
230
design-md/spotify/preview.html
Normal file
230
design-md/spotify/preview.html
Normal file
@@ -0,0 +1,230 @@
|
||||
<!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: Spotify (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;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #121212; --surface: #181818; --mid: #1f1f1f; --card: #252525;
|
||||
--green: #1ed760; --white: #ffffff; --silver: #b3b3b3; --muted: #7c7c7c;
|
||||
--neg: #f3727f; --warn: #ffa42b; --info: #539df5;
|
||||
--border: #4d4d4d; --light-border: #7c7c7c;
|
||||
--shadow-heavy: rgba(0,0,0,0.5) 0px 8px 24px;
|
||||
--shadow-med: rgba(0,0,0,0.3) 0px 8px 8px;
|
||||
--font: 'Inter', Helvetica Neue, helvetica, arial, sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--bg); color:var(--white); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.40; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--surface); }
|
||||
.nav-brand { font-size:14px; font-weight:700; color:var(--white); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:16px; list-style:none; }
|
||||
.nav-links a { font-size:14px; font-weight:400; color:var(--silver); text-decoration:none; transition:color 0.15s; }
|
||||
.nav-links a:hover { color:var(--white); }
|
||||
.nav-cta { display:inline-block; background:var(--green); color:#000; padding:8px 20px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; }
|
||||
|
||||
.hero { padding:64px 24px; text-align:center; background:var(--bg); }
|
||||
.hero h1 { font-size:24px; font-weight:700; margin-bottom:12px; }
|
||||
.hero h1 span { color:var(--green); }
|
||||
.hero p { font-size:14px; color:var(--silver); max-width:500px; margin:0 auto 24px; }
|
||||
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
|
||||
.btn-green { display:inline-block; background:var(--green); color:#000; padding:10px 24px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }
|
||||
.btn-outline { display:inline-block; background:transparent; color:var(--white); padding:10px 24px; border-radius:9999px; border:1px solid var(--light-border); font-family:var(--font); font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }
|
||||
.btn-dark { display:inline-block; background:var(--mid); color:var(--white); padding:8px 16px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; }
|
||||
.btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--green); color:#000; width:48px; height:48px; border-radius:50%; font-size:20px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }
|
||||
|
||||
.section { padding:48px 24px; max-width:1000px; margin:0 auto; }
|
||||
.section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--silver); margin-bottom:8px; }
|
||||
.section-title { font-size:18px; font-weight:700; margin-bottom:24px; }
|
||||
.section-divider { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
|
||||
.color-swatch-block { height:60px; width:100%; }
|
||||
.color-swatch-info { padding:8px 10px; }
|
||||
.color-swatch-name { font-size:12px; font-weight:700; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:700; color:var(--silver); margin:20px 0 8px; text-transform:uppercase; letter-spacing:1px; }
|
||||
|
||||
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.05); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:0.5px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.card { background:var(--surface); border-radius:8px; padding:16px; transition:background 0.2s; }
|
||||
.card:hover { background:var(--card); }
|
||||
.card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }
|
||||
.card p { font-size:12px; color:var(--silver); }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:12px; font-weight:700; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
|
||||
.form-input { width:100%; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:500px; font-family:var(--font); font-size:14px; outline:none; box-shadow:rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset; }
|
||||
.form-input:focus { box-shadow:0 0 0 2px var(--green); }
|
||||
.form-input--focus { box-shadow:0 0 0 2px var(--green); }
|
||||
.form-input--error { box-shadow:0 0 0 2px var(--neg); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; box-shadow:rgb(124,124,124) 0px 0px 0px 1px inset; }
|
||||
.form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--mid); border:1px solid rgba(255,255,255,0.1); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--surface); border-radius:8px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:700; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }
|
||||
|
||||
.footer { padding:24px; text-align:center; border-top:1px solid rgba(255,255,255,0.05); font-size:12px; color:var(--muted); }
|
||||
.footer a { color:var(--green); text-decoration:underline; }
|
||||
|
||||
@media (max-width:768px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Open Spotify</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by <span>Spotify</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized in the dark.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-green" href="#">Get Spotify Free</a>
|
||||
<a class="btn-outline" href="#">Learn More</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1ed760"></div><div class="color-swatch-info"><div class="color-swatch-name">Spotify Green</div><div class="color-swatch-hex">#1ed760</div><div class="color-swatch-role">Brand accent</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#121212"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#121212</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#181818"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#181818</div><div class="color-swatch-role">Cards, containers</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1f1f1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Dark</div><div class="color-swatch-hex">#1f1f1f</div><div class="color-swatch-role">Buttons, inputs</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Text & Semantic</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b3b3b3"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#b3b3b3</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f3727f"></div><div class="color-swatch-info"><div class="color-swatch-name">Negative</div><div class="color-swatch-hex">#f3727f</div><div class="color-swatch-role">Error states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffa42b"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ffa42b</div><div class="color-swatch-role">Warning states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#539df5"></div><div class="color-swatch-info"><div class="color-swatch-name">Announcement</div><div class="color-swatch-hex">#539df5</div><div class="color-swatch-role">Info states</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:700;">Section Title — Your Playlists</div><div class="type-meta">Title — 24px / 700 / SpotifyMixUITitle</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.30;">Feature Heading</div><div class="type-meta">Feature — 18px / 600 / 1.30</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:700;">Body Bold — Liked Songs</div><div class="type-meta">Body Bold — 16px / 700</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; color:var(--silver);">Caption — 3 min 42 sec</div><div class="type-meta">Caption — 14px / 400</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px;">SHUFFLE PLAY</div><div class="type-meta">Button Uppercase — 14px / 700 / uppercase / +1.4px</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:700; color:var(--silver);">Small Bold — 1,234 songs</div><div class="type-meta">Small Bold — 12px / 700</div></div>
|
||||
<div class="type-sample"><div style="font-size:10.5px; font-weight:600; text-transform:capitalize; color:var(--silver);">Badge</div><div class="type-meta">Badge — 10.5px / 600 / capitalize</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-green" href="#">Shuffle Play</a><div class="button-label">Green Pill</div></div>
|
||||
<div class="button-item"><a class="btn-dark" href="#">Browse</a><div class="button-label">Dark Pill</div></div>
|
||||
<div class="button-item"><a class="btn-outline" href="#">Follow</a><div class="button-label">Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-circle" href="#">▶</a><div class="button-label">Play Circle</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>Discover Weekly</h3><p>Your personal playlist, updated every Monday.</p></div>
|
||||
<div class="card" style="box-shadow:var(--shadow-med);"><h3>Release Radar</h3><p>New releases from artists you follow. Elevated shadow.</p></div>
|
||||
<div class="card"><h3>Daily Mix 1</h3><p>Made for you based on your listening.</p></div>
|
||||
<div class="card"><h3>Liked Songs</h3><p>Your saved songs collection.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Search</label><input class="form-input" type="search" placeholder="Artists, songs, or podcasts"><div class="form-state-label">Default (inset border)</div></div>
|
||||
<div class="form-group"><label class="form-label">Playlist Name</label><input class="form-input form-input--focus" type="text" value="Chill Vibes"><div class="form-state-label">Focus (green ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--error" type="email" value="invalid"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Add a description..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:500px"></div><div class="radius-label">500px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%; width:52px; height:52px;"></div><div class="radius-label">50%</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Base</div><div class="elevation-desc">#121212 background</div></div>
|
||||
<div class="elevation-card" style="background:var(--mid);"><div class="elevation-label">Surface</div><div class="elevation-desc">#1f1f1f</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-med);"><div class="elevation-label">Elevated</div><div class="elevation-desc">0.3 opacity 8px</div></div>
|
||||
<div class="elevation-card" style="box-shadow:var(--shadow-heavy);"><div class="elevation-label">Dialog</div><div class="elevation-desc">0.5 opacity 24px</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://spotify.com/">spotify.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
173
design-md/wise/DESIGN.md
Normal file
173
design-md/wise/DESIGN.md
Normal file
@@ -0,0 +1,173 @@
|
||||
# Design System: Wise
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Wise's website is a bold, confident fintech platform that communicates "money without borders" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (`#0e0f0c`) and a signature Wise Green (`#9fe870`) — a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.
|
||||
|
||||
The typography uses Wise Sans — a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType `"calt"` (contextual alternates). At 126px, the text is so dense it feels like a protest sign — bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.
|
||||
|
||||
What distinguishes Wise is its green-on-white-on-black material palette. Lime Green (`#9fe870`) appears on buttons with dark green text (`#163300`), creating a nature-inspired CTA that feels fresh. Hover states use `scale(1.05)` expansion rather than color changes — buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px–40px for cards, and the shadow system is minimal — just `rgba(14,15,12,0.12) 0px 0px 0px 1px` ring shadows.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Wise Sans at weight 900, 0.85 line-height — billboard-scale bold headlines
|
||||
- Lime Green (`#9fe870`) accent with dark green text (`#163300`) — nature-inspired fintech
|
||||
- Inter body at weight 600 as default — confident, not light
|
||||
- Near-black (`#0e0f0c`) primary with warm green undertone
|
||||
- Scale(1.05) hover animations — buttons physically grow
|
||||
- OpenType `"calt"` on all text
|
||||
- Pill buttons (9999px) and large rounded cards (30px–40px)
|
||||
- Semantic color system with comprehensive state management
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary Brand
|
||||
- **Near Black** (`#0e0f0c`): Primary text, background for dark sections
|
||||
- **Wise Green** (`#9fe870`): Primary CTA button, brand accent
|
||||
- **Dark Green** (`#163300`): Button text on green, deep green accent
|
||||
- **Light Mint** (`#e2f6d5`): Soft green surface, badge backgrounds
|
||||
- **Pastel Green** (`#cdffad`): `--color-interactive-contrast-hover`, hover accent
|
||||
|
||||
### Semantic
|
||||
- **Positive Green** (`#054d28`): `--color-sentiment-positive-primary`, success
|
||||
- **Danger Red** (`#d03238`): `--color-interactive-negative-hover`, error/destructive
|
||||
- **Warning Yellow** (`#ffd11a`): `--color-sentiment-warning-hover`, warnings
|
||||
- **Background Cyan** (`rgba(56,200,255,0.10)`): `--color-background-accent`, info tint
|
||||
- **Bright Orange** (`#ffc091`): `--color-bright-orange`, warm accent
|
||||
|
||||
### Neutral
|
||||
- **Warm Dark** (`#454745`): Secondary text, borders
|
||||
- **Gray** (`#868685`): Muted text, tertiary
|
||||
- **Light Surface** (`#e8ebe6`): Subtle green-tinted light surface
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display**: `Wise Sans`, fallback: `Inter` — OpenType `"calt"` on all text
|
||||
- **Body / UI**: `Inter`, fallbacks: `Helvetica, Arial`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Mega | Wise Sans | 126px (7.88rem) | 900 | 0.85 (ultra-tight) | normal | `"calt"` |
|
||||
| Display Hero | Wise Sans | 96px (6.00rem) | 900 | 0.85 | normal | `"calt"` |
|
||||
| Section Heading | Wise Sans | 64px (4.00rem) | 900 | 0.85 | normal | `"calt"` |
|
||||
| Sub-heading | Wise Sans | 40px (2.50rem) | 900 | 0.85 | normal | `"calt"` |
|
||||
| Alt Heading | Inter | 78px (4.88rem) | 600 | 1.10 (tight) | -2.34px | `"calt"` |
|
||||
| Card Title | Inter | 26px (1.62rem) | 600 | 1.23 (tight) | -0.39px | `"calt"` |
|
||||
| Feature Title | Inter | 22px (1.38rem) | 600 | 1.25 (tight) | -0.396px | `"calt"` |
|
||||
| Body | Inter | 18px (1.13rem) | 400 | 1.44 | 0.18px | `"calt"` |
|
||||
| Body Semibold | Inter | 18px (1.13rem) | 600 | 1.44 | -0.108px | `"calt"` |
|
||||
| Button | Inter | 18px–22px | 600 | 1.00–1.44 | -0.108px | `"calt"` |
|
||||
| Caption | Inter | 14px (0.88rem) | 400–600 | 1.50–1.86 | -0.084px to -0.108px | `"calt"` |
|
||||
| Small | Inter | 12px (0.75rem) | 400–600 | 1.00–2.17 | -0.084px to -0.108px | `"calt"` |
|
||||
|
||||
### Principles
|
||||
- **Weight 900 as identity**: Wise Sans Black (900) is used exclusively for display — the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.
|
||||
- **0.85 line-height**: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.
|
||||
- **"calt" everywhere**: Contextual alternates enabled on ALL text — both Wise Sans and Inter.
|
||||
- **Weight 600 as body default**: Inter Semibold is the standard reading weight — confident, not light.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Green Pill**
|
||||
- Background: `#9fe870` (Wise Green)
|
||||
- Text: `#163300` (Dark Green)
|
||||
- Padding: 5px 16px
|
||||
- Radius: 9999px
|
||||
- Hover: scale(1.05) — button physically grows
|
||||
- Active: scale(0.95) — button compresses
|
||||
- Focus: inset ring + outline
|
||||
|
||||
**Secondary Subtle Pill**
|
||||
- Background: `rgba(22, 51, 0, 0.08)` (dark green at 8% opacity)
|
||||
- Text: `#0e0f0c`
|
||||
- Padding: 8px 12px 8px 16px
|
||||
- Radius: 9999px
|
||||
- Same scale hover/active behavior
|
||||
|
||||
### Cards & Containers
|
||||
- Radius: 16px (small), 30px (medium), 40px (large cards/tables)
|
||||
- Border: `1px solid rgba(14,15,12,0.12)` or `1px solid #9fe870` (green accent)
|
||||
- Shadow: `rgba(14,15,12,0.12) 0px 0px 0px 1px` (ring shadow)
|
||||
|
||||
### Navigation
|
||||
- Green-tinted navigation hover: `rgba(211,242,192,0.4)`
|
||||
- Clean header with Wise wordmark
|
||||
- Pill CTAs right-aligned
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (2px): Links, inputs
|
||||
- Standard (10px): Comboboxes, inputs
|
||||
- Card (16px): Small cards, buttons, radio
|
||||
- Medium (20px): Links, medium cards
|
||||
- Large (30px): Feature cards
|
||||
- Section (40px): Tables, large cards
|
||||
- Mega (1000px): Presentation elements
|
||||
- Pill (9999px): All buttons, images
|
||||
- Circle (50%): Icons, badges
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Default |
|
||||
| Ring (Level 1) | `rgba(14,15,12,0.12) 0px 0px 0px 1px` | Card borders |
|
||||
| Inset (Level 2) | `rgb(134,134,133) 0px 0px 0px 1px inset` | Input focus |
|
||||
|
||||
**Shadow Philosophy**: Wise uses minimal shadows — ring shadows only. Depth comes from the bold green accent against the neutral canvas.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Wise Sans weight 900 for display — the extreme boldness IS the brand
|
||||
- Apply line-height 0.85 on Wise Sans display — ultra-tight is intentional
|
||||
- Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text
|
||||
- Apply scale(1.05) hover and scale(0.95) active on buttons
|
||||
- Enable "calt" on all text
|
||||
- Use Inter weight 600 as the body default
|
||||
|
||||
### Don't
|
||||
- Don't use light font weights for Wise Sans — only 900
|
||||
- Don't relax the 0.85 line-height on display — the density is the identity
|
||||
- Don't use the Wise Green as background for large surfaces — it's for buttons and accents
|
||||
- Don't skip the scale animation on buttons
|
||||
- Don't use traditional shadows — ring shadows only
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <576px | Single column |
|
||||
| Tablet | 576–992px | 2-column |
|
||||
| Desktop | 992–1440px | Full layout |
|
||||
| Large | >1440px | Expanded |
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Text: Near Black (`#0e0f0c`)
|
||||
- Background: White (`#ffffff` / off-white)
|
||||
- Accent: Wise Green (`#9fe870`)
|
||||
- Button text: Dark Green (`#163300`)
|
||||
- Secondary: Gray (`#868685`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05)."
|
||||
- "Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400."
|
||||
|
||||
### Iteration Guide
|
||||
1. Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand
|
||||
2. Lime Green for buttons only — dark green text on green background
|
||||
3. Scale animations (1.05 hover, 0.95 active) on all interactive elements
|
||||
4. "calt" on everything — contextual alternates are mandatory
|
||||
5. Inter 600 for body — confident reading weight
|
||||
23
design-md/wise/README.md
Normal file
23
design-md/wise/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Wise Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/wise/DESIGN.md) extracted from the public [wise](https://wise.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/wise/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Wise 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
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
230
design-md/wise/preview-dark.html
Normal file
230
design-md/wise/preview-dark.html
Normal file
@@ -0,0 +1,230 @@
|
||||
<!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: Wise (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;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white:#0e0f0c; --black:#e8ebe6; --green:#9fe870; --dark-green:#163300;
|
||||
--mint:#1a2e10; --gray:#6a6a69; --warm-dark:#a0a39e; --light:#1e201c;
|
||||
--danger:#d03238; --warning:#ffd11a;
|
||||
--font:'Inter',Helvetica,Arial,sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:18px; font-weight:400; line-height:1.44; font-feature-settings:"calt" 1; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid rgba(232,235,230,0.1); }
|
||||
.nav-brand { font-size:18px; font-weight:600; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; transition:opacity 0.15s; }
|
||||
.nav-links a:hover { opacity:0.7; }
|
||||
.nav-cta { display:inline-block; background:var(--green); color:var(--dark-green); padding:8px 20px; border-radius:9999px; font-size:16px; font-weight:600; text-decoration:none; transition:transform 0.2s; }
|
||||
.nav-cta:hover { transform:scale(1.05); }
|
||||
|
||||
.hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
|
||||
.hero h1 { font-size:80px; font-weight:900; line-height:0.85; margin-bottom:24px; }
|
||||
.hero h1 span { color:var(--dark-green); }
|
||||
.hero p { font-size:18px; font-weight:400; color:var(--warm-dark); max-width:500px; margin-bottom:32px; letter-spacing:0.18px; }
|
||||
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }
|
||||
.btn-green { display:inline-block; background:var(--green); color:var(--dark-green); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
|
||||
.btn-green:hover { transform:scale(1.05); }
|
||||
.btn-green:active { transform:scale(0.95); }
|
||||
.btn-subtle { display:inline-block; background:rgba(22,51,0,0.08); color:var(--black); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
|
||||
.btn-subtle:hover { transform:scale(1.05); }
|
||||
|
||||
.section { padding:64px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:40px; font-weight:900; line-height:0.85; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid rgba(14,15,12,0.08); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:16px; overflow:hidden; border:1px solid rgba(14,15,12,0.12); }
|
||||
.color-swatch-block { height:64px; width:100%; }
|
||||
.color-swatch-info { padding:10px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--warm-dark); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--gray); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:24px; }
|
||||
.card h3 { font-size:22px; font-weight:600; margin-bottom:8px; letter-spacing:-0.396px; }
|
||||
.card p { font-size:16px; color:var(--warm-dark); letter-spacing:0.08px; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
|
||||
.form-input--focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
|
||||
.form-input--error { border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--mint); border:1px solid var(--green); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.footer { padding:32px; text-align:center; background:var(--black); color:var(--gray); font-size:13px; }
|
||||
.footer a { color:var(--green); text-decoration:underline; }
|
||||
|
||||
@media (max-width:576px) { .hero h1 { font-size:48px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#9fe870;color:#163300;font-size:10px;font-weight:600;padding:4px 12px;border-radius:9999px;">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by<br><span>Wise</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — bold, green, and borderless.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-green" href="#">Send Money</a>
|
||||
<a class="btn-subtle" href="#">Learn More</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0e0f0c"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0e0f0c</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fe870"></div><div class="color-swatch-info"><div class="color-swatch-name">Wise Green</div><div class="color-swatch-hex">#9fe870</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#163300"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Green</div><div class="color-swatch-hex">#163300</div><div class="color-swatch-role">Button text on green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e2f6d5"></div><div class="color-swatch-info"><div class="color-swatch-name">Mint</div><div class="color-swatch-hex">#e2f6d5</div><div class="color-swatch-role">Soft green surface</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Semantic</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#054d28"></div><div class="color-swatch-info"><div class="color-swatch-name">Positive</div><div class="color-swatch-hex">#054d28</div><div class="color-swatch-role">Success</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d03238"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#d03238</div><div class="color-swatch-role">Error</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd11a"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ffd11a</div><div class="color-swatch-role">Warning</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc091"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ffc091</div><div class="color-swatch-role">Warm accent</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#454745"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Dark</div><div class="color-swatch-hex">#454745</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#868685"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#868685</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e8ebe6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#e8ebe6</div><div class="color-swatch-role">Light surface</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:80px; font-weight:900; line-height:0.85;">DISPLAY HERO</div><div class="type-meta">Display — 126px / 900 / 0.85 / Wise Sans / "calt"</div></div>
|
||||
<div class="type-sample"><div style="font-size:40px; font-weight:900; line-height:0.85;">Section Title</div><div class="type-meta">Section — 40px / 900 / 0.85 / Wise Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-0.396px;">Card Title</div><div class="type-meta">Card — 22px / 600 / 1.25 / -0.396px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.44; letter-spacing:0.18px; color:var(--warm-dark);">Body — Send money abroad. Fast, cheap, transparent. No hidden fees, no bad exchange rates.</div><div class="type-meta">Body — 18px / 400 / 1.44 / +0.18px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.44; letter-spacing:-0.108px;">Body Semibold — Account balance</div><div class="type-meta">Semibold — 18px / 600 / 1.44 / -0.108px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.55; letter-spacing:-0.084px; color:var(--gray);">Caption — Updated 2 minutes ago</div><div class="type-meta">Caption — 14px / 600 / 1.55 / -0.084px / Inter</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-green" href="#">Send Money</a><div class="button-label">Primary Green</div></div>
|
||||
<div class="button-item"><a class="btn-subtle" href="#">Learn More</a><div class="button-label">Subtle</div></div>
|
||||
</div>
|
||||
<p style="font-size:13px; color:var(--gray); margin-top:16px;">Hover to see scale(1.05) grow. Click for scale(0.95) compress.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>International Transfers</h3><p>Send money to 80+ countries at the real exchange rate. No markup, just a small, transparent fee.</p></div>
|
||||
<div class="card" style="background:var(--mint); border-color:var(--green);"><h3>Multi-currency Account</h3><p>Hold and convert 40+ currencies. Spend abroad with the Wise card. Green accent card variant.</p></div>
|
||||
<div class="card"><h3>Business Account</h3><p>Pay invoices, receive payments, and manage your international finances in one place.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input" type="text" placeholder="1,000.00 GBP"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Recipient</label><input class="form-input form-input--focus" type="text" value="John Smith"><div class="form-state-label">Focus (green ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">IBAN</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Reference</label><textarea class="form-textarea" placeholder="Payment reference..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:30px"></div><div class="radius-label">30px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring shadow</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://wise.com/">wise.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
229
design-md/wise/preview.html
Normal file
229
design-md/wise/preview.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!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: Wise (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;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--white:#ffffff; --black:#0e0f0c; --green:#9fe870; --dark-green:#163300;
|
||||
--mint:#e2f6d5; --gray:#868685; --warm-dark:#454745; --light:#e8ebe6;
|
||||
--danger:#d03238; --warning:#ffd11a;
|
||||
--font:'Inter',Helvetica,Arial,sans-serif;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { background:var(--white); color:var(--black); font-family:var(--font); font-size:18px; font-weight:400; line-height:1.44; font-feature-settings:"calt" 1; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid rgba(14,15,12,0.08); }
|
||||
.nav-brand { font-size:18px; font-weight:600; color:var(--black); text-decoration:none; }
|
||||
.nav-links { display:flex; gap:20px; list-style:none; }
|
||||
.nav-links a { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; transition:opacity 0.15s; }
|
||||
.nav-links a:hover { opacity:0.7; }
|
||||
.nav-cta { display:inline-block; background:var(--green); color:var(--dark-green); padding:8px 20px; border-radius:9999px; font-size:16px; font-weight:600; text-decoration:none; transition:transform 0.2s; }
|
||||
.nav-cta:hover { transform:scale(1.05); }
|
||||
|
||||
.hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
|
||||
.hero h1 { font-size:80px; font-weight:900; line-height:0.85; margin-bottom:24px; }
|
||||
.hero h1 span { color:var(--dark-green); }
|
||||
.hero p { font-size:18px; font-weight:400; color:var(--warm-dark); max-width:500px; margin-bottom:32px; letter-spacing:0.18px; }
|
||||
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }
|
||||
.btn-green { display:inline-block; background:var(--green); color:var(--dark-green); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
|
||||
.btn-green:hover { transform:scale(1.05); }
|
||||
.btn-green:active { transform:scale(0.95); }
|
||||
.btn-subtle { display:inline-block; background:rgba(22,51,0,0.08); color:var(--black); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }
|
||||
.btn-subtle:hover { transform:scale(1.05); }
|
||||
|
||||
.section { padding:64px 24px; max-width:1100px; margin:0 auto; }
|
||||
.section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
|
||||
.section-title { font-size:40px; font-weight:900; line-height:0.85; margin-bottom:32px; }
|
||||
.section-divider { border:none; border-top:1px solid rgba(14,15,12,0.08); margin:0; }
|
||||
|
||||
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
|
||||
.color-swatch { border-radius:16px; overflow:hidden; border:1px solid rgba(14,15,12,0.12); }
|
||||
.color-swatch-block { height:64px; width:100%; }
|
||||
.color-swatch-info { padding:10px; }
|
||||
.color-swatch-name { font-size:13px; font-weight:600; margin-bottom:2px; }
|
||||
.color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }
|
||||
.color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }
|
||||
.color-group-label { font-size:12px; font-weight:600; color:var(--warm-dark); margin:20px 0 8px; }
|
||||
|
||||
.type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }
|
||||
.type-sample:last-child { border-bottom:none; }
|
||||
.type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }
|
||||
|
||||
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.button-item { text-align:center; }
|
||||
.button-label { font-size:10px; color:var(--gray); margin-top:6px; }
|
||||
|
||||
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
|
||||
.card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:24px; }
|
||||
.card h3 { font-size:22px; font-weight:600; margin-bottom:8px; letter-spacing:-0.396px; }
|
||||
.card p { font-size:16px; color:var(--warm-dark); letter-spacing:0.08px; }
|
||||
|
||||
.form-group { margin-bottom:16px; max-width:400px; }
|
||||
.form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
|
||||
.form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; outline:none; }
|
||||
.form-input:focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
|
||||
.form-input--focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }
|
||||
.form-input--error { border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); }
|
||||
.form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
|
||||
.form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }
|
||||
|
||||
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
.spacing-item { text-align:center; }
|
||||
.spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }
|
||||
.spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
|
||||
.radius-item { text-align:center; }
|
||||
.radius-box { width:52px; height:52px; background:var(--mint); border:1px solid var(--green); margin-bottom:4px; }
|
||||
.radius-label { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
|
||||
.elevation-card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:16px; text-align:center; }
|
||||
.elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||||
.elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }
|
||||
|
||||
.footer { padding:32px; text-align:center; background:var(--black); color:var(--gray); font-size:13px; }
|
||||
.footer a { color:var(--green); text-decoration:underline; }
|
||||
|
||||
@media (max-width:576px) { .hero h1 { font-size:48px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Get Started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by<br><span>Wise</span></h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — bold, green, and borderless.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-green" href="#">Send Money</a>
|
||||
<a class="btn-subtle" href="#">Learn More</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
|
||||
<div class="color-group-label">Brand</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0e0f0c"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0e0f0c</div><div class="color-swatch-role">Primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fe870"></div><div class="color-swatch-info"><div class="color-swatch-name">Wise Green</div><div class="color-swatch-hex">#9fe870</div><div class="color-swatch-role">Primary CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#163300"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Green</div><div class="color-swatch-hex">#163300</div><div class="color-swatch-role">Button text on green</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e2f6d5"></div><div class="color-swatch-info"><div class="color-swatch-name">Mint</div><div class="color-swatch-hex">#e2f6d5</div><div class="color-swatch-role">Soft green surface</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Semantic</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#054d28"></div><div class="color-swatch-info"><div class="color-swatch-name">Positive</div><div class="color-swatch-hex">#054d28</div><div class="color-swatch-role">Success</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d03238"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#d03238</div><div class="color-swatch-role">Error</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd11a"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ffd11a</div><div class="color-swatch-role">Warning</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc091"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ffc091</div><div class="color-swatch-role">Warm accent</div></div></div>
|
||||
</div>
|
||||
<div class="color-group-label">Neutral</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#454745"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Dark</div><div class="color-swatch-hex">#454745</div><div class="color-swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#868685"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray</div><div class="color-swatch-hex">#868685</div><div class="color-swatch-role">Muted text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e8ebe6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#e8ebe6</div><div class="color-swatch-role">Light surface</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
|
||||
<div class="type-sample"><div style="font-size:80px; font-weight:900; line-height:0.85;">DISPLAY HERO</div><div class="type-meta">Display — 126px / 900 / 0.85 / Wise Sans / "calt"</div></div>
|
||||
<div class="type-sample"><div style="font-size:40px; font-weight:900; line-height:0.85;">Section Title</div><div class="type-meta">Section — 40px / 900 / 0.85 / Wise Sans</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-0.396px;">Card Title</div><div class="type-meta">Card — 22px / 600 / 1.25 / -0.396px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.44; letter-spacing:0.18px; color:var(--warm-dark);">Body — Send money abroad. Fast, cheap, transparent. No hidden fees, no bad exchange rates.</div><div class="type-meta">Body — 18px / 400 / 1.44 / +0.18px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.44; letter-spacing:-0.108px;">Body Semibold — Account balance</div><div class="type-meta">Semibold — 18px / 600 / 1.44 / -0.108px / Inter</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.55; letter-spacing:-0.084px; color:var(--gray);">Caption — Updated 2 minutes ago</div><div class="type-meta">Caption — 14px / 600 / 1.55 / -0.084px / Inter</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-green" href="#">Send Money</a><div class="button-label">Primary Green</div></div>
|
||||
<div class="button-item"><a class="btn-subtle" href="#">Learn More</a><div class="button-label">Subtle</div></div>
|
||||
</div>
|
||||
<p style="font-size:13px; color:var(--gray); margin-top:16px;">Hover to see scale(1.05) grow. Click for scale(0.95) compress.</p>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card"><h3>International Transfers</h3><p>Send money to 80+ countries at the real exchange rate. No markup, just a small, transparent fee.</p></div>
|
||||
<div class="card" style="background:var(--mint); border-color:var(--green);"><h3>Multi-currency Account</h3><p>Hold and convert 40+ currencies. Spend abroad with the Wise card. Green accent card variant.</p></div>
|
||||
<div class="card"><h3>Business Account</h3><p>Pay invoices, receive payments, and manage your international finances in one place.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
|
||||
<div class="form-group"><label class="form-label">Amount</label><input class="form-input" type="text" placeholder="1,000.00 GBP"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Recipient</label><input class="form-input form-input--focus" type="text" value="John Smith"><div class="form-state-label">Focus (green ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">IBAN</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
|
||||
<div class="form-group"><label class="form-label">Reference</label><textarea class="form-textarea" placeholder="Payment reference..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:30px"></div><div class="radius-label">30px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring shadow</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">Generated from <a href="https://wise.com/">wise.com</a> DESIGN.md — awesome-design-md</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user