149 lines
6.5 KiB
HTML
149 lines
6.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>Shopify - dark component kit</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--accent: #36f4a4;
|
||
|
|
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||
|
|
--accent-hover: #2de097;
|
||
|
|
--accent-on: #000000;
|
||
|
|
--bg: #000000;
|
||
|
|
--border: #1e2c31;
|
||
|
|
--border-soft: #3f3f46;
|
||
|
|
--container-gutter-desktop: 64px;
|
||
|
|
--container-gutter-phone: 16px;
|
||
|
|
--container-gutter-tablet: 32px;
|
||
|
|
--container-max: 1280px;
|
||
|
|
--danger: #dc2626;
|
||
|
|
--ease-standard: ease;
|
||
|
|
--elev-flat: none;
|
||
|
|
--elev-raised: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 2px 2px, rgba(0, 0, 0, 0.1) 0px 4px 4px, rgba(0, 0, 0, 0.1) 0px 8px 8px, rgba(255, 255, 255, 0.03) 0px 1px 0px inset;
|
||
|
|
--elev-ring: 0 0 0 1px var(--border);
|
||
|
|
--fg: #ffffff;
|
||
|
|
--fg-2: #ffffff;
|
||
|
|
--focus-ring: 0 0 0 2px #36f4a4;
|
||
|
|
--font-body: "Inter Variable", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
|
|
--font-display: "NeueHaasGrotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
|
|
--leading-body: 1.56;
|
||
|
|
--leading-tight: 1.00;
|
||
|
|
--meta: #71717a;
|
||
|
|
--motion-base: 200ms;
|
||
|
|
--motion-fast: 150ms;
|
||
|
|
--muted: #a1a1aa;
|
||
|
|
--radius-lg: 12px;
|
||
|
|
--radius-md: 8px;
|
||
|
|
--radius-pill: 9999px;
|
||
|
|
--radius-sm: 9999px;
|
||
|
|
--section-y-desktop: 96px;
|
||
|
|
--section-y-phone: 40px;
|
||
|
|
--section-y-tablet: 64px;
|
||
|
|
--space-1: 4px;
|
||
|
|
--space-12: 64px;
|
||
|
|
--space-2: 8px;
|
||
|
|
--space-3: 12px;
|
||
|
|
--space-4: 16px;
|
||
|
|
--space-5: 24px;
|
||
|
|
--space-6: 28px;
|
||
|
|
--space-8: 36px;
|
||
|
|
--success: #36f4a4;
|
||
|
|
--surface: #02090a;
|
||
|
|
--surface-warm: #061a1c;
|
||
|
|
--text-2xl: 48px;
|
||
|
|
--text-3xl: 70px;
|
||
|
|
--text-4xl: 96px;
|
||
|
|
--text-base: 18px;
|
||
|
|
--text-lg: 20px;
|
||
|
|
--text-sm: 14px;
|
||
|
|
--text-xl: 32px;
|
||
|
|
--text-xs: 12px;
|
||
|
|
--tracking-display: 0em;
|
||
|
|
--warn: #eab308;
|
||
|
|
}
|
||
|
|
:root {
|
||
|
|
--od-page-bg: #0f1115;
|
||
|
|
--od-surface: #171a21;
|
||
|
|
--od-text: #f8fafc;
|
||
|
|
--od-muted: #a7adba;
|
||
|
|
--od-border: #2a2f3a;
|
||
|
|
--od-accent: #36f4a4;
|
||
|
|
--od-radius: 8px;
|
||
|
|
--od-font-body: "Inter Variable", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
|
|
--od-font-display: "NeueHaasGrotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
|
|
}
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
min-height: 100vh;
|
||
|
|
background: var(--od-page-bg);
|
||
|
|
color: var(--od-text);
|
||
|
|
font-family: var(--od-font-body);
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
}
|
||
|
|
a { color: inherit; }
|
||
|
|
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||
|
|
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||
|
|
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||
|
|
h1, h2, h3, p { margin: 0; }
|
||
|
|
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||
|
|
h1 { margin-top: 12px; font-size: 64px; }
|
||
|
|
h2 { font-size: 40px; }
|
||
|
|
h3 { font-size: 22px; }
|
||
|
|
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||
|
|
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||
|
|
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||
|
|
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
|
||
|
|
.button.secondary { background: var(--od-surface); }
|
||
|
|
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||
|
|
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
|
||
|
|
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||
|
|
.metric, .card { padding: 18px; }
|
||
|
|
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||
|
|
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||
|
|
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||
|
|
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||
|
|
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||
|
|
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||
|
|
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main class="page">
|
||
|
|
<section class="hero">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">E-Commerce & Retail system</p>
|
||
|
|
<h1>Shopify component kit</h1>
|
||
|
|
<p class="lead">Bundled OpenDesign package for Shopify, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||
|
|
<div class="actions">
|
||
|
|
<a class="button primary" href="#">Primary</a>
|
||
|
|
<a class="button secondary" href="#">Default</a>
|
||
|
|
<a class="button secondary" href="#">Dashed</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<article class="panel">
|
||
|
|
<p class="eyebrow">Reference module</p>
|
||
|
|
<h3>Token-driven surface</h3>
|
||
|
|
<div class="metric-grid">
|
||
|
|
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||
|
|
<div class="metric"><strong>4</strong><span>States</span></div>
|
||
|
|
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="chip-row">
|
||
|
|
<span class="chip">Hover</span>
|
||
|
|
<span class="chip">Focus</span>
|
||
|
|
<span class="chip">Active</span>
|
||
|
|
<span class="chip">Disabled</span>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</section>
|
||
|
|
<section class="card-grid" aria-label="Component examples">
|
||
|
|
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||
|
|
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||
|
|
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|