537 lines
29 KiB
HTML
537 lines
29 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 Preview: Expo (Dark)</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--color-expo-black: #000000;
|
|
--color-near-black: #1c2024;
|
|
--color-link-cobalt: #0d74ce;
|
|
--color-legal-blue: #476cff;
|
|
--color-widget-sky: #47c2ff;
|
|
--color-preview-purple: #8145b5;
|
|
--color-cloud-gray: #f0f0f3;
|
|
--color-pure-white: #ffffff;
|
|
--color-widget-dark: #1a1a1a;
|
|
--color-banner-dark: #171717;
|
|
--color-slate-gray: #60646c;
|
|
--color-mid-slate: #555860;
|
|
--color-silver: #b0b4ba;
|
|
--color-pewter: #999999;
|
|
--color-light-silver: #cccccc;
|
|
--color-dark-slate: #363a3f;
|
|
--color-charcoal: #333333;
|
|
--color-warning: #ab6400;
|
|
--color-destructive: #eb8e90;
|
|
--color-border-lavender: #e0e1e6;
|
|
--color-input-border: #d9d9e0;
|
|
--color-focus-ring: #2547d0;
|
|
--font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
/* Dark mode */
|
|
--bg-page: var(--color-banner-dark);
|
|
--bg-card: var(--color-widget-dark);
|
|
--bg-nav: rgba(23,23,23,0.92);
|
|
--text-primary: var(--color-pure-white);
|
|
--text-secondary: var(--color-silver);
|
|
--text-muted: var(--color-pewter);
|
|
--border-color: var(--color-dark-slate);
|
|
--border-subtle: rgba(54,58,63,0.5);
|
|
--section-label-color: var(--color-pure-white);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
background: var(--bg-page);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: 16px;
|
|
line-height: 1.4;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* NAV */
|
|
.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 40px;
|
|
background: var(--bg-nav);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.nav-brand { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; color: var(--color-pure-white); }
|
|
.nav-brand svg { width: 24px; height: 24px; }
|
|
.nav-links { display: flex; gap: 32px; align-items: center; }
|
|
.nav-links a { color: var(--color-silver); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
|
|
.nav-links a:hover { color: var(--color-pure-white); }
|
|
.nav-cta {
|
|
background: var(--color-pure-white);
|
|
color: var(--color-expo-black);
|
|
padding: 8px 20px;
|
|
border: none;
|
|
border-radius: 9999px;
|
|
font-size: 14px;
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.nav-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--color-silver);
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 9999px;
|
|
padding: 4px 12px 4px 8px;
|
|
}
|
|
.nav-status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #22c55e;
|
|
}
|
|
|
|
/* HERO */
|
|
.hero {
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 120px 40px 100px;
|
|
overflow: hidden;
|
|
}
|
|
.hero h1 {
|
|
font-family: var(--font-body);
|
|
font-size: 60px;
|
|
font-weight: 700;
|
|
line-height: 1.10;
|
|
letter-spacing: -3px;
|
|
margin-bottom: 24px;
|
|
color: var(--color-pure-white);
|
|
position: relative;
|
|
}
|
|
.hero p {
|
|
color: var(--text-secondary);
|
|
font-size: 18px;
|
|
line-height: 1.4;
|
|
margin-bottom: 40px;
|
|
position: relative;
|
|
}
|
|
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
|
.btn-primary-pill {
|
|
background: var(--color-pure-white);
|
|
color: var(--color-expo-black);
|
|
padding: 12px 28px;
|
|
border: none;
|
|
border-radius: 9999px;
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.btn-standard {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
padding: 12px 24px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* SECTIONS */
|
|
.section {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 96px 40px;
|
|
}
|
|
.section-title {
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2.52px;
|
|
color: var(--section-label-color);
|
|
margin-bottom: 12px;
|
|
}
|
|
.section-heading {
|
|
font-family: var(--font-body);
|
|
font-size: 48px;
|
|
font-weight: 600;
|
|
line-height: 1.10;
|
|
letter-spacing: -2px;
|
|
margin-bottom: 48px;
|
|
color: var(--color-pure-white);
|
|
}
|
|
.section-divider {
|
|
border: none;
|
|
border-top: 1px solid var(--border-subtle);
|
|
margin: 0 40px;
|
|
max-width: 1200px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* COLOR PALETTE */
|
|
.color-group { margin-bottom: 40px; }
|
|
.color-group-title { font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 20px; color: var(--text-secondary); }
|
|
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
|
|
.color-swatch { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
|
|
.color-swatch-block { height: 80px; }
|
|
.color-swatch-info { padding: 12px; background: var(--bg-card); }
|
|
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
|
|
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
|
|
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
|
|
|
|
/* TYPOGRAPHY */
|
|
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
|
|
.type-sample:last-child { border-bottom: none; }
|
|
.type-sample-text { margin-bottom: 8px; }
|
|
.type-sample-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
|
|
|
|
/* BUTTONS */
|
|
.button-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
|
|
.button-demo { text-align: center; }
|
|
.button-demo-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.55px; }
|
|
.btn-dark-pill {
|
|
background: var(--color-pure-white);
|
|
color: var(--color-expo-black);
|
|
padding: 12px 28px;
|
|
border: none;
|
|
border-radius: 9999px;
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.btn-white-standard {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
padding: 12px 24px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
.btn-dark-rounded {
|
|
background: var(--color-pure-white);
|
|
color: var(--color-expo-black);
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 32px;
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* CARDS */
|
|
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
|
.card { background: var(--bg-card); border-radius: 8px; padding: 28px; }
|
|
.card-standard { border: 1px solid var(--border-color); }
|
|
.card-elevated { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.3) 0px 3px 6px, rgba(0,0,0,0.2) 0px 2px 4px; }
|
|
.card-glow { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.4) 0px 10px 20px, rgba(0,0,0,0.2) 0px 3px 6px; border-radius: 16px; }
|
|
.card h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.25px; margin-bottom: 12px; color: var(--color-pure-white); }
|
|
.card p { color: var(--text-secondary); font-size: 16px; line-height: 1.40; }
|
|
.card-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.55px; color: var(--color-pure-white); margin-bottom: 16px; }
|
|
|
|
/* CODE BLOCK */
|
|
.code-block {
|
|
background: var(--color-expo-black);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 20px 24px;
|
|
margin-top: 24px;
|
|
font-family: var(--font-mono);
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
color: #f2f2f2;
|
|
overflow-x: auto;
|
|
}
|
|
.code-block .keyword { color: var(--color-widget-sky); }
|
|
.code-block .string { color: #22c55e; }
|
|
.code-block .comment { color: var(--color-pewter); }
|
|
|
|
/* SPACING */
|
|
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
|
.spacing-item { text-align: center; }
|
|
.spacing-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 2px; margin-bottom: 8px; }
|
|
.spacing-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
|
|
|
|
/* RADIUS */
|
|
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
|
.radius-item { text-align: center; }
|
|
.radius-box { width: 80px; height: 80px; background: var(--bg-card); border: 1px solid var(--border-color); margin-bottom: 8px; }
|
|
.radius-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
|
|
.radius-context { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
|
|
|
|
/* ELEVATION */
|
|
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
|
.elevation-card { background: var(--bg-card); border-radius: 8px; padding: 24px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }
|
|
.elevation-flat { border: none; background: var(--bg-page); }
|
|
.elevation-surface { border: none; background: var(--bg-card); }
|
|
.elevation-whisper { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.3) 0px 3px 6px, rgba(0,0,0,0.2) 0px 2px 4px; }
|
|
.elevation-elevated { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.4) 0px 10px 20px, rgba(0,0,0,0.2) 0px 3px 6px; }
|
|
.elevation-modal { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.5) 0px 20px 40px, rgba(0,0,0,0.3) 0px 8px 16px; }
|
|
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
|
|
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
|
|
.elevation-level { font-family: var(--font-mono); font-size: 11px; color: var(--color-pure-white); text-transform: uppercase; letter-spacing: 0.55px; margin-top: 12px; }
|
|
|
|
/* RESPONSIVE */
|
|
@media (max-width: 768px) {
|
|
.nav { padding: 12px 20px; }
|
|
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
|
.nav-status { display: none; }
|
|
.hero { padding: 80px 20px 60px; }
|
|
.hero h1 { font-size: 36px; letter-spacing: -1.5px; }
|
|
.section { padding: 60px 20px; }
|
|
.section-heading { font-size: 28px; letter-spacing: -1px; }
|
|
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
|
.card-grid { grid-template-columns: 1fr; }
|
|
.hero-buttons { flex-direction: column; align-items: center; }
|
|
.button-row { flex-direction: column; align-items: flex-start; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav class="nav">
|
|
<div class="nav-brand">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Expo
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="#colors">Colors</a>
|
|
<a href="#typography">Typography</a>
|
|
<a href="#buttons">Buttons</a>
|
|
<a href="#cards">Cards</a>
|
|
<a href="#spacing">Spacing</a>
|
|
<a href="#elevation">Elevation</a>
|
|
<div class="nav-status"><span class="nav-status-dot"></span> All Systems Operational</div>
|
|
<button class="nav-cta">Sign Up</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<h1>Design System Preview:<br>Expo</h1>
|
|
<p>Auto-generated design token catalog from DESIGN.md</p>
|
|
<div class="hero-buttons">
|
|
<button class="btn-primary-pill">Explore Tokens</button>
|
|
<button class="btn-standard">View Source</button>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="section-divider">
|
|
|
|
<!-- COLORS -->
|
|
<section class="section" id="colors">
|
|
<div class="section-title">01 / Color Palette</div>
|
|
<h2 class="section-heading">Color Palette & Roles</h2>
|
|
|
|
<div class="color-group">
|
|
<h3 class="color-group-title">Primary</h3>
|
|
<div class="color-grid">
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Expo Black</div><div class="color-swatch-hex">#000000</div><div class="color-swatch-role">Primary headlines, CTA buttons, brand anchor</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #1c2024; border-bottom: 1px solid #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1c2024</div><div class="color-swatch-role">Body text, softer than pure black for reading</div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-group">
|
|
<h3 class="color-group-title">Secondary & Accent</h3>
|
|
<div class="color-grid">
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #0d74ce;"></div><div class="color-swatch-info"><div class="color-swatch-name">Link Cobalt</div><div class="color-swatch-hex">#0d74ce</div><div class="color-swatch-role">Standard links, interactive signals</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #476cff;"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#476cff</div><div class="color-swatch-role">Footer/legal links, brighter accent</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #47c2ff;"></div><div class="color-swatch-info"><div class="color-swatch-name">Widget Sky</div><div class="color-swatch-hex">#47c2ff</div><div class="color-swatch-role">Widget branding, lightest accent</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #8145b5;"></div><div class="color-swatch-info"><div class="color-swatch-name">Preview Purple</div><div class="color-swatch-hex">#8145b5</div><div class="color-swatch-role">Beta/preview feature indicators</div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-group">
|
|
<h3 class="color-group-title">Surface & Background</h3>
|
|
<div class="color-grid">
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #f0f0f3;"></div><div class="color-swatch-info"><div class="color-swatch-name">Cloud Gray</div><div class="color-swatch-hex">#f0f0f3</div><div class="color-swatch-role">Primary page background (light mode)</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #ffffff;"></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">Card surfaces, elevated containers</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #1a1a1a; border-bottom: 1px solid #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Widget Dark</div><div class="color-swatch-hex">#1a1a1a</div><div class="color-swatch-role">Dark theme card surfaces</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #171717; border-bottom: 1px solid #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Banner Dark</div><div class="color-swatch-hex">#171717</div><div class="color-swatch-role">Dark theme page background</div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-group">
|
|
<h3 class="color-group-title">Neutrals & Text</h3>
|
|
<div class="color-grid">
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #60646c;"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate Gray</div><div class="color-swatch-hex">#60646c</div><div class="color-swatch-role">Secondary text (305 instances)</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #555860;"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Slate</div><div class="color-swatch-hex">#555860</div><div class="color-swatch-role">Emphasized secondary text</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #b0b4ba;"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver</div><div class="color-swatch-hex">#b0b4ba</div><div class="color-swatch-role">Tertiary text, placeholders, metadata</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #363a3f;"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Slate</div><div class="color-swatch-hex">#363a3f</div><div class="color-swatch-role">Borders on dark surfaces, switch tracks</div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-group">
|
|
<h3 class="color-group-title">Semantic</h3>
|
|
<div class="color-grid">
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #ab6400;"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning Amber</div><div class="color-swatch-hex">#ab6400</div><div class="color-swatch-role">Warning states, deep amber for seriousness</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #eb8e90;"></div><div class="color-swatch-info"><div class="color-swatch-name">Destructive Rose</div><div class="color-swatch-hex">#eb8e90</div><div class="color-swatch-role">Disabled destructive actions, gentle alarm</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #e0e1e6;"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Lavender</div><div class="color-swatch-hex">#e0e1e6</div><div class="color-swatch-role">Standard card/container borders</div></div></div>
|
|
<div class="color-swatch"><div class="color-swatch-block" style="background: #d9d9e0;"></div><div class="color-swatch-info"><div class="color-swatch-name">Input Border</div><div class="color-swatch-hex">#d9d9e0</div><div class="color-swatch-role">Buttons, form elements, interactive borders</div></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="section-divider">
|
|
|
|
<!-- TYPOGRAPHY -->
|
|
<section class="section" id="typography">
|
|
<div class="section-title">02 / Typography Scale</div>
|
|
<h2 class="section-heading">Typography Rules</h2>
|
|
|
|
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 60px; font-weight: 700; line-height: 1.10; letter-spacing: -3px;">Display Hero</div><div class="type-sample-label">Display / Hero — 64px / 700–900 / 1.10 / -3px — Inter</div></div>
|
|
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 48px; font-weight: 600; line-height: 1.10; letter-spacing: -2px;">Section Heading</div><div class="type-sample-label">Section Heading — 48px / 600 / 1.10 / -2px — Inter</div></div>
|
|
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.25px;">Sub-heading</div><div class="type-sample-label">Sub-heading — 20px / 600 / 1.20 / -0.25px — Inter</div></div>
|
|
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.40; color: var(--text-secondary);">Body large text for intro paragraphs and section descriptions with comfortable reading rhythm.</div><div class="type-sample-label">Body Large — 18px / 400–500 / 1.40 / normal — Inter</div></div>
|
|
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.40;">Standard body text for paragraphs, navigation links, and button labels. Inter provides geometric precision at every weight.</div><div class="type-sample-label">Body / Button — 16px / 400–700 / 1.25–1.40 / normal — Inter</div></div>
|
|
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.40; color: var(--text-secondary);">Caption text for descriptions and metadata labels</div><div class="type-sample-label">Caption / Label — 14px / 400–600 / 1.00–1.40 / normal — Inter</div></div>
|
|
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.00; color: var(--text-muted);">Tag / Small Badge</div><div class="type-sample-label">Tag / Small — 12px / 500 / 1.00–1.60 / normal — Inter</div></div>
|
|
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.40;">npx create-expo-app@latest my-app</div><div class="type-sample-label">Code Body — 16px / 400–600 / 1.40 / normal — JetBrains Mono</div></div>
|
|
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.40;">import { Camera } from "expo-camera";</div><div class="type-sample-label">Code Caption — 14px / 400–600 / 1.40 / normal — JetBrains Mono</div></div>
|
|
<div class="type-sample"><div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.60; text-transform: uppercase; color: var(--text-muted);">REACT NATIVE</div><div class="type-sample-label">Code Small / Tag — 12px / 400 / 1.60 / uppercase — JetBrains Mono</div></div>
|
|
</section>
|
|
|
|
<hr class="section-divider">
|
|
|
|
<!-- BUTTONS -->
|
|
<section class="section" id="buttons">
|
|
<div class="section-title">03 / Button Variants</div>
|
|
<h2 class="section-heading">Buttons</h2>
|
|
|
|
<div class="button-row">
|
|
<div class="button-demo"><button class="btn-dark-pill">Get Started</button><div class="button-demo-label">Primary Pill (Light)</div></div>
|
|
<div class="button-demo"><button class="btn-white-standard">View Docs</button><div class="button-demo-label">Standard (Surface)</div></div>
|
|
<div class="button-demo"><button class="btn-dark-rounded">Sign Up Free</button><div class="button-demo-label">Rounded (32px)</div></div>
|
|
</div>
|
|
|
|
<div class="code-block" style="margin-top: 40px;">
|
|
<span class="comment">// Get started with Expo</span><br>
|
|
<span class="keyword">$</span> npx create-expo-app@latest my-app
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="section-divider">
|
|
|
|
<!-- CARDS -->
|
|
<section class="section" id="cards">
|
|
<div class="section-title">04 / Card Examples</div>
|
|
<h2 class="section-heading">Cards & Containers</h2>
|
|
|
|
<div class="card-grid">
|
|
<div class="card card-standard">
|
|
<div class="card-label">Standard Card</div>
|
|
<h3>Dark Slate Border</h3>
|
|
<p>Standard content card with 1px Dark Slate border and 8px radius. Widget Dark surface on Banner Dark background.</p>
|
|
</div>
|
|
<div class="card card-elevated">
|
|
<div class="card-label">Elevated (Whisper)</div>
|
|
<h3>Whisper Shadow Lift</h3>
|
|
<p>Subtle card elevation with soft shadow. Barely perceptible lift for hover states and highlighted content.</p>
|
|
</div>
|
|
<div class="card card-glow">
|
|
<div class="card-label">Featured (Glow)</div>
|
|
<h3>Standard Elevation</h3>
|
|
<p>Clear floating elevation with generous 16px radius. For feature showcases, product screenshots, and hero content containers.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="section-divider">
|
|
|
|
<!-- SPACING -->
|
|
<section class="section" id="spacing">
|
|
<div class="section-title">05 / Spacing Scale</div>
|
|
<h2 class="section-heading">Spacing System</h2>
|
|
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale builds from 1px to 144px.</p>
|
|
|
|
<div class="spacing-row">
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 4px; height: 4px;"></div><div class="spacing-label">1px</div></div>
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
|
|
<div class="spacing-item"><div class="spacing-box" style="width: 256px; height: 256px;"></div><div class="spacing-label">64px</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="section-divider">
|
|
|
|
<!-- BORDER RADIUS -->
|
|
<section class="section">
|
|
<div class="section-title">06 / Border Radius Scale</div>
|
|
<h2 class="section-heading">Border Radius</h2>
|
|
|
|
<div class="radius-row">
|
|
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Nearly squared</div></div>
|
|
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Buttons, 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">Standard cards</div></div>
|
|
<div class="radius-item"><div class="radius-box" style="border-radius: 16px;"></div><div class="radius-label">16px</div><div class="radius-context">Feature panels</div></div>
|
|
<div class="radius-item"><div class="radius-box" style="border-radius: 24px;"></div><div class="radius-label">24px</div><div class="radius-context">Images, videos</div></div>
|
|
<div class="radius-item"><div class="radius-box" style="border-radius: 32px;"></div><div class="radius-label">32px</div><div class="radius-context">Hero CTAs</div></div>
|
|
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill-shaped</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="section-divider">
|
|
|
|
<!-- ELEVATION -->
|
|
<section class="section" id="elevation">
|
|
<div class="section-title">07 / Elevation & Depth</div>
|
|
<h2 class="section-heading">Depth & Elevation</h2>
|
|
|
|
<div class="elevation-grid">
|
|
<div class="elevation-card elevation-flat">
|
|
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow. Banner Dark page background, inline text.</div></div>
|
|
<div class="elevation-level">Level 0</div>
|
|
</div>
|
|
<div class="elevation-card elevation-surface">
|
|
<div><div class="elevation-name">Surface</div><div class="elevation-desc">Widget Dark bg, no shadow. Standard cards on Banner Dark.</div></div>
|
|
<div class="elevation-level">Level 1</div>
|
|
</div>
|
|
<div class="elevation-card elevation-whisper">
|
|
<div><div class="elevation-name">Whisper</div><div class="elevation-desc">Soft shadow. Subtle card lift, hover states.</div></div>
|
|
<div class="elevation-level">Level 2</div>
|
|
</div>
|
|
<div class="elevation-card elevation-elevated">
|
|
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Standard floating shadow. Feature showcases, screenshots.</div></div>
|
|
<div class="elevation-level">Level 3</div>
|
|
</div>
|
|
<div class="elevation-card elevation-modal">
|
|
<div><div class="elevation-name">Modal</div><div class="elevation-desc">Heavy shadow with dark overlay. Dialogs, overlays.</div></div>
|
|
<div class="elevation-level">Level 4</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div style="height: 80px;"></div>
|
|
|
|
</body>
|
|
</html>
|