450 lines
23 KiB
HTML
450 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Design System Inspired by Cal.com — Dark Mode</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=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--charcoal: #242424;
|
||
--midnight: #111111;
|
||
--mid-gray: #898989;
|
||
--white: #ffffff;
|
||
--link-blue: #0099ff;
|
||
--focus-blue: #3b82f6;
|
||
--font-display: 'Cal Sans', system-ui, sans-serif;
|
||
--font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
|
||
--font-mono: 'Roboto Mono', ui-monospace, monospace;
|
||
|
||
--dk-bg: #0a0a0a;
|
||
--dk-surface: #141414;
|
||
--dk-surface-elevated: #1c1c1c;
|
||
--dk-border: #2a2a2a;
|
||
--dk-border-light: #333333;
|
||
--dk-text: #e8e8e8;
|
||
--dk-text-secondary: #898989;
|
||
--dk-text-muted: #555555;
|
||
--dk-shadow-ring: rgba(255,255,255,0.06);
|
||
--dk-shadow-soft: rgba(0,0,0,0.3);
|
||
--dk-shadow-contact: rgba(0,0,0,0.8);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: var(--font-body);
|
||
background: var(--dk-bg);
|
||
color: var(--dk-text);
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
line-height: 1.50;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.dark-badge {
|
||
position: fixed;
|
||
top: 14px;
|
||
right: 14px;
|
||
z-index: 200;
|
||
background: var(--white);
|
||
color: var(--charcoal);
|
||
padding: 5px 12px;
|
||
border-radius: 8px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 40px;
|
||
background: rgba(10,10,10,0.92);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||
}
|
||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--dk-text); text-decoration: none; }
|
||
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
|
||
.nav-links a { font-size: 14px; font-weight: 500; color: var(--dk-text-secondary); text-decoration: none; transition: color 0.15s; }
|
||
.nav-links a:hover { color: var(--dk-text); }
|
||
.nav-cta {
|
||
background: var(--white);
|
||
color: var(--charcoal);
|
||
padding: 8px 18px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
font-family: var(--font-body);
|
||
text-decoration: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: opacity 0.15s;
|
||
}
|
||
.nav-cta:hover { opacity: 0.85; }
|
||
|
||
.hero { padding: 96px 40px 80px; text-align: center; }
|
||
.hero h1 {
|
||
font-family: var(--font-display);
|
||
font-size: 64px;
|
||
font-weight: 600;
|
||
line-height: 1.10;
|
||
color: var(--dk-text);
|
||
max-width: 700px;
|
||
margin: 0 auto 20px;
|
||
}
|
||
.hero .subtitle {
|
||
font-size: 16px;
|
||
font-weight: 300;
|
||
line-height: 1.50;
|
||
color: var(--dk-text-secondary);
|
||
max-width: 480px;
|
||
margin: 0 auto 36px;
|
||
letter-spacing: -0.2px;
|
||
}
|
||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||
.btn-light {
|
||
background: var(--white);
|
||
color: var(--charcoal);
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
font-family: var(--font-body);
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: opacity 0.15s;
|
||
}
|
||
.btn-light:hover { opacity: 0.85; }
|
||
.btn-outline {
|
||
background: transparent;
|
||
color: var(--dk-text);
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
font-family: var(--font-body);
|
||
border: none;
|
||
cursor: pointer;
|
||
box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||
transition: box-shadow 0.15s;
|
||
}
|
||
.btn-outline:hover { box-shadow: rgba(255,255,255,0.12) 0px 0px 0px 1px; }
|
||
|
||
.section { padding: 80px 40px; max-width: 1100px; margin: 0 auto; }
|
||
.section-title {
|
||
font-family: var(--font-display);
|
||
font-size: 48px;
|
||
font-weight: 600;
|
||
line-height: 1.10;
|
||
color: var(--dk-text);
|
||
margin-bottom: 8px;
|
||
}
|
||
.section-subtitle {
|
||
font-size: 16px;
|
||
font-weight: 300;
|
||
line-height: 1.50;
|
||
color: var(--dk-text-secondary);
|
||
margin-bottom: 48px;
|
||
letter-spacing: -0.2px;
|
||
}
|
||
|
||
.color-category { margin-bottom: 36px; }
|
||
.color-category h3 {
|
||
font-family: var(--font-display);
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: var(--dk-text);
|
||
margin-bottom: 16px;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
|
||
.color-swatch { border-radius: 12px; overflow: hidden; box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||
.swatch-color { height: 80px; width: 100%; }
|
||
.swatch-info { padding: 10px 12px; background: var(--dk-surface); }
|
||
.swatch-name { font-size: 13px; font-weight: 600; color: var(--dk-text); margin-bottom: 2px; }
|
||
.swatch-hex { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); margin-bottom: 4px; }
|
||
.swatch-role { font-size: 11px; color: var(--dk-text-secondary); line-height: 1.4; }
|
||
|
||
.type-sample { padding: 20px 0; border-bottom: 1px solid var(--dk-border); }
|
||
.type-sample:last-child { border-bottom: none; }
|
||
.type-sample .type-text { color: var(--dk-text); margin-bottom: 6px; }
|
||
.type-sample .type-label { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||
|
||
.button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
|
||
.button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
|
||
.btn-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||
.btn-dk-surface {
|
||
background: var(--dk-surface-elevated);
|
||
color: var(--dk-text);
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
font-family: var(--font-body);
|
||
border: none;
|
||
cursor: pointer;
|
||
box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||
}
|
||
.btn-pill-light {
|
||
background: var(--white);
|
||
color: var(--charcoal);
|
||
padding: 10px 24px;
|
||
border-radius: 9999px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
font-family: var(--font-body);
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||
.card { border-radius: 12px; padding: 28px; }
|
||
.card-dk { background: var(--dk-surface); box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px, var(--dk-shadow-soft) 0px 4px 8px 0px; }
|
||
.card-dk-elevated { background: var(--dk-surface-elevated); box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||
.card-dk-inset { background: var(--dk-bg); box-shadow: rgba(0,0,0,0.3) 0px 1px 1.9px 0px inset; }
|
||
.card-hover { transition: transform 0.15s; }
|
||
.card-hover:hover { transform: translateY(-2px); }
|
||
.card h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--dk-text); margin-bottom: 8px; letter-spacing: 0.2px; }
|
||
.card .card-desc { font-size: 14px; font-weight: 300; line-height: 1.50; color: var(--dk-text-secondary); letter-spacing: -0.2px; }
|
||
.card .card-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); margin-top: 14px; }
|
||
|
||
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||
.form-group label { font-size: 14px; font-weight: 600; color: var(--dk-text); }
|
||
.form-group input, .form-group textarea {
|
||
font-family: var(--font-body);
|
||
font-size: 14px;
|
||
padding: 10px 14px;
|
||
border-radius: 8px;
|
||
border: none;
|
||
background: var(--dk-surface);
|
||
color: var(--dk-text);
|
||
outline: none;
|
||
box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||
transition: box-shadow 0.15s;
|
||
}
|
||
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--dk-text-muted); }
|
||
.form-group input:focus, .form-group textarea:focus { box-shadow: 0 0 0 2px rgba(59,130,246,0.4), var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||
.form-group input.error { box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }
|
||
.form-group textarea { resize: vertical; min-height: 80px; }
|
||
.form-hint { font-size: 11px; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||
.form-error-text { font-size: 11px; color: #ef4444; }
|
||
|
||
.spacing-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
|
||
.spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||
.spacing-box { background: var(--dk-text); border-radius: 4px; height: 40px; opacity: 0.5; }
|
||
.spacing-label { font-size: 10px; font-weight: 600; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||
|
||
.radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
|
||
.radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||
.radius-box { width: 80px; height: 80px; background: var(--dk-surface-elevated); box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||
.radius-label { font-size: 12px; font-weight: 600; color: var(--dk-text); font-family: var(--font-mono); }
|
||
.radius-context { font-size: 10px; color: var(--dk-text-muted); text-align: center; max-width: 80px; }
|
||
|
||
.elevation-section { background: var(--dk-surface); border-radius: 16px; padding: 48px; box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
|
||
.elevation-card { background: var(--dk-surface-elevated); border-radius: 12px; padding: 24px; min-height: 120px; }
|
||
.elevation-card h4 { font-size: 14px; font-weight: 600; color: var(--dk-text); margin-bottom: 6px; }
|
||
.elevation-card p { font-size: 12px; color: var(--dk-text-secondary); line-height: 1.5; }
|
||
.elev-flat { box-shadow: none; }
|
||
.elev-inset { box-shadow: rgba(0,0,0,0.3) 0px 1px 1.9px 0px inset; }
|
||
.elev-ring-soft { box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px, var(--dk-shadow-soft) 0px 4px 8px 0px; }
|
||
.elev-soft { box-shadow: var(--dk-shadow-soft) 0px 4px 8px 0px; }
|
||
.elev-highlight { box-shadow: rgba(255,255,255,0.08) 0px 2px 0px 0px inset; background: var(--white); color: var(--charcoal); }
|
||
.elev-highlight h4 { color: var(--charcoal); }
|
||
.elev-highlight p { color: var(--mid-gray); }
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 48px 40px;
|
||
font-size: 13px;
|
||
color: var(--dk-text-muted);
|
||
border-top: 1px solid var(--dk-border);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
nav { padding: 12px 16px; }
|
||
.nav-links { display: none; }
|
||
.hero { padding: 64px 16px 48px; }
|
||
.hero h1 { font-size: 36px; }
|
||
.section { padding: 48px 16px; }
|
||
.section-title { font-size: 32px; }
|
||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||
.card-grid { grid-template-columns: 1fr; }
|
||
.form-grid { grid-template-columns: 1fr; }
|
||
.elevation-section { padding: 20px; }
|
||
.elevation-grid { grid-template-columns: 1fr; }
|
||
.dark-badge { top: 10px; right: 10px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="dark-badge">Dark Mode</div>
|
||
|
||
<nav>
|
||
<span class="nav-brand">awesome-design-md</span>
|
||
<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>
|
||
<li><a href="#radius">Radius</a></li>
|
||
<li><a href="#elevation">Elevation</a></li>
|
||
</ul>
|
||
<a href="#" class="nav-cta">Get started</a>
|
||
</nav>
|
||
|
||
<section class="hero">
|
||
<h1>Design System Inspired by Cal.com</h1>
|
||
<p class="subtitle">A visual catalog of design tokens extracted from Cal.com's monochromatic, grayscale design system.</p>
|
||
<div class="hero-buttons">
|
||
<button class="btn-light">Explore Tokens</button>
|
||
<button class="btn-outline">View DESIGN.md</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="colors">
|
||
<h2 class="section-title">Color Palette</h2>
|
||
<p class="section-subtitle">A grayscale brand on dark surfaces.</p>
|
||
|
||
<div class="color-category">
|
||
<h3>Primary</h3>
|
||
<div class="color-grid">
|
||
<div class="color-swatch"><div class="swatch-color" style="background:#242424;"></div><div class="swatch-info"><div class="swatch-name">Charcoal</div><div class="swatch-hex">#242424</div><div class="swatch-role">Headings, buttons, primary text</div></div></div>
|
||
<div class="color-swatch"><div class="swatch-color" style="background:#111111;"></div><div class="swatch-info"><div class="swatch-name">Midnight</div><div class="swatch-hex">#111111</div><div class="swatch-role">Deep text, overlays</div></div></div>
|
||
<div class="color-swatch"><div class="swatch-color" style="background:#ffffff;"></div><div class="swatch-info"><div class="swatch-name">White</div><div class="swatch-hex">#ffffff</div><div class="swatch-role">Background, surfaces</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-category">
|
||
<h3>Neutrals</h3>
|
||
<div class="color-grid">
|
||
<div class="color-swatch"><div class="swatch-color" style="background:#898989;"></div><div class="swatch-info"><div class="swatch-name">Mid Gray</div><div class="swatch-hex">#898989</div><div class="swatch-role">Secondary text</div></div></div>
|
||
<div class="color-swatch"><div class="swatch-color" style="background:#000000;"></div><div class="swatch-info"><div class="swatch-name">Black</div><div class="swatch-hex">#000000</div><div class="swatch-role">High-contrast text</div></div></div>
|
||
<div class="color-swatch"><div class="swatch-color" style="background:rgba(255,255,255,0.06);"></div><div class="swatch-info"><div class="swatch-name">Shadow Ring (Dark)</div><div class="swatch-hex">rgba(255,255,255,0.06)</div><div class="swatch-role">Dark mode ring shadows</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-category">
|
||
<h3>Accent (Minimal)</h3>
|
||
<div class="color-grid">
|
||
<div class="color-swatch"><div class="swatch-color" style="background:#0099ff;"></div><div class="swatch-info"><div class="swatch-name">Link Blue</div><div class="swatch-hex">#0099ff</div><div class="swatch-role">In-text links only</div></div></div>
|
||
<div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring</div></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="typography">
|
||
<h2 class="section-title">Typography Scale</h2>
|
||
<p class="section-subtitle">Cal Sans for display, Inter for body.</p>
|
||
|
||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:64px; font-weight:600; line-height:1.10;">Display Hero</div><div class="type-label">Cal Sans 64px / 600 / 1.10</div></div>
|
||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:48px; font-weight:600; line-height:1.10;">Section Heading</div><div class="type-label">Cal Sans 48px / 600 / 1.10</div></div>
|
||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.30;">Feature Heading</div><div class="type-label">Cal Sans 24px / 600 / 1.30</div></div>
|
||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.20; letter-spacing:0.2px;">Sub-heading</div><div class="type-label">Cal Sans 20px / 600 / 1.20 / +0.2px</div></div>
|
||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:18px; font-weight:300; line-height:1.30; letter-spacing:-0.2px;">Body Light — Elegant intro text for descriptions</div><div class="type-label">Inter 18px / 300 / 1.30 / -0.2px</div></div>
|
||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:300; line-height:1.50; letter-spacing:-0.2px;">Body Standard — Reading text with comfortable line-height for long passages.</div><div class="type-label">Inter 16px / 300 / 1.50 / -0.2px</div></div>
|
||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.00;">UI Label</div><div class="type-label">Inter 16px / 600 / 1.00</div></div>
|
||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.14;">Caption</div><div class="type-label">Inter 14px / 500 / 1.14</div></div>
|
||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-mono); font-size:14px; font-weight:600; line-height:1.00;">Code — Roboto Mono</div><div class="type-label">Roboto Mono 14px / 600 / 1.00</div></div>
|
||
</section>
|
||
|
||
<section class="section" id="buttons">
|
||
<h2 class="section-title">Button Variants</h2>
|
||
<p class="section-subtitle">Inverted for dark surfaces.</p>
|
||
|
||
<div class="button-grid">
|
||
<div class="button-item"><button class="btn-light">Light Primary</button><span class="btn-label">#fff / #242424 / 8px</span></div>
|
||
<div class="button-item"><button class="btn-dk-surface">Surface</button><span class="btn-label">#1c1c1c / ring shadow / 8px</span></div>
|
||
<div class="button-item"><button class="btn-outline">Outline</button><span class="btn-label">transparent / ring / 8px</span></div>
|
||
<div class="button-item"><button class="btn-pill-light">Pill</button><span class="btn-label">#fff / 9999px</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="cards">
|
||
<h2 class="section-title">Card Examples</h2>
|
||
<p class="section-subtitle">Dark surface cards with shadow elevation.</p>
|
||
|
||
<div class="card-grid">
|
||
<div class="card card-dk card-hover"><h4>Shadow Card</h4><p class="card-desc">Dark surface with ring + contact + diffused shadow compositing. Hover to lift.</p><p class="card-label">ring + contact + soft shadows</p></div>
|
||
<div class="card card-dk-elevated"><h4>Elevated Card</h4><p class="card-desc">Lighter dark surface with ring shadow border for secondary content.</p><p class="card-label">ring shadow only</p></div>
|
||
<div class="card card-dk-inset"><h4>Inset Card</h4><p class="card-desc">Deepest background with inset shadow for recessed content wells.</p><p class="card-label">inset shadow</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="forms">
|
||
<h2 class="section-title">Form Elements</h2>
|
||
<p class="section-subtitle">Dark surface inputs with ring shadows and blue focus.</p>
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group"><label>Default Input</label><input type="text" placeholder="Enter your name"><span class="form-hint">ring shadow border / 8px</span></div>
|
||
<div class="form-group"><label>Focus State</label><input type="text" placeholder="Focused" style="box-shadow: 0 0 0 2px rgba(59,130,246,0.4), rgba(255,255,255,0.06) 0px 0px 0px 1px;"><span class="form-hint">blue focus ring</span></div>
|
||
<div class="form-group"><label>Error State</label><input type="text" class="error" value="bad"><span class="form-error-text">Invalid input</span></div>
|
||
<div class="form-group"><label>Textarea</label><textarea placeholder="Message..."></textarea><span class="form-hint">Same styling</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="spacing">
|
||
<h2 class="section-title">Spacing Scale</h2>
|
||
<p class="section-subtitle">8px base with section-level jump to 80px–96px.</p>
|
||
|
||
<div class="spacing-row">
|
||
<div class="spacing-item"><div class="spacing-box" style="width:1px;"></div><span class="spacing-label">1</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:20px;"></div><span class="spacing-label">20</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:28px;"></div><span class="spacing-label">28</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:80px;"></div><span class="spacing-label">80</span></div>
|
||
<div class="spacing-item"><div class="spacing-box" style="width:96px;"></div><span class="spacing-label">96</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="radius">
|
||
<h2 class="section-title">Border Radius Scale</h2>
|
||
<p class="section-subtitle">2px to pill 9999px.</p>
|
||
|
||
<div class="radius-row">
|
||
<div class="radius-item"><div class="radius-box" style="border-radius:2px;"></div><span class="radius-label">2px</span><span class="radius-context">Inline</span></div>
|
||
<div class="radius-item"><div class="radius-box" style="border-radius:4px;"></div><span class="radius-label">4px</span><span class="radius-context">Small</span></div>
|
||
<div class="radius-item"><div class="radius-box" style="border-radius:8px;"></div><span class="radius-label">8px</span><span class="radius-context">Buttons</span></div>
|
||
<div class="radius-item"><div class="radius-box" style="border-radius:12px;"></div><span class="radius-label">12px</span><span class="radius-context">Cards</span></div>
|
||
<div class="radius-item"><div class="radius-box" style="border-radius:16px;"></div><span class="radius-label">16px</span><span class="radius-context">Sections</span></div>
|
||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div><span class="radius-label">9999px</span><span class="radius-context">Pill</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="elevation">
|
||
<h2 class="section-title">Elevation & Depth</h2>
|
||
<p class="section-subtitle">Shadow compositing on dark surfaces.</p>
|
||
|
||
<div class="elevation-section">
|
||
<div class="elevation-grid">
|
||
<div class="elevation-card elev-flat"><h4>Level 0 — Flat</h4><p>No shadow. Default canvas.</p></div>
|
||
<div class="elevation-card elev-inset"><h4>Level 1 — Inset</h4><p>Recessed/pressed appearance.</p></div>
|
||
<div class="elevation-card elev-ring-soft"><h4>Level 2 — Ring + Soft</h4><p>Ring + contact + diffused. Workhorse.</p></div>
|
||
<div class="elevation-card elev-soft"><h4>Level 3 — Soft</h4><p>Ambient shadow only.</p></div>
|
||
<div class="elevation-card elev-highlight"><h4>Level 4 — Highlight</h4><p>White surface with inset bevel.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>Generated from DESIGN.md — Cal.com Design System Catalog (Dark Mode)</footer>
|
||
|
||
</body>
|
||
</html>
|