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

add new designs

Browse Source
This commit is contained in:
necatiozmen
2026-04-01 15:58:51 +03:00
parent 3976d28923
commit ed3c8649c3
53 changed files with 9390 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
design-md/spotify/DESIGN.md Normal file
View File

@@ -0,0 +1,246 @@
# Design System: Spotify
## 1. Visual Theme & Atmosphere
Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color. The design philosophy is "content-first darkness" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (`#1ed760`) and the album artwork itself.
The typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px–2px) for a systematic, label-like quality.
What distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch.
**Key Characteristics:**
- Near-black immersive dark theme (`#121212`–`#1f1f1f`) — UI disappears behind content
- Spotify Green (`#1ed760`) as singular brand accent — never decorative, always functional
- SpotifyMixUI/CircularSp font family with global script support
- Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized
- Uppercase button labels with wide letter-spacing (1.4px–2px)
- Heavy shadows on elevated elements (`rgba(0,0,0,0.5) 0px 8px 24px`)
- Semantic colors: negative red (`#f3727f`), warning orange (`#ffa42b`), announcement blue (`#539df5`)
- Album art as the primary color source — the UI is achromatic by design
## 2. Color Palette & Roles
### Primary Brand
- **Spotify Green** (`#1ed760`): Primary brand accent — play buttons, active states, CTAs
- **Near Black** (`#121212`): Deepest background surface
- **Dark Surface** (`#181818`): Cards, containers, elevated surfaces
- **Mid Dark** (`#1f1f1f`): Button backgrounds, interactive surfaces
### Text
- **White** (`#ffffff`): `--text-base`, primary text
- **Silver** (`#b3b3b3`): Secondary text, muted labels, inactive nav
- **Near White** (`#cbcbcb`): Slightly brighter secondary text
- **Light** (`#fdfdfd`): Near-pure white for maximum emphasis
### Semantic
- **Negative Red** (`#f3727f`): `--text-negative`, error states
- **Warning Orange** (`#ffa42b`): `--text-warning`, warning states
- **Announcement Blue** (`#539df5`): `--text-announcement`, info states
### Surface & Border
- **Dark Card** (`#252525`): Elevated card surface
- **Mid Card** (`#272727`): Alternate card surface
- **Border Gray** (`#4d4d4d`): Button borders on dark
- **Light Border** (`#7c7c7c`): Outlined button borders, muted links
- **Separator** (`#b3b3b3`): Divider lines
- **Light Surface** (`#eeeeee`): Light-mode buttons (rare)
- **Spotify Green Border** (`#1db954`): Green accent border variant
### Shadows
- **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialogs, menus, elevated panels
- **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`): Cards, dropdowns
- **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Input border-shadow combo
## 3. Typography Rules
### Font Families
- **Title**: `SpotifyMixUITitle`, fallbacks: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
- **UI / Body**: `SpotifyMixUI`, same fallback stack
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bold title weight |
| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Semibold section heads |
| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Emphasized text |
| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard body |
| Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 1.4px–2px | `text-transform: uppercase` |
| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard button |
| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |
| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactive nav |
| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Bold metadata |
| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |
| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, counts |
| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Fine print |
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Smallest text |
### Principles
- **Bold/regular binary**: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.
- **Uppercase buttons as system**: Button labels use uppercase + wide letter-spacing (1.4px–2px), creating a systematic "label" voice distinct from content text.
- **Compact sizing**: The range is 10px–24px — narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles.
- **Global script support**: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach.
## 4. Component Stylings
### Buttons
**Dark Pill**
- Background: `#1f1f1f`
- Text: `#ffffff` or `#b3b3b3`
- Padding: 8px 16px
- Radius: 9999px (full pill)
- Use: Navigation pills, secondary actions
**Dark Large Pill**
- Background: `#181818`
- Text: `#ffffff`
- Padding: 0px 43px
- Radius: 500px
- Use: Primary app navigation buttons
**Light Pill**
- Background: `#eeeeee`
- Text: `#181818`
- Radius: 500px
- Use: Light-mode CTAs (cookie consent, marketing)
**Outlined Pill**
- Background: transparent
- Text: `#ffffff`
- Border: `1px solid #7c7c7c`
- Padding: 4px 16px 4px 36px (asymmetric for icon)
- Radius: 9999px
- Use: Follow buttons, secondary actions
**Circular Play**
- Background: `#1f1f1f`
- Text: `#ffffff`
- Padding: 12px
- Radius: 50% (circle)
- Use: Play/pause controls
### Cards & Containers
- Background: `#181818` or `#1f1f1f`
- Radius: 6px–8px
- No visible borders on most cards
- Hover: slight background lightening
- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` on elevated
### Inputs
- Search input: `#1f1f1f` background, `#ffffff` text
- Radius: 500px (pill)
- Padding: 12px 96px 12px 48px (icon-aware)
- Focus: border becomes `#000000`, outline `1px solid`
### Navigation
- Dark sidebar with SpotifyMixUI 14px weight 700 for active, 400 for inactive
- `#b3b3b3` muted color for inactive items, `#ffffff` for active
- Circular icon buttons (50% radius)
- Spotify logo top-left in green
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
### Grid & Container
- Sidebar (fixed) + main content area
- Grid-based album/playlist cards
- Full-width now-playing bar at bottom
- Responsive content area fills remaining space
### Whitespace Philosophy
- **Dark compression**: Spotify packs content densely — playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps.
- **Content density over breathing room**: This is an app, not a marketing site. Every pixel serves the listening experience.
### Border Radius Scale
- Minimal (2px): Badges, explicit tags
- Subtle (4px): Inputs, small elements
- Standard (6px): Album art containers, cards
- Comfortable (8px): Sections, dialogs
- Medium (10px–20px): Panels, overlay elements
- Large (100px): Large pill buttons
- Pill (500px): Primary buttons, search input
- Full Pill (9999px): Navigation pills, search
- Circle (50%): Play buttons, avatars, icons
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Base (Level 0) | `#121212` background | Deepest layer, page background |
| Surface (Level 1) | `#181818` or `#1f1f1f` | Cards, sidebar, containers |
| Elevated (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Dropdown menus, hover cards |
| Dialog (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modals, overlays, menus |
| Inset (Border) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Input borders |
**Shadow Philosophy**: Spotify uses notably heavy shadows for a dark-themed app. The 0.5 opacity shadow at 24px blur creates a dramatic "floating in darkness" effect for dialogs and menus, while the 0.3 opacity at 8px blur provides a more subtle card lift. The unique inset border-shadow combination on inputs creates a recessed, tactile quality.
## 7. Do's and Don'ts
### Do
- Use near-black backgrounds (`#121212`–`#1f1f1f`) — depth through shade variation
- Apply Spotify Green (`#1ed760`) only for play controls, active states, and primary CTAs
- Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls
- Apply uppercase + wide letter-spacing (1.4px–2px) on button labels
- Keep typography compact (10px–24px range) — this is an app, not a magazine
- Use heavy shadows (`0.3–0.5 opacity`) for elevated elements on dark backgrounds
- Let album art provide color — the UI itself is achromatic
### Don't
- Don't use Spotify Green decoratively or on backgrounds — it's functional only
- Don't use light backgrounds for primary surfaces — the dark immersion is core
- Don't skip the pill/circle geometry on buttons — square buttons break the identity
- Don't use thin/subtle shadows — on dark backgrounds, shadows need to be heavy to be visible
- Don't add additional brand colors — green + achromatic grays is the complete palette
- Don't use relaxed line-heights — Spotify's typography is compact and dense
- Don't expose raw gray borders — use shadow-based or inset borders instead
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <425px | Compact mobile layout |
| Mobile | 425–576px | Standard mobile |
| Tablet | 576–768px | 2-column grid |
| Tablet Large | 768–896px | Expanded layout |
| Desktop Small | 896–1024px | Sidebar visible |
| Desktop | 1024–1280px | Full desktop layout |
| Large Desktop | >1280px | Expanded grid |
### Collapsing Strategy
- Sidebar: full → collapsed → hidden
- Album grid: 5 columns → 3 → 2 → 1
- Now-playing bar: maintained at all sizes
- Search: pill input maintained, width adjusts
- Navigation: sidebar → bottom bar on mobile
## 9. Agent Prompt Guide
### Quick Color Reference
- Background: Near Black (`#121212`)
- Surface: Dark Card (`#181818`)
- Text: White (`#ffffff`)
- Secondary text: Silver (`#b3b3b3`)
- Accent: Spotify Green (`#1ed760`)
- Border: `#4d4d4d`
- Error: Negative Red (`#f3727f`)
### Example Component Prompts
- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
### Iteration Guide
1. Start with #121212 — everything lives in near-black darkness
2. Spotify Green for functional highlights only (play, active, CTA)
3. Pill everything — 500px for large, 9999px for small, 50% for circular
4. Uppercase + wide tracking on buttons — the systematic label voice
5. Heavy shadows (0.3–0.5 opacity) for elevation — light shadows are invisible on dark
6. Album art provides all the color — the UI stays achromatic

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

@@ -0,0 +1,23 @@
# Spotify Inspired Design System
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/spotify/DESIGN.md) extracted from the public [spotify](https://spotify.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/spotify/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Spotify design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Spotify Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/spotify/preview-dark-screenshot.png)
### Light Mode
![Spotify Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/spotify/preview-screenshot.png)

231
design-md/spotify/preview-dark.html Normal file
View File

@@ -0,0 +1,231 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Spotify (Dark)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0a0a0a; --surface: #111111; --mid: #1f1f1f; --card: #252525;
--green: #1ed760; --white: #ffffff; --silver: #b3b3b3; --muted: #7c7c7c;
--neg: #f3727f; --warn: #ffa42b; --info: #539df5;
--border: #4d4d4d; --light-border: #7c7c7c;
--shadow-heavy: rgba(0,0,0,0.5) 0px 8px 24px;
--shadow-med: rgba(0,0,0,0.3) 0px 8px 8px;
--font: 'Inter', Helvetica Neue, helvetica, arial, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--white); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.40; -webkit-font-smoothing:antialiased; }
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--surface); }
.nav-brand { font-size:14px; font-weight:700; color:var(--white); text-decoration:none; }
.nav-links { display:flex; gap:16px; list-style:none; }
.nav-links a { font-size:14px; font-weight:400; color:var(--silver); text-decoration:none; transition:color 0.15s; }
.nav-links a:hover { color:var(--white); }
.nav-cta { display:inline-block; background:var(--green); color:#000; padding:8px 20px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; }
.hero { padding:64px 24px; text-align:center; background:var(--bg); }
.hero h1 { font-size:24px; font-weight:700; margin-bottom:12px; }
.hero h1 span { color:var(--green); }
.hero p { font-size:14px; color:var(--silver); max-width:500px; margin:0 auto 24px; }
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-green { display:inline-block; background:var(--green); color:#000; padding:10px 24px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }
.btn-outline { display:inline-block; background:transparent; color:var(--white); padding:10px 24px; border-radius:9999px; border:1px solid var(--light-border); font-family:var(--font); font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }
.btn-dark { display:inline-block; background:var(--mid); color:var(--white); padding:8px 16px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; }
.btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--green); color:#000; width:48px; height:48px; border-radius:50%; font-size:20px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }
.section { padding:48px 24px; max-width:1000px; margin:0 auto; }
.section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--silver); margin-bottom:8px; }
.section-title { font-size:18px; font-weight:700; margin-bottom:24px; }
.section-divider { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:0; }
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
.color-swatch { border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.color-swatch-block { height:60px; width:100%; }
.color-swatch-info { padding:8px 10px; }
.color-swatch-name { font-size:12px; font-weight:700; margin-bottom:2px; }
.color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
.color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }
.color-group-label { font-size:12px; font-weight:700; color:var(--silver); margin:20px 0 8px; text-transform:uppercase; letter-spacing:1px; }
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.05); }
.type-sample:last-child { border-bottom:none; }
.type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.button-item { text-align:center; }
.button-label { font-size:10px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:0.5px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
.card { background:var(--surface); border-radius:8px; padding:16px; transition:background 0.2s; }
.card:hover { background:var(--card); }
.card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }
.card p { font-size:12px; color:var(--silver); }
.form-group { margin-bottom:16px; max-width:400px; }
.form-label { display:block; font-size:12px; font-weight:700; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.form-input { width:100%; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:500px; font-family:var(--font); font-size:14px; outline:none; box-shadow:rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset; }
.form-input:focus { box-shadow:0 0 0 2px var(--green); }
.form-input--focus { box-shadow:0 0 0 2px var(--green); }
.form-input--error { box-shadow:0 0 0 2px var(--neg); }
.form-textarea { width:100%; min-height:80px; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; box-shadow:rgb(124,124,124) 0px 0px 0px 1px inset; }
.form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.spacing-item { text-align:center; }
.spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }
.spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.radius-item { text-align:center; }
.radius-box { width:52px; height:52px; background:var(--mid); border:1px solid rgba(255,255,255,0.1); margin-bottom:4px; }
.radius-label { font-size:9px; color:var(--muted); font-family:monospace; }
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
.elevation-card { background:var(--surface); border-radius:8px; padding:16px; text-align:center; }
.elevation-label { font-size:13px; font-weight:700; margin-bottom:4px; }
.elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }
.footer { padding:24px; text-align:center; border-top:1px solid rgba(255,255,255,0.05); font-size:12px; color:var(--muted); }
.footer a { color:var(--green); text-decoration:underline; }
@media (max-width:768px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
</style>
</head>
<body>
<nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
</ul>
<a class="nav-cta" href="#">Open Spotify</a>
</nav>
<div style="position:fixed;top:16px;right:16px;z-index:200;background:#1ed760;color:#000;font-size:10px;font-weight:700;padding:4px 10px;border-radius:500px;text-transform:uppercase;letter-spacing:1px;">Dark Mode</div>
<section class="hero">
<h1>Design System Inspired by <span>Spotify</span></h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized in the dark.</p>
<div class="hero-buttons">
<a class="btn-green" href="#">Get Spotify Free</a>
<a class="btn-outline" href="#">Learn More</a>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Brand</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#1ed760"></div><div class="color-swatch-info"><div class="color-swatch-name">Spotify Green</div><div class="color-swatch-hex">#1ed760</div><div class="color-swatch-role">Brand accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#121212"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#121212</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#181818"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#181818</div><div class="color-swatch-role">Cards, containers</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#1f1f1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Dark</div><div class="color-swatch-hex">#1f1f1f</div><div class="color-swatch-role">Buttons, inputs</div></div></div>
</div>
<div class="color-group-label">Text & Semantic</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#b3b3b3"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#b3b3b3</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f3727f"></div><div class="color-swatch-info"><div class="color-swatch-name">Negative</div><div class="color-swatch-hex">#f3727f</div><div class="color-swatch-role">Error states</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffa42b"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ffa42b</div><div class="color-swatch-role">Warning states</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#539df5"></div><div class="color-swatch-info"><div class="color-swatch-name">Announcement</div><div class="color-swatch-hex">#539df5</div><div class="color-swatch-role">Info states</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:24px; font-weight:700;">Section Title — Your Playlists</div><div class="type-meta">Title — 24px / 700 / SpotifyMixUITitle</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.30;">Feature Heading</div><div class="type-meta">Feature — 18px / 600 / 1.30</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:700;">Body Bold — Liked Songs</div><div class="type-meta">Body Bold — 16px / 700</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; color:var(--silver);">Caption — 3 min 42 sec</div><div class="type-meta">Caption — 14px / 400</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px;">SHUFFLE PLAY</div><div class="type-meta">Button Uppercase — 14px / 700 / uppercase / +1.4px</div></div>
<div class="type-sample"><div style="font-size:12px; font-weight:700; color:var(--silver);">Small Bold — 1,234 songs</div><div class="type-meta">Small Bold — 12px / 700</div></div>
<div class="type-sample"><div style="font-size:10.5px; font-weight:600; text-transform:capitalize; color:var(--silver);">Badge</div><div class="type-meta">Badge — 10.5px / 600 / capitalize</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-green" href="#">Shuffle Play</a><div class="button-label">Green Pill</div></div>
<div class="button-item"><a class="btn-dark" href="#">Browse</a><div class="button-label">Dark Pill</div></div>
<div class="button-item"><a class="btn-outline" href="#">Follow</a><div class="button-label">Outlined</div></div>
<div class="button-item"><a class="btn-circle" href="#">&#9654;</a><div class="button-label">Play Circle</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card"><h3>Discover Weekly</h3><p>Your personal playlist, updated every Monday.</p></div>
<div class="card" style="box-shadow:var(--shadow-med);"><h3>Release Radar</h3><p>New releases from artists you follow. Elevated shadow.</p></div>
<div class="card"><h3>Daily Mix 1</h3><p>Made for you based on your listening.</p></div>
<div class="card"><h3>Liked Songs</h3><p>Your saved songs collection.</p></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">Search</label><input class="form-input" type="search" placeholder="Artists, songs, or podcasts"><div class="form-state-label">Default (inset border)</div></div>
<div class="form-group"><label class="form-label">Playlist Name</label><input class="form-input form-input--focus" type="text" value="Chill Vibes"><div class="form-state-label">Focus (green ring)</div></div>
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--error" type="email" value="invalid"><div class="form-state-label">Error (red ring)</div></div>
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Add a description..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:500px"></div><div class="radius-label">500px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:50%; width:52px; height:52px;"></div><div class="radius-label">50%</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid">
<div class="elevation-card"><div class="elevation-label">Base</div><div class="elevation-desc">#121212 background</div></div>
<div class="elevation-card" style="background:var(--mid);"><div class="elevation-label">Surface</div><div class="elevation-desc">#1f1f1f</div></div>
<div class="elevation-card" style="box-shadow:var(--shadow-med);"><div class="elevation-label">Elevated</div><div class="elevation-desc">0.3 opacity 8px</div></div>
<div class="elevation-card" style="box-shadow:var(--shadow-heavy);"><div class="elevation-label">Dialog</div><div class="elevation-desc">0.5 opacity 24px</div></div>
</div>
</section>
<footer class="footer">Generated from <a href="https://spotify.com/">spotify.com</a> DESIGN.md — awesome-design-md</footer>
</body>
</html>

230
design-md/spotify/preview.html Normal file
View File

@@ -0,0 +1,230 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Spotify (Light)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #121212; --surface: #181818; --mid: #1f1f1f; --card: #252525;
--green: #1ed760; --white: #ffffff; --silver: #b3b3b3; --muted: #7c7c7c;
--neg: #f3727f; --warn: #ffa42b; --info: #539df5;
--border: #4d4d4d; --light-border: #7c7c7c;
--shadow-heavy: rgba(0,0,0,0.5) 0px 8px 24px;
--shadow-med: rgba(0,0,0,0.3) 0px 8px 8px;
--font: 'Inter', Helvetica Neue, helvetica, arial, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--white); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.40; -webkit-font-smoothing:antialiased; }
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--surface); }
.nav-brand { font-size:14px; font-weight:700; color:var(--white); text-decoration:none; }
.nav-links { display:flex; gap:16px; list-style:none; }
.nav-links a { font-size:14px; font-weight:400; color:var(--silver); text-decoration:none; transition:color 0.15s; }
.nav-links a:hover { color:var(--white); }
.nav-cta { display:inline-block; background:var(--green); color:#000; padding:8px 20px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; }
.hero { padding:64px 24px; text-align:center; background:var(--bg); }
.hero h1 { font-size:24px; font-weight:700; margin-bottom:12px; }
.hero h1 span { color:var(--green); }
.hero p { font-size:14px; color:var(--silver); max-width:500px; margin:0 auto 24px; }
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-green { display:inline-block; background:var(--green); color:#000; padding:10px 24px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }
.btn-outline { display:inline-block; background:transparent; color:var(--white); padding:10px 24px; border-radius:9999px; border:1px solid var(--light-border); font-family:var(--font); font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }
.btn-dark { display:inline-block; background:var(--mid); color:var(--white); padding:8px 16px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; }
.btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--green); color:#000; width:48px; height:48px; border-radius:50%; font-size:20px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }
.section { padding:48px 24px; max-width:1000px; margin:0 auto; }
.section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--silver); margin-bottom:8px; }
.section-title { font-size:18px; font-weight:700; margin-bottom:24px; }
.section-divider { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:0; }
.color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
.color-swatch { border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.color-swatch-block { height:60px; width:100%; }
.color-swatch-info { padding:8px 10px; }
.color-swatch-name { font-size:12px; font-weight:700; margin-bottom:2px; }
.color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
.color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }
.color-group-label { font-size:12px; font-weight:700; color:var(--silver); margin:20px 0 8px; text-transform:uppercase; letter-spacing:1px; }
.type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.05); }
.type-sample:last-child { border-bottom:none; }
.type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.button-item { text-align:center; }
.button-label { font-size:10px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:0.5px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
.card { background:var(--surface); border-radius:8px; padding:16px; transition:background 0.2s; }
.card:hover { background:var(--card); }
.card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }
.card p { font-size:12px; color:var(--silver); }
.form-group { margin-bottom:16px; max-width:400px; }
.form-label { display:block; font-size:12px; font-weight:700; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.form-input { width:100%; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:500px; font-family:var(--font); font-size:14px; outline:none; box-shadow:rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset; }
.form-input:focus { box-shadow:0 0 0 2px var(--green); }
.form-input--focus { box-shadow:0 0 0 2px var(--green); }
.form-input--error { box-shadow:0 0 0 2px var(--neg); }
.form-textarea { width:100%; min-height:80px; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; box-shadow:rgb(124,124,124) 0px 0px 0px 1px inset; }
.form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }
.spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.spacing-item { text-align:center; }
.spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }
.spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }
.radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.radius-item { text-align:center; }
.radius-box { width:52px; height:52px; background:var(--mid); border:1px solid rgba(255,255,255,0.1); margin-bottom:4px; }
.radius-label { font-size:9px; color:var(--muted); font-family:monospace; }
.elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
.elevation-card { background:var(--surface); border-radius:8px; padding:16px; text-align:center; }
.elevation-label { font-size:13px; font-weight:700; margin-bottom:4px; }
.elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }
.footer { padding:24px; text-align:center; border-top:1px solid rgba(255,255,255,0.05); font-size:12px; color:var(--muted); }
.footer a { color:var(--green); text-decoration:underline; }
@media (max-width:768px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
</style>
</head>
<body>
<nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
</ul>
<a class="nav-cta" href="#">Open Spotify</a>
</nav>
<section class="hero">
<h1>Design System Inspired by <span>Spotify</span></h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized in the dark.</p>
<div class="hero-buttons">
<a class="btn-green" href="#">Get Spotify Free</a>
<a class="btn-outline" href="#">Learn More</a>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Brand</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#1ed760"></div><div class="color-swatch-info"><div class="color-swatch-name">Spotify Green</div><div class="color-swatch-hex">#1ed760</div><div class="color-swatch-role">Brand accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#121212"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#121212</div><div class="color-swatch-role">Page background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#181818"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#181818</div><div class="color-swatch-role">Cards, containers</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#1f1f1f"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Dark</div><div class="color-swatch-hex">#1f1f1f</div><div class="color-swatch-role">Buttons, inputs</div></div></div>
</div>
<div class="color-group-label">Text & Semantic</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#b3b3b3"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#b3b3b3</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f3727f"></div><div class="color-swatch-info"><div class="color-swatch-name">Negative</div><div class="color-swatch-hex">#f3727f</div><div class="color-swatch-role">Error states</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffa42b"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ffa42b</div><div class="color-swatch-role">Warning states</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#539df5"></div><div class="color-swatch-info"><div class="color-swatch-name">Announcement</div><div class="color-swatch-hex">#539df5</div><div class="color-swatch-role">Info states</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:24px; font-weight:700;">Section Title — Your Playlists</div><div class="type-meta">Title — 24px / 700 / SpotifyMixUITitle</div></div>
<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.30;">Feature Heading</div><div class="type-meta">Feature — 18px / 600 / 1.30</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:700;">Body Bold — Liked Songs</div><div class="type-meta">Body Bold — 16px / 700</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; color:var(--silver);">Caption — 3 min 42 sec</div><div class="type-meta">Caption — 14px / 400</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px;">SHUFFLE PLAY</div><div class="type-meta">Button Uppercase — 14px / 700 / uppercase / +1.4px</div></div>
<div class="type-sample"><div style="font-size:12px; font-weight:700; color:var(--silver);">Small Bold — 1,234 songs</div><div class="type-meta">Small Bold — 12px / 700</div></div>
<div class="type-sample"><div style="font-size:10.5px; font-weight:600; text-transform:capitalize; color:var(--silver);">Badge</div><div class="type-meta">Badge — 10.5px / 600 / capitalize</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-green" href="#">Shuffle Play</a><div class="button-label">Green Pill</div></div>
<div class="button-item"><a class="btn-dark" href="#">Browse</a><div class="button-label">Dark Pill</div></div>
<div class="button-item"><a class="btn-outline" href="#">Follow</a><div class="button-label">Outlined</div></div>
<div class="button-item"><a class="btn-circle" href="#">&#9654;</a><div class="button-label">Play Circle</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card"><h3>Discover Weekly</h3><p>Your personal playlist, updated every Monday.</p></div>
<div class="card" style="box-shadow:var(--shadow-med);"><h3>Release Radar</h3><p>New releases from artists you follow. Elevated shadow.</p></div>
<div class="card"><h3>Daily Mix 1</h3><p>Made for you based on your listening.</p></div>
<div class="card"><h3>Liked Songs</h3><p>Your saved songs collection.</p></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">Search</label><input class="form-input" type="search" placeholder="Artists, songs, or podcasts"><div class="form-state-label">Default (inset border)</div></div>
<div class="form-group"><label class="form-label">Playlist Name</label><input class="form-input form-input--focus" type="text" value="Chill Vibes"><div class="form-state-label">Focus (green ring)</div></div>
<div class="form-group"><label class="form-label">Email</label><input class="form-input form-input--error" type="email" value="invalid"><div class="form-state-label">Error (red ring)</div></div>
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Add a description..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">07 / Radius</div><h2 class="section-title">Border Radius</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:500px"></div><div class="radius-label">500px</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:50%; width:52px; height:52px;"></div><div class="radius-label">50%</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section">
<div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
<div class="elevation-grid">
<div class="elevation-card"><div class="elevation-label">Base</div><div class="elevation-desc">#121212 background</div></div>
<div class="elevation-card" style="background:var(--mid);"><div class="elevation-label">Surface</div><div class="elevation-desc">#1f1f1f</div></div>
<div class="elevation-card" style="box-shadow:var(--shadow-med);"><div class="elevation-label">Elevated</div><div class="elevation-desc">0.3 opacity 8px</div></div>
<div class="elevation-card" style="box-shadow:var(--shadow-heavy);"><div class="elevation-label">Dialog</div><div class="elevation-desc">0.5 opacity 24px</div></div>
</div>
</section>
<footer class="footer">Generated from <a href="https://spotify.com/">spotify.com</a> DESIGN.md — awesome-design-md</footer>
</body>
</html>