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

309
design-md/cursor/DESIGN.md Normal file
View File

@@ -0,0 +1,309 @@
# Design System: Cursor
## 1. Visual Theme & Atmosphere
Cursor's website is a study in warm minimalism meets code-editor elegance. The entire experience is built on a warm off-white canvas (`#f2f1ed`) with dark warm-brown text (`#26251e`) -- not pure black, not neutral gray, but a deeply warm near-black with a yellowish undertone that evokes old paper, ink, and craft. This warmth permeates every surface: backgrounds lean toward cream (`#e6e5e0`, `#ebeae5`), borders dissolve into transparent warm overlays using `oklab` color space, and even the error state (`#cf2d56`) carries warmth rather than clinical red. The result feels more like a premium print publication than a tech website.
The custom CursorGothic font is the typographic signature -- a gothic sans-serif with aggressive negative letter-spacing at display sizes (-2.16px at 72px) that creates a compressed, engineered feel. As a secondary voice, the jjannon serif font (with OpenType `"cswh"` contextual swash alternates) provides literary counterpoint for body copy and editorial passages. The monospace voice comes from berkeleyMono, a refined coding font that connects the marketing site to Cursor's core identity as a code editor. This three-font system (gothic display, serif body, mono code) gives Cursor one of the most typographically rich palettes in developer tooling.
The border system is particularly distinctive -- Cursor uses `oklab()` color space for border colors, applying warm brown at various alpha levels (0.1, 0.2, 0.55) to create borders that feel organic rather than mechanical. The signature border color `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` is not a simple rgba value but a perceptually uniform color that maintains visual consistency across different backgrounds.
**Key Characteristics:**
- CursorGothic with aggressive negative letter-spacing (-2.16px at 72px, -0.72px at 36px) for compressed display headings
- jjannon serif for body text with OpenType `"cswh"` (contextual swash alternates)
- berkeleyMono for code and technical labels
- Warm off-white background (`#f2f1ed`) instead of pure white -- the entire system is warm-shifted
- Primary text color `#26251e` (warm near-black with yellow undertone)
- Accent orange `#f54e00` for brand highlight and links
- oklab-space borders at various alpha levels for perceptually uniform edge treatment
- Pill-shaped elements with extreme radius (33.5M px, effectively full-pill)
- 8px base spacing system with fine-grained sub-8px increments (1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px)
## 2. Color Palette & Roles
### Primary
- **Cursor Dark** (`#26251e`): Primary text, headings, dark UI surfaces. A warm near-black with distinct yellow-brown undertone -- the defining color of the system.
- **Cursor Cream** (`#f2f1ed`): Page background, primary surface. Not white but a warm cream that sets the entire warm tone.
- **Cursor Light** (`#e6e5e0`): Secondary surface, button backgrounds, card fills. A slightly warmer, slightly darker cream.
- **Pure White** (`#ffffff`): Used sparingly for maximum contrast elements and specific surface highlights.
- **True Black** (`#000000`): Minimal use, specific code/console contexts.
### Accent
- **Cursor Orange** (`#f54e00`): Brand accent, `--color-accent`. A vibrant red-orange used for primary CTAs, active links, and brand moments. Warm and urgent.
- **Gold** (`#c08532`): Secondary accent, warm gold for premium or highlighted contexts.
### Semantic
- **Error** (`#cf2d56`): `--color-error`. A warm crimson-rose rather than cold red.
- **Success** (`#1f8a65`): `--color-success`. A muted teal-green, warm-shifted.
### Timeline / Feature Colors
- **Thinking** (`#dfa88f`): Warm peach for "thinking" state in AI timeline.
- **Grep** (`#9fc9a2`): Soft sage green for search/grep operations.
- **Read** (`#9fbbe0`): Soft blue for file reading operations.
- **Edit** (`#c0a8dd`): Soft lavender for editing operations.
### Surface Scale
- **Surface 100** (`#f7f7f4`): Lightest button/card surface, barely tinted.
- **Surface 200** (`#f2f1ed`): Primary page background.
- **Surface 300** (`#ebeae5`): Button default background, subtle emphasis.
- **Surface 400** (`#e6e5e0`): Card backgrounds, secondary surfaces.
- **Surface 500** (`#e1e0db`): Tertiary button background, deeper emphasis.
### Border Colors
- **Border Primary** (`oklab(0.263084 -0.00230259 0.0124794 / 0.1)`): Standard border, 10% warm brown in oklab space.
- **Border Medium** (`oklab(0.263084 -0.00230259 0.0124794 / 0.2)`): Emphasized border, 20% warm brown.
- **Border Strong** (`rgba(38, 37, 30, 0.55)`): Strong borders, table rules.
- **Border Solid** (`#26251e`): Full-opacity dark border for maximum contrast.
- **Border Light** (`#f2f1ed`): Light border matching page background.
### Shadows & Depth
- **Card Shadow** (`rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px`): Heavy elevated card with warm oklab border ring.
- **Ambient Shadow** (`rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px`): Subtle ambient glow for floating elements.
## 3. Typography Rules
### Font Family
- **Display/Headlines**: `CursorGothic`, with fallbacks: `CursorGothic Fallback, system-ui, Helvetica Neue, Helvetica, Arial`
- **Body/Editorial**: `jjannon`, with fallbacks: `Iowan Old Style, Palatino Linotype, URW Palladio L, P052, ui-serif, Georgia, Cambria, Times New Roman, Times`
- **Code/Technical**: `berkeleyMono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
- **UI/System**: `system-ui`, with fallbacks: `-apple-system, Segoe UI, Helvetica Neue, Arial`
- **Icons**: `CursorIcons16` (icon font at 14px and 12px)
- **OpenType Features**: `"cswh"` on jjannon body text, `"ss09"` on CursorGothic buttons/captions
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | CursorGothic | 72px (4.50rem) | 400 | 1.10 (tight) | -2.16px | Maximum compression, hero statements |
| Section Heading | CursorGothic | 36px (2.25rem) | 400 | 1.20 (tight) | -0.72px | Feature sections, CTA headlines |
| Sub-heading | CursorGothic | 26px (1.63rem) | 400 | 1.25 (tight) | -0.325px | Card headings, sub-sections |
| Title Small | CursorGothic | 22px (1.38rem) | 400 | 1.30 (tight) | -0.11px | Smaller titles, list headings |
| Body Serif | jjannon | 19.2px (1.20rem) | 500 | 1.50 | normal | Editorial body with `"cswh"` |
| Body Serif SM | jjannon | 17.28px (1.08rem) | 400 | 1.35 | normal | Standard body text, descriptions |
| Body Sans | CursorGothic | 16px (1.00rem) | 400 | 1.50 | normal/0.08px | UI body text |
| Button Label | CursorGothic | 14px (0.88rem) | 400 | 1.00 (tight) | normal | Primary button text |
| Button Caption | CursorGothic | 14px (0.88rem) | 400 | 1.50 | 0.14px | Secondary button with `"ss09"` |
| Caption | CursorGothic | 11px (0.69rem) | 400-500 | 1.50 | normal | Small captions, metadata |
| System Heading | system-ui | 20px (1.25rem) | 700 | 1.55 | normal | System UI headings |
| System Caption | system-ui | 13px (0.81rem) | 500-600 | 1.33 | normal | System UI labels |
| System Micro | system-ui | 11px (0.69rem) | 500 | 1.27 (tight) | 0.048px | Uppercase micro labels |
| Mono Body | berkeleyMono | 12px (0.75rem) | 400 | 1.67 (relaxed) | normal | Code blocks |
| Mono Small | berkeleyMono | 11px (0.69rem) | 400 | 1.33 | -0.275px | Inline code, terminal |
| Lato Heading | Lato | 16px (1.00rem) | 600 | 1.33 | normal | Lato section headings |
| Lato Caption | Lato | 14px (0.88rem) | 400-600 | 1.33 | normal | Lato captions |
| Lato Micro | Lato | 12px (0.75rem) | 400-600 | 1.27 (tight) | 0.053px | Lato small labels |
### Principles
- **Gothic compression for impact**: CursorGothic at display sizes uses -2.16px letter-spacing at 72px, progressively relaxing: -0.72px at 36px, -0.325px at 26px, -0.11px at 22px, normal at 16px and below. The tracking creates a sense of precision engineering.
- **Serif for soul**: jjannon provides literary warmth. The `"cswh"` feature adds contextual swash alternates that give body text a calligraphic quality.
- **Three typographic voices**: Gothic (display/UI), serif (editorial/body), mono (code/technical). Each serves a distinct communication purpose.
- **Weight restraint**: CursorGothic uses weight 400 almost exclusively, relying on size and tracking for hierarchy rather than weight. System-ui components use 500-700 for functional emphasis.
## 4. Component Stylings
### Buttons
**Primary (Warm Surface)**
- Background: `#ebeae5` (Surface 300)
- Text: `#26251e` (Cursor Dark)
- Padding: 10px 12px 10px 14px
- Radius: 8px
- Outline: none
- Hover: text shifts to `var(--color-error)` (`#cf2d56`)
- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`
- Use: Primary actions, main CTAs
**Secondary Pill**
- Background: `#e6e5e0` (Surface 400)
- Text: `oklab(0.263 / 0.6)` (60% warm brown)
- Padding: 3px 8px
- Radius: full pill (33.5M px)
- Hover: text shifts to `var(--color-error)`
- Use: Tags, filters, secondary actions
**Tertiary Pill**
- Background: `#e1e0db` (Surface 500)
- Text: `oklab(0.263 / 0.6)` (60% warm brown)
- Radius: full pill
- Use: Active filter state, selected tags
**Ghost (Transparent)**
- Background: `rgba(38, 37, 30, 0.06)` (6% warm brown)
- Text: `rgba(38, 37, 30, 0.55)` (55% warm brown)
- Padding: 6px 12px
- Use: Tertiary actions, dismiss buttons
**Light Surface**
- Background: `#f7f7f4` (Surface 100) or `#f2f1ed` (Surface 200)
- Text: `#26251e` or `oklab(0.263 / 0.9)` (90%)
- Padding: 0px 8px 1px 12px
- Use: Dropdown triggers, subtle interactive elements
### Cards & Containers
- Background: `#e6e5e0` or `#f2f1ed`
- Border: `1px solid oklab(0.263 / 0.1)` (warm brown at 10%)
- Radius: 8px (standard), 4px (compact), 10px (featured)
- Shadow: `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px` for elevated cards
- Hover: shadow intensification
### Inputs & Forms
- Background: transparent or surface
- Text: `#26251e`
- Padding: 8px 8px 6px (textarea)
- Border: `1px solid oklab(0.263 / 0.1)`
- Focus: border shifts to `oklab(0.263 / 0.2)` or accent orange
### Navigation
- Clean horizontal nav on warm cream background
- Cursor logotype left-aligned (~96x24px)
- Links: 14px CursorGothic or system-ui, weight 500
- CTA button: warm surface with Cursor Dark text
- Tab navigation: bottom border `1px solid oklab(0.263 / 0.1)` with active tab differentiation
### Image Treatment
- Code editor screenshots with `1px solid oklab(0.263 / 0.1)` border
- Rounded corners: 8px standard
- AI chat/timeline screenshots dominate feature sections
- Warm gradient or solid cream backgrounds behind hero images
### Distinctive Components
**AI Timeline**
- Vertical timeline showing AI operations: thinking (peach), grep (sage), read (blue), edit (lavender)
- Each step uses its semantic color with matching text
- Connected with vertical lines
- Core visual metaphor for Cursor's AI-first coding experience
**Code Editor Previews**
- Dark code editor screenshots with warm cream border frame
- berkeleyMono for code text
- Syntax highlighting using timeline colors
**Pricing Cards**
- Warm surface backgrounds with bordered containers
- Feature lists using jjannon serif for readability
- CTA buttons with accent orange or primary dark styling
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Fine scale: 1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px (sub-8px for micro-adjustments)
- Standard scale: 8px, 10px, 12px, 14px (derived from extraction)
- Extended scale (inferred): 16px, 24px, 32px, 48px, 64px, 96px
- Notable: fine-grained sub-8px increments for precise icon/text alignment
### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single-column with generous top padding (80-120px)
- Feature sections: 2-3 column grids for cards and features
- Full-width sections with warm cream or slightly darker backgrounds
- Sidebar layouts for documentation and settings pages
### Whitespace Philosophy
- **Warm negative space**: The cream background means whitespace has warmth and texture, unlike cold white minimalism. Large empty areas feel cozy rather than clinical.
- **Compressed text, open layout**: Aggressive negative letter-spacing on CursorGothic headlines is balanced by generous surrounding margins. Text is dense; space around it breathes.
- **Section variation**: Alternating surface tones (cream → lighter cream → cream) create subtle section differentiation without harsh boundaries.
### Border Radius Scale
- Micro (1.5px): Fine detail elements
- Small (2px): Inline elements, code spans
- Medium (3px): Small containers, inline badges
- Standard (4px): Cards, images, compact buttons
- Comfortable (8px): Primary buttons, cards, menus
- Featured (10px): Larger containers, featured cards
- Full Pill (33.5M px / 9999px): Pill buttons, tags, badges
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Border Ring (Level 1) | `oklab(0.263 / 0.1) 0px 0px 0px 1px` | Standard card/container border (warm oklab) |
| Border Medium (Level 1b) | `oklab(0.263 / 0.2) 0px 0px 0px 1px` | Emphasized borders, active states |
| Ambient (Level 2) | `rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px` | Floating elements, subtle glow |
| Elevated Card (Level 3) | `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab ring` | Modals, popovers, elevated cards |
| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` on button focus | Interactive focus feedback |
**Shadow Philosophy**: Cursor's depth system is built around two ideas. First, borders use perceptually uniform oklab color space rather than rgba, ensuring warm brown borders look consistent across different background tones. Second, elevation shadows use dramatically large blur values (28px, 70px) with moderate opacity (0.14, 0.1), creating a diffused, atmospheric lift rather than hard-edged drop shadows. Cards don't feel like they float above the page -- they feel like the page has gently opened a space for them.
### Decorative Depth
- Warm cream surface variations create subtle tonal depth without shadows
- oklab borders at 10% and 20% create a spectrum of edge definition
- No harsh divider lines -- section separation through background tone shifts and spacing
## 7. Interaction & Motion
### Hover States
- Buttons: text color shifts to `--color-error` (`#cf2d56`) on hover -- a distinctive warm crimson that signals interactivity
- Links: color shift to accent orange (`#f54e00`) or underline decoration with `rgba(38, 37, 30, 0.4)`
- Cards: shadow intensification on hover (ambient → elevated)
### Focus States
- Shadow-based focus: `rgba(0,0,0,0.1) 0px 4px 12px` for depth-based focus indication
- Border focus: `oklab(0.263 / 0.2)` (20% border) for input/form focus
- Consistent warm tone in all focus states -- no cold blue focus rings
### Transitions
- Color transitions: 150ms ease for text/background color changes
- Shadow transitions: 200ms ease for elevation changes
- Transform: subtle scale or translate for interactive feedback
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced padding, stacked navigation |
| Tablet Small | 600-768px | 2-column grids begin |
| Tablet | 768-900px | Expanded card grids, sidebar appears |
| Desktop Small | 900-1279px | Full layout forming |
| Desktop | >1279px | Full layout, maximum content width |
### Touch Targets
- Buttons use comfortable padding (6px-14px vertical, 8px-14px horizontal)
- Pill buttons maintain tap-friendly sizing with 3px-10px padding
- Navigation links at 14px with adequate spacing for touch
### Collapsing Strategy
- Hero: 72px CursorGothic → 36px → 26px on smaller screens, maintaining proportional letter-spacing
- Navigation: horizontal links → hamburger menu on mobile
- Feature cards: 3-column → 2-column → single column stacked
- Code editor screenshots: maintain aspect ratio, may shrink with border treatment preserved
- Timeline visualization: horizontal → vertical stacking
- Section spacing: 80px+ → 48px → 32px on mobile
### Image Behavior
- Editor screenshots maintain warm border treatment at all sizes
- AI timeline adapts from horizontal to vertical layout
- Product screenshots use responsive images with consistent border radius
- Full-width hero images scale proportionally
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary CTA background: `#ebeae5` (warm cream button)
- Page background: `#f2f1ed` (warm off-white)
- Text color: `#26251e` (warm near-black)
- Secondary text: `rgba(38, 37, 30, 0.55)` (55% warm brown)
- Accent: `#f54e00` (orange)
- Error/hover: `#cf2d56` (warm crimson)
- Success: `#1f8a65` (muted teal)
- Border: `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` or `rgba(38, 37, 30, 0.1)` as fallback
### Example Component Prompts
- "Create a hero section on `#f2f1ed` warm cream background. Headline at 72px CursorGothic weight 400, line-height 1.10, letter-spacing -2.16px, color `#26251e`. Subtitle at 17.28px jjannon weight 400, line-height 1.35, color `rgba(38,37,30,0.55)`. Primary CTA button (`#ebeae5` bg, 8px radius, 10px 14px padding) with hover text shift to `#cf2d56`."
- "Design a card: `#e6e5e0` background, border `1px solid rgba(38,37,30,0.1)`. Radius 8px. Title at 22px CursorGothic weight 400, letter-spacing -0.11px. Body at 17.28px jjannon weight 400, color `rgba(38,37,30,0.55)`. Use `#f54e00` for link accents."
- "Build a pill tag: `#e6e5e0` background, `rgba(38,37,30,0.6)` text, full-pill radius (9999px), 3px 8px padding, 14px CursorGothic weight 400."
- "Create navigation: sticky `#f2f1ed` background with backdrop-filter blur. 14px system-ui weight 500 for links, `#26251e` text. CTA button right-aligned with `#ebeae5` bg and 8px radius. Bottom border `1px solid rgba(38,37,30,0.1)`."
- "Design an AI timeline showing four steps: Thinking (`#dfa88f`), Grep (`#9fc9a2`), Read (`#9fbbe0`), Edit (`#c0a8dd`). Each step: 14px system-ui label + 16px CursorGothic description + vertical connecting line in `rgba(38,37,30,0.1)`."
### Iteration Guide
1. Always use warm tones -- `#f2f1ed` background, `#26251e` text, never pure white/black for primary surfaces
2. Letter-spacing scales with font size for CursorGothic: -2.16px at 72px, -0.72px at 36px, -0.325px at 26px, normal at 16px
3. Use `rgba(38, 37, 30, alpha)` as a CSS-compatible fallback for oklab borders
4. Three fonts, three voices: CursorGothic (display/UI), jjannon (editorial), berkeleyMono (code)
5. Pill shapes (9999px radius) for tags and filters; 8px radius for primary buttons and cards
6. Hover states use `#cf2d56` text color -- the warm crimson shift is a signature interaction
7. Shadows use large blur values (28px, 70px) for diffused atmospheric depth
8. The sub-8px spacing scale (1.5, 2, 2.5, 3, 4, 5, 6px) is critical for icon/text micro-alignment

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

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

