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

262
design-md/sentry/DESIGN.md Normal file
View File

@@ -0,0 +1,262 @@
# Design System: Sentry
## 1. Visual Theme & Atmosphere
Sentry's website is a dark-mode-first developer tool interface that speaks the language of code editors and terminal windows. The entire aesthetic is rooted in deep purple-black backgrounds (`#1f1633`, `#150f23`) that evoke the late-night debugging sessions Sentry was built for. Against this inky canvas, a carefully curated set of purples, pinks, and a distinctive lime-green accent (`#c2ef4e`) create a visual system that feels simultaneously technical and vibrant.
The typography pairing is deliberate: "Dammit Sans" appears at hero scale (88px, weight 700) as a display font with personality and attitude that matches Sentry's irreverent brand voice ("Code breaks. Fix it faster."), while Rubik serves as the workhorse UI font across all functional text — headings, body, buttons, captions, and navigation. Monaco provides the monospace layer for code snippets and technical content, completing the developer-tool trinity.
What makes Sentry distinctive is its embrace of the "dark IDE" aesthetic without feeling cold or sterile. Warm purple tones replace the typical cool grays of developer tools, and bold illustrative elements (3D characters, colorful product screenshots) punctuate the dark canvas. The button system uses a signature muted purple (`#79628c`) with inset shadows that creates a tactile, almost physical quality — buttons feel like they could be pressed into the surface.
**Key Characteristics:**
- Dark purple-black backgrounds (`#1f1633`, `#150f23`) — never pure black
- Warm purple accent spectrum: from deep (`#362d59`) through mid (`#79628c`, `#6a5fc1`) to vibrant (`#422082`)
- Lime-green accent (`#c2ef4e`) for high-visibility CTAs and highlights
- Pink/coral accents (`#ffb287`, `#fa7faa`) for focus states and secondary highlights
- "Dammit Sans" display font for brand personality at hero scale
- Rubik as primary UI font with uppercase letter-spaced labels
- Monaco monospace for code elements
- Inset shadows on buttons creating tactile depth
- Frosted glass effects with `blur(18px) saturate(180%)`
## 2. Color Palette & Roles
### Primary Brand
- **Deep Purple** (`#1f1633`): Primary background, the defining color of the brand
- **Darker Purple** (`#150f23`): Deeper sections, footer, secondary backgrounds
- **Border Purple** (`#362d59`): Borders, dividers, subtle structural lines
### Accent Colors
- **Sentry Purple** (`#6a5fc1`): Primary interactive color — links, hover states, focus rings
- **Muted Purple** (`#79628c`): Button backgrounds, secondary interactive elements
- **Deep Violet** (`#422082`): Select dropdowns, active states, high-emphasis surfaces
- **Lime Green** (`#c2ef4e`): High-visibility accent, special links, badge highlights
- **Coral** (`#ffb287`): Focus state backgrounds, warm accent
- **Pink** (`#fa7faa`): Focus outlines, decorative accents
### Text Colors
- **Pure White** (`#ffffff`): Primary text on dark backgrounds
- **Light Gray** (`#e5e7eb`): Secondary text, muted content
- **Code Yellow** (`#dcdcaa`): Syntax highlighting, code tokens
### Surface & Overlay
- **Glass White** (`rgba(255, 255, 255, 0.18)`): Frosted glass button backgrounds
- **Glass Dark** (`rgba(54, 22, 107, 0.14)`): Hover overlay on glass elements
- **Input White** (`#ffffff`): Form input backgrounds (light context)
- **Input Border** (`#cfcfdb`): Form field borders
### Shadows
- **Ambient Glow** (`rgba(22, 15, 36, 0.9) 0px 4px 4px 9px`): Deep purple ambient shadow
- **Button Hover** (`rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem`): Elevated hover state
- **Card Shadow** (`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px`): Standard card elevation
- **Inset Button** (`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset`): Tactile pressed effect
## 3. Typography Rules
### Font Families
- **Display**: `Dammit Sans` — brand personality font for hero headings
- **Primary UI**: `Rubik`, with fallbacks: `-apple-system, system-ui, Segoe UI, Helvetica, Arial`
- **Monospace**: `Monaco`, with fallbacks: `Menlo, Ubuntu Mono`
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Dammit Sans | 88px (5.50rem) | 700 | 1.20 (tight) | normal | Maximum impact, brand voice |
| Display Secondary | Dammit Sans | 60px (3.75rem) | 500 | 1.10 (tight) | normal | Secondary hero text |
| Section Heading | Rubik | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Major section titles |
| Sub-heading | Rubik | 27px (1.69rem) | 500 | 1.25 (tight) | normal | Feature section headers |
| Card Title | Rubik | 24px (1.50rem) | 500 | 1.25 (tight) | normal | Card and block headings |
| Feature Title | Rubik | 20px (1.25rem) | 600 | 1.25 (tight) | normal | Emphasized feature names |
| Body | Rubik | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |
| Body Emphasis | Rubik | 16px (1.00rem) | 500–600 | 1.50 | normal | Bold body, nav items |
| Nav Label | Rubik | 15px (0.94rem) | 500 | 1.40 | normal | Navigation links |
| Uppercase Label | Rubik | 15px (0.94rem) | 500 | 1.25 (tight) | normal | `text-transform: uppercase` |
| Button Text | Rubik | 14px (0.88rem) | 500–700 | 1.14–1.29 (tight) | 0.2px | `text-transform: uppercase` |
| Caption | Rubik | 14px (0.88rem) | 500–700 | 1.00–1.43 | 0.2px | Often uppercase |
| Small Caption | Rubik | 12px (0.75rem) | 600 | 2.00 (relaxed) | normal | Subtle annotations |
| Micro Label | Rubik | 10px (0.63rem) | 600 | 1.80 (relaxed) | 0.25px | `text-transform: uppercase` |
| Code | Monaco | 16px (1.00rem) | 400–700 | 1.50 | normal | Code blocks, technical text |
### Principles
- **Dual personality**: Dammit Sans brings irreverent brand character at display scale; Rubik provides clean professionalism for everything functional.
- **Uppercase as system**: Buttons, captions, labels, and micro-text all use `text-transform: uppercase` with subtle letter-spacing (0.2px–0.25px), creating a systematic "technical label" pattern throughout.
- **Weight stratification**: Rubik uses 400 (body), 500 (emphasis/nav), 600 (titles/strong), 700 (buttons/CTAs) — a clean four-tier weight system.
- **Tight headings, relaxed body**: All headings use 1.10–1.25 line-height; body uses 1.50; small captions expand to 2.00 for readability at tiny sizes.
## 4. Component Stylings
### Buttons
**Primary Muted Purple**
- Background: `#79628c` (rgb(121, 98, 140))
- Text: `#ffffff`, uppercase, 14px, weight 500–700, letter-spacing 0.2px
- Border: `1px solid #584674`
- Radius: 13px
- Shadow: `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset` (tactile inset)
- Hover: elevated shadow `rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem`
**Glass White**
- Background: `rgba(255, 255, 255, 0.18)` (frosted glass)
- Text: `#ffffff`
- Padding: 8px
- Radius: 12px (left-aligned variant: `12px 0px 0px 12px`)
- Shadow: `rgba(0, 0, 0, 0.08) 0px 2px 8px`
- Hover background: `rgba(54, 22, 107, 0.14)`
- Use: Secondary actions on dark surfaces
**White Solid**
- Background: `#ffffff`
- Text: `#1f1633`
- Padding: 12px 16px
- Radius: 8px
- Hover: background transitions to `#6a5fc1`, text to white
- Focus: background `#ffb287` (coral), outline `rgb(106, 95, 193) solid 0.125rem`
- Use: High-visibility CTA on dark backgrounds
**Deep Violet (Select/Dropdown)**
- Background: `#422082`
- Text: `#ffffff`
- Padding: 8px 16px
- Radius: 8px
### Inputs
**Text Input**
- Background: `#ffffff`
- Text: `#1f1633`
- Border: `1px solid #cfcfdb`
- Padding: 8px 12px
- Radius: 6px
- Focus: border-color stays `#cfcfdb`, shadow `rgba(0, 0, 0, 0.15) 0px 2px 10px inset`
### Links
- **Default on dark**: `#ffffff`, underline decoration
- **Hover**: color transitions to `#6a5fc1` (Sentry Purple)
- **Purple links**: `#6a5fc1` default, hover underline
- **Lime accent links**: `#c2ef4e` default, hover to `#6a5fc1`
- **Dark context links**: `#362d59`, hover to `#ffffff`
### Cards & Containers
- Background: semi-transparent or dark purple surfaces
- Radius: 8px–12px
- Shadow: `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px`
- Backdrop filter: `blur(18px) saturate(180%)` for glass effects
### Navigation
- Dark transparent header over hero content
- Rubik 15px weight 500 for nav links
- White text, hover to Sentry Purple (`#6a5fc1`)
- Uppercase labels with 0.2px letter-spacing for categories
- Mobile: hamburger menu, full-width expanded
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 4px, 5px, 6px, 8px, 12px, 16px, 24px, 32px, 40px, 44px, 45px, 47px
### Grid & Container
- Max content width: 1152px (XL breakpoint)
- Responsive padding: 2rem (mobile) → 4rem (tablet+)
- Content centered within container
- Full-width dark sections with contained inner content
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | < 576px | Single column, stacked layout |
| Small Tablet | 576–640px | Minor width adjustments |
| Tablet | 640–768px | 2-column begins |
| Small Desktop | 768–992px | Full nav visible |
| Desktop | 992–1152px | Standard layout |
| Large Desktop | 1152–1440px | Max-width content |
### Whitespace Philosophy
- **Dark breathing room**: Generous vertical spacing between sections (64px–80px+) lets the dark background serve as a visual rest.
- **Content islands**: Feature sections are self-contained blocks floating in the dark purple sea, each with its own internal spacing rhythm.
- **Asymmetric padding**: Buttons use asymmetric padding patterns (12px 16px, 8px 12px) that feel organic rather than rigid.
### Border Radius Scale
- Minimal (6px): Form inputs, small interactive elements
- Standard (8px): Buttons, cards, containers
- Comfortable (10px–12px): Larger containers, glass panels
- Rounded (13px): Primary muted buttons
- Pill (18px): Image containers, badges
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Sunken (Level -1) | Inset shadow `rgba(0, 0, 0, 0.1) 0px 1px 3px inset` | Primary buttons (tactile pressed feel) |
| Flat (Level 0) | No shadow | Default surfaces, dark backgrounds |
| Surface (Level 1) | `rgba(0, 0, 0, 0.08) 0px 2px 8px` | Glass buttons, subtle cards |
| Elevated (Level 2) | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px` | Cards, floating panels |
| Prominent (Level 3) | `rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem` | Hover states, modals |
| Ambient (Level 4) | `rgba(22, 15, 36, 0.9) 0px 4px 4px 9px` | Deep purple ambient glow around hero |
**Shadow Philosophy**: Sentry uses a unique combination of inset shadows (buttons feel pressed INTO the surface) and ambient glows (content radiates from the dark background). The deep purple ambient shadow (`rgba(22, 15, 36, 0.9)`) is the signature — it creates a bioluminescent quality where content seems to emit its own purple-tinted light.
## 7. Do's and Don'ts
### Do
- Use deep purple backgrounds (`#1f1633`, `#150f23`) — never pure black (`#000000`)
- Apply inset shadows on primary buttons for the tactile pressed effect
- Use Dammit Sans ONLY for hero/display headings — Rubik for everything else
- Apply `text-transform: uppercase` with `letter-spacing: 0.2px` on buttons and labels
- Use the lime-green accent (`#c2ef4e`) sparingly for maximum impact
- Employ frosted glass effects (`blur(18px) saturate(180%)`) for layered surfaces
- Maintain the warm purple shadow tones — shadows should feel purple-tinted, not neutral gray
- Use Rubik's 4-tier weight system: 400 (body), 500 (nav/emphasis), 600 (titles), 700 (CTAs)
### Don't
- Don't use pure black (`#000000`) for backgrounds — always use the warm purple-blacks
- Don't apply Dammit Sans to body text or UI elements — it's display-only
- Don't use standard gray (`#666`, `#999`) for borders — use purple-tinted grays (`#362d59`, `#584674`)
- Don't drop the uppercase treatment on buttons — it's a system-wide pattern
- Don't use sharp corners (0px radius) — minimum 6px for all interactive elements
- Don't mix the lime-green accent with the coral/pink accents in the same component
- Don't use flat (non-inset) shadows on primary buttons — the tactile quality is signature
- Don't forget letter-spacing on uppercase text — 0.2px minimum
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <576px | Single column, hamburger nav, stacked CTAs |
| Tablet | 576–768px | 2-column feature grids begin |
| Small Desktop | 768–992px | Full navigation, side-by-side layouts |
| Desktop | 992–1152px | Max-width container, full layout |
| Large | >1152px | Content max-width maintained, generous margins |
### Collapsing Strategy
- Hero text: 88px Dammit Sans → 60px → mobile scales
- Navigation: horizontal → hamburger with slide-out
- Feature sections: side-by-side → stacked cards
- Buttons: inline → full-width stacked on mobile
- Container padding: 4rem → 2rem
## 9. Agent Prompt Guide
### Quick Color Reference
- Background: `#1f1633` (primary), `#150f23` (deeper)
- Text: `#ffffff` (primary), `#e5e7eb` (secondary)
- Interactive: `#6a5fc1` (links/hover), `#79628c` (buttons)
- Accent: `#c2ef4e` (lime highlight), `#ffb287` (coral focus)
- Border: `#362d59` (dark), `#cfcfdb` (light context)
### Example Component Prompts
- "Create a hero section on deep purple background (#1f1633). Headline at 88px Dammit Sans weight 700, line-height 1.20, white text. Sub-text at 16px Rubik weight 400, line-height 1.50. White solid CTA button (8px radius, 12px 16px padding), hover transitions to #6a5fc1."
- "Design a navigation bar: transparent over dark background. Rubik 15px weight 500, white text. Uppercase category labels with 0.2px letter-spacing. Hover color #6a5fc1."
- "Build a primary button: background #79628c, border 1px solid #584674, inset shadow rgba(0,0,0,0.1) 0px 1px 3px, white uppercase text at 14px Rubik weight 700, letter-spacing 0.2px, radius 13px. Hover: shadow rgba(0,0,0,0.18) 0px 0.5rem 1.5rem."
- "Create a glass card panel: background rgba(255,255,255,0.18), backdrop-filter blur(18px) saturate(180%), radius 12px. White text content inside."
- "Design a feature section: #150f23 background, 24px Rubik weight 500 heading, 16px Rubik weight 400 body text. 14px uppercase lime-green (#c2ef4e) label above heading."
### Iteration Guide
1. Always start with the dark purple background — the color palette is built FOR dark mode
2. Use inset shadows on buttons, ambient purple glows on hero sections
3. Uppercase + letter-spacing is the systematic pattern for labels, buttons, and captions
4. Lime green (#c2ef4e) is the "pop" color — use once per section maximum
5. Frosted glass for overlaid panels, solid purple for primary surfaces
6. Rubik handles 90% of typography — Dammit Sans is hero-only

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

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

628
design-md/sentry/preview-dark.html Normal file
View File

@@ -0,0 +1,628 @@
<!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: Sentry (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=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #150f23;
--bg-deeper: #0e0918;
--border-purple: #2a2245;
--sentry-purple: #6a5fc1;
--muted-purple: #79628c;
--deep-violet: #422082;
--lime-green: #c2ef4e;
--coral: #ffb287;
--pink: #fa7faa;
--button-border: #584674;
--text-primary: #ffffff;
--text-secondary: #c8c8d0;
--code-yellow: #dcdcaa;
--glass-white: rgba(255, 255, 255, 0.12);
--glass-dark: rgba(54, 22, 107, 0.2);
--input-bg: #1a1328;
--input-border: #3a3252;
--shadow-ambient: rgba(22, 15, 36, 0.9) 0px 4px 4px 9px;
--shadow-hover: rgba(0, 0, 0, 0.25) 0px 0.5rem 1.5rem;
--shadow-card: rgba(0, 0, 0, 0.2) 0px 10px 15px -3px;
--shadow-inset: rgba(0, 0, 0, 0.15) 0px 1px 3px 0px inset;
--shadow-glass: rgba(0, 0, 0, 0.12) 0px 2px 8px;
--font-ui: 'Rubik', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-mono: Monaco, Menlo, 'Ubuntu Mono', monospace;
--page-bg: #150f23;
--section-bg: #0e0918;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--page-bg);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 16px;
font-weight: 400;
line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
.dark-badge {
position: fixed;
top: 16px;
right: 16px;
z-index: 200;
background: var(--lime-green);
color: #150f23;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 6px;
}
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 32px;
background: rgba(14, 9, 24, 0.88);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border-bottom: 1px solid var(--border-purple);
}
.nav-brand {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
letter-spacing: 0.2px;
text-transform: uppercase;
}
.nav-links {
display: flex;
gap: 24px;
list-style: none;
}
.nav-links a {
font-size: 15px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--sentry-purple); }
.nav-cta {
display: inline-block;
background: var(--muted-purple);
color: #fff;
padding: 8px 16px;
border-radius: 13px;
border: 1px solid var(--button-border);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: var(--shadow-inset);
transition: box-shadow 0.2s;
}
.nav-cta:hover { box-shadow: var(--shadow-hover); }
.hero {
position: relative;
padding: 96px 32px 80px;
text-align: center;
background: var(--bg-primary);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(106, 95, 193, 0.25) 0%, rgba(21, 15, 35, 0) 70%);
pointer-events: none;
z-index: 0;
}
.hero-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.hero h1 {
font-size: 80px;
font-weight: 700;
line-height: 1.10;
color: var(--text-primary);
margin-bottom: 16px;
}
.hero h1 span { color: var(--lime-green); }
.hero p {
font-size: 18px;
font-weight: 400;
line-height: 1.50;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 32px;
}
.hero-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary {
display: inline-block;
background: var(--lime-green);
color: #150f23;
padding: 12px 24px;
border-radius: 8px;
border: none;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-secondary {
display: inline-block;
background: var(--glass-white);
color: #fff;
padding: 12px 24px;
border-radius: 12px;
border: none;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
backdrop-filter: blur(18px) saturate(180%);
box-shadow: var(--shadow-glass);
transition: background 0.2s;
}
.btn-secondary:hover { background: var(--glass-dark); }
.btn-muted {
display: inline-block;
background: var(--muted-purple);
color: #fff;
padding: 10px 20px;
border-radius: 13px;
border: 1px solid var(--button-border);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
box-shadow: var(--shadow-inset);
transition: box-shadow 0.2s;
}
.btn-muted:hover { box-shadow: var(--shadow-hover); }
.btn-violet {
display: inline-block;
background: var(--deep-violet);
color: #fff;
padding: 8px 16px;
border-radius: 8px;
border: none;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.section {
padding: 64px 32px;
max-width: 1152px;
margin: 0 auto;
}
.section-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.25px;
text-transform: uppercase;
color: var(--lime-green);
margin-bottom: 8px;
line-height: 1.80;
}
.section-title {
font-size: 30px;
font-weight: 400;
line-height: 1.20;
margin-bottom: 32px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-purple);
margin: 0;
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.color-swatch {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-purple);
background: var(--bg-deeper);
}
.color-swatch-block { height: 80px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; font-weight: 400; color: var(--text-secondary); font-family: var(--font-mono); }
.color-swatch-role { font-size: 11px; color: var(--text-secondary); margin-top: 4px; opacity: 0.7; }
.color-group-label {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2px;
color: var(--text-secondary);
margin: 32px 0 12px;
}
.type-sample {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-purple);
}
.type-sample:last-child { border-bottom: none; }
.type-meta {
font-size: 12px;
font-weight: 600;
color: var(--lime-green);
font-family: var(--font-mono);
margin-top: 8px;
letter-spacing: 0.25px;
text-transform: uppercase;
}
.button-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 16px;
}
.button-label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.2px;
margin-top: 8px;
}
.button-item { text-align: center; }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.card {
background: var(--bg-deeper);
border: 1px solid var(--border-purple);
border-radius: 12px;
padding: 24px;
transition: box-shadow 0.3s;
}
.card:hover { box-shadow: var(--shadow-card); }
.card-glass {
background: var(--glass-white);
backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 24px;
}
.card h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.card p, .card-glass p { font-size: 14px; color: var(--text-secondary); line-height: 1.50; }
.card-tag {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.25px;
text-transform: uppercase;
color: var(--lime-green);
background: rgba(194, 239, 78, 0.1);
padding: 4px 8px;
border-radius: 6px;
margin-bottom: 12px;
}
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.2px;
}
.form-input {
width: 100%;
background: var(--input-bg);
color: var(--text-primary);
border: 1px solid var(--input-border);
padding: 8px 12px;
border-radius: 6px;
font-family: var(--font-ui);
font-size: 16px;
outline: none;
transition: box-shadow 0.2s;
}
.form-input:focus { box-shadow: rgba(106, 95, 193, 0.3) 0px 0px 0px 2px; }
.form-input--focus { box-shadow: rgba(106, 95, 193, 0.3) 0px 0px 0px 2px; }
.form-input--error {
border-color: var(--pink);
box-shadow: 0 0 0 2px rgba(250, 127, 170, 0.3);
}
.form-textarea {
width: 100%;
min-height: 100px;
background: var(--input-bg);
color: var(--text-primary);
border: 1px solid var(--input-border);
padding: 8px 12px;
border-radius: 6px;
font-family: var(--font-ui);
font-size: 16px;
resize: vertical;
outline: none;
}
.form-state-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-top: 4px; opacity: 0.7; }
.spacing-row {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.spacing-item { text-align: center; }
.spacing-block {
background: var(--sentry-purple);
border-radius: 4px;
margin-bottom: 6px;
height: 32px;
}
.spacing-value { font-size: 11px; font-weight: 600; color: var(--text-secondary); font-family: var(--font-mono); }
.radius-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.radius-item { text-align: center; }
.radius-box {
width: 72px;
height: 72px;
background: var(--muted-purple);
margin-bottom: 8px;
}
.radius-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); font-family: var(--font-mono); }
.radius-context { font-size: 10px; color: var(--text-secondary); opacity: 0.6; }
.elevation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
}
.elevation-card {
background: var(--bg-deeper);
border: 1px solid var(--border-purple);
border-radius: 12px;
padding: 24px;
text-align: center;
}
.elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.elevation-desc { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
.footer {
padding: 32px;
text-align: center;
background: var(--bg-deeper);
border-top: 1px solid var(--border-purple);
font-size: 13px;
color: var(--text-secondary);
}
.footer a { color: var(--lime-green); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 48px; }
.nav-links { display: none; }
.color-grid { grid-template-columns: repeat(2, 1fr); }
.section { padding: 48px 20px; }
}
</style>
</head>
<body>
<div class="dark-badge">Dark Mode</div>
<nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#spacing">Spacing</a></li>
</ul>
<a class="nav-cta" href="#">Get Started</a>
</nav>
<section class="hero">
<div class="hero-content">
<h1>Design System<br>Inspired by <span>Sentry</span></h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized in dark mode.</p>
<div class="hero-buttons">
<a class="btn-primary" href="#">Start Building</a>
<a class="btn-secondary" href="#">View Tokens</a>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<div class="section-label">Section 01</div>
<h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Primary Brand</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#1f1633"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Purple</div><div class="color-swatch-hex">#1f1633</div><div class="color-swatch-role">Primary background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#150f23"></div><div class="color-swatch-info"><div class="color-swatch-name">Darker Purple</div><div class="color-swatch-hex">#150f23</div><div class="color-swatch-role">Deeper sections</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#362d59"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Purple</div><div class="color-swatch-hex">#362d59</div><div class="color-swatch-role">Borders, dividers</div></div></div>
</div>
<div class="color-group-label">Accent Colors</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#6a5fc1"></div><div class="color-swatch-info"><div class="color-swatch-name">Sentry Purple</div><div class="color-swatch-hex">#6a5fc1</div><div class="color-swatch-role">Links, hover, focus</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#79628c"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted Purple</div><div class="color-swatch-hex">#79628c</div><div class="color-swatch-role">Button backgrounds</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#422082"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Violet</div><div class="color-swatch-hex">#422082</div><div class="color-swatch-role">Selects, active</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#c2ef4e"></div><div class="color-swatch-info"><div class="color-swatch-name">Lime Green</div><div class="color-swatch-hex">#c2ef4e</div><div class="color-swatch-role">High-visibility accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffb287"></div><div class="color-swatch-info"><div class="color-swatch-name">Coral</div><div class="color-swatch-hex">#ffb287</div><div class="color-swatch-role">Focus backgrounds</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#fa7faa"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#fa7faa</div><div class="color-swatch-role">Focus outlines</div></div></div>
</div>
<div class="color-group-label">Text Colors</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border:1px solid #2a2245"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Primary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5e7eb"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Gray</div><div class="color-swatch-hex">#e5e7eb</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#dcdcaa"></div><div class="color-swatch-info"><div class="color-swatch-name">Code Yellow</div><div class="color-swatch-hex">#dcdcaa</div><div class="color-swatch-role">Syntax highlighting</div></div></div>
</div>
<div class="color-group-label">Surface & Overlay</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.08)"></div><div class="color-swatch-info"><div class="color-swatch-name">Glass White</div><div class="color-swatch-hex">rgba(255,255,255,0.12)</div><div class="color-swatch-role">Frosted glass</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(54,22,107,0.2)"></div><div class="color-swatch-info"><div class="color-swatch-name">Glass Dark</div><div class="color-swatch-hex">rgba(54,22,107,0.2)</div><div class="color-swatch-role">Hover overlay</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#3a3252"></div><div class="color-swatch-info"><div class="color-swatch-name">Input Border</div><div class="color-swatch-hex">#3a3252</div><div class="color-swatch-role">Form borders (dark)</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">Section 02</div>
<h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:80px; font-weight:700; line-height:1.10;">Display Hero</div><div class="type-meta">Display Hero — 88px / 700 / 1.20</div></div>
<div class="type-sample"><div style="font-size:60px; font-weight:500; line-height:1.10;">Display Secondary</div><div class="type-meta">Display Secondary — 60px / 500 / 1.10</div></div>
<div class="type-sample"><div style="font-size:30px; font-weight:400; line-height:1.20;">Section Heading</div><div class="type-meta">Section Heading — 30px / 400 / 1.20</div></div>
<div class="type-sample"><div style="font-size:27px; font-weight:500; line-height:1.25;">Sub-heading</div><div class="type-meta">Sub-heading — 27px / 500 / 1.25</div></div>
<div class="type-sample"><div style="font-size:24px; font-weight:500; line-height:1.25;">Card Title</div><div class="type-meta">Card Title — 24px / 500 / 1.25</div></div>
<div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.25;">Feature Title</div><div class="type-meta">Feature Title — 20px / 600 / 1.25</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body text — The quick brown fox jumps over the lazy dog. Sentry helps developers fix bugs faster.</div><div class="type-meta">Body — 16px / 400 / 1.50</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:700; line-height:1.14; text-transform:uppercase; letter-spacing:0.2px;">Button Text</div><div class="type-meta">Button — 14px / 700 / uppercase / 0.2px</div></div>
<div class="type-sample"><div style="font-size:10px; font-weight:600; line-height:1.80; text-transform:uppercase; letter-spacing:0.25px;">Micro Label</div><div class="type-meta">Micro — 10px / 600 / uppercase / 0.25px</div></div>
<div class="type-sample"><div style="font-family:Monaco,Menlo,'Ubuntu Mono',monospace; font-size:16px; font-weight:400; line-height:1.50; color:#dcdcaa;">const sentry = require('@sentry/node');</div><div class="type-meta">Code — 16px / Monaco / code-yellow</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">Section 03</div>
<h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-primary" href="#">Start Building</a><div class="button-label">Lime Primary</div></div>
<div class="button-item"><a class="btn-muted" href="#">Get Started</a><div class="button-label">Muted Purple</div></div>
<div class="button-item"><a class="btn-secondary" href="#">View Docs</a><div class="button-label">Glass White</div></div>
<div class="button-item"><a class="btn-violet" href="#">Select Plan</a><div class="button-label">Deep Violet</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">Section 04</div>
<h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card"><div class="card-tag">Feature</div><h3>Error Tracking</h3><p>Automatically capture and organize errors from your application with full stack traces and breadcrumbs.</p></div>
<div class="card" style="box-shadow: rgba(0,0,0,0.2) 0px 10px 15px -3px;"><div class="card-tag">Elevated</div><h3>Performance Monitoring</h3><p>Track transactions and identify bottlenecks. Card shown with hover elevation.</p></div>
<div class="card-glass"><h3 style="color:#fff;">Glass Card</h3><p style="color:rgba(255,255,255,0.7);">Frosted glass surface with backdrop-filter blur on deep dark background.</p></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">Section 05</div>
<h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@example.com"><div class="form-state-label">Default</div></div>
<div class="form-group"><label class="form-label">Project</label><input class="form-input form-input--focus" type="text" value="my-sentry-project"><div class="form-state-label">Focus</div></div>
<div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--error" type="text" value="invalid-key"><div class="form-state-label">Error</div></div>
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe..."></textarea></div>
</section>
<hr class="section-divider">
<section class="section" id="spacing">
<div class="section-label">Section 06</div>
<h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width:1px"></div><div class="spacing-value">1</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="radius">
<div class="section-label">Section 07</div>
<h2 class="section-title">Border Radius Scale</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Inputs</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Buttons</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:10px"></div><div class="radius-label">10px</div><div class="radius-context">Containers</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Glass panels</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:13px"></div><div class="radius-label">13px</div><div class="radius-context">Primary btn</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:18px"></div><div class="radius-label">18px</div><div class="radius-context">Badges</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="elevation">
<div class="section-label">Section 08</div>
<h2 class="section-title">Elevation &amp; Depth</h2>
<div class="elevation-grid">
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.15) 0px 1px 3px 0px inset;"><div class="elevation-label">Sunken (-1)</div><div class="elevation-desc">Inset — buttons</div></div>
<div class="elevation-card"><div class="elevation-label">Flat (0)</div><div class="elevation-desc">No shadow</div></div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.12) 0px 2px 8px;"><div class="elevation-label">Surface (1)</div><div class="elevation-desc">Glass, subtle</div></div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.2) 0px 10px 15px -3px;"><div class="elevation-label">Elevated (2)</div><div class="elevation-desc">Cards, panels</div></div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.25) 0px 0.5rem 1.5rem;"><div class="elevation-label">Prominent (3)</div><div class="elevation-desc">Hover, modals</div></div>
<div class="elevation-card" style="box-shadow: rgba(22,15,36,0.9) 0px 4px 4px 9px;"><div class="elevation-label">Ambient (4)</div><div class="elevation-desc">Purple glow</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://sentry.io/welcome/">sentry.io</a> DESIGN.md &mdash; awesome-design-md
</footer>
</body>
</html>

