DESIGN-SYSTEM.html
Rama main · réplica de lectura del repositorio original.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Client Portal Design System</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;650;700;750&display=swap" rel="stylesheet" />
<style>
:root {
color-scheme: light;
--n-0:#fff;--n-50:#fafafa;--n-100:#f5f5f5;--n-200:#e5e5e5;--n-300:#d4d4d4;
--n-500:#737373;--n-700:#404040;--n-900:#171717;--n-950:#0a0a0a;
--brand:#2563eb;--icon-color:#2563eb;--brand-soft:#eff6ff;--success:#16805b;--warning:#b56708;--danger:#c03d3d;
--bg:var(--n-100);--surface:var(--n-0);--surface-soft:var(--n-50);--text:var(--n-900);
--muted:var(--n-500);--border:var(--n-200);--border-strong:var(--n-300);
--shadow-card:0 1px 2px rgb(0 0 0/.06),0 10px 28px rgb(0 0 0/.05);
--r-control:8px;--r-card:12px;--r-shell:18px;--space:4px;
--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px}
button,input,select{font:inherit}.wrap{width:min(1280px,calc(100% - 32px));margin:0 auto;padding:42px 0 80px}
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:24px;align-items:end;margin-bottom:30px}
.eyebrow{color:var(--brand);font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
h1{max-width:780px;margin:10px 0 12px;font-size:clamp(36px,6vw,72px);letter-spacing:-.06em;line-height:.95}
h2{margin:0;font-size:20px;letter-spacing:-.025em}.lede{max-width:680px;color:var(--muted);font-size:16px;line-height:1.65}
.hero-note{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);padding:18px;box-shadow:var(--shadow-card)}
.hero-note strong,.hero-note span{display:block}.hero-note span{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.5}
.section{margin-top:18px;border:1px solid var(--border);border-radius:var(--r-shell);background:var(--surface);box-shadow:var(--shadow-card)}
.section-head{display:flex;justify-content:space-between;gap:24px;padding:20px 22px;border-bottom:1px solid var(--border)}
.section-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.section-body{padding:22px}
.tokens{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.swatch{overflow:hidden;border:1px solid var(--border);border-radius:10px}
.swatch i{display:block;height:64px;background:var(--swatch)}.swatch span{display:block;padding:9px;background:var(--surface);font:11px ui-monospace,monospace}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.stack{display:grid;gap:14px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.button{display:inline-flex;min-height:36px;align-items:center;justify-content:center;gap:8px;border:1px solid var(--n-900);border-radius:var(--r-control);background:var(--n-900);padding:7px 12px;color:white;font-weight:680;cursor:pointer}
.button.secondary{border-color:var(--border-strong);background:var(--surface);color:var(--text)}.button.ghost{border-color:transparent;background:transparent;color:var(--text)}
.icon{display:inline-grid;width:30px;height:30px;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:var(--icon-color)}
.icon svg{display:block;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs{display:flex;flex-wrap:wrap;gap:5px}.tab{border:1px solid transparent;border-radius:8px;background:transparent;padding:8px 12px;color:var(--muted);font-weight:650}
.tab:hover{border-color:var(--border);background:var(--surface-soft)}.tab.active{border-color:color-mix(in srgb,var(--brand) 28%,var(--border));background:var(--brand-soft);color:var(--text);box-shadow:0 1px 2px rgb(0 0 0/.05)}
.vertical-tabs{display:grid;width:260px;gap:5px;padding:8px;border:1px solid var(--border);border-radius:12px}.vertical-tabs .tab{text-align:left}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.stat{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:12px;border:1px solid var(--border-strong);border-radius:12px;background:linear-gradient(135deg,var(--brand-soft),var(--surface) 55%);padding:16px;box-shadow:var(--shadow-card)}
.stat small,.stat strong{display:block}.stat small{color:var(--muted);font-weight:650}.stat strong{margin-top:3px;font-size:25px;letter-spacing:-.04em}
.card{border:1px solid var(--border-strong);border-radius:var(--r-card);background:var(--surface);padding:18px;box-shadow:var(--shadow-card)}
.card h3{margin:14px 0 5px;font-size:15px}.card p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.badge{display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));border-radius:999px;background:var(--brand-soft);padding:4px 8px;color:#1d4ed8;font-size:11px;font-weight:700}
.badge.success{border-color:#b9e3d1;background:#edf9f4;color:var(--success)}.badge.warning{border-color:#f2d6a8;background:#fff8e8;color:var(--warning)}
.field{display:grid;gap:6px}.field label{font-size:12px;font-weight:680}.input{width:100%;height:38px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);padding:0 10px;color:var(--text);outline:0}.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgb(37 99 235/.13)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.table-shell{overflow:hidden;border:1px solid var(--border);border-radius:12px}.table{width:100%;border-collapse:collapse}.table th,.table td{height:44px;padding:0 13px;border-bottom:1px solid var(--border);text-align:left}.table th{background:var(--surface-soft);color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.table tr:last-child td{border:0}
.alert{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);padding:12px}.alert strong{font-size:12px}.alert span{color:var(--muted);font-size:12px}
.motion-demo{position:relative;overflow:hidden;height:94px;border:1px dashed var(--border-strong);border-radius:12px;background:var(--surface-soft)}.motion-card{position:absolute;inset:16px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);animation:enter 2.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes enter{0%,18%{opacity:0;transform:translateY(7px)}35%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-2px)}}
.usage{display:grid;grid-template-columns:180px 1fr;gap:8px 18px}.usage code{color:var(--brand);font:12px ui-monospace,monospace}.usage span{color:var(--muted);font-size:12px}
@media(max-width:800px){.hero,.form-grid{grid-template-columns:1fr}.grid,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.usage{grid-template-columns:1fr}.vertical-tabs{width:100%}}
@media(max-width:480px){.grid,.stats{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation-duration:0s!important}}
</style>
</head>
<body>
<svg width="0" height="0" style="position:absolute"><defs>
<symbol id="i-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></symbol>
<symbol id="i-users" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
<symbol id="i-activity" viewBox="0 0 24 24"><path d="M3 12h4l3-8 4 16 3-8h4"/></symbol>
<symbol id="i-db" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5M3 12c0 1.7 4 3 9 3s9-1.3 9-3"/></symbol>
</defs></svg>
<main class="wrap">
<header class="hero">
<div><span class="eyebrow">Quiet Operations · Reference 1.0</span><h1>Client Portal design system.</h1><p class="lede">The production reference for tokens, components, states, spacing, and motion. Use the visible class names when adding or reviewing interface work.</p></div>
<aside class="hero-note"><strong>Recognition anchor</strong><span>Outlined active controls, centered framed icons, restrained neutral surfaces, and a curved workspace edge beside the navigation.</span></aside>
</header>
<section class="section"><div class="section-head"><div><h2>Color tokens</h2><p>Tenant color is an accent. Neutral surfaces carry hierarchy.</p></div><span class="badge">Tailwind Neutral</span></div><div class="section-body tokens">
<div class="swatch" style="--swatch:#fafafa"><i></i><span>neutral-50 · surface</span></div><div class="swatch" style="--swatch:#e5e5e5"><i></i><span>neutral-200 · border</span></div><div class="swatch" style="--swatch:#737373"><i></i><span>neutral-500 · muted</span></div><div class="swatch" style="--swatch:#171717"><i></i><span>neutral-900 · primary</span></div><div class="swatch" style="--swatch:#2563eb"><i></i><span>brand · accent only</span></div>
</div></section>
<section class="section"><div class="section-head"><div><h2>Actions and icon frames</h2><p>Icons always occupy a centered, fixed frame. Highlighting changes the frame, never the glyph geometry.</p></div></div><div class="section-body stack"><div class="row"><button class="button">Primary action</button><button class="button secondary">Secondary</button><button class="button ghost">Ghost action</button><span class="icon"><svg><use href="#i-grid"/></svg></span><span class="icon"><svg><use href="#i-users"/></svg></span><span class="icon"><svg><use href="#i-activity"/></svg></span></div><div class="row"><span class="badge">Active</span><span class="badge success">Complete</span><span class="badge warning">Needs attention</span></div></div></section>
<section class="section"><div class="section-head"><div><h2>Tabs and navigation states</h2><p>Horizontal and vertical selections use the same complete outline.</p></div></div><div class="section-body stack"><nav class="tabs"><button class="tab active">General</button><button class="tab">Reports</button><button class="tab">Activity</button></nav><nav class="vertical-tabs"><button class="tab active">Brand and portal</button><button class="tab">Twenty CRM</button><button class="tab">Email</button><button class="tab">Access and SSO</button></nav></div></section>
<section class="section"><div class="section-head"><div><h2>Operational metrics</h2><p>Use for the dashboard’s primary status strip.</p></div></div><div class="section-body stats">
<article class="stat"><span class="icon"><svg><use href="#i-grid"/></svg></span><div><small>Active portals</small><strong>12</strong></div></article><article class="stat"><span class="icon"><svg><use href="#i-users"/></svg></span><div><small>Active clients</small><strong>48</strong></div></article><article class="stat"><span class="icon"><svg><use href="#i-activity"/></svg></span><div><small>Activity, 24 hours</small><strong>126</strong></div></article><article class="stat"><span class="icon"><svg><use href="#i-db"/></svg></span><div><small>Synced objects</small><strong>24</strong></div></article>
</div></section>
<section class="section"><div class="section-head"><div><h2>Cards and status</h2><p>Fine outline, restrained elevation, consistent 12px radius.</p></div></div><div class="section-body grid"><article class="card"><span class="icon"><svg><use href="#i-grid"/></svg></span><h3>Projects</h3><p>Person scoped · 24 visible records</p></article><article class="card"><span class="icon"><svg><use href="#i-users"/></svg></span><h3>Client accounts</h3><p>Mapped to synchronized CRM people.</p></article><article class="card"><span class="icon"><svg><use href="#i-activity"/></svg></span><h3>Recent activity</h3><p>Writes, exports, and invitation changes.</p></article><article class="card"><span class="icon"><svg><use href="#i-db"/></svg></span><h3>Metadata</h3><p>Current schema and connection health.</p></article></div></section>
<section class="section"><div class="section-head"><div><h2>Forms and tables</h2><p>38px controls, visible focus, compact CRM density.</p></div></div><div class="section-body stack"><div class="form-grid"><div class="field"><label>Navigation label</label><input class="input" value="Projects" /></div><div class="field"><label>Sharing method</label><select class="input"><option>Records linked to a Person</option></select></div></div><div class="table-shell"><table class="table"><thead><tr><th>Project</th><th>Status</th><th>Owner</th><th>Due date</th></tr></thead><tbody><tr><td>Atlas website launch</td><td><span class="badge success">In progress</span></td><td>Maya Chen</td><td>Jul 18, 2026</td></tr><tr><td>Northstar research</td><td><span class="badge warning">At risk</span></td><td>Theo Martin</td><td>Jul 8, 2026</td></tr></tbody></table></div><div class="alert"><span class="icon"><svg><use href="#i-activity"/></svg></span><div><strong>Inline feedback</strong> <span>Keep success, warning, and error messages next to the action context.</span></div></div></div></section>
<section class="section"><div class="section-head"><div><h2>Motion</h2><p>220ms content entrance, 110ms exit. No decorative movement.</p></div></div><div class="section-body"><div class="motion-demo"><div class="motion-card">View and tab content enters with a restrained 6px lift.</div></div></div></section>
<section class="section"><div class="section-head"><div><h2>Implementation map</h2><p>Canonical production selectors and intended use.</p></div></div><div class="section-body usage"><code>.app-section-tab</code><span>Horizontal context tab with full outlined active state.</span><code>.sidebar-link</code><span>Primary vertical navigation with framed icon and outlined row.</span><code>.builder-stage-nav</code><span>State-preserving, one-section-at-a-time configuration stages.</span><code>.stat-card</code><span>High-emphasis operational metric.</span><code>.card</code><span>Default bounded surface with fine outline and restrained shadow.</span><code>.activity-icon</code><span>Centered 28–38px icon tile; never offset the SVG itself.</span><code>.workspace-view</code><span>Route-level transition boundary.</span><code>--brand-primary</code><span>Tenant accent for focus and selection.</span><code>--icon-color</code><span>Independent tenant-controlled color for navigation and operational icons.</span></div></section>
</main>
</body>
</html>