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

357
design-md/sanity/DESIGN.md Normal file
View File

@@ -0,0 +1,357 @@
# Design System: Sanity
## 1. Visual Theme & Atmosphere
Sanity's website is a developer-content platform rendered as a nocturnal command center -- dark, precise, and deeply structured. The entire experience sits on a near-black canvas (`#0b0b0b`) that reads less like a "dark mode toggle" and more like the natural state of a tool built for people who live in terminals. Where most CMS marketing pages reach for friendly pastels and soft illustration, Sanity leans into the gravity of its own product: structured content deserves a structured stage.
The signature typographic voice is waldenburgNormal -- a distinctive, slightly geometric sans-serif with tight negative letter-spacing (-0.32px to -4.48px at display sizes) that gives headlines a compressed, engineered quality. At 112px hero scale with -4.48px tracking, the type feels almost machined -- like precision-cut steel letterforms. This is paired with IBM Plex Mono for code and technical labels, creating a dual-register voice: editorial authority meets developer credibility.
What makes Sanity distinctive is the interplay between its monochromatic dark palette and vivid, saturated accent punctuation. The neutral scale runs from pure black through a tightly controlled gray ramp (`#0b0b0b` -> `#212121` -> `#353535` -> `#797979` -> `#b9b9b9` -> `#ededed` -> `#ffffff`) with no warm or cool bias -- just pure, achromatic precision. Against this disciplined backdrop, a neon green accent (display-p3 green) and electric blue (`#0052ef`) land with the impact of signal lights in a dark control room. The orange-red CTA (`#f36458`) provides the only warm touch in an otherwise cool system.
**Key Characteristics:**
- Near-black canvas (`#0b0b0b`) as the default, natural environment -- not a dark "mode" but the primary identity
- waldenburgNormal with extreme negative tracking at display sizes, creating a precision-engineered typographic voice
- Pure achromatic gray scale -- no warm or cool undertones, pure neutral discipline
- Vivid accent punctuation: neon green, electric blue (`#0052ef`), and coral-red (`#f36458`) against the dark field
- Pill-shaped primary buttons (99999px radius) contrasting with subtle rounded rectangles (3-6px) for secondary actions
- IBM Plex Mono as the technical counterweight to the editorial display face
- Full-bleed dark sections with content contained in measured max-width containers
- Hover states that shift to electric blue (`#0052ef`) across all interactive elements -- a consistent "activation" signal
## 2. Color Palette & Roles
### Primary Brand
- **Sanity Black** (`#0b0b0b`): The primary canvas and dominant surface color. Not pure black but close enough to feel absolute. The foundation of the entire visual identity.
- **Pure Black** (`#000000`): Used for maximum-contrast moments, deep overlays, and certain border accents.
- **Sanity Red** (`#f36458`): The primary CTA and brand accent -- a warm coral-red that serves as the main call-to-action color. Used for "Get Started" buttons and primary conversion points.
### Accent & Interactive
- **Electric Blue** (`#0052ef`): The universal hover/active state color across the entire system. Buttons, links, and interactive elements all shift to this blue on hover. Also used as `--color-blue-700` for focus rings and active states.
- **Light Blue** (`#55beff` / `#afe3ff`): Secondary blue variants used for accent backgrounds, badges, and dimmed blue surfaces.
- **Neon Green** (`color(display-p3 .270588 1 0)`): A vivid, wide-gamut green used as `--color-fg-accent-green` for success states and premium feature highlights. Falls back to `#19d600` in sRGB.
- **Accent Magenta** (`color(display-p3 .960784 0 1)`): A vivid wide-gamut magenta for specialized accent moments.
### Surface & Background
- **Near Black** (`#0b0b0b`): Default page background and primary surface.
- **Dark Gray** (`#212121`): Elevated surface color for cards, secondary containers, input backgrounds, and subtle layering above the base canvas.
- **Medium Dark** (`#353535`): Tertiary surface and border color for creating depth between dark layers.
- **Pure White** (`#ffffff`): Used for inverted sections, light-on-dark text, and specific button surfaces.
- **Light Gray** (`#ededed`): Light surface for inverted/light sections and subtle background tints.
### Neutrals & Text
- **White** (`#ffffff`): Primary text color on dark surfaces, maximum legibility.
- **Silver** (`#b9b9b9`): Secondary text, body copy on dark surfaces, muted descriptions, and placeholder text.
- **Medium Gray** (`#797979`): Tertiary text, metadata, timestamps, and de-emphasized content.
- **Charcoal** (`#212121`): Text on light/inverted surfaces.
- **Near Black Text** (`#0b0b0b`): Primary text on white/light button surfaces.
### Semantic
- **Error Red** (`#dd0000`): Destructive actions, validation errors, and critical warnings -- a pure, high-saturation red.
- **GPC Green** (`#37cd84`): Privacy/compliance indicator green.
- **Focus Ring Blue** (`#0052ef`): Focus ring color for accessibility, matching the interactive blue.
### Border System
- **Dark Border** (`#0b0b0b`): Primary border on dark containers -- barely visible, maintaining minimal containment.
- **Subtle Border** (`#212121`): Standard border for inputs, textareas, and card edges on dark surfaces.
- **Medium Border** (`#353535`): More visible borders for emphasized containment and dividers.
- **Light Border** (`#ffffff`): Border on inverted/light elements or buttons needing contrast separation.
- **Orange Border** (`color(display-p3 1 0.3333 0)`): Special accent border for highlighted/featured elements.
## 3. Typography Rules
### Font Family
- **Display / Headline**: `waldenburgNormal`, fallback: `waldenburgNormal Fallback, ui-sans-serif, system-ui`
- **Body / UI**: `waldenburgNormal`, fallback: `waldenburgNormal Fallback, ui-sans-serif, system-ui`
- **Code / Technical**: `IBM Plex Mono`, fallback: `ibmPlexMono Fallback, ui-monospace`
- **Fallback / CJK**: `Helvetica`, fallback: `Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei`
*Note: waldenburgNormal is a custom typeface. For external implementations, use Inter or Space Grotesk as the sans substitute (geometric, slightly condensed feel). IBM Plex Mono is available on Google Fonts.*
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display / Hero | waldenburgNormal | 112px (7rem) | 400 | 1.00 (tight) | -4.48px | Maximum impact, compressed tracking |
| Hero Secondary | waldenburgNormal | 72px (4.5rem) | 400 | 1.05 (tight) | -2.88px | Large section headers |
| Section Heading | waldenburgNormal | 48px (3rem) | 400 | 1.08 (tight) | -1.68px | Primary section anchors |
| Heading Large | waldenburgNormal | 38px (2.38rem) | 400 | 1.10 (tight) | -1.14px | Feature section titles |
| Heading Medium | waldenburgNormal | 32px (2rem) | 425 | 1.24 (tight) | -0.32px | Card titles, subsection headers |
| Heading Small | waldenburgNormal | 24px (1.5rem) | 425 | 1.24 (tight) | -0.24px | Smaller feature headings |
| Subheading | waldenburgNormal | 20px (1.25rem) | 425 | 1.13 (tight) | -0.2px | Sub-section markers |
| Body Large | waldenburgNormal | 18px (1.13rem) | 400 | 1.50 | -0.18px | Intro paragraphs, descriptions |
| Body | waldenburgNormal | 16px (1rem) | 400 | 1.50 | normal | Standard body text |
| Body Small | waldenburgNormal | 15px (0.94rem) | 400 | 1.50 | -0.15px | Compact body text |
| Caption | waldenburgNormal | 13px (0.81rem) | 400-500 | 1.30-1.50 | -0.13px | Metadata, descriptions, tags |
| Small Caption | waldenburgNormal | 12px (0.75rem) | 400 | 1.50 | -0.12px | Footnotes, timestamps |
| Micro / Label | waldenburgNormal | 11px (0.69rem) | 500-600 | 1.00-1.50 | normal | Uppercase labels, tiny badges |
| Code Body | IBM Plex Mono | 15px (0.94rem) | 400 | 1.50 | normal | Code blocks, technical content |
| Code Caption | IBM Plex Mono | 13px (0.81rem) | 400-500 | 1.30-1.50 | normal | Inline code, small technical labels |
| Code Micro | IBM Plex Mono | 10-12px | 400 | 1.30-1.50 | normal | Tiny code labels, uppercase tags |
### Principles
- **Extreme negative tracking at scale**: Display headings at 72px+ use aggressive negative letter-spacing (-2.88px to -4.48px), creating a tight, engineered quality that distinguishes Sanity from looser editorial typography.
- **Single font, multiple registers**: waldenburgNormal handles both editorial display and functional UI text. The weight range is narrow (400-425 for most, 500-600 only for tiny labels), keeping the voice consistent.
- **OpenType feature control**: Typography uses deliberate feature settings including `"cv01", "cv11", "cv12", "cv13", "ss07"` for display sizes and `"calt" 0` for body text, fine-tuning character alternates for different contexts.
- **Tight headings, relaxed body**: Headings use 1.00-1.24 line-height (extremely tight), while body text breathes at 1.50. This contrast creates clear visual hierarchy.
- **Uppercase for technical labels**: IBM Plex Mono captions and small labels frequently use `text-transform: uppercase` with tight line-heights, creating a "system readout" aesthetic for technical metadata.
## 4. Component Stylings
### Buttons
**Primary CTA (Pill)**
- Background: Sanity Red (`#f36458`)
- Text: White (`#ffffff`)
- Padding: 8px 16px
- Border Radius: 99999px (full pill)
- Border: none
- Hover: Electric Blue (`#0052ef`) background, white text
- Font: 16px waldenburgNormal, weight 400
**Secondary (Dark Pill)**
- Background: Near Black (`#0b0b0b`)
- Text: Silver (`#b9b9b9`)
- Padding: 8px 12px
- Border Radius: 99999px (full pill)
- Border: none
- Hover: Electric Blue (`#0052ef`) background, white text
**Outlined (Light Pill)**
- Background: White (`#ffffff`)
- Text: Near Black (`#0b0b0b`)
- Padding: 8px
- Border Radius: 99999px (full pill)
- Border: 1px solid `#0b0b0b`
- Hover: Electric Blue (`#0052ef`) background, white text
**Ghost / Subtle**
- Background: Dark Gray (`#212121`)
- Text: Silver (`#b9b9b9`)
- Padding: 0px 12px
- Border Radius: 5px
- Border: 1px solid `#212121`
- Hover: Electric Blue (`#0052ef`) background, white text
**Uppercase Label Button**
- Font: 11px waldenburgNormal, weight 600, uppercase
- Background: transparent or `#212121`
- Text: Silver (`#b9b9b9`)
- Letter-spacing: normal
- Used for tab-like navigation and filter controls
### Cards
**Dark Content Card**
- Background: `#212121`
- Border: 1px solid `#353535` or `#212121`
- Border Radius: 6px
- Padding: 24px
- Text: White (`#ffffff`) for titles, Silver (`#b9b9b9`) for body
- Hover: subtle border color shift or elevation change
**Feature Card (Full-bleed)**
- Background: `#0b0b0b` or full-bleed image/gradient
- Border: none or 1px solid `#212121`
- Border Radius: 12px
- Padding: 32-48px
- Contains large imagery with overlaid text
### Inputs
**Text Input / Textarea**
- Background: Near Black (`#0b0b0b`)
- Text: Silver (`#b9b9b9`)
- Border: 1px solid `#212121`
- Padding: 8px 12px
- Border Radius: 3px
- Focus: outline with `var(--focus-ring-color)` (blue), 2px solid
- Focus background: shifts to deep cyan (`#072227`)
**Search Input**
- Background: `#0b0b0b`
- Text: Silver (`#b9b9b9`)
- Padding: 0px 12px
- Border Radius: 3px
- Placeholder: Medium Gray (`#797979`)
### Navigation
**Top Navigation**
- Background: Near Black (`#0b0b0b`) with backdrop blur
- Height: auto, compact padding
- Logo: left-aligned, Sanity wordmark
- Links: waldenburgNormal 16px, Silver (`#b9b9b9`)
- Link Hover: Electric Blue via `--color-fg-accent-blue`
- CTA Button: Sanity Red pill button right-aligned
- Separator: 1px border-bottom `#212121`
**Footer**
- Background: Near Black (`#0b0b0b`)
- Multi-column link layout
- Links: Silver (`#b9b9b9`), hover to blue
- Section headers: White (`#ffffff`), 13px uppercase IBM Plex Mono
### Badges / Pills
**Neutral Subtle**
- Background: White (`#ffffff`)
- Text: Near Black (`#0b0b0b`)
- Padding: 8px
- Font: 13px
- Border Radius: 99999px
**Neutral Filled**
- Background: Near Black (`#0b0b0b`)
- Text: White (`#ffffff`)
- Padding: 8px
- Font: 13px
- Border Radius: 99999px
## 5. Layout Principles
### Spacing System
Base unit: **8px**
| Token | Value | Usage |
|-------|-------|-------|
| space-1 | 1px | Hairline gaps, border-like spacing |
| space-2 | 2px | Minimal internal padding |
| space-3 | 4px | Tight component internal spacing |
| space-4 | 6px | Small element gaps |
| space-5 | 8px | Base unit -- button padding, input padding, badge padding |
| space-6 | 12px | Standard component gap, button horizontal padding |
| space-7 | 16px | Section internal padding, card spacing |
| space-8 | 24px | Large component padding, card internal spacing |
| space-9 | 32px | Section padding, container gutters |
| space-10 | 48px | Large section vertical spacing |
| space-11 | 64px | Major section breaks |
| space-12 | 96-120px | Hero vertical padding, maximum section spacing |
### Grid & Container
- Max content width: ~1440px (inferred from breakpoints)
- Page gutter: 32px on desktop, 16px on mobile
- Content sections use full-bleed backgrounds with centered, max-width content
- Multi-column layouts: 2-3 columns on desktop, single column on mobile
- Card grids: CSS Grid with consistent gaps (16-24px)
### Whitespace Philosophy
Sanity uses aggressive vertical spacing between sections (64-120px) to create breathing room on the dark canvas. Within sections, spacing is tighter (16-32px), creating dense information clusters separated by generous voids. This rhythm gives the page a "slides" quality -- each section feels like its own focused frame.
### Border Radius Scale
| Token | Value | Usage |
|-------|-------|-------|
| radius-xs | 3px | Inputs, textareas, subtle rounding |
| radius-sm | 4-5px | Secondary buttons, small cards, tags |
| radius-md | 6px | Standard cards, containers |
| radius-lg | 12px | Large cards, feature containers, forms |
| radius-pill | 99999px | Primary buttons, badges, nav pills |
## 6. Depth & Elevation
### Shadow System
| Level | Value | Usage |
|-------|-------|-------|
| Level 0 (Flat) | none | Default state for most elements -- dark surfaces create depth through color alone |
| Level 1 (Subtle) | 0px 0px 0px 1px `#212121` | Border-like shadow for minimal containment without visible borders |
| Level 2 (Focus) | 0 0 0 2px `var(--color-blue-500)` | Focus ring for inputs and interactive elements |
| Level 3 (Overlay) | Backdrop blur + semi-transparent dark | Navigation overlay, modal backgrounds |
### Depth Philosophy
Sanity's depth system is almost entirely **colorimetric** rather than shadow-based. Elevation is communicated through surface color shifts: `#0b0b0b` (ground) -> `#212121` (elevated) -> `#353535` (prominent) -> `#ffffff` (inverted/highest). This approach is native to dark interfaces where traditional drop shadows would be invisible. The few shadows that exist are ring-based (0px 0px 0px Npx) or blur-based (backdrop-filter) rather than offset shadows, maintaining the flat, precision-engineered aesthetic.
Border-based containment (1px solid `#212121` or `#353535`) serves as the primary spatial separator, with the border darkness calibrated to be visible but not dominant. The system avoids "floating card" aesthetics -- everything feels mounted to the surface rather than hovering above it.
## 7. Do's and Don'ts
### Do
- Use the achromatic gray scale as the foundation -- maintain pure neutral discipline with no warm/cool tinting
- Apply Electric Blue (`#0052ef`) consistently as the universal hover/active state across all interactive elements
- Use extreme negative letter-spacing (-2px to -4.48px) on display headings 48px and above
- Keep primary CTAs as full-pill shapes (99999px radius) with the coral-red (`#f36458`)
- Use IBM Plex Mono uppercase for technical labels, tags, and system metadata
- Communicate depth through surface color (dark-to-light) rather than shadows
- Maintain generous vertical section spacing (64-120px) on the dark canvas
- Use `"cv01", "cv11", "cv12", "cv13", "ss07"` OpenType features for display typography
### Don't
- Don't introduce warm or cool color tints to the neutral scale -- Sanity's grays are pure achromatic
- Don't use drop shadows for elevation -- dark interfaces demand colorimetric depth
- Don't apply border-radius between 13px and 99998px -- the system jumps from 12px (large card) directly to pill (99999px)
- Don't mix the coral-red CTA with the electric blue interactive color in the same element
- Don't use heavy font weights (700+) -- the system maxes out at 600 and only for 11px uppercase labels
- Don't place light text on light surfaces or dark text on dark surfaces without checking the gray-on-gray contrast ratio
- Don't use traditional offset box-shadows -- ring shadows (0 0 0 Npx) or border-based containment only
- Don't break the tight line-height on headings -- 1.00-1.24 is the range, never go to 1.5+ for display text
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Behavior |
|------|-------|----------|
| Desktop XL | >= 1640px | Full layout, maximum content width |
| Desktop | >= 1440px | Standard desktop layout |
| Desktop Compact | >= 1200px | Slightly condensed desktop |
| Laptop | >= 1100px | Reduced column widths |
| Tablet Landscape | >= 960px | 2-column layouts begin collapsing |
| Tablet | >= 768px | Transition zone, some elements stack |
| Mobile Large | >= 720px | Near-tablet layout |
| Mobile | >= 480px | Single-column, stacked layout |
| Mobile Small | >= 376px | Minimum supported width |
### Collapsing Strategy
- **Navigation**: Horizontal links collapse to hamburger menu below 768px
- **Hero typography**: Scales from 112px -> 72px -> 48px -> 38px across breakpoints, maintaining tight letter-spacing ratios
- **Grid layouts**: 3-column -> 2-column at ~960px, single-column below 768px
- **Card grids**: Horizontal scrolling on mobile instead of wrapping (preserving card aspect ratios)
- **Section spacing**: Vertical padding reduces by ~40% on mobile (120px -> 64px -> 48px)
- **Button sizing**: CTA pills maintain padding but reduce font size; ghost buttons stay fixed
- **Code blocks**: Horizontal scroll with preserved monospace formatting
### Mobile-Specific Adjustments
- Full-bleed sections extend edge-to-edge with 16px internal gutters
- Touch targets: minimum 44px for all interactive elements
- Heading letter-spacing relaxes slightly at mobile sizes (less aggressive negative tracking)
- Image containers switch from fixed aspect ratios to full-width with auto height
## 9. Agent Prompt Guide
### Quick Color Reference
```
Background: #0b0b0b (near-black canvas)
Surface: #212121 (elevated cards/containers)
Border: #353535 (visible) / #212121 (subtle)
Text Primary: #ffffff (white on dark)
Text Secondary: #b9b9b9 (silver on dark)
Text Tertiary: #797979 (medium gray)
CTA: #f36458 (coral-red)
Interactive: #0052ef (electric blue, all hovers)
Success: #19d600 (green, sRGB fallback)
Error: #dd0000 (pure red)
Light Surface: #ededed / #ffffff (inverted sections)
```
### Example Prompts
**Landing page section:**
"Create a feature section with a near-black (#0b0b0b) background. Use a 48px heading in Inter with -1.68px letter-spacing, white text. Below it, 16px body text in #b9b9b9 with 1.50 line-height. Include a coral-red (#f36458) pill button with white text and a secondary dark (#0b0b0b) pill button with #b9b9b9 text. Both buttons hover to #0052ef blue."
**Card grid:**
"Build a 3-column card grid on a #0b0b0b background. Each card has a #212121 surface, 1px solid #353535 border, 6px border-radius, and 24px padding. Card titles are 24px white with -0.24px letter-spacing. Body text is 13px #b9b9b9. Add a 13px IBM Plex Mono uppercase tag in #797979 at the top of each card."
**Form section:**
"Design a contact form on a #0b0b0b background. Inputs have #0b0b0b background, 1px solid #212121 border, 3px border-radius, 8px 12px padding, and #b9b9b9 placeholder text. Focus state shows a 2px blue (#0052ef) ring. Submit button is a full-width coral-red (#f36458) pill. Include a 13px #797979 helper text below each field."
**Navigation bar:**
"Create a sticky top navigation on #0b0b0b with backdrop blur. Left: brand text in 15px white. Center/right: nav links in 16px #b9b9b9 that hover to blue. Far right: a coral-red (#f36458) pill CTA button. Bottom border: 1px solid #212121."
### Iteration Guide
1. **Start dark**: Begin with `#0b0b0b` background, `#ffffff` primary text, `#b9b9b9` secondary text
2. **Add structure**: Use `#212121` surfaces and `#353535` borders for containment -- no shadows
3. **Apply typography**: Inter (or Space Grotesk) with tight letter-spacing on headings, 1.50 line-height on body
4. **Color punctuation**: Add `#f36458` for CTAs and `#0052ef` for all hover/interactive states
5. **Refine spacing**: 8px base unit, 24-32px within sections, 64-120px between sections
6. **Technical details**: Add IBM Plex Mono uppercase labels for tags and metadata
7. **Polish**: Ensure all interactive elements hover to `#0052ef`, all buttons are pills or subtle 5px radius, borders are hairline (1px)

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

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

