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

first commit

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

328
design-md/zapier/DESIGN.md Normal file
View File

@@ -0,0 +1,328 @@
# Design System: Zapier
## 1. Visual Theme & Atmosphere
Zapier's website radiates warm, approachable professionalism. It rejects the cold monochrome minimalism of developer tools in favor of a cream-tinted canvas (`#fffefb`) that feels like unbleached paper -- the digital equivalent of a well-organized notebook. The near-black (`#201515`) text has a faint reddish-brown warmth, creating an atmosphere more human than mechanical. This is automation designed to feel effortless, not technical.
The typographic system is a deliberate interplay of two distinct personalities. **Degular Display** -- a geometric, wide-set display face -- handles hero-scale headlines at 56-80px with medium weight (500) and extraordinarily tight line-heights (0.90), creating headlines that compress vertically like stacked blocks. **Inter** serves as the workhorse for everything else, from section headings to body text and navigation, with fallbacks to Helvetica and Arial. **GT Alpina**, an elegant thin-weight serif with aggressive negative letter-spacing (-1.6px to -1.92px), makes occasional appearances for softer editorial moments. This three-font system gives Zapier the ability to shift register -- from bold and punchy (Degular) to clean and functional (Inter) to refined and literary (GT Alpina).
The brand's signature orange (`#ff4f00`) is unmistakable -- a vivid, saturated red-orange that sits precisely between traffic-cone urgency and sunset warmth. It's used sparingly but decisively: primary CTA buttons, active state underlines, and accent borders. Against the warm cream background, this orange creates a color relationship that feels energetic without being aggressive.
**Key Characteristics:**
- Warm cream canvas (`#fffefb`) instead of pure white -- organic, paper-like warmth
- Near-black with reddish undertone (`#201515`) -- text that breathes rather than dominates
- Degular Display for hero headlines at 0.90 line-height -- compressed, impactful, modern
- Inter as the universal UI font across all functional typography
- GT Alpina for editorial accents -- thin-weight serif with extreme negative tracking
- Zapier Orange (`#ff4f00`) as the single accent -- vivid, warm, sparingly applied
- Warm neutral palette: borders (`#c5c0b1`), muted text (`#939084`), surface tints (`#eceae3`)
- 8px base spacing system with generous padding on CTAs (20px 24px)
- Border-forward design: `1px solid` borders in warm grays define structure over shadows
## 2. Color Palette & Roles
### Primary
- **Zapier Black** (`#201515`): Primary text, headings, dark button backgrounds. A warm near-black with reddish undertones -- never cold.
- **Cream White** (`#fffefb`): Page background, card surfaces, light button fills. Not pure white; the yellowish warmth is intentional.
- **Off-White** (`#fffdf9`): Secondary background surface, subtle alternate tint. Nearly indistinguishable from cream white but creates depth.
### Brand Accent
- **Zapier Orange** (`#ff4f00`): Primary CTA buttons, active underline indicators, accent borders. The signature color -- vivid and warm.
### Neutral Scale
- **Dark Charcoal** (`#36342e`): Secondary text, footer text, border color for strong dividers. A warm dark gray-brown with 70% opacity variant.
- **Warm Gray** (`#939084`): Tertiary text, muted labels, timestamp-style content. Mid-range with greenish-warm undertone.
- **Sand** (`#c5c0b1`): Primary border color, hover state backgrounds, divider lines. The backbone of Zapier's structural elements.
- **Light Sand** (`#eceae3`): Secondary button backgrounds, light borders, subtle card surfaces.
- **Mid Warm** (`#b5b2aa`): Alternate border tone, used on specific span elements.
### Interactive
- **Orange CTA** (`#ff4f00`): Primary action buttons and active tab underlines.
- **Dark CTA** (`#201515`): Secondary dark buttons with sand hover state.
- **Light CTA** (`#eceae3`): Tertiary/ghost buttons with sand hover.
- **Link Default** (`#201515`): Standard link color, matching body text.
- **Hover Underline**: Links remove `text-decoration: underline` on hover (inverse pattern).
### Overlay & Surface
- **Semi-transparent Dark** (`rgba(45, 45, 46, 0.5)`): Overlay button variant, backdrop-like elements.
- **Pill Surface** (`#fffefb`): White pill buttons with sand borders.
### Shadows & Depth
- **Inset Underline** (`rgb(255, 79, 0) 0px -4px 0px 0px inset`): Active tab indicator -- orange underline using inset box-shadow.
- **Hover Underline** (`rgb(197, 192, 177) 0px -4px 0px 0px inset`): Inactive tab hover -- sand-colored underline.
## 3. Typography Rules
### Font Families
- **Display**: `Degular Display` -- wide geometric display face for hero headlines
- **Primary**: `Inter`, with fallbacks: `Helvetica, Arial`
- **Editorial**: `GT Alpina` -- thin-weight serif for editorial moments
- **System**: `Arial` -- fallback for form elements and system UI
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero XL | Degular Display | 80px (5.00rem) | 500 | 0.90 (tight) | normal | Maximum impact, compressed block |
| Display Hero | Degular Display | 56px (3.50rem) | 500 | 0.90-1.10 (tight) | 0-1.12px | Primary hero headlines |
| Display Hero SM | Degular Display | 40px (2.50rem) | 500 | 0.90 (tight) | normal | Smaller hero variant |
| Display Button | Degular Display | 24px (1.50rem) | 600 | 1.00 (tight) | 1px | Large CTA button text |
| Section Heading | Inter | 48px (3.00rem) | 500 | 1.04 (tight) | normal | Major section titles |
| Editorial Heading | GT Alpina | 48px (3.00rem) | 250 | normal | -1.92px | Thin editorial headlines |
| Editorial Sub | GT Alpina | 40px (2.50rem) | 300 | 1.08 (tight) | -1.6px | Editorial subheadings |
| Sub-heading LG | Inter | 36px (2.25rem) | 500 | normal | -1px | Large sub-sections |
| Sub-heading | Inter | 32px (2.00rem) | 400 | 1.25 (tight) | normal | Standard sub-sections |
| Sub-heading MD | Inter | 28px (1.75rem) | 500 | normal | normal | Medium sub-headings |
| Card Title | Inter | 24px (1.50rem) | 600 | normal | -0.48px | Card headings |
| Body Large | Inter | 20px (1.25rem) | 400-500 | 1.00-1.20 (tight) | -0.2px | Feature descriptions |
| Body Emphasis | Inter | 18px (1.13rem) | 600 | 1.00 (tight) | normal | Emphasized body text |
| Body | Inter | 16px (1.00rem) | 400-500 | 1.20-1.25 | -0.16px | Standard reading text |
| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.16 (tight) | normal | Strong labels |
| Button | Inter | 16px (1.00rem) | 600 | normal | normal | Standard buttons |
| Button SM | Inter | 14px (0.88rem) | 600 | normal | normal | Small buttons |
| Caption | Inter | 14px (0.88rem) | 500 | 1.25-1.43 | normal | Labels, metadata |
| Caption Upper | Inter | 14px (0.88rem) | 600 | normal | 0.5px | Uppercase section labels |
| Micro | Inter | 12px (0.75rem) | 600 | 0.90-1.33 | 0.5px | Tiny labels, often uppercase |
| Micro SM | Inter | 13px (0.81rem) | 500 | 1.00-1.54 | normal | Small metadata text |
### Principles
- **Three-font system, clear roles**: Degular Display commands attention at hero scale only. Inter handles everything functional. GT Alpina adds editorial warmth sparingly.
- **Compressed display**: Degular at 0.90 line-height creates vertically compressed headline blocks that feel modern and architectural.
- **Weight as hierarchy signal**: Inter uses 400 (reading), 500 (navigation/emphasis), 600 (headings/CTAs). Degular uses 500 (display) and 600 (buttons).
- **Uppercase for labels**: Section labels (like "01 / Colors") and small categorization use `text-transform: uppercase` with 0.5px letter-spacing.
- **Negative tracking for elegance**: GT Alpina uses -1.6px to -1.92px letter-spacing for its thin-weight editorial headlines.
## 4. Component Stylings
### Buttons
**Primary Orange**
- Background: `#ff4f00`
- Text: `#fffefb`
- Padding: 8px 16px
- Radius: 4px
- Border: `1px solid #ff4f00`
- Use: Primary CTA ("Start free with email", "Sign up free")
**Primary Dark**
- Background: `#201515`
- Text: `#fffefb`
- Padding: 20px 24px
- Radius: 8px
- Border: `1px solid #201515`
- Hover: background shifts to `#c5c0b1`, text to `#201515`
- Use: Large secondary CTA buttons
**Light / Ghost**
- Background: `#eceae3`
- Text: `#36342e`
- Padding: 20px 24px
- Radius: 8px
- Border: `1px solid #c5c0b1`
- Hover: background shifts to `#c5c0b1`, text to `#201515`
- Use: Tertiary actions, filter buttons
**Pill Button**
- Background: `#fffefb`
- Text: `#36342e`
- Padding: 0px 16px
- Radius: 20px
- Border: `1px solid #c5c0b1`
- Use: Tag-like selections, filter pills
**Overlay Semi-transparent**
- Background: `rgba(45, 45, 46, 0.5)`
- Text: `#fffefb`
- Radius: 20px
- Hover: background becomes fully opaque `#2d2d2e`
- Use: Video play buttons, floating actions
**Tab / Navigation (Inset Shadow)**
- Background: transparent
- Text: `#201515`
- Padding: 12px 16px
- Shadow: `rgb(255, 79, 0) 0px -4px 0px 0px inset` (active orange underline)
- Hover shadow: `rgb(197, 192, 177) 0px -4px 0px 0px inset` (sand underline)
- Use: Horizontal tab navigation
### Cards & Containers
- Background: `#fffefb`
- Border: `1px solid #c5c0b1` (warm sand border)
- Radius: 5px (standard), 8px (featured)
- No shadow elevation by default -- borders define containment
- Hover: subtle border color intensification
### Inputs & Forms
- Background: `#fffefb`
- Text: `#201515`
- Border: `1px solid #c5c0b1`
- Radius: 5px
- Focus: border color shifts to `#ff4f00` (orange)
- Placeholder: `#939084`
### Navigation
- Clean horizontal nav on cream background
- Zapier logotype left-aligned, 104x28px
- Links: Inter 16px weight 500, `#201515` text
- CTA: Orange button ("Start free with email")
- Tab navigation uses inset box-shadow underline technique
- Mobile: hamburger collapse
### Image Treatment
- Product screenshots with `1px solid #c5c0b1` border
- Rounded corners: 5-8px
- Dashboard/workflow screenshots prominent in feature sections
- Light gradient backgrounds behind hero content
### Distinctive Components
**Workflow Integration Cards**
- Display connected app icons in pairs
- Arrow or connection indicator between apps
- Sand border containment
- Inter weight 500 for app names
**Stat Counter**
- Large display number using Inter 48px weight 500
- Muted description below in `#36342e`
- Used for social proof metrics
**Social Proof Icons**
- Circular icon buttons: 14px radius
- Sand border: `1px solid #c5c0b1`
- Used for social media follow links in footer
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 1px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px
- CTA buttons use generous padding: 20px 24px for large, 8px 16px for standard
- Section padding: 64px-80px vertical
### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single-column with large top padding
- Feature sections: 2-3 column grids for integration cards
- Full-width sand-bordered dividers between sections
- Footer: multi-column dark background (`#201515`)
### Whitespace Philosophy
- **Warm breathing room**: Generous vertical spacing between sections (64px-80px), but content areas are relatively dense -- Zapier packs information efficiently within its cream canvas.
- **Architectural compression**: Degular Display headlines at 0.90 line-height compress vertically, contrasting with the open spacing around them.
- **Section rhythm**: Cream background throughout, with sections separated by sand-colored borders rather than background color changes.
### Border Radius Scale
- Tight (3px): Small inline spans
- Standard (4px): Buttons (orange CTA), tags, small elements
- Content (5px): Cards, links, general containers
- Comfortable (8px): Featured cards, large buttons, tabs
- Social (14px): Social icon buttons, pill-like elements
- Pill (20px): Play buttons, large pill buttons, floating actions
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Bordered (Level 1) | `1px solid #c5c0b1` | Standard cards, containers, inputs |
| Strong Border (Level 1b) | `1px solid #36342e` | Dark dividers, emphasized sections |
| Active Tab (Level 2) | `rgb(255, 79, 0) 0px -4px 0px 0px inset` | Active tab underline (orange) |
| Hover Tab (Level 2b) | `rgb(197, 192, 177) 0px -4px 0px 0px inset` | Hover tab underline (sand) |
| Focus (Accessibility) | `1px solid #ff4f00` outline | Focus ring on interactive elements |
**Shadow Philosophy**: Zapier deliberately avoids traditional shadow-based elevation. Structure is defined almost entirely through borders -- warm sand (`#c5c0b1`) borders for standard containment, dark charcoal (`#36342e`) borders for emphasis. The only shadow-like technique is the inset box-shadow used for tab underlines, where a `0px -4px 0px 0px inset` shadow creates a bottom-bar indicator. This border-first approach keeps the design grounded and tangible rather than floating.
### Decorative Depth
- Orange inset underline on active tabs creates visual "weight" at the bottom of elements
- Sand hover underlines provide preview states without layout shifts
- No background gradients in main content -- the cream canvas is consistent
- Footer uses full dark background (`#201515`) for contrast reversal
## 7. Do's and Don'ts
### Do
- Use Degular Display exclusively for hero-scale headlines (40px+) with 0.90 line-height for compressed impact
- Use Inter for all functional UI -- navigation, body text, buttons, labels
- Apply warm cream (`#fffefb`) as the background, never pure white
- Use `#201515` for text, never pure black -- the reddish warmth matters
- Keep Zapier Orange (`#ff4f00`) reserved for primary CTAs and active state indicators
- Use sand (`#c5c0b1`) borders as the primary structural element instead of shadows
- Apply generous button padding (20px 24px) for large CTAs to match Zapier's spacious button style
- Use inset box-shadow underlines for tab navigation rather than border-bottom
- Apply uppercase with 0.5px letter-spacing for section labels and micro-categorization
### Don't
- Don't use Degular Display for body text or UI elements -- it's display-only
- Don't use pure white (`#ffffff`) or pure black (`#000000`) -- Zapier's palette is warm-shifted
- Don't apply box-shadow elevation to cards -- use borders instead
- Don't scatter Zapier Orange across the UI -- it's reserved for CTAs and active states
- Don't use tight padding on large CTA buttons -- Zapier's buttons are deliberately spacious
- Don't ignore the warm neutral system -- borders should be `#c5c0b1`, not gray
- Don't use GT Alpina for functional UI -- it's an editorial accent at thin weights only
- Don't apply positive letter-spacing to GT Alpina -- it uses aggressive negative tracking (-1.6px to -1.92px)
- Don't use rounded pill shapes (9999px) for primary buttons -- pills are for tags and social icons
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <450px | Tight single column, reduced hero text |
| Mobile | 450-600px | Standard mobile, stacked layout |
| Mobile Large | 600-640px | Slight horizontal breathing room |
| Tablet Small | 640-680px | 2-column grids begin |
| Tablet | 680-768px | Card grids expand |
| Tablet Large | 768-991px | Full card grids, expanded padding |
| Desktop Small | 991-1024px | Desktop layout initiates |
| Desktop | 1024-1280px | Full layout, maximum content width |
| Large Desktop | >1280px | Centered with generous margins |
### Touch Targets
- Large CTA buttons: 20px 24px padding (comfortable 60px+ height)
- Standard buttons: 8px 16px padding
- Navigation links: 16px weight 500 with adequate spacing
- Social icons: 14px radius circular buttons
- Tab items: 12px 16px padding
### Collapsing Strategy
- Hero: Degular 80px display scales to 40-56px on smaller screens
- Navigation: horizontal links + CTA collapse to hamburger menu
- Feature cards: 3-column grid to 2-column to single-column stacked
- Integration workflow illustrations: maintain aspect ratio, may simplify
- Footer: multi-column dark section collapses to stacked
- Section spacing: 64-80px reduces to 40-48px on mobile
### Image Behavior
- Product screenshots maintain sand border treatment at all sizes
- Integration app icons maintain fixed sizes within responsive containers
- Hero illustrations scale proportionally
- Full-width sections maintain edge-to-edge treatment
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary CTA: Zapier Orange (`#ff4f00`)
- Background: Cream White (`#fffefb`)
- Heading text: Zapier Black (`#201515`)
- Body text: Dark Charcoal (`#36342e`)
- Border: Sand (`#c5c0b1`)
- Secondary surface: Light Sand (`#eceae3`)
- Muted text: Warm Gray (`#939084`)
### Example Component Prompts
- "Create a hero section on cream background (`#fffefb`). Headline at 56px Degular Display weight 500, line-height 0.90, color `#201515`. Subtitle at 20px Inter weight 400, line-height 1.20, color `#36342e`. Orange CTA button (`#ff4f00`, 4px radius, 8px 16px padding, white text) and dark button (`#201515`, 8px radius, 20px 24px padding, white text)."
- "Design a card: cream background (`#fffefb`), `1px solid #c5c0b1` border, 5px radius. Title at 24px Inter weight 600, letter-spacing -0.48px, `#201515`. Body at 16px weight 400, `#36342e`. No box-shadow."
- "Build a tab navigation: transparent background. Inter 16px weight 500, `#201515` text. Active tab: `box-shadow: rgb(255, 79, 0) 0px -4px 0px 0px inset`. Hover: `box-shadow: rgb(197, 192, 177) 0px -4px 0px 0px inset`. Padding 12px 16px."
- "Create navigation: cream sticky header (`#fffefb`). Inter 16px weight 500 for links, `#201515` text. Orange pill CTA 'Start free with email' right-aligned (`#ff4f00`, 4px radius, 8px 16px padding)."
- "Design a footer with dark background (`#201515`). Text `#fffefb`. Links in `#c5c0b1` with hover to `#fffefb`. Multi-column layout. Social icons as 14px-radius circles with sand borders."
### Iteration Guide
1. Always use warm cream (`#fffefb`) background, never pure white -- the warmth defines Zapier
2. Borders (`1px solid #c5c0b1`) are the structural backbone -- avoid shadow elevation
3. Zapier Orange (`#ff4f00`) is the only accent color; everything else is warm neutrals
4. Three fonts, strict roles: Degular Display (hero), Inter (UI), GT Alpina (editorial)
5. Large CTA buttons need generous padding (20px 24px) -- Zapier buttons feel spacious
6. Tab navigation uses inset box-shadow underlines, not border-bottom
7. Text is always warm: `#201515` for dark, `#36342e` for body, `#939084` for muted
8. Uppercase labels at 12-14px with 0.5px letter-spacing for section categorization

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