395
design-md/cursor/preview-dark.html Normal file
View File

@@ -0,0 +1,395 @@
<!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: Cursor (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=Lato:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet">
<style>
:root {
--cursor-dark: #e6e5e0;
--cursor-cream: #1a1915;
--cursor-light: #2a2922;
--surface-100: #1e1d17;
--surface-200: #1a1915;
--surface-300: #2a2922;
--surface-400: #33322a;
--surface-500: #3d3c33;
--white: #111110;
--black: #f2f1ed;
--accent: #f54e00;
--error: #e04a6f;
--success: #2fba8a;
--gold: #d9a04a;
--thinking: #a06b50;
--grep: #5a9e5e;
--read: #5a8ab8;
--edit: #8a6fb8;
--text-primary: #e6e5e0;
--text-secondary: rgba(230, 229, 224, 0.55);
--text-tertiary: rgba(230, 229, 224, 0.35);
--border-default: rgba(230, 229, 224, 0.1);
--border-medium: rgba(230, 229, 224, 0.2);
--border-strong: rgba(230, 229, 224, 0.55);
--shadow-card: rgba(0,0,0,0.4) 0px 28px 70px 0px, rgba(0,0,0,0.3) 0px 14px 32px 0px, rgba(230,229,224,0.08) 0px 0px 0px 1px;
--shadow-ambient: rgba(0,0,0,0.1) 0px 0px 16px 0px, rgba(0,0,0,0.05) 0px 0px 8px 0px;
--shadow-focus: rgba(245,78,0,0.3) 0px 4px 12px;
--font-gothic: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, Cambria, 'Times New Roman', Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-ui: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--cursor-cream);
color: var(--text-primary);
font-family: var(--font-gothic);
font-size: 16px; font-weight: 400; line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
/* DARK MODE BADGE */
.dark-badge {
position: fixed; top: 12px; right: 12px; z-index: 200;
background: var(--accent); color: #ffffff;
padding: 4px 12px; border-radius: 9999px;
font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
}
/* NAV */
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: rgba(26, 25, 21, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-default);
}
.nav-brand { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--accent); }
.nav-cta {
display: inline-block; background: var(--surface-300); color: var(--text-primary);
padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500;
text-decoration: none; transition: all 0.15s;
}
.nav-cta:hover { background: var(--surface-500); }
/* HERO */
.hero { padding: 96px 32px 80px; text-align: center; }
.hero h1 {
font-size: 72px; font-weight: 400; line-height: 1.10;
letter-spacing: -2.16px; color: var(--text-primary); margin-bottom: 16px;
}
.hero p { font-family: var(--font-serif); font-size: 19.2px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
display: inline-block; background: var(--surface-300); color: var(--text-primary);
padding: 10px 14px 10px 14px; border-radius: 8px; border: none;
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
text-decoration: none; cursor: pointer; transition: all 0.15s;
}
.btn-primary:hover { color: var(--error); }
.btn-dark {
display: inline-block; background: var(--text-primary); color: var(--cursor-cream);
padding: 10px 20px; border-radius: 8px; border: none;
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.btn-dark:hover { opacity: 0.85; }
.btn-ghost {
display: inline-block; background: rgba(230,229,224,0.06); color: var(--text-secondary);
padding: 6px 12px; border-radius: 8px; border: none;
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
text-decoration: none; cursor: pointer; transition: color 0.15s;
}
.btn-ghost:hover { color: var(--error); }
.btn-pill {
display: inline-block; background: var(--surface-400); color: rgba(230,229,224,0.6);
padding: 3px 8px; border-radius: 9999px; font-size: 14px; font-weight: 400;
text-decoration: none; transition: color 0.15s;
}
.btn-pill:hover { color: var(--error); }
/* SECTIONS */
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-title { font-size: 36px; font-weight: 400; line-height: 1.20; letter-spacing: -0.72px; margin-bottom: 32px; }
.section-divider { border: none; border-top: 1px solid var(--border-default); 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: 8px; overflow: hidden; border: 1px solid var(--border-default); background: var(--white); }
.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; letter-spacing: -0.26px; }
.color-swatch-hex { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
.color-swatch-role { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.28px; margin: 24px 0 10px; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-default); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); 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(--text-tertiary); margin-top: 8px; }
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.card { background: var(--surface-300); border-radius: 8px; padding: 24px; border: 1px solid var(--border-default); transition: box-shadow 0.2s; }
.card:hover { box-shadow: var(--shadow-card); }
.card h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.11px; margin-bottom: 8px; }
.card p { font-family: var(--font-serif); font-size: 17.28px; color: var(--text-secondary); line-height: 1.35; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
/* FORMS */
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.form-input {
width: 100%; background: var(--surface-300); color: var(--text-primary);
border: 1px solid var(--border-default); padding: 8px 8px 6px; border-radius: 4px;
font-family: var(--font-gothic); font-size: 14px; outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--accent); }
.form-input--focus { border-color: var(--accent); }
.form-input--error { border-color: var(--error); }
.form-textarea {
width: 100%; min-height: 80px; background: var(--surface-300); color: var(--text-primary);
border: 1px solid var(--border-default); padding: 8px; border-radius: 4px;
font-family: var(--font-gothic); font-size: 14px; resize: vertical; outline: none;
}
.form-state-label { font-size: 11px; color: var(--text-tertiary); 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(--text-primary); border-radius: 3px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
/* 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(--text-primary); margin-bottom: 6px; }
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.radius-context { font-size: 10px; color: var(--text-tertiary); }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.elevation-card { background: var(--surface-300); border-radius: 8px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; margin-bottom: 4px; }
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
/* FOOTER */
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-default); font-family: var(--font-serif); font-size: 14px; color: var(--text-secondary); }
.footer a { color: var(--accent); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 36px; letter-spacing: -0.72px; }
.nav-links { display: none; }
.section { padding: 48px 20px; }
.card-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="dark-badge">Dark Mode</div>
<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="#">Download Editor</a>
</nav>
<section class="hero">
<h1>Design System<br>Inspired by Cursor</h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in warm dark tones.</p>
<div class="hero-buttons">
<a class="btn-dark" href="#">Download Cursor</a>
<a class="btn-primary" 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:#26251e"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Dark</div><div class="color-swatch-hex">#26251e</div><div class="color-swatch-role">Primary text, headings</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f1ed"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Cream</div><div class="color-swatch-hex">#f2f1ed</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6e5e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Light</div><div class="color-swatch-hex">#e6e5e0</div><div class="color-swatch-role">Secondary surface</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">Card surfaces</div></div></div>
</div>
<div class="color-group-label">Accent & Semantic</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#f54e00"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Orange</div><div class="color-swatch-hex">#f54e00</div><div class="color-swatch-role">Brand accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#c08532"></div><div class="color-swatch-info"><div class="color-swatch-name">Gold</div><div class="color-swatch-hex">#c08532</div><div class="color-swatch-role">Secondary accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#cf2d56"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#cf2d56</div><div class="color-swatch-role">Error, hover state</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#1f8a65"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#1f8a65</div><div class="color-swatch-role">Success state</div></div></div>
</div>
<div class="color-group-label">AI Timeline Colors</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#dfa88f"></div><div class="color-swatch-info"><div class="color-swatch-name">Thinking</div><div class="color-swatch-hex">#dfa88f</div><div class="color-swatch-role">AI thinking state</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fc9a2"></div><div class="color-swatch-info"><div class="color-swatch-name">Grep</div><div class="color-swatch-hex">#9fc9a2</div><div class="color-swatch-role">Search operations</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fbbe0"></div><div class="color-swatch-info"><div class="color-swatch-name">Read</div><div class="color-swatch-hex">#9fbbe0</div><div class="color-swatch-role">File reading</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#c0a8dd"></div><div class="color-swatch-info"><div class="color-swatch-name">Edit</div><div class="color-swatch-hex">#c0a8dd</div><div class="color-swatch-role">Code editing</div></div></div>
</div>
<div class="color-group-label">Surface Scale</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f7f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 100</div><div class="color-swatch-hex">#f7f7f4</div><div class="color-swatch-role">Lightest surface</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f1ed"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 200</div><div class="color-swatch-hex">#f2f1ed</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ebeae5"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 300</div><div class="color-swatch-hex">#ebeae5</div><div class="color-swatch-role">Button default</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6e5e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 400</div><div class="color-swatch-hex">#e6e5e0</div><div class="color-swatch-role">Card backgrounds</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e1e0db"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 500</div><div class="color-swatch-hex">#e1e0db</div><div class="color-swatch-role">Active/pressed</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:72px; font-weight:400; line-height:1.10; letter-spacing:-2.16px;">Display Hero</div><div class="type-meta">Display Hero -- 72px / 400 / 1.10 / -2.16px / CursorGothic</div></div>
<div class="type-sample"><div style="font-size:36px; font-weight:400; line-height:1.20; letter-spacing:-0.72px;">Section Heading</div><div class="type-meta">Section Heading -- 36px / 400 / 1.20 / -0.72px / CursorGothic</div></div>
<div class="type-sample"><div style="font-size:26px; font-weight:400; line-height:1.25; letter-spacing:-0.325px;">Sub-heading</div><div class="type-meta">Sub-heading -- 26px / 400 / 1.25 / -0.325px / CursorGothic</div></div>
<div class="type-sample"><div style="font-size:22px; font-weight:400; line-height:1.30; letter-spacing:-0.11px;">Title Small</div><div class="type-meta">Title Small -- 22px / 400 / 1.30 / -0.11px / CursorGothic</div></div>
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:19.2px; font-weight:500; line-height:1.50;">Body Serif -- The AI-first code editor that helps you build software faster with intelligent assistance.</div><div class="type-meta">Body Serif -- 19.2px / 500 / 1.50 / jjannon (with cswh)</div></div>
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:17.28px; font-weight:400; line-height:1.35;">Body Serif Small -- Write code naturally with AI that understands your entire codebase.</div><div class="type-meta">Body Serif SM -- 17.28px / 400 / 1.35 / jjannon</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body Sans -- Standard UI text for navigation and interface elements</div><div class="type-meta">Body Sans -- 16px / 400 / 1.50 / CursorGothic</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.00;">Button Label</div><div class="type-meta">Button Label -- 14px / 400 / 1.00 / CursorGothic</div></div>
<div class="type-sample"><div style="font-size:11px; font-weight:500; line-height:1.50;">Caption -- Small metadata and labels</div><div class="type-meta">Caption -- 11px / 500 / 1.50 / CursorGothic</div></div>
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.67;">const editor = await cursor.init({ ai: true });</div><div class="type-meta">Mono Body -- 12px / 400 / 1.67 / berkeleyMono</div></div>
<div class="type-sample"><div style="font-family:var(--font-ui); font-size:11px; font-weight:500; line-height:1.27; text-transform:uppercase; letter-spacing:0.048px;">AI OPERATIONS</div><div class="type-meta">System Micro -- 11px / 500 / uppercase / system-ui</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="#">Download Cursor</a><div class="button-label">Primary Dark</div></div>
<div class="button-item"><a class="btn-primary" href="#">Documentation</a><div class="button-label">Primary Surface</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"><a class="btn-pill" href="#">AI-First</a><div class="button-label">Pill Tag</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--thinking); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Thinking</span><div class="button-label">Timeline Pill</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--grep); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Grep</span><div class="button-label">Timeline Pill</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--read); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Read</span><div class="button-label">Timeline Pill</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--edit); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Edit</span><div class="button-label">Timeline Pill</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(245,78,0,0.15); color:var(--accent);">AI</div>
<h3>Tab Autocomplete</h3>
<p>Cursor predicts your next edit and suggests multi-line changes. Accept with a single tab press for flow-state coding.</p>
</div>
<div class="card" style="box-shadow: var(--shadow-card);">
<div class="card-badge" style="background:rgba(90,138,184,0.2); color:#9fbbe0;">Elevated</div>
<h3>Chat with Codebase</h3>
<p>Ask questions about your entire repository. Cursor understands project structure, dependencies, and conventions.</p>
</div>
<div class="card">
<div class="card-badge" style="background:rgba(138,111,184,0.2); color:#c0a8dd;">Agent</div>
<h3>Agentic Editing</h3>
<p>Describe what you want in natural language. Cursor's agent mode makes multi-file changes across your codebase.</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">Project Name</label><input class="form-input" type="text" placeholder="my-cursor-project"><div class="form-state-label">Default (warm border)</div></div>
<div class="form-group"><label class="form-label">Repository</label><input class="form-input form-input--focus" type="text" value="cursor/editor"><div class="form-state-label">Focus (accent orange)</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 (warm crimson)</div></div>
<div class="form-group"><label class="form-label">Instructions</label><textarea class="form-textarea" placeholder="Describe the changes you want..."></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:3px"></div><div class="spacing-value">3</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:5px"></div><div class="spacing-value">5</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:6px"></div><div class="spacing-value">6</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:10px"></div><div class="spacing-value">10</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:48px"></div><div class="spacing-value">48</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:1.5px"></div><div class="radius-label">1.5px</div><div class="radius-context">Micro</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Inline</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:3px"></div><div class="radius-label">3px</div><div class="radius-context">Small</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">Cards, 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">Buttons, cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div><div class="radius-context">Featured</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></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 &amp; Depth</h2>
<div class="elevation-grid">
<div class="elevation-card" style="border: 1px solid var(--border-default);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
<div class="elevation-card" style="box-shadow: rgba(230,229,224,0.1) 0px 0px 0px 1px;"><div class="elevation-label">Level 1: Border Ring</div><div class="elevation-desc">oklab warm border</div></div>
<div class="elevation-card" style="box-shadow: rgba(230,229,224,0.2) 0px 0px 0px 1px;"><div class="elevation-label">Level 1b: Medium</div><div class="elevation-desc">Emphasized border</div></div>
<div class="elevation-card" style="box-shadow: var(--shadow-ambient);"><div class="elevation-label">Level 2: Ambient</div><div class="elevation-desc">Subtle glow</div></div>
<div class="elevation-card" style="box-shadow: var(--shadow-card);"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Modal / popover</div></div>
<div class="elevation-card" style="box-shadow: var(--shadow-focus);"><div class="elevation-label">Focus</div><div class="elevation-desc">Interactive focus</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://cursor.com/">cursor.com</a> DESIGN.md -- awesome-design-md
</footer>
</body>
</html>