995
design-md/sanity/preview-dark.html Normal file
View File

@@ -0,0 +1,995 @@
<!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: Sanity (Dark)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
/* Primary dark surfaces */
--bg-canvas: #0b0b0b;
--bg-surface: #212121;
--bg-elevated: #353535;
--bg-prominent: #797979;
/* Brand */
--sanity-red: #f36458;
--sanity-red-hover: #e0544a;
--electric-blue: #0052ef;
--blue-300: #55beff;
--blue-dim: #afe3ff;
--neon-green: #19d600;
--error-red: #dd0000;
--accent-magenta: #e600ff;
/* Text */
--text-primary: #ffffff;
--text-secondary: #b9b9b9;
--text-tertiary: #797979;
/* Border */
--border-subtle: #212121;
--border-medium: #353535;
--border-strong: #797979;
/* Shadow */
--shadow-ring: 0 0 0 1px #212121;
/* Font */
--font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/* Radius */
--radius-xs: 3px;
--radius-sm: 5px;
--radius-md: 6px;
--radius-lg: 12px;
--radius-pill: 99999px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-canvas);
color: var(--text-primary);
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
/* DARK MODE BADGE */
.dark-badge {
position: fixed;
top: 16px;
right: 16px;
z-index: 200;
background: var(--text-primary);
color: var(--bg-canvas);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 6px 14px;
border-radius: var(--radius-pill);
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 32px;
background: rgba(11, 11, 11, 0.88);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid var(--border-subtle);
}
.nav-brand {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
letter-spacing: -0.3px;
}
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a {
font-size: 14px;
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.nav-links a:hover { color: var(--electric-blue); }
/* HERO */
.hero {
background: var(--bg-canvas);
padding: 100px 32px 96px;
text-align: center;
border-bottom: 1px solid var(--border-subtle);
}
.hero h1 {
font-size: 80px;
font-weight: 700;
line-height: 1.00;
letter-spacing: -3.6px;
color: var(--text-primary);
margin-bottom: 20px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.hero p {
font-size: 18px;
color: var(--text-secondary);
line-height: 1.50;
letter-spacing: -0.18px;
max-width: 560px;
margin: 0 auto 36px;
}
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* SECTIONS */
.section {
padding: 80px 32px;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
font-size: 38px;
font-weight: 600;
line-height: 1.10;
letter-spacing: -1.14px;
margin-bottom: 12px;
color: var(--text-primary);
}
.section-subtitle {
font-size: 16px;
color: var(--text-secondary);
line-height: 1.50;
margin-bottom: 48px;
max-width: 600px;
}
/* COLOR PALETTE */
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.color-card {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
}
.color-swatch {
height: 96px;
width: 100%;
}
.color-info {
padding: 12px 14px;
}
.color-name {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.13px;
margin-bottom: 2px;
color: var(--text-primary);
}
.color-hex {
font-size: 12px;
font-family: var(--font-mono);
color: var(--text-secondary);
}
.color-role {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 4px;
}
/* TYPOGRAPHY */
.type-scale { display: flex; flex-direction: column; gap: 32px; }
.type-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 24px;
align-items: baseline;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-subtle);
}
.type-meta {
font-size: 12px;
font-family: var(--font-mono);
color: var(--text-secondary);
line-height: 1.60;
}
.type-meta span { display: block; }
.type-meta .label {
font-size: 10px;
text-transform: uppercase;
color: var(--text-tertiary);
letter-spacing: 0.5px;
margin-bottom: 2px;
}
/* BUTTONS */
.button-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
line-height: 1.30;
letter-spacing: -0.15px;
text-decoration: none;
cursor: pointer;
transition: all 0.18s ease;
border: none;
outline: none;
}
.btn-primary {
background: var(--sanity-red);
color: #ffffff;
border-radius: var(--radius-pill);
padding: 12px 28px;
}
.btn-primary:hover { background: var(--electric-blue); }
.btn-secondary {
background: var(--bg-surface);
color: var(--text-secondary);
border-radius: var(--radius-pill);
padding: 12px 28px;
}
.btn-secondary:hover { background: var(--electric-blue); color: #fff; }
.btn-outline {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--text-primary);
border-radius: var(--radius-pill);
padding: 11px 27px;
}
.btn-outline:hover { background: var(--electric-blue); color: #fff; border-color: var(--electric-blue); }
.btn-ghost {
background: var(--bg-surface);
color: var(--text-secondary);
border-radius: var(--radius-sm);
padding: 8px 16px;
font-size: 13px;
}
.btn-ghost:hover { background: var(--electric-blue); color: #fff; }
.btn-label {
background: transparent;
color: var(--text-tertiary);
border-radius: var(--radius-sm);
padding: 6px 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
font-family: var(--font-mono);
}
.btn-label:hover { color: var(--electric-blue); }
.btn-sm {
font-size: 13px;
padding: 8px 18px;
}
/* CARDS */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.card {
background: var(--bg-surface);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
padding: 28px;
transition: border-color 0.15s;
}
.card:hover { border-color: var(--border-strong); }
.card-tag {
font-size: 11px;
font-family: var(--font-mono);
text-transform: uppercase;
color: var(--text-tertiary);
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.card-title {
font-size: 20px;
font-weight: 600;
line-height: 1.20;
letter-spacing: -0.2px;
margin-bottom: 8px;
color: var(--text-primary);
}
.card-body {
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
}
.card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: var(--blue-300);
text-decoration: none;
margin-top: 16px;
}
.card-link:hover { text-decoration: underline; }
/* FORMS */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 680px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full-width { grid-column: 1 / -1; }
.form-label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: -0.13px;
}
.form-input {
font-family: var(--font-display);
font-size: 14px;
color: var(--text-primary);
background: var(--bg-canvas);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
padding: 10px 12px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input::placeholder { color: var(--text-tertiary); }
.form-input:focus {
border-color: var(--electric-blue);
box-shadow: 0 0 0 2px rgba(0, 82, 239, 0.3);
}
.form-textarea {
font-family: var(--font-display);
font-size: 14px;
color: var(--text-primary);
background: var(--bg-canvas);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
padding: 10px 12px;
outline: none;
resize: vertical;
min-height: 100px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-textarea:focus {
border-color: var(--electric-blue);
box-shadow: 0 0 0 2px rgba(0, 82, 239, 0.3);
}
.form-helper {
font-size: 12px;
color: var(--text-tertiary);
}
/* SPACING SCALE */
.spacing-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.spacing-row {
display: flex;
align-items: center;
gap: 16px;
}
.spacing-label {
width: 80px;
font-size: 12px;
font-family: var(--font-mono);
color: var(--text-secondary);
text-align: right;
flex-shrink: 0;
}
.spacing-bar {
height: 28px;
background: var(--sanity-red);
border-radius: var(--radius-xs);
opacity: 0.8;
transition: opacity 0.15s;
}
.spacing-bar:hover { opacity: 1; }
/* RADIUS SCALE */
.radius-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: end;
}
.radius-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.radius-box {
width: 80px;
height: 80px;
background: var(--bg-surface);
border: 2px solid var(--text-secondary);
}
.radius-label {
font-size: 12px;
font-family: var(--font-mono);
color: var(--text-secondary);
text-align: center;
}
/* ELEVATION */
.elevation-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: start;
}
.elevation-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.elevation-box {
width: 140px;
height: 90px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
.elevation-label {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-tertiary);
text-align: center;
max-width: 140px;
}
/* Utility */
.badge {
display: inline-block;
font-size: 11px;
font-family: var(--font-mono);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 10px;
border-radius: var(--radius-pill);
}
.badge-subtle { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.badge-filled { background: var(--text-primary); color: var(--bg-canvas); }
.badge-red { background: var(--sanity-red); color: #fff; }
.badge-blue { background: var(--electric-blue); color: #fff; }
.badge-green { background: var(--neon-green); color: #0b0b0b; }
.divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0;
}
@media (max-width: 768px) {
.hero h1 { font-size: 42px; letter-spacing: -1.6px; }
.hero { padding: 64px 20px 60px; }
.section { padding: 56px 20px; }
.section-title { font-size: 28px; letter-spacing: -0.6px; }
.type-row { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.card-grid { grid-template-columns: 1fr; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.nav-links { display: none; }
.dark-badge { top: 12px; right: 12px; font-size: 10px; padding: 4px 10px; }
}
</style>
</head>
<body>
<!-- DARK MODE BADGE -->
<div class="dark-badge">Dark Mode</div>
<!-- NAV -->
<nav class="nav">
<a href="#" class="nav-brand">awesome-design-md</a>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#buttons">Buttons</a>
<a href="#cards">Cards</a>
<a href="#forms">Forms</a>
<a href="#spacing">Spacing</a>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<h1>Design System Inspired by Sanity</h1>
<p>Structured content meets precise design. A dark-first, engineering-grade design language built on achromatic neutrals, tight typography, and vivid accent punctuation.</p>
<div class="hero-buttons">
<button class="btn btn-primary">Get Started</button>
<button class="btn btn-outline">Contact Sales</button>
</div>
</section>
<!-- COLOR PALETTE -->
<section class="section" id="colors">
<h2 class="section-title">Color Palette</h2>
<p class="section-subtitle">Pure achromatic gray scale with vivid accent punctuation. No warm or cool bias in the neutral range.</p>
<div class="color-grid">
<div class="color-card">
<div class="color-swatch" style="background:#0b0b0b"></div>
<div class="color-info">
<div class="color-name">Sanity Black</div>
<div class="color-hex">#0b0b0b</div>
<div class="color-role">Primary canvas</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#212121"></div>
<div class="color-info">
<div class="color-name">Dark Surface</div>
<div class="color-hex">#212121</div>
<div class="color-role">Elevated cards, containers</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#353535"></div>
<div class="color-info">
<div class="color-name">Medium Border</div>
<div class="color-hex">#353535</div>
<div class="color-role">Visible borders, dividers</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#797979"></div>
<div class="color-info">
<div class="color-name">Medium Gray</div>
<div class="color-hex">#797979</div>
<div class="color-role">Tertiary text, metadata</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#b9b9b9"></div>
<div class="color-info">
<div class="color-name">Silver</div>
<div class="color-hex">#b9b9b9</div>
<div class="color-role">Secondary text</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#ededed"></div>
<div class="color-info">
<div class="color-name">Light Gray</div>
<div class="color-hex">#ededed</div>
<div class="color-role">Light surfaces</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#ffffff; border-bottom: 1px solid #353535;"></div>
<div class="color-info">
<div class="color-name">White</div>
<div class="color-hex">#ffffff</div>
<div class="color-role">Primary text on dark</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#f36458"></div>
<div class="color-info">
<div class="color-name">Sanity Red</div>
<div class="color-hex">#f36458</div>
<div class="color-role">Primary CTA</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#0052ef"></div>
<div class="color-info">
<div class="color-name">Electric Blue</div>
<div class="color-hex">#0052ef</div>
<div class="color-role">Hover/active, focus rings</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#55beff"></div>
<div class="color-info">
<div class="color-name">Blue 300</div>
<div class="color-hex">#55beff</div>
<div class="color-role">Light blue accent</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#19d600"></div>
<div class="color-info">
<div class="color-name">Neon Green</div>
<div class="color-hex">#19d600</div>
<div class="color-role">Success, accent green</div>
</div>
</div>
<div class="color-card">
<div class="color-swatch" style="background:#dd0000"></div>
<div class="color-info">
<div class="color-name">Error Red</div>
<div class="color-hex">#dd0000</div>
<div class="color-role">Errors, destructive</div>
</div>
</div>
</div>
</section>
<hr class="divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<h2 class="section-title">Typography Scale</h2>
<p class="section-subtitle">Space Grotesk (substitute for waldenburgNormal) with tight negative tracking at display sizes. IBM Plex Mono for technical labels.</p>
<div class="type-scale">
<div class="type-row">
<div class="type-meta">
<span class="label">Display</span>
<span>80px / 700</span>
<span>LH: 1.00</span>
<span>LS: -3.6px</span>
</div>
<div style="font-size:80px; font-weight:700; line-height:1.00; letter-spacing:-3.6px;">Structure</div>
</div>
<div class="type-row">
<div class="type-meta">
<span class="label">Heading 1</span>
<span>48px / 600</span>
<span>LH: 1.08</span>
<span>LS: -1.68px</span>
</div>
<div style="font-size:48px; font-weight:600; line-height:1.08; letter-spacing:-1.68px;">Powers intelligence</div>
</div>
<div class="type-row">
<div class="type-meta">
<span class="label">Heading 2</span>
<span>38px / 600</span>
<span>LH: 1.10</span>
<span>LS: -1.14px</span>
</div>
<div style="font-size:38px; font-weight:600; line-height:1.10; letter-spacing:-1.14px;">Content operations</div>
</div>
<div class="type-row">
<div class="type-meta">
<span class="label">Heading 3</span>
<span>24px / 500</span>
<span>LH: 1.24</span>
<span>LS: -0.24px</span>
</div>
<div style="font-size:24px; font-weight:500; line-height:1.24; letter-spacing:-0.24px;">Composable content platform</div>
</div>
<div class="type-row">
<div class="type-meta">
<span class="label">Subheading</span>
<span>20px / 500</span>
<span>LH: 1.13</span>
<span>LS: -0.2px</span>
</div>
<div style="font-size:20px; font-weight:500; line-height:1.13; letter-spacing:-0.2px;">One API, every platform</div>
</div>
<div class="type-row">
<div class="type-meta">
<span class="label">Body Large</span>
<span>18px / 400</span>
<span>LH: 1.50</span>
<span>LS: -0.18px</span>
</div>
<div style="font-size:18px; font-weight:400; line-height:1.50; letter-spacing:-0.18px;">Mirror how your content operations team works. Treat content as data with a structured, API-first approach.</div>
</div>
<div class="type-row">
<div class="type-meta">
<span class="label">Body</span>
<span>16px / 400</span>
<span>LH: 1.50</span>
</div>
<div style="font-size:16px; font-weight:400; line-height:1.50;">Power anything with one unified content platform. Connect to any frontend, any channel, any device.</div>
</div>
<div class="type-row">
<div class="type-meta">
<span class="label">Caption</span>
<span>13px / 400</span>
<span>LH: 1.50</span>
<span>LS: -0.13px</span>
</div>
<div style="font-size:13px; font-weight:400; line-height:1.50; letter-spacing:-0.13px; color: var(--text-secondary);">Loved by 1M+ users and 6K+ teams worldwide. Enterprise-grade content infrastructure.</div>
</div>
<div class="type-row">
<div class="type-meta">
<span class="label">Mono Label</span>
<span>12px / 500</span>
<span>LH: 1.50</span>
<span>UPPERCASE</span>
</div>
<div style="font-size:12px; font-weight:500; line-height:1.50; text-transform:uppercase; font-family:var(--font-mono); letter-spacing:0.5px; color: var(--text-tertiary);">CONTENT LAKE &middot; GROQ &middot; STUDIO &middot; SCHEMAS</div>
</div>
<div class="type-row">
<div class="type-meta">
<span class="label">Code</span>
<span>15px / 400</span>
<span>LH: 1.50</span>
<span>IBM Plex Mono</span>
</div>
<div style="font-size:15px; font-weight:400; line-height:1.50; font-family:var(--font-mono); color: var(--neon-green);">sanity.fetch('*[_type == "post"]')</div>
</div>
</div>
</section>
<hr class="divider">
<!-- BUTTONS -->
<section class="section" id="buttons">
<h2 class="section-title">Button Variants</h2>
<p class="section-subtitle">Pill-shaped CTAs with coral-red brand color. All interactive elements hover to electric blue.</p>
<div style="margin-bottom: 40px;">
<h3 style="font-size:16px; font-weight:600; margin-bottom:16px; letter-spacing:-0.16px;">Standard Buttons</h3>
<div class="button-grid">
<button class="btn btn-primary">Get Started</button>
<button class="btn btn-secondary">Contact Sales</button>
<button class="btn btn-outline">Learn More</button>
<button class="btn btn-ghost">Filter</button>
<button class="btn btn-label">DOCUMENTATION</button>
</div>
</div>
<div style="margin-bottom: 40px;">
<h3 style="font-size:16px; font-weight:600; margin-bottom:16px; letter-spacing:-0.16px;">Small Variants</h3>
<div class="button-grid">
<button class="btn btn-primary btn-sm">Get Started</button>
<button class="btn btn-outline btn-sm">Details</button>
<button class="btn btn-ghost btn-sm">Tag</button>
</div>
</div>
<div style="margin-top: 40px;">
<h3 style="font-size:16px; font-weight:600; margin-bottom:16px; letter-spacing:-0.16px;">Badges</h3>
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
<span class="badge badge-subtle">Neutral</span>
<span class="badge badge-filled">Filled</span>
<span class="badge badge-red">New</span>
<span class="badge badge-blue">Featured</span>
<span class="badge badge-green">Active</span>
</div>
</div>
</section>
<hr class="divider">
<!-- CARDS -->
<section class="section" id="cards">
<h2 class="section-title">Card Examples</h2>
<p class="section-subtitle">Minimal containment with border-based separation. Depth communicated through surface color shifts.</p>
<div class="card-grid">
<div class="card">
<div class="card-tag">Content Lake</div>
<div class="card-title">Structured content as data</div>
<div class="card-body">Store, query, and distribute content across any channel using a single source of truth with real-time collaboration.</div>
<a href="#" class="card-link">Learn more &rarr;</a>
</div>
<div class="card">
<div class="card-tag">GROQ</div>
<div class="card-title">Query language for content</div>
<div class="card-body">Purpose-built query language that lets you fetch exactly the content you need, in the shape you want it.</div>
<a href="#" class="card-link">Explore GROQ &rarr;</a>
</div>
<div class="card">
<div class="card-tag">Studio</div>
<div class="card-title">Customizable editing environment</div>
<div class="card-body">A fully customizable, open-source editing environment that adapts to your team's workflow and content model.</div>
<a href="#" class="card-link">Try Studio &rarr;</a>
</div>
</div>
<div style="margin-top: 40px;">
<h3 style="font-size:16px; font-weight:600; margin-bottom:20px; letter-spacing:-0.16px;">Elevated Cards</h3>
<div class="card-grid">
<div style="background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 28px;">
<div class="card-tag" style="color: var(--text-secondary);">Schemas</div>
<div class="card-title">Define your content model</div>
<div class="card-body" style="color: var(--text-secondary);">Use code-first schemas to define documents, objects, and fields with full TypeScript support.</div>
<a href="#" class="card-link">View docs &rarr;</a>
</div>
<div style="background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 28px;">
<div class="card-tag" style="color: var(--text-secondary);">Plugins</div>
<div class="card-title">Extend with the ecosystem</div>
<div class="card-body" style="color: var(--text-secondary);">Community-driven plugin ecosystem with dashboards, custom inputs, and workflow tools.</div>
<a href="#" class="card-link">Browse plugins &rarr;</a>
</div>
</div>
</div>
</section>
<hr class="divider">
<!-- FORMS -->
<section class="section" id="forms">
<h2 class="section-title">Form Elements</h2>
<p class="section-subtitle">Minimal inputs with subtle borders on the dark canvas. Blue focus rings for accessibility.</p>
<div class="form-grid">
<div class="form-group">
<label class="form-label">Project Name</label>
<input type="text" class="form-input" placeholder="my-sanity-project">
</div>
<div class="form-group">
<label class="form-label">Dataset</label>
<input type="text" class="form-input" placeholder="production">
</div>
<div class="form-group full-width">
<label class="form-label">API Token</label>
<input type="text" class="form-input" placeholder="sk_xxxxxxxxxxxxxxxx">
<span class="form-helper">Keep your API token secure. Never commit it to version control.</span>
</div>
<div class="form-group full-width">
<label class="form-label">GROQ Query</label>
<textarea class="form-textarea" placeholder='*[_type == "post"]{title, slug, body}'></textarea>
<span class="form-helper">Write a GROQ query to test against your dataset.</span>
</div>
<div class="form-group">
<button class="btn btn-primary" style="width:100%;">Run Query</button>
</div>
</div>
</section>
<hr class="divider">
<!-- SPACING -->
<section class="section" id="spacing">
<h2 class="section-title">Spacing Scale</h2>
<p class="section-subtitle">8px base unit. Spacing follows a controlled progression for consistent rhythm.</p>
<div class="spacing-grid">
<div class="spacing-row">
<div class="spacing-label">4px</div>
<div class="spacing-bar" style="width: 4px;"></div>
</div>
<div class="spacing-row">
<div class="spacing-label">8px</div>
<div class="spacing-bar" style="width: 32px;"></div>
</div>
<div class="spacing-row">
<div class="spacing-label">12px</div>
<div class="spacing-bar" style="width: 64px;"></div>
</div>
<div class="spacing-row">
<div class="spacing-label">16px</div>
<div class="spacing-bar" style="width: 96px;"></div>
</div>
<div class="spacing-row">
<div class="spacing-label">24px</div>
<div class="spacing-bar" style="width: 160px;"></div>
</div>
<div class="spacing-row">
<div class="spacing-label">32px</div>
<div class="spacing-bar" style="width: 220px;"></div>
</div>
<div class="spacing-row">
<div class="spacing-label">48px</div>
<div class="spacing-bar" style="width: 320px;"></div>
</div>
<div class="spacing-row">
<div class="spacing-label">64px</div>
<div class="spacing-bar" style="width: 420px;"></div>
</div>
<div class="spacing-row">
<div class="spacing-label">96px</div>
<div class="spacing-bar" style="width: 560px;"></div>
</div>
<div class="spacing-row">
<div class="spacing-label">120px</div>
<div class="spacing-bar" style="width: 680px;"></div>
</div>
</div>
</section>
<hr class="divider">
<!-- BORDER RADIUS -->
<section class="section">
<h2 class="section-title">Border Radius Scale</h2>
<p class="section-subtitle">Sharp geometry for inputs, subtle rounding for cards, full pills for buttons and badges.</p>
<div class="radius-grid">
<div class="radius-item">
<div class="radius-box" style="border-radius: 3px;"></div>
<div class="radius-label">3px<br><span style="font-size:10px; color:var(--text-tertiary)">Inputs</span></div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 5px;"></div>
<div class="radius-label">5px<br><span style="font-size:10px; color:var(--text-tertiary)">Ghost buttons</span></div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 6px;"></div>
<div class="radius-label">6px<br><span style="font-size:10px; color:var(--text-tertiary)">Cards</span></div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 12px;"></div>
<div class="radius-label">12px<br><span style="font-size:10px; color:var(--text-tertiary)">Large cards</span></div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius: 99999px;"></div>
<div class="radius-label">99999px<br><span style="font-size:10px; color:var(--text-tertiary)">Pill / CTA</span></div>
</div>
</div>
</section>
<hr class="divider">
<!-- ELEVATION / DEPTH -->
<section class="section">
<h2 class="section-title">Elevation & Depth</h2>
<p class="section-subtitle">Colorimetric depth system. Elevation is communicated through surface color shifts rather than shadows.</p>
<div class="elevation-grid">
<div class="elevation-item">
<div class="elevation-box" style="background: #000000; border: 1px solid #212121;">Ground</div>
<div class="elevation-label">#000000</div>
</div>
<div class="elevation-item">
<div class="elevation-box" style="background: #0b0b0b; border: 1px solid #212121;">Canvas</div>
<div class="elevation-label">#0b0b0b</div>
</div>
<div class="elevation-item">
<div class="elevation-box" style="background: #212121; border: 1px solid #353535;">Surface</div>
<div class="elevation-label">#212121</div>
</div>
<div class="elevation-item">
<div class="elevation-box" style="background: #353535; border: 1px solid #797979;">Prominent</div>
<div class="elevation-label">#353535</div>
</div>
<div class="elevation-item">
<div class="elevation-box" style="background: #ffffff; color: #0b0b0b; border: 1px solid #ededed;">Inverted</div>
<div class="elevation-label">#ffffff</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer style="border-top: 1px solid var(--border-subtle); padding: 48px 32px;">
<div style="max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
<span style="font-size: 13px; color: var(--text-secondary); font-family: var(--font-mono);">Design tokens extracted from sanity.io</span>
<span style="font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase;">awesome-design-md</span>
</div>
</footer>
</body>
</html>

1140
design-md/sanity/preview.html Normal file
View File

File diff suppressed because it is too large Load Diff