@@ -0,0 +1,25 @@
# Zapier — Design System
> Design.md extracted from the public [zapier](https://zapier.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Zapier 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
![Zapier Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/zapier/preview-dark-screenshot.png)
### Light Mode
![Zapier Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/zapier/preview-screenshot.png)

382
design-md/zapier/preview-dark.html Normal file
View File

@@ -0,0 +1,382 @@
<!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: Zapier (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&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: 'Degular Display';
src: local('Degular Display');
font-weight: 500;
font-style: normal;
}
:root {
--zapier-black: #f0ece6;
--cream: #1a1412;
--off-white: #1e1816;
--charcoal: #c5c0b1;
--warm-gray: #8a8578;
--sand: #4a463e;
--light-sand: #2e2a24;
--mid-warm: #5a564e;
--orange: #ff4f00;
--shadow-tab-active: rgb(255, 79, 0) 0px -4px 0px 0px inset;
--shadow-tab-hover: rgb(74, 70, 62) 0px -4px 0px 0px inset;
--font-display: 'Degular Display', 'Inter', system-ui, -apple-system, sans-serif;
--font-sans: 'Inter', Helvetica, Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--cream);
color: var(--zapier-black);
font-family: var(--font-sans);
font-size: 16px; font-weight: 400; line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: rgba(26, 20, 18, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--sand);
}
.nav-brand { font-size: 14px; font-weight: 600; color: var(--zapier-black); text-decoration: none; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--zapier-black); }
.nav-cta {
display: inline-block; background: var(--orange); color: #fffefb;
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 600;
text-decoration: none; border: 1px solid var(--orange); transition: opacity 0.15s;
}
.nav-cta:hover { opacity: 0.9; }
/* DARK MODE BADGE */
.dark-badge {
position: fixed; top: 16px; right: 16px; z-index: 200;
background: var(--zapier-black); color: var(--cream);
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
}
/* HERO */
.hero { padding: 96px 32px 80px; text-align: center; }
.hero h1 {
font-family: var(--font-display);
font-size: 56px; font-weight: 500; line-height: 0.90;
color: var(--zapier-black); margin-bottom: 20px;
}
.hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--charcoal); max-width: 600px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-orange {
display: inline-block; background: var(--orange); color: #fffefb;
padding: 8px 16px; border-radius: 4px; border: 1px solid var(--orange);
font-family: var(--font-sans); font-size: 14px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.btn-orange:hover { opacity: 0.9; }
.btn-dark {
display: inline-block; background: var(--light-sand); color: var(--zapier-black);
padding: 20px 24px; border-radius: 8px; border: 1px solid var(--sand);
font-family: var(--font-sans); font-size: 16px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: all 0.15s;
}
.btn-dark:hover { background: var(--sand); }
.btn-ghost {
display: inline-block; background: var(--light-sand); color: var(--charcoal);
padding: 20px 24px; border-radius: 8px; border: 1px solid var(--sand);
font-family: var(--font-sans); font-size: 16px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: all 0.15s;
}
.btn-ghost:hover { background: var(--sand); color: var(--zapier-black); }
/* SECTIONS */
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
.section-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--warm-gray); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-title { font-size: 32px; font-weight: 500; line-height: 1.25; margin-bottom: 32px; }
.section-divider { border: none; border-top: 1px solid var(--sand); margin: 0; }
/* COLORS */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
.color-swatch { border-radius: 5px; overflow: hidden; border: 1px solid var(--sand); }
.color-swatch-block { height: 72px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; color: var(--warm-gray); font-family: var(--font-sans); }
.color-swatch-role { font-size: 11px; color: var(--warm-gray); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--light-sand); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-size: 12px; font-weight: 500; color: var(--warm-gray); margin-top: 8px; }
/* BUTTONS */
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.button-item { text-align: center; }
.button-label { font-size: 12px; font-weight: 500; color: var(--warm-gray); margin-top: 8px; }
.btn-pill {
display: inline-block; background: var(--cream); color: var(--charcoal);
padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 500;
text-decoration: none; border: 1px solid var(--sand);
}
/* TABS */
.tab-row { display: flex; gap: 0; border-bottom: 1px solid var(--sand); margin-bottom: 24px; }
.tab-item {
padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--charcoal);
cursor: pointer; transition: box-shadow 0.15s;
}
.tab-item:hover { box-shadow: var(--shadow-tab-hover); }
.tab-item.active { color: var(--zapier-black); box-shadow: var(--shadow-tab-active); }
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.card { background: var(--cream); border-radius: 5px; padding: 24px; border: 1px solid var(--sand); transition: border-color 0.2s; }
.card:hover { border-color: var(--charcoal); }
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.48px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--charcoal); line-height: 1.50; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-bottom: 12px; letter-spacing: 0.5px; }
/* FORMS */
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--zapier-black); margin-bottom: 6px; }
.form-input {
width: 100%; background: var(--off-white); color: var(--zapier-black);
border: 1px solid var(--sand); padding: 10px 12px; border-radius: 5px;
font-family: var(--font-sans); font-size: 14px; outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--orange); }
.form-input--focus { border-color: var(--orange); }
.form-input--error { border-color: #ff4444; }
.form-textarea {
width: 100%; min-height: 80px; background: var(--off-white); color: var(--zapier-black);
border: 1px solid var(--sand); padding: 10px 12px; border-radius: 5px;
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
}
.form-state-label { font-size: 11px; color: var(--warm-gray); margin-top: 4px; }
/* SPACING */
.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(--zapier-black); border-radius: 3px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-size: 11px; font-weight: 500; color: var(--warm-gray); }
/* RADIUS */
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.radius-item { text-align: center; }
.radius-box { width: 64px; height: 64px; background: var(--zapier-black); margin-bottom: 6px; }
.radius-label { font-size: 11px; font-weight: 500; color: var(--warm-gray); }
.radius-context { font-size: 10px; color: var(--warm-gray); }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.elevation-card { background: var(--cream); border-radius: 5px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.elevation-desc { font-size: 11px; color: var(--warm-gray); }
/* FOOTER */
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--sand); font-size: 13px; color: var(--warm-gray); }
.footer a { color: var(--orange); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 40px; }
.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="#">Start Free</a>
</nav>
<div class="dark-badge">Dark Mode</div>
<section class="hero">
<h1>Design System<br>Inspired by Zapier</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="#">Get Started</a>
<a class="btn-ghost" href="#">View 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:#201515"></div><div class="color-swatch-info"><div class="color-swatch-name">Zapier Black</div><div class="color-swatch-hex">#201515</div><div class="color-swatch-role">Primary text, headings</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#fffefb"></div><div class="color-swatch-info"><div class="color-swatch-name">Cream White</div><div class="color-swatch-hex">#fffefb</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#fffdf9"></div><div class="color-swatch-info"><div class="color-swatch-name">Off White</div><div class="color-swatch-hex">#fffdf9</div><div class="color-swatch-role">Secondary surface</div></div></div>
</div>
<div class="color-group-label">Brand Accent</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff4f00"></div><div class="color-swatch-info"><div class="color-swatch-name">Zapier Orange</div><div class="color-swatch-hex">#ff4f00</div><div class="color-swatch-role">Primary CTA, active states</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:#36342e"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Charcoal</div><div class="color-swatch-hex">#36342e</div><div class="color-swatch-role">Secondary text, borders</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#939084"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray</div><div class="color-swatch-hex">#939084</div><div class="color-swatch-role">Muted text, labels</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#c5c0b1"></div><div class="color-swatch-info"><div class="color-swatch-name">Sand</div><div class="color-swatch-hex">#c5c0b1</div><div class="color-swatch-role">Borders, dividers</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#b5b2aa"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Warm</div><div class="color-swatch-hex">#b5b2aa</div><div class="color-swatch-role">Alternate borders</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#eceae3"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Sand</div><div class="color-swatch-hex">#eceae3</div><div class="color-swatch-role">Ghost button bg, surfaces</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:56px; font-weight:500; line-height:0.90;">Display Hero</div><div class="type-meta">Display Hero — 56px / 500 / 0.90 / Degular Display</div></div>
<div class="type-sample"><div style="font-family:var(--font-display); font-size:40px; font-weight:500; line-height:0.90;">Display Hero SM</div><div class="type-meta">Display Hero SM — 40px / 500 / 0.90 / Degular Display</div></div>
<div class="type-sample"><div style="font-size:48px; font-weight:500; line-height:1.04;">Section Heading</div><div class="type-meta">Section Heading — 48px / 500 / 1.04 / Inter</div></div>
<div class="type-sample"><div style="font-size:36px; font-weight:500; line-height:normal; letter-spacing:-1px;">Sub-heading Large</div><div class="type-meta">Sub-heading LG — 36px / 500 / normal / -1px / Inter</div></div>
<div class="type-sample"><div style="font-size:24px; font-weight:600; line-height:normal; letter-spacing:-0.48px;">Card Title</div><div class="type-meta">Card Title — 24px / 600 / normal / -0.48px / Inter</div></div>
<div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.40; letter-spacing:-0.2px;">Body Large — Automate your work across thousands of app integrations. Build powerful workflows in minutes.</div><div class="type-meta">Body Large — 20px / 400 / 1.40 / -0.2px / Inter</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.00;">Body Emphasis</div><div class="type-meta">Body Emphasis — 18px / 600 / 1.00 / Inter</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">Body Medium — Navigation and interface text</div><div class="type-meta">Body Medium — 16px / 500 / 1.25 / Inter</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.16;">Body Semibold — Active states</div><div class="type-meta">Body Semibold — 16px / 600 / 1.16 / Inter</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:normal;">Button Label</div><div class="type-meta">Button — 14px / 600 / normal / Inter</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.43;">Caption — Labels and metadata</div><div class="type-meta">Caption — 14px / 500 / 1.43 / Inter</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;">SECTION LABEL</div><div class="type-meta">Caption Upper — 14px / 600 / uppercase / 0.5px / Inter</div></div>
<div class="type-sample"><div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;">MICRO LABEL</div><div class="type-meta">Micro — 12px / 600 / uppercase / 0.5px / 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" style="margin-bottom:32px;">
<div class="button-item"><a class="btn-orange" href="#">Start Free</a><div class="button-label">Primary Orange</div></div>
<div class="button-item"><a class="btn-dark" href="#">Get Started</a><div class="button-label">Dark CTA</div></div>
<div class="button-item"><a class="btn-ghost" href="#">Learn More</a><div class="button-label">Ghost / Light</div></div>
<div class="button-item"><a class="btn-pill" href="#">Integrations</a><div class="button-label">Pill</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(240,236,230,0.3); color:#f0ece6; padding:8px 16px; border-radius:20px; font-size:14px; font-weight:500;">Play Video</span><div class="button-label">Overlay</div></div>
</div>
<div class="section-label" style="margin-top:32px;">Tab Navigation</div>
<div class="tab-row">
<div class="tab-item active">Overview</div>
<div class="tab-item">Integrations</div>
<div class="tab-item">Pricing</div>
<div class="tab-item">Enterprise</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,79,0,0.15); color:var(--orange);">Integration</div>
<h3>Connect Your Apps</h3>
<p>Link your favorite tools and automate workflows between them. No code required, set up in minutes.</p>
</div>
<div class="card" style="border-color: var(--charcoal);">
<div class="card-badge" style="background:rgba(240,236,230,0.1); color:var(--zapier-black);">Featured</div>
<h3>AI Automation</h3>
<p>Build intelligent workflows with AI-powered actions. Transform, summarize, and route data automatically.</p>
</div>
<div class="card">
<div class="card-badge" style="background:var(--light-sand); color:var(--charcoal);">Workflow</div>
<h3>Multi-step Zaps</h3>
<p>Chain multiple actions together for complex automations. Trigger once, automate everything downstream.</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">Zap Name</label><input class="form-input" type="text" placeholder="My automation"><div class="form-state-label">Default (sand border)</div></div>
<div class="form-group"><label class="form-label">Trigger App</label><input class="form-input form-input--focus" type="text" value="Gmail"><div class="form-state-label">Focus (orange border)</div></div>
<div class="form-group"><label class="form-label">Webhook URL</label><input class="form-input form-input--error" type="text" value="invalid-url"><div class="form-state-label">Error (red border)</div></div>
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your workflow..."></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 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:64px"></div><div class="spacing-value">64</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:3px"></div><div class="radius-label">3px</div><div class="radius-context">Spans</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Buttons</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:5px"></div><div class="radius-label">5px</div><div class="radius-context">Cards</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">Large 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">Social icons</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">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 &amp; Depth</h2>
<div class="elevation-grid">
<div class="elevation-card" style="border: 1px solid var(--light-sand);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No border emphasis</div></div>
<div class="elevation-card" style="border: 1px solid var(--sand);"><div class="elevation-label">Level 1: Sand Border</div><div class="elevation-desc">1px solid #c5c0b1</div></div>
<div class="elevation-card" style="border: 1px solid var(--charcoal);"><div class="elevation-label">Level 1b: Strong</div><div class="elevation-desc">1px solid #36342e</div></div>
<div class="elevation-card" style="border: 1px solid var(--sand); box-shadow: var(--shadow-tab-active);"><div class="elevation-label">Level 2: Active Tab</div><div class="elevation-desc">Inset orange underline</div></div>
<div class="elevation-card" style="border: 1px solid var(--sand); box-shadow: var(--shadow-tab-hover);"><div class="elevation-label">Level 2b: Hover Tab</div><div class="elevation-desc">Inset sand underline</div></div>
<div class="elevation-card" style="border: 2px solid var(--orange);"><div class="elevation-label">Focus</div><div class="elevation-desc">Orange focus ring</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://zapier.com/">zapier.com</a> DESIGN.md — awesome-design-md
</footer>
</body>
</html>