385
design-md/cursor/preview.html Normal file
View File

@@ -0,0 +1,385 @@
<!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: Cursor (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=Lato:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet">
<style>
:root {
--cursor-dark: #26251e;
--cursor-cream: #f2f1ed;
--cursor-light: #e6e5e0;
--surface-100: #f7f7f4;
--surface-200: #f2f1ed;
--surface-300: #ebeae5;
--surface-400: #e6e5e0;
--surface-500: #e1e0db;
--white: #ffffff;
--black: #000000;
--accent: #f54e00;
--error: #cf2d56;
--success: #1f8a65;
--gold: #c08532;
--thinking: #dfa88f;
--grep: #9fc9a2;
--read: #9fbbe0;
--edit: #c0a8dd;
--text-primary: #26251e;
--text-secondary: rgba(38, 37, 30, 0.55);
--text-tertiary: rgba(38, 37, 30, 0.4);
--border-default: rgba(38, 37, 30, 0.1);
--border-medium: rgba(38, 37, 30, 0.2);
--border-strong: rgba(38, 37, 30, 0.55);
--shadow-card: rgba(0,0,0,0.14) 0px 28px 70px 0px, rgba(0,0,0,0.1) 0px 14px 32px 0px, rgba(38,37,30,0.1) 0px 0px 0px 1px;
--shadow-ambient: rgba(0,0,0,0.02) 0px 0px 16px 0px, rgba(0,0,0,0.008) 0px 0px 8px 0px;
--shadow-focus: rgba(0,0,0,0.1) 0px 4px 12px;
--font-gothic: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, Cambria, 'Times New Roman', Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-ui: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--cursor-cream);
color: var(--text-primary);
font-family: var(--font-gothic);
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(242, 241, 237, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-default);
}
.nav-brand { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--accent); }
.nav-cta {
display: inline-block; background: var(--surface-300); color: var(--text-primary);
padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500;
text-decoration: none; transition: all 0.15s;
}
.nav-cta:hover { background: var(--surface-500); }
/* HERO */
.hero { padding: 96px 32px 80px; text-align: center; }
.hero h1 {
font-size: 72px; font-weight: 400; line-height: 1.10;
letter-spacing: -2.16px; color: var(--text-primary); margin-bottom: 16px;
}
.hero p { font-family: var(--font-serif); font-size: 19.2px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
display: inline-block; background: var(--surface-300); color: var(--text-primary);
padding: 10px 14px 10px 14px; border-radius: 8px; border: none;
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
text-decoration: none; cursor: pointer; transition: all 0.15s;
}
.btn-primary:hover { color: var(--error); }
.btn-dark {
display: inline-block; background: var(--cursor-dark); color: var(--cursor-cream);
padding: 10px 20px; border-radius: 8px; border: none;
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.btn-dark:hover { opacity: 0.85; }
.btn-ghost {
display: inline-block; background: rgba(38,37,30,0.06); color: var(--text-secondary);
padding: 6px 12px; border-radius: 8px; border: none;
font-family: var(--font-gothic); font-size: 14px; font-weight: 400;
text-decoration: none; cursor: pointer; transition: color 0.15s;
}
.btn-ghost:hover { color: var(--error); }
.btn-pill {
display: inline-block; background: var(--surface-400); color: rgba(38,37,30,0.6);
padding: 3px 8px; border-radius: 9999px; font-size: 14px; font-weight: 400;
text-decoration: none; transition: color 0.15s;
}
.btn-pill:hover { color: var(--error); }
/* SECTIONS */
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-title { font-size: 36px; font-weight: 400; line-height: 1.20; letter-spacing: -0.72px; margin-bottom: 32px; }
.section-divider { border: none; border-top: 1px solid var(--border-default); 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: 8px; overflow: hidden; border: 1px solid var(--border-default); background: var(--white); }
.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; letter-spacing: -0.26px; }
.color-swatch-hex { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
.color-swatch-role { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.28px; margin: 24px 0 10px; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-default); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); 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(--text-tertiary); margin-top: 8px; }
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.card { background: var(--white); border-radius: 8px; padding: 24px; border: 1px solid var(--border-default); transition: box-shadow 0.2s; }
.card:hover { box-shadow: var(--shadow-card); }
.card h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.11px; margin-bottom: 8px; }
.card p { font-family: var(--font-serif); font-size: 17.28px; color: var(--text-secondary); line-height: 1.35; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
/* FORMS */
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.form-input {
width: 100%; background: var(--white); color: var(--text-primary);
border: 1px solid var(--border-default); padding: 8px 8px 6px; border-radius: 4px;
font-family: var(--font-gothic); font-size: 14px; outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--accent); }
.form-input--focus { border-color: var(--accent); }
.form-input--error { border-color: var(--error); }
.form-textarea {
width: 100%; min-height: 80px; background: var(--white); color: var(--text-primary);
border: 1px solid var(--border-default); padding: 8px; border-radius: 4px;
font-family: var(--font-gothic); font-size: 14px; resize: vertical; outline: none;
}
.form-state-label { font-size: 11px; color: var(--text-tertiary); 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(--cursor-dark); border-radius: 3px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
/* 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(--cursor-dark); margin-bottom: 6px; }
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.radius-context { font-size: 10px; color: var(--text-tertiary); }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.elevation-card { background: var(--white); border-radius: 8px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; margin-bottom: 4px; }
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
/* FOOTER */
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-default); font-family: var(--font-serif); font-size: 14px; color: var(--text-secondary); }
.footer a { color: var(--accent); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 36px; letter-spacing: -0.72px; }
.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="#">Download Editor</a>
</nav>
<section class="hero">
<h1>Design System<br>Inspired by Cursor</h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in warm cream tones.</p>
<div class="hero-buttons">
<a class="btn-dark" href="#">Download Cursor</a>
<a class="btn-primary" 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:#26251e"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Dark</div><div class="color-swatch-hex">#26251e</div><div class="color-swatch-role">Primary text, headings</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f1ed"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Cream</div><div class="color-swatch-hex">#f2f1ed</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6e5e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Light</div><div class="color-swatch-hex">#e6e5e0</div><div class="color-swatch-role">Secondary surface</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid rgba(38,37,30,0.1)"></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">Card surfaces</div></div></div>
</div>
<div class="color-group-label">Accent & Semantic</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#f54e00"></div><div class="color-swatch-info"><div class="color-swatch-name">Cursor Orange</div><div class="color-swatch-hex">#f54e00</div><div class="color-swatch-role">Brand accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#c08532"></div><div class="color-swatch-info"><div class="color-swatch-name">Gold</div><div class="color-swatch-hex">#c08532</div><div class="color-swatch-role">Secondary accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#cf2d56"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#cf2d56</div><div class="color-swatch-role">Error, hover state</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#1f8a65"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#1f8a65</div><div class="color-swatch-role">Success state</div></div></div>
</div>
<div class="color-group-label">AI Timeline Colors</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#dfa88f"></div><div class="color-swatch-info"><div class="color-swatch-name">Thinking</div><div class="color-swatch-hex">#dfa88f</div><div class="color-swatch-role">AI thinking state</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fc9a2"></div><div class="color-swatch-info"><div class="color-swatch-name">Grep</div><div class="color-swatch-hex">#9fc9a2</div><div class="color-swatch-role">Search operations</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#9fbbe0"></div><div class="color-swatch-info"><div class="color-swatch-name">Read</div><div class="color-swatch-hex">#9fbbe0</div><div class="color-swatch-role">File reading</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#c0a8dd"></div><div class="color-swatch-info"><div class="color-swatch-name">Edit</div><div class="color-swatch-hex">#c0a8dd</div><div class="color-swatch-role">Code editing</div></div></div>
</div>
<div class="color-group-label">Surface Scale</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f7f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 100</div><div class="color-swatch-hex">#f7f7f4</div><div class="color-swatch-role">Lightest surface</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f2f1ed"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 200</div><div class="color-swatch-hex">#f2f1ed</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ebeae5"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 300</div><div class="color-swatch-hex">#ebeae5</div><div class="color-swatch-role">Button default</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6e5e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 400</div><div class="color-swatch-hex">#e6e5e0</div><div class="color-swatch-role">Card backgrounds</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e1e0db"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface 500</div><div class="color-swatch-hex">#e1e0db</div><div class="color-swatch-role">Active/pressed</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:72px; font-weight:400; line-height:1.10; letter-spacing:-2.16px;">Display Hero</div><div class="type-meta">Display Hero -- 72px / 400 / 1.10 / -2.16px / CursorGothic</div></div>
<div class="type-sample"><div style="font-size:36px; font-weight:400; line-height:1.20; letter-spacing:-0.72px;">Section Heading</div><div class="type-meta">Section Heading -- 36px / 400 / 1.20 / -0.72px / CursorGothic</div></div>
<div class="type-sample"><div style="font-size:26px; font-weight:400; line-height:1.25; letter-spacing:-0.325px;">Sub-heading</div><div class="type-meta">Sub-heading -- 26px / 400 / 1.25 / -0.325px / CursorGothic</div></div>
<div class="type-sample"><div style="font-size:22px; font-weight:400; line-height:1.30; letter-spacing:-0.11px;">Title Small</div><div class="type-meta">Title Small -- 22px / 400 / 1.30 / -0.11px / CursorGothic</div></div>
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:19.2px; font-weight:500; line-height:1.50;">Body Serif -- The AI-first code editor that helps you build software faster with intelligent assistance.</div><div class="type-meta">Body Serif -- 19.2px / 500 / 1.50 / jjannon (with cswh)</div></div>
<div class="type-sample"><div style="font-family:var(--font-serif); font-size:17.28px; font-weight:400; line-height:1.35;">Body Serif Small -- Write code naturally with AI that understands your entire codebase.</div><div class="type-meta">Body Serif SM -- 17.28px / 400 / 1.35 / jjannon</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body Sans -- Standard UI text for navigation and interface elements</div><div class="type-meta">Body Sans -- 16px / 400 / 1.50 / CursorGothic</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.00;">Button Label</div><div class="type-meta">Button Label -- 14px / 400 / 1.00 / CursorGothic</div></div>
<div class="type-sample"><div style="font-size:11px; font-weight:500; line-height:1.50;">Caption -- Small metadata and labels</div><div class="type-meta">Caption -- 11px / 500 / 1.50 / CursorGothic</div></div>
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.67;">const editor = await cursor.init({ ai: true });</div><div class="type-meta">Mono Body -- 12px / 400 / 1.67 / berkeleyMono</div></div>
<div class="type-sample"><div style="font-family:var(--font-ui); font-size:11px; font-weight:500; line-height:1.27; text-transform:uppercase; letter-spacing:0.048px;">AI OPERATIONS</div><div class="type-meta">System Micro -- 11px / 500 / uppercase / system-ui</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="#">Download Cursor</a><div class="button-label">Primary Dark</div></div>
<div class="button-item"><a class="btn-primary" href="#">Documentation</a><div class="button-label">Primary Surface</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"><a class="btn-pill" href="#">AI-First</a><div class="button-label">Pill Tag</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--thinking); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Thinking</span><div class="button-label">Timeline Pill</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--grep); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Grep</span><div class="button-label">Timeline Pill</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--read); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Read</span><div class="button-label">Timeline Pill</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--edit); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;">Edit</span><div class="button-label">Timeline Pill</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(245,78,0,0.1); color:var(--accent);">AI</div>
<h3>Tab Autocomplete</h3>
<p>Cursor predicts your next edit and suggests multi-line changes. Accept with a single tab press for flow-state coding.</p>
</div>
<div class="card" style="box-shadow: var(--shadow-card);">
<div class="card-badge" style="background:rgba(159,187,224,0.2); color:#4a7ab5;">Elevated</div>
<h3>Chat with Codebase</h3>
<p>Ask questions about your entire repository. Cursor understands project structure, dependencies, and conventions.</p>
</div>
<div class="card">
<div class="card-badge" style="background:rgba(192,168,221,0.2); color:#7b5fa8;">Agent</div>
<h3>Agentic Editing</h3>
<p>Describe what you want in natural language. Cursor's agent mode makes multi-file changes across your codebase.</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">Project Name</label><input class="form-input" type="text" placeholder="my-cursor-project"><div class="form-state-label">Default (warm border)</div></div>
<div class="form-group"><label class="form-label">Repository</label><input class="form-input form-input--focus" type="text" value="cursor/editor"><div class="form-state-label">Focus (accent orange)</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 (warm crimson)</div></div>
<div class="form-group"><label class="form-label">Instructions</label><textarea class="form-textarea" placeholder="Describe the changes you want..."></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:3px"></div><div class="spacing-value">3</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:5px"></div><div class="spacing-value">5</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:6px"></div><div class="spacing-value">6</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:10px"></div><div class="spacing-value">10</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:48px"></div><div class="spacing-value">48</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:1.5px"></div><div class="radius-label">1.5px</div><div class="radius-context">Micro</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Inline</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:3px"></div><div class="radius-label">3px</div><div class="radius-context">Small</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">Cards, 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">Buttons, cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div><div class="radius-context">Featured</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></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 &amp; Depth</h2>
<div class="elevation-grid">
<div class="elevation-card" style="border: 1px solid var(--border-default);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
<div class="elevation-card" style="box-shadow: rgba(38,37,30,0.1) 0px 0px 0px 1px;"><div class="elevation-label">Level 1: Border Ring</div><div class="elevation-desc">oklab warm border</div></div>
<div class="elevation-card" style="box-shadow: rgba(38,37,30,0.2) 0px 0px 0px 1px;"><div class="elevation-label">Level 1b: Medium</div><div class="elevation-desc">Emphasized border</div></div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.02) 0px 0px 16px 0px, rgba(0,0,0,0.008) 0px 0px 8px 0px;"><div class="elevation-label">Level 2: Ambient</div><div class="elevation-desc">Subtle glow</div></div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.14) 0px 28px 70px 0px, rgba(0,0,0,0.1) 0px 14px 32px 0px, rgba(38,37,30,0.1) 0px 0px 0px 1px;"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Modal / popover</div></div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;"><div class="elevation-label">Focus</div><div class="elevation-desc">Interactive focus</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://cursor.com/">cursor.com</a> DESIGN.md -- awesome-design-md
</footer>
</body>
</html>