953
design-md/sentry/preview.html Normal file
View File

@@ -0,0 +1,953 @@
<!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: Sentry (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=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
/* Primary Brand */
--bg-primary: #1f1633;
--bg-deeper: #150f23;
--border-purple: #362d59;
/* Accent */
--sentry-purple: #6a5fc1;
--muted-purple: #79628c;
--deep-violet: #422082;
--lime-green: #c2ef4e;
--coral: #ffb287;
--pink: #fa7faa;
--button-border: #584674;
/* Text */
--text-primary: #ffffff;
--text-secondary: #e5e7eb;
--code-yellow: #dcdcaa;
/* Surface */
--glass-white: rgba(255, 255, 255, 0.18);
--glass-dark: rgba(54, 22, 107, 0.14);
--input-bg: #ffffff;
--input-border: #cfcfdb;
/* Shadows */
--shadow-ambient: rgba(22, 15, 36, 0.9) 0px 4px 4px 9px;
--shadow-hover: rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem;
--shadow-card: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px;
--shadow-inset: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset;
--shadow-glass: rgba(0, 0, 0, 0.08) 0px 2px 8px;
/* Fonts */
--font-ui: 'Rubik', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-mono: Monaco, Menlo, 'Ubuntu Mono', monospace;
/* Light mode page */
--page-bg: #1f1633;
--section-bg: #150f23;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--page-bg);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 16px;
font-weight: 400;
line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 32px;
background: rgba(31, 22, 51, 0.85);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border-bottom: 1px solid var(--border-purple);
}
.nav-brand {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
letter-spacing: 0.2px;
text-transform: uppercase;
}
.nav-links {
display: flex;
gap: 24px;
list-style: none;
}
.nav-links a {
font-size: 15px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--sentry-purple); }
.nav-cta {
display: inline-block;
background: var(--muted-purple);
color: #fff;
padding: 8px 16px;
border-radius: 13px;
border: 1px solid var(--button-border);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: var(--shadow-inset);
transition: box-shadow 0.2s;
}
.nav-cta:hover { box-shadow: var(--shadow-hover); }
/* HERO */
.hero {
position: relative;
padding: 96px 32px 80px;
text-align: center;
background: var(--bg-primary);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(106, 95, 193, 0.35) 0%, rgba(31, 22, 51, 0) 70%);
pointer-events: none;
z-index: 0;
}
.hero-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.hero h1 {
font-size: 80px;
font-weight: 700;
line-height: 1.10;
color: var(--text-primary);
margin-bottom: 16px;
}
.hero h1 span { color: var(--lime-green); }
.hero p {
font-size: 18px;
font-weight: 400;
line-height: 1.50;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 32px;
}
.hero-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* BUTTONS (reusable) */
.btn-primary {
display: inline-block;
background: #ffffff;
color: #1f1633;
padding: 12px 24px;
border-radius: 8px;
border: none;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.btn-primary:hover { background: var(--sentry-purple); color: #fff; }
.btn-secondary {
display: inline-block;
background: var(--glass-white);
color: #fff;
padding: 12px 24px;
border-radius: 12px;
border: none;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
backdrop-filter: blur(18px) saturate(180%);
box-shadow: var(--shadow-glass);
transition: background 0.2s;
}
.btn-secondary:hover { background: var(--glass-dark); }
.btn-muted {
display: inline-block;
background: var(--muted-purple);
color: #fff;
padding: 10px 20px;
border-radius: 13px;
border: 1px solid var(--button-border);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
box-shadow: var(--shadow-inset);
transition: box-shadow 0.2s;
}
.btn-muted:hover { box-shadow: var(--shadow-hover); }
.btn-violet {
display: inline-block;
background: var(--deep-violet);
color: #fff;
padding: 8px 16px;
border-radius: 8px;
border: none;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
/* SECTIONS */
.section {
padding: 64px 32px;
max-width: 1152px;
margin: 0 auto;
}
.section-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.25px;
text-transform: uppercase;
color: var(--lime-green);
margin-bottom: 8px;
line-height: 1.80;
}
.section-title {
font-size: 30px;
font-weight: 400;
line-height: 1.20;
margin-bottom: 32px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-purple);
margin: 0;
}
/* COLOR PALETTE */
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.color-swatch {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-purple);
background: var(--bg-deeper);
}
.color-swatch-block {
height: 80px;
width: 100%;
}
.color-swatch-info {
padding: 10px 12px;
}
.color-swatch-name {
font-size: 13px;
font-weight: 600;
margin-bottom: 2px;
}
.color-swatch-hex {
font-size: 12px;
font-weight: 400;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.color-swatch-role {
font-size: 11px;
color: var(--text-secondary);
margin-top: 4px;
opacity: 0.7;
}
.color-group-label {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2px;
color: var(--text-secondary);
margin: 32px 0 12px;
}
/* TYPOGRAPHY */
.type-sample {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-purple);
}
.type-sample:last-child { border-bottom: none; }
.type-meta {
font-size: 12px;
font-weight: 600;
color: var(--lime-green);
font-family: var(--font-mono);
margin-top: 8px;
letter-spacing: 0.25px;
text-transform: uppercase;
}
/* BUTTON SHOWCASE */
.button-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 16px;
}
.button-label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.2px;
margin-top: 8px;
}
.button-item { text-align: center; }
/* CARD EXAMPLES */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.card {
background: var(--bg-deeper);
border: 1px solid var(--border-purple);
border-radius: 12px;
padding: 24px;
transition: box-shadow 0.3s;
}
.card:hover { box-shadow: var(--shadow-card); }
.card-glass {
background: var(--glass-white);
backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 24px;
}
.card h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
}
.card p, .card-glass p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.50;
}
.card-tag {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.25px;
text-transform: uppercase;
color: var(--lime-green);
background: rgba(194, 239, 78, 0.12);
padding: 4px 8px;
border-radius: 6px;
margin-bottom: 12px;
}
/* FORM ELEMENTS */
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.2px;
}
.form-input {
width: 100%;
background: var(--input-bg);
color: #1f1633;
border: 1px solid var(--input-border);
padding: 8px 12px;
border-radius: 6px;
font-family: var(--font-ui);
font-size: 16px;
outline: none;
transition: box-shadow 0.2s;
}
.form-input:focus {
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 10px inset;
}
.form-input--focus {
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 10px inset;
border-color: var(--input-border);
}
.form-input--error {
border-color: var(--pink);
box-shadow: 0 0 0 2px rgba(250, 127, 170, 0.3);
}
.form-textarea {
width: 100%;
min-height: 100px;
background: var(--input-bg);
color: #1f1633;
border: 1px solid var(--input-border);
padding: 8px 12px;
border-radius: 6px;
font-family: var(--font-ui);
font-size: 16px;
resize: vertical;
outline: none;
}
.form-state-label {
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
margin-top: 4px;
opacity: 0.7;
}
/* SPACING SCALE */
.spacing-row {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.spacing-item { text-align: center; }
.spacing-block {
background: var(--sentry-purple);
border-radius: 4px;
margin-bottom: 6px;
height: 32px;
}
.spacing-value {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
font-family: var(--font-mono);
}
/* RADIUS SCALE */
.radius-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
}
.radius-item { text-align: center; }
.radius-box {
width: 72px;
height: 72px;
background: var(--muted-purple);
margin-bottom: 8px;
}
.radius-label {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.radius-context {
font-size: 10px;
color: var(--text-secondary);
opacity: 0.6;
}
/* ELEVATION */
.elevation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
}
.elevation-card {
background: var(--bg-deeper);
border: 1px solid var(--border-purple);
border-radius: 12px;
padding: 24px;
text-align: center;
}
.elevation-label {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.elevation-desc {
font-size: 12px;
color: var(--text-secondary);
font-family: var(--font-mono);
}
/* FOOTER */
.footer {
padding: 32px;
text-align: center;
background: var(--bg-deeper);
border-top: 1px solid var(--border-purple);
font-size: 13px;
color: var(--text-secondary);
}
.footer a {
color: var(--lime-green);
text-decoration: underline;
}
@media (max-width: 768px) {
.hero h1 { font-size: 48px; }
.nav-links { display: none; }
.color-grid { grid-template-columns: repeat(2, 1fr); }
.section { padding: 48px 20px; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#spacing">Spacing</a></li>
</ul>
<a class="nav-cta" href="#">Get Started</a>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-content">
<h1>Design System<br>Inspired by <span>Sentry</span></h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
<div class="hero-buttons">
<a class="btn-primary" href="#">Start Building</a>
<a class="btn-secondary" href="#">View Tokens</a>
</div>
</div>
</section>
<hr class="section-divider">
<!-- 1. COLOR PALETTE -->
<section class="section" id="colors">
<div class="section-label">Section 01</div>
<h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Primary Brand</div>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background:#1f1633"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Deep Purple</div>
<div class="color-swatch-hex">#1f1633</div>
<div class="color-swatch-role">Primary background</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:#150f23"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Darker Purple</div>
<div class="color-swatch-hex">#150f23</div>
<div class="color-swatch-role">Deeper sections, footer</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:#362d59"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Border Purple</div>
<div class="color-swatch-hex">#362d59</div>
<div class="color-swatch-role">Borders, dividers</div>
</div>
</div>
</div>
<div class="color-group-label">Accent Colors</div>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background:#6a5fc1"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Sentry Purple</div>
<div class="color-swatch-hex">#6a5fc1</div>
<div class="color-swatch-role">Links, hover, focus rings</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:#79628c"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Muted Purple</div>
<div class="color-swatch-hex">#79628c</div>
<div class="color-swatch-role">Button backgrounds</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:#422082"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Deep Violet</div>
<div class="color-swatch-hex">#422082</div>
<div class="color-swatch-role">Selects, active states</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:#c2ef4e"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Lime Green</div>
<div class="color-swatch-hex">#c2ef4e</div>
<div class="color-swatch-role">High-visibility accent</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:#ffb287"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Coral</div>
<div class="color-swatch-hex">#ffb287</div>
<div class="color-swatch-role">Focus state backgrounds</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:#fa7faa"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pink</div>
<div class="color-swatch-hex">#fa7faa</div>
<div class="color-swatch-role">Focus outlines, decor</div>
</div>
</div>
</div>
<div class="color-group-label">Text Colors</div>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background:#ffffff; border: 1px solid #362d59"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Primary text on dark</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:#e5e7eb"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Light Gray</div>
<div class="color-swatch-hex">#e5e7eb</div>
<div class="color-swatch-role">Secondary text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:#dcdcaa"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Code Yellow</div>
<div class="color-swatch-hex">#dcdcaa</div>
<div class="color-swatch-role">Syntax highlighting</div>
</div>
</div>
</div>
<div class="color-group-label">Surface & Overlay</div>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background:rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.1)"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Glass White</div>
<div class="color-swatch-hex">rgba(255,255,255,0.18)</div>
<div class="color-swatch-role">Frosted glass buttons</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:rgba(54,22,107,0.14)"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Glass Dark</div>
<div class="color-swatch-hex">rgba(54,22,107,0.14)</div>
<div class="color-swatch-role">Hover overlay</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background:#cfcfdb"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Input Border</div>
<div class="color-swatch-hex">#cfcfdb</div>
<div class="color-swatch-role">Form field borders</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- 2. TYPOGRAPHY SCALE -->
<section class="section" id="typography">
<div class="section-label">Section 02</div>
<h2 class="section-title">Typography Scale</h2>
<div class="type-sample">
<div style="font-size:80px; font-weight:700; line-height:1.10;">Display Hero</div>
<div class="type-meta">Display Hero — 88px / 700 / 1.20 / Dammit Sans (approximated)</div>
</div>
<div class="type-sample">
<div style="font-size:60px; font-weight:500; line-height:1.10;">Display Secondary</div>
<div class="type-meta">Display Secondary — 60px / 500 / 1.10 / Dammit Sans (approximated)</div>
</div>
<div class="type-sample">
<div style="font-size:30px; font-weight:400; line-height:1.20;">Section Heading</div>
<div class="type-meta">Section Heading — 30px / 400 / 1.20 / Rubik</div>
</div>
<div class="type-sample">
<div style="font-size:27px; font-weight:500; line-height:1.25;">Sub-heading</div>
<div class="type-meta">Sub-heading — 27px / 500 / 1.25 / Rubik</div>
</div>
<div class="type-sample">
<div style="font-size:24px; font-weight:500; line-height:1.25;">Card Title</div>
<div class="type-meta">Card Title — 24px / 500 / 1.25 / Rubik</div>
</div>
<div class="type-sample">
<div style="font-size:20px; font-weight:600; line-height:1.25;">Feature Title</div>
<div class="type-meta">Feature Title — 20px / 600 / 1.25 / Rubik</div>
</div>
<div class="type-sample">
<div style="font-size:16px; font-weight:400; line-height:1.50;">Body text — The quick brown fox jumps over the lazy dog. Sentry helps developers fix bugs faster.</div>
<div class="type-meta">Body — 16px / 400 / 1.50 / Rubik</div>
</div>
<div class="type-sample">
<div style="font-size:16px; font-weight:600; line-height:1.50;">Body Emphasis — The quick brown fox jumps over the lazy dog.</div>
<div class="type-meta">Body Emphasis — 16px / 600 / 1.50 / Rubik</div>
</div>
<div class="type-sample">
<div style="font-size:15px; font-weight:500; line-height:1.40;">Nav Label</div>
<div class="type-meta">Nav Label — 15px / 500 / 1.40 / Rubik</div>
</div>
<div class="type-sample">
<div style="font-size:15px; font-weight:500; line-height:1.25; text-transform:uppercase;">Uppercase Label</div>
<div class="type-meta">Uppercase Label — 15px / 500 / 1.25 / Rubik / uppercase</div>
</div>
<div class="type-sample">
<div style="font-size:14px; font-weight:700; line-height:1.14; text-transform:uppercase; letter-spacing:0.2px;">Button Text</div>
<div class="type-meta">Button Text — 14px / 700 / 1.14 / Rubik / uppercase / 0.2px spacing</div>
</div>
<div class="type-sample">
<div style="font-size:14px; font-weight:500; line-height:1.43; text-transform:uppercase; letter-spacing:0.2px;">Caption</div>
<div class="type-meta">Caption — 14px / 500 / 1.43 / Rubik / uppercase / 0.2px spacing</div>
</div>
<div class="type-sample">
<div style="font-size:12px; font-weight:600; line-height:2.00;">Small Caption</div>
<div class="type-meta">Small Caption — 12px / 600 / 2.00 / Rubik</div>
</div>
<div class="type-sample">
<div style="font-size:10px; font-weight:600; line-height:1.80; text-transform:uppercase; letter-spacing:0.25px;">Micro Label</div>
<div class="type-meta">Micro Label — 10px / 600 / 1.80 / Rubik / uppercase / 0.25px spacing</div>
</div>
<div class="type-sample">
<div style="font-family:Monaco,Menlo,'Ubuntu Mono',monospace; font-size:16px; font-weight:400; line-height:1.50; color:#dcdcaa;">const sentry = require('@sentry/node');</div>
<div class="type-meta">Code — 16px / 400 / 1.50 / Monaco</div>
</div>
</section>
<hr class="section-divider">
<!-- 3. BUTTON VARIANTS -->
<section class="section" id="buttons">
<div class="section-label">Section 03</div>
<h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item">
<a class="btn-primary" href="#">Start Building</a>
<div class="button-label">White Solid</div>
</div>
<div class="button-item">
<a class="btn-muted" href="#">Get Started</a>
<div class="button-label">Primary Muted</div>
</div>
<div class="button-item">
<a class="btn-secondary" href="#">View Docs</a>
<div class="button-label">Glass White</div>
</div>
<div class="button-item">
<a class="btn-violet" href="#">Select Plan</a>
<div class="button-label">Deep Violet</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- 4. CARD EXAMPLES -->
<section class="section" id="cards">
<div class="section-label">Section 04</div>
<h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card">
<div class="card-tag">Feature</div>
<h3>Error Tracking</h3>
<p>Automatically capture and organize errors from your application. Get full stack traces, breadcrumbs, and context for every issue.</p>
</div>
<div class="card" style="box-shadow: rgba(0,0,0,0.1) 0px 10px 15px -3px;">
<div class="card-tag">Elevated</div>
<h3>Performance Monitoring</h3>
<p>Track transactions and identify slow database queries, API calls, and rendering issues. Card shown with hover elevation.</p>
</div>
<div class="card-glass">
<h3 style="color:#fff;">Glass Card</h3>
<p style="color:rgba(255,255,255,0.8);">Frosted glass surface using backdrop-filter blur and white alpha overlay. Used for layered panels on dark backgrounds.</p>
</div>
</div>
</section>
<hr class="section-divider">
<!-- 5. FORM ELEMENTS -->
<section class="section" id="forms">
<div class="section-label">Section 05</div>
<h2 class="section-title">Form Elements</h2>
<div class="form-group">
<label class="form-label">Email Address</label>
<input class="form-input" type="email" placeholder="you@example.com">
<div class="form-state-label">Default state</div>
</div>
<div class="form-group">
<label class="form-label">Project Name</label>
<input class="form-input form-input--focus" type="text" value="my-sentry-project">
<div class="form-state-label">Focus state (inset shadow)</div>
</div>
<div class="form-group">
<label class="form-label">API Key</label>
<input class="form-input form-input--error" type="text" value="invalid-key-format">
<div class="form-state-label">Error state (pink ring)</div>
</div>
<div class="form-group">
<label class="form-label">Description</label>
<textarea class="form-textarea" placeholder="Describe the issue..."></textarea>
<div class="form-state-label">Textarea</div>
</div>
</section>
<hr class="section-divider">
<!-- 6. SPACING SCALE -->
<section class="section" id="spacing">
<div class="section-label">Section 06</div>
<h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width:1px"></div><div class="spacing-value">1</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
</div>
<p style="font-size:13px; color:var(--text-secondary);">Base unit: 8px. Scale: 1, 2, 4, 5, 6, 8, 12, 16, 24, 32, 40, 44, 45, 47px</p>
</section>
<hr class="section-divider">
<!-- 7. BORDER RADIUS SCALE -->
<section class="section" id="radius">
<div class="section-label">Section 07</div>
<h2 class="section-title">Border Radius Scale</h2>
<div class="radius-row">
<div class="radius-item">
<div class="radius-box" style="border-radius:6px"></div>
<div class="radius-label">6px</div>
<div class="radius-context">Inputs</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius:8px"></div>
<div class="radius-label">8px</div>
<div class="radius-context">Buttons, cards</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius:10px"></div>
<div class="radius-label">10px</div>
<div class="radius-context">Containers</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius:12px"></div>
<div class="radius-label">12px</div>
<div class="radius-context">Glass panels</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius:13px"></div>
<div class="radius-label">13px</div>
<div class="radius-context">Primary buttons</div>
</div>
<div class="radius-item">
<div class="radius-box" style="border-radius:18px"></div>
<div class="radius-label">18px</div>
<div class="radius-context">Badges, images</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- 8. ELEVATION / DEPTH -->
<section class="section" id="elevation">
<div class="section-label">Section 08</div>
<h2 class="section-title">Elevation &amp; Depth</h2>
<div class="elevation-grid">
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px inset;">
<div class="elevation-label">Level -1: Sunken</div>
<div class="elevation-desc">Inset shadow — tactile pressed buttons</div>
</div>
<div class="elevation-card">
<div class="elevation-label">Level 0: Flat</div>
<div class="elevation-desc">No shadow — default surfaces</div>
</div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.08) 0px 2px 8px;">
<div class="elevation-label">Level 1: Surface</div>
<div class="elevation-desc">Glass buttons, subtle cards</div>
</div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.1) 0px 10px 15px -3px;">
<div class="elevation-label">Level 2: Elevated</div>
<div class="elevation-desc">Cards, floating panels</div>
</div>
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.18) 0px 0.5rem 1.5rem;">
<div class="elevation-label">Level 3: Prominent</div>
<div class="elevation-desc">Hover states, modals</div>
</div>
<div class="elevation-card" style="box-shadow: rgba(22,15,36,0.9) 0px 4px 4px 9px;">
<div class="elevation-label">Level 4: Ambient</div>
<div class="elevation-desc">Purple glow around hero</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
Generated from <a href="https://sentry.io/welcome/">sentry.io</a> DESIGN.md &mdash; awesome-design-md
</footer>
</body>
</html>