374
design-md/zapier/preview.html Normal file
View File

@@ -0,0 +1,374 @@
<!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: Zapier (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&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: 'Degular Display';
src: local('Degular Display');
font-weight: 500;
font-style: normal;
}
:root {
--zapier-black: #201515;
--cream: #fffefb;
--off-white: #fffdf9;
--charcoal: #36342e;
--warm-gray: #939084;
--sand: #c5c0b1;
--light-sand: #eceae3;
--mid-warm: #b5b2aa;
--orange: #ff4f00;
--shadow-tab-active: rgb(255, 79, 0) 0px -4px 0px 0px inset;
--shadow-tab-hover: rgb(197, 192, 177) 0px -4px 0px 0px inset;
--font-display: 'Degular Display', 'Inter', system-ui, -apple-system, sans-serif;
--font-sans: 'Inter', Helvetica, Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--cream);
color: var(--zapier-black);
font-family: var(--font-sans);
font-size: 16px; font-weight: 400; line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: rgba(255, 254, 251, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--sand);
}
.nav-brand { font-size: 14px; font-weight: 600; color: var(--zapier-black); text-decoration: none; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--zapier-black); }
.nav-cta {
display: inline-block; background: var(--orange); color: var(--cream);
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 600;
text-decoration: none; border: 1px solid var(--orange); transition: opacity 0.15s;
}
.nav-cta:hover { opacity: 0.9; }
/* HERO */
.hero { padding: 96px 32px 80px; text-align: center; }
.hero h1 {
font-family: var(--font-display);
font-size: 56px; font-weight: 500; line-height: 0.90;
color: var(--zapier-black); margin-bottom: 20px;
}
.hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--charcoal); max-width: 600px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-orange {
display: inline-block; background: var(--orange); color: var(--cream);
padding: 8px 16px; border-radius: 4px; border: 1px solid var(--orange);
font-family: var(--font-sans); font-size: 14px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.btn-orange:hover { opacity: 0.9; }
.btn-dark {
display: inline-block; background: var(--zapier-black); color: var(--cream);
padding: 20px 24px; border-radius: 8px; border: 1px solid var(--zapier-black);
font-family: var(--font-sans); font-size: 16px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: all 0.15s;
}
.btn-dark:hover { background: var(--sand); color: var(--zapier-black); }
.btn-ghost {
display: inline-block; background: var(--light-sand); color: var(--charcoal);
padding: 20px 24px; border-radius: 8px; border: 1px solid var(--sand);
font-family: var(--font-sans); font-size: 16px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: all 0.15s;
}
.btn-ghost:hover { background: var(--sand); color: var(--zapier-black); }
/* SECTIONS */
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
.section-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--warm-gray); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-title { font-size: 32px; font-weight: 500; line-height: 1.25; margin-bottom: 32px; }
.section-divider { border: none; border-top: 1px solid var(--sand); margin: 0; }
/* COLORS */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
.color-swatch { border-radius: 5px; overflow: hidden; border: 1px solid var(--sand); }
.color-swatch-block { height: 72px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; color: var(--warm-gray); font-family: var(--font-sans); }
.color-swatch-role { font-size: 11px; color: var(--warm-gray); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--light-sand); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-size: 12px; font-weight: 500; color: var(--warm-gray); margin-top: 8px; }
/* BUTTONS */
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.button-item { text-align: center; }
.button-label { font-size: 12px; font-weight: 500; color: var(--warm-gray); margin-top: 8px; }
.btn-pill {
display: inline-block; background: var(--cream); color: var(--charcoal);
padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 500;
text-decoration: none; border: 1px solid var(--sand);
}
/* TABS */
.tab-row { display: flex; gap: 0; border-bottom: 1px solid var(--sand); margin-bottom: 24px; }
.tab-item {
padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--charcoal);
cursor: pointer; transition: box-shadow 0.15s;
}
.tab-item:hover { box-shadow: var(--shadow-tab-hover); }
.tab-item.active { color: var(--zapier-black); box-shadow: var(--shadow-tab-active); }
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.card { background: var(--cream); border-radius: 5px; padding: 24px; border: 1px solid var(--sand); transition: border-color 0.2s; }
.card:hover { border-color: var(--charcoal); }
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.48px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--charcoal); line-height: 1.50; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-bottom: 12px; letter-spacing: 0.5px; }
/* FORMS */
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--zapier-black); margin-bottom: 6px; }
.form-input {
width: 100%; background: var(--cream); color: var(--zapier-black);
border: 1px solid var(--sand); padding: 10px 12px; border-radius: 5px;
font-family: var(--font-sans); font-size: 14px; outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--orange); }
.form-input--focus { border-color: var(--orange); }
.form-input--error { border-color: #d32f2f; }
.form-textarea {
width: 100%; min-height: 80px; background: var(--cream); color: var(--zapier-black);
border: 1px solid var(--sand); padding: 10px 12px; border-radius: 5px;
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
}
.form-state-label { font-size: 11px; color: var(--warm-gray); margin-top: 4px; }
/* SPACING */
.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(--zapier-black); border-radius: 3px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-size: 11px; font-weight: 500; color: var(--warm-gray); }
/* RADIUS */
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.radius-item { text-align: center; }
.radius-box { width: 64px; height: 64px; background: var(--zapier-black); margin-bottom: 6px; }
.radius-label { font-size: 11px; font-weight: 500; color: var(--warm-gray); }
.radius-context { font-size: 10px; color: var(--warm-gray); }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.elevation-card { background: var(--cream); border-radius: 5px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.elevation-desc { font-size: 11px; color: var(--warm-gray); }
/* FOOTER */
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--sand); font-size: 13px; color: var(--warm-gray); }
.footer a { color: var(--orange); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 40px; }
.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="#">Start Free</a>
</nav>
<section class="hero">
<h1>Design System<br>Inspired by Zapier</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="#">Get Started</a>
<a class="btn-ghost" href="#">View 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:#201515"></div><div class="color-swatch-info"><div class="color-swatch-name">Zapier Black</div><div class="color-swatch-hex">#201515</div><div class="color-swatch-role">Primary text, headings</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#fffefb; border-bottom:1px solid #c5c0b1"></div><div class="color-swatch-info"><div class="color-swatch-name">Cream White</div><div class="color-swatch-hex">#fffefb</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#fffdf9; border-bottom:1px solid #c5c0b1"></div><div class="color-swatch-info"><div class="color-swatch-name">Off White</div><div class="color-swatch-hex">#fffdf9</div><div class="color-swatch-role">Secondary surface</div></div></div>
</div>
<div class="color-group-label">Brand Accent</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff4f00"></div><div class="color-swatch-info"><div class="color-swatch-name">Zapier Orange</div><div class="color-swatch-hex">#ff4f00</div><div class="color-swatch-role">Primary CTA, active states</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:#36342e"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Charcoal</div><div class="color-swatch-hex">#36342e</div><div class="color-swatch-role">Secondary text, borders</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#939084"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Gray</div><div class="color-swatch-hex">#939084</div><div class="color-swatch-role">Muted text, labels</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#c5c0b1"></div><div class="color-swatch-info"><div class="color-swatch-name">Sand</div><div class="color-swatch-hex">#c5c0b1</div><div class="color-swatch-role">Borders, dividers</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#b5b2aa"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Warm</div><div class="color-swatch-hex">#b5b2aa</div><div class="color-swatch-role">Alternate borders</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#eceae3"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Sand</div><div class="color-swatch-hex">#eceae3</div><div class="color-swatch-role">Ghost button bg, surfaces</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:56px; font-weight:500; line-height:0.90;">Display Hero</div><div class="type-meta">Display Hero — 56px / 500 / 0.90 / Degular Display</div></div>
<div class="type-sample"><div style="font-family:var(--font-display); font-size:40px; font-weight:500; line-height:0.90;">Display Hero SM</div><div class="type-meta">Display Hero SM — 40px / 500 / 0.90 / Degular Display</div></div>
<div class="type-sample"><div style="font-size:48px; font-weight:500; line-height:1.04;">Section Heading</div><div class="type-meta">Section Heading — 48px / 500 / 1.04 / Inter</div></div>
<div class="type-sample"><div style="font-size:36px; font-weight:500; line-height:normal; letter-spacing:-1px;">Sub-heading Large</div><div class="type-meta">Sub-heading LG — 36px / 500 / normal / -1px / Inter</div></div>
<div class="type-sample"><div style="font-size:24px; font-weight:600; line-height:normal; letter-spacing:-0.48px;">Card Title</div><div class="type-meta">Card Title — 24px / 600 / normal / -0.48px / Inter</div></div>
<div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.40; letter-spacing:-0.2px;">Body Large — Automate your work across thousands of app integrations. Build powerful workflows in minutes.</div><div class="type-meta">Body Large — 20px / 400 / 1.40 / -0.2px / Inter</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.00;">Body Emphasis</div><div class="type-meta">Body Emphasis — 18px / 600 / 1.00 / Inter</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">Body Medium — Navigation and interface text</div><div class="type-meta">Body Medium — 16px / 500 / 1.25 / Inter</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.16;">Body Semibold — Active states</div><div class="type-meta">Body Semibold — 16px / 600 / 1.16 / Inter</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:normal;">Button Label</div><div class="type-meta">Button — 14px / 600 / normal / Inter</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.43;">Caption — Labels and metadata</div><div class="type-meta">Caption — 14px / 500 / 1.43 / Inter</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;">SECTION LABEL</div><div class="type-meta">Caption Upper — 14px / 600 / uppercase / 0.5px / Inter</div></div>
<div class="type-sample"><div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;">MICRO LABEL</div><div class="type-meta">Micro — 12px / 600 / uppercase / 0.5px / 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" style="margin-bottom:32px;">
<div class="button-item"><a class="btn-orange" href="#">Start Free</a><div class="button-label">Primary Orange</div></div>
<div class="button-item"><a class="btn-dark" href="#">Get Started</a><div class="button-label">Dark CTA</div></div>
<div class="button-item"><a class="btn-ghost" href="#">Learn More</a><div class="button-label">Ghost / Light</div></div>
<div class="button-item"><a class="btn-pill" href="#">Integrations</a><div class="button-label">Pill</div></div>
<div class="button-item"><span style="display:inline-block; background:rgba(45,45,46,0.5); color:#fffefb; padding:8px 16px; border-radius:20px; font-size:14px; font-weight:500;">Play Video</span><div class="button-label">Overlay</div></div>
</div>
<div class="section-label" style="margin-top:32px;">Tab Navigation</div>
<div class="tab-row">
<div class="tab-item active">Overview</div>
<div class="tab-item">Integrations</div>
<div class="tab-item">Pricing</div>
<div class="tab-item">Enterprise</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,79,0,0.1); color:var(--orange);">Integration</div>
<h3>Connect Your Apps</h3>
<p>Link your favorite tools and automate workflows between them. No code required, set up in minutes.</p>
</div>
<div class="card" style="border-color: var(--charcoal);">
<div class="card-badge" style="background:rgba(32,21,21,0.08); color:var(--zapier-black);">Featured</div>
<h3>AI Automation</h3>
<p>Build intelligent workflows with AI-powered actions. Transform, summarize, and route data automatically.</p>
</div>
<div class="card">
<div class="card-badge" style="background:var(--light-sand); color:var(--charcoal);">Workflow</div>
<h3>Multi-step Zaps</h3>
<p>Chain multiple actions together for complex automations. Trigger once, automate everything downstream.</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">Zap Name</label><input class="form-input" type="text" placeholder="My automation"><div class="form-state-label">Default (sand border)</div></div>
<div class="form-group"><label class="form-label">Trigger App</label><input class="form-input form-input--focus" type="text" value="Gmail"><div class="form-state-label">Focus (orange border)</div></div>
<div class="form-group"><label class="form-label">Webhook URL</label><input class="form-input form-input--error" type="text" value="invalid-url"><div class="form-state-label">Error (red border)</div></div>
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your workflow..."></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 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:64px"></div><div class="spacing-value">64</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:3px"></div><div class="radius-label">3px</div><div class="radius-context">Spans</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Buttons</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:5px"></div><div class="radius-label">5px</div><div class="radius-context">Cards</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">Large 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">Social icons</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">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 &amp; Depth</h2>
<div class="elevation-grid">
<div class="elevation-card" style="border: 1px solid var(--light-sand);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No border emphasis</div></div>
<div class="elevation-card" style="border: 1px solid var(--sand);"><div class="elevation-label">Level 1: Sand Border</div><div class="elevation-desc">1px solid #c5c0b1</div></div>
<div class="elevation-card" style="border: 1px solid var(--charcoal);"><div class="elevation-label">Level 1b: Strong</div><div class="elevation-desc">1px solid #36342e</div></div>
<div class="elevation-card" style="border: 1px solid var(--sand); box-shadow: var(--shadow-tab-active);"><div class="elevation-label">Level 2: Active Tab</div><div class="elevation-desc">Inset orange underline</div></div>
<div class="elevation-card" style="border: 1px solid var(--sand); box-shadow: var(--shadow-tab-hover);"><div class="elevation-label">Level 2b: Hover Tab</div><div class="elevation-desc">Inset sand underline</div></div>
<div class="elevation-card" style="border: 2px solid var(--orange);"><div class="elevation-label">Focus</div><div class="elevation-desc">Orange focus ring</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://zapier.com/">zapier.com</a> DESIGN.md — awesome-design-md
</footer>
</body>
</html>