409 lines
20 KiB
HTML
409 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Clavitor Design System — v0.1</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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ============================================
|
|
CLAVITOR DESIGN SYSTEM — v0.1
|
|
One file. No dependencies. Copy what you need.
|
|
============================================ */
|
|
|
|
/* --- CSS Variables (Tokens) --- */
|
|
:root {
|
|
/* Brand */
|
|
--brand-black: #0A0A0A;
|
|
--brand-accent: #E11D48;
|
|
--brand-accent-light: #F43F5E;
|
|
--brand-accent-dark: #BE123C;
|
|
|
|
/* Core Colors — Light Mode */
|
|
--bg-primary: #FFFFFF;
|
|
--bg-secondary: #F5F5F5;
|
|
--bg-tertiary: #E5E5E5;
|
|
--bg-inverse: #0A0A0A;
|
|
|
|
--text-primary: #171717;
|
|
--text-secondary: #525252;
|
|
--text-tertiary: #737373;
|
|
--text-inverse: #FFFFFF;
|
|
|
|
--border-default: #E5E5E5;
|
|
--border-strong: #D4D4D4;
|
|
|
|
/* Semantic */
|
|
--success: #16A34A;
|
|
--warning: #CA8A04;
|
|
--error: #DC2626;
|
|
|
|
/* Typography */
|
|
--font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
|
|
|
|
/* Spacing (4px base) */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
--space-16: 64px;
|
|
|
|
/* Motion */
|
|
--duration-fast: 100ms;
|
|
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* --- Reset --- */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html {
|
|
font-family: var(--font-family);
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
color: var(--text-primary);
|
|
background: var(--bg-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* --- Layout --- */
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
|
|
.section { margin-bottom: 64px; }
|
|
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
|
.flex-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
|
|
.flex-col { display: flex; flex-direction: column; gap: 12px; }
|
|
|
|
/* --- Typography --- */
|
|
h1 { font-size: 72px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; }
|
|
h2 { font-size: 56px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; }
|
|
h3 { font-size: 40px; font-weight: 600; letter-spacing: -0.019em; }
|
|
h4 { font-size: 28px; font-weight: 500; }
|
|
.text-sm { font-size: 16px; }
|
|
.text-xs { font-size: 14px; }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
.text-tertiary { color: var(--text-tertiary); }
|
|
|
|
/* Wordmark — spaced uppercase, infrastructure feel */
|
|
.wordmark {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.4em;
|
|
text-transform: uppercase;
|
|
}
|
|
.wordmark-lg {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.35em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* --- Brand Block --- */
|
|
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
|
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
|
|
|
/* --- Colors --- */
|
|
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
|
|
.color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); }
|
|
.color-block { height: 80px; }
|
|
.color-label { padding: 12px; font-size: 12px; background: var(--bg-primary); }
|
|
.color-label code { font-family: ui-monospace, monospace; background: var(--bg-secondary); padding: 2px 4px; border-radius: 4px; }
|
|
|
|
/* --- Buttons --- */
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
|
font-family: inherit; font-size: 16px; font-weight: 500;
|
|
text-decoration: none; border: none; border-radius: 8px;
|
|
cursor: pointer; transition: all 100ms ease;
|
|
height: 40px; padding: 0 16px;
|
|
}
|
|
.btn:focus { outline: none; box-shadow: 0 0 0 2px white, 0 0 0 4px var(--brand-accent); }
|
|
.btn-primary { background: var(--brand-black); color: white; }
|
|
.btn-primary:hover { background: #262626; }
|
|
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
|
|
.btn-secondary:hover { background: var(--bg-secondary); }
|
|
.btn-accent { background: var(--brand-accent); color: white; }
|
|
.btn-accent:hover { background: var(--brand-accent-light); }
|
|
.btn-ghost { background: transparent; color: var(--text-primary); }
|
|
.btn-ghost:hover { background: var(--bg-secondary); }
|
|
.btn-sm { height: 32px; padding: 0 12px; font-size: 14px; }
|
|
.btn-lg { height: 48px; padding: 0 20px; }
|
|
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
/* --- Inputs --- */
|
|
.input-group { display: flex; flex-direction: column; gap: 8px; }
|
|
.input-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
|
|
.input {
|
|
height: 40px; padding: 0 12px;
|
|
font-family: inherit; font-size: 16px;
|
|
color: var(--text-primary); background: var(--bg-primary);
|
|
border: 1px solid var(--border-strong); border-radius: 8px;
|
|
transition: all 100ms ease;
|
|
}
|
|
.input:hover { border-color: var(--text-tertiary); }
|
|
.input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.1); }
|
|
.input::placeholder { color: var(--text-tertiary); }
|
|
.input-error { border-color: var(--error); }
|
|
.input-hint { font-size: 12px; color: var(--text-tertiary); }
|
|
.input-error-text { font-size: 12px; color: var(--error); }
|
|
|
|
/* --- Cards --- */
|
|
.card { background: var(--bg-secondary); border-radius: 12px; padding: 24px; }
|
|
.card-flat { background: var(--bg-secondary); border: 1px solid var(--border-default); }
|
|
.card-header { margin-bottom: 16px; }
|
|
.card-title { font-size: 18px; font-weight: 600; }
|
|
|
|
/* --- Badges --- */
|
|
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; font-size: 12px; font-weight: 500; border-radius: 8px; }
|
|
.badge-default { background: var(--bg-tertiary); color: var(--text-secondary); }
|
|
.badge-primary { background: var(--brand-black); color: white; }
|
|
.badge-accent { background: var(--brand-accent); color: white; }
|
|
.badge-success { background: rgba(22, 163, 74, 0.1); color: var(--success); }
|
|
.badge-warning { background: rgba(202, 138, 4, 0.1); color: var(--warning); }
|
|
.badge-error { background: rgba(220, 38, 38, 0.1); color: var(--error); }
|
|
|
|
/* --- Alerts --- */
|
|
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 12px; border-left: 3px solid; }
|
|
.alert-accent { background: rgba(180, 83, 9, 0.05); border-left-color: var(--brand-accent); }
|
|
.alert-success { background: rgba(22, 163, 74, 0.05); border-left-color: var(--success); }
|
|
.alert-error { background: rgba(220, 38, 38, 0.05); border-left-color: var(--error); }
|
|
|
|
/* --- Tables --- */
|
|
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
|
.table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); }
|
|
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
|
|
.table tr:hover td { background: var(--bg-secondary); }
|
|
|
|
/* --- Code --- */
|
|
.code-block { background: var(--bg-inverse); color: var(--text-inverse); font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.6; padding: 16px; border-radius: 12px; overflow-x: auto; }
|
|
.code-block .prompt { color: var(--brand-accent); }
|
|
code { font-family: ui-monospace, monospace; font-size: 0.9em; background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; color: var(--brand-accent); }
|
|
|
|
/* --- Spacing --- */
|
|
.spacing-demo { display: flex; flex-direction: column; gap: 16px; }
|
|
.spacing-row { display: flex; align-items: center; gap: 16px; }
|
|
.spacing-box { background: var(--brand-accent); height: 24px; }
|
|
|
|
/* --- Section Title --- */
|
|
.section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
|
|
|
|
/* --- Checkbox --- */
|
|
.checkbox { display: flex; align-items: center; gap: 12px; cursor: pointer; }
|
|
.checkbox-input { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-radius: 4px; appearance: none; cursor: pointer; transition: all 100ms ease; }
|
|
.checkbox-input:checked { background: var(--brand-accent); border-color: var(--brand-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
|
|
|
|
/* --- Toggle --- */
|
|
.toggle { width: 44px; height: 24px; background: var(--bg-tertiary); border-radius: 9999px; position: relative; cursor: pointer; transition: background 200ms ease; }
|
|
.toggle::after { content: ''; position: absolute; width: 20px; height: 20px; background: white; border-radius: 9999px; top: 2px; left: 2px; transition: transform 200ms ease; }
|
|
.toggle.on { background: var(--brand-accent); }
|
|
.toggle.on::after { transform: translateX(20px); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
|
|
<!-- Header -->
|
|
<div class="section">
|
|
<div class="brand-block">
|
|
<div class="black-square"></div>
|
|
<div>
|
|
<h1>Clavitor</h1>
|
|
<p class="text-secondary">Design System v0.1</p>
|
|
</div>
|
|
</div>
|
|
<p class="wordmark-lg" style="margin-top: 24px; color: var(--brand-accent);">CLAVITOR</p>
|
|
<p class="text-secondary" style="max-width: 600px; margin-top: 12px;">
|
|
A black box vault for AI infrastructure. One file. No dependencies.
|
|
Copy the CSS variables and classes you need.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Brand Colors -->
|
|
<div class="section">
|
|
<div class="section-title">Brand Colors</div>
|
|
<div class="color-grid">
|
|
<div class="color-swatch"><div class="color-block" style="background: var(--brand-black);"></div><div class="color-label"><strong>Black Square</strong><br><code>--brand-black</code><br>#0A0A0A</div></div>
|
|
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent);"></div><div class="color-label"><strong>Accent</strong><br><code>--brand-accent</code><br>#B45309</div></div>
|
|
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-light);"></div><div class="color-label"><strong>Accent Light</strong><br><code>--brand-accent-light</code><br>#D97706</div></div>
|
|
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-dark);"></div><div class="color-label"><strong>Accent Dark</strong><br><code>--brand-accent-dark</code><br>#92400E</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Typography -->
|
|
<div class="section">
|
|
<div class="section-title">Typography — Plus Jakarta Sans</div>
|
|
<div class="flex-col">
|
|
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">wordmark</span><span class="wordmark-lg">CLAVITOR</span></div>
|
|
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">48px</span><span style="font-size:48px;font-weight:700;">Heading 48</span></div>
|
|
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">36px</span><span style="font-size:36px;font-weight:600;">Heading 36</span></div>
|
|
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">24px</span><span style="font-size:24px;font-weight:600;">Heading 24</span></div>
|
|
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">18px</span><span style="font-size:18px;">Body large 18</span></div>
|
|
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">16px</span><span style="font-size:16px;">Body 16 — The quick brown fox jumps</span></div>
|
|
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">14px</span><span style="font-size:14px;">Small 14 — The quick brown fox jumps</span></div>
|
|
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">12px</span><span style="font-size:12px;">Tiny 12 — The quick brown fox</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Spacing -->
|
|
<div class="section">
|
|
<div class="section-title">Spacing Scale (4px base)</div>
|
|
<div class="spacing-demo">
|
|
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">4px</span><div class="spacing-box" style="width:4px;"></div></div>
|
|
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">8px</span><div class="spacing-box" style="width:8px;"></div></div>
|
|
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">16px</span><div class="spacing-box" style="width:16px;"></div></div>
|
|
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">24px</span><div class="spacing-box" style="width:24px;"></div></div>
|
|
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">32px</span><div class="spacing-box" style="width:32px;"></div></div>
|
|
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">48px</span><div class="spacing-box" style="width:48px;"></div></div>
|
|
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">64px</span><div class="spacing-box" style="width:64px;"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="section">
|
|
<div class="section-title">Buttons</div>
|
|
<h4 style="margin-bottom:16px;">Variants</h4>
|
|
<div class="flex-row" style="margin-bottom:24px;">
|
|
<button class="btn btn-primary">Primary</button>
|
|
<button class="btn btn-secondary">Secondary</button>
|
|
<button class="btn btn-accent">Accent</button>
|
|
<button class="btn btn-ghost">Ghost</button>
|
|
<button class="btn btn-primary" disabled>Disabled</button>
|
|
</div>
|
|
<h4 style="margin-bottom:16px;">Sizes</h4>
|
|
<div class="flex-row">
|
|
<button class="btn btn-primary btn-sm">Small</button>
|
|
<button class="btn btn-primary">Medium</button>
|
|
<button class="btn btn-primary btn-lg">Large</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inputs -->
|
|
<div class="section">
|
|
<div class="section-title">Inputs</div>
|
|
<div class="grid-2">
|
|
<div class="input-group">
|
|
<label class="input-label">Default</label>
|
|
<input type="text" class="input" placeholder="Enter text...">
|
|
</div>
|
|
<div class="input-group">
|
|
<label class="input-label">With Hint</label>
|
|
<input type="text" class="input" value="user@example.com">
|
|
<span class="input-hint">We'll never share your email.</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<label class="input-label">Error State</label>
|
|
<input type="text" class="input input-error" value="invalid@email">
|
|
<span class="input-error-text">Please enter a valid email address.</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<label class="input-label">Disabled</label>
|
|
<input type="text" class="input" value="Cannot edit" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cards -->
|
|
<div class="section">
|
|
<div class="section-title">Cards</div>
|
|
<div class="grid-2">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">Credential Entry</div>
|
|
<p class="text-sm text-secondary">Last modified 2 hours ago</p>
|
|
</div>
|
|
<p class="text-secondary">Password for production database. Private fields encrypted with your biometric.</p>
|
|
<div class="flex-row" style="margin-top:16px;">
|
|
<span class="badge badge-accent">Private</span>
|
|
<span class="badge badge-default">Database</span>
|
|
</div>
|
|
</div>
|
|
<div class="card card-flat">
|
|
<div class="card-header">
|
|
<div class="card-title">API Key</div>
|
|
<p class="text-sm text-secondary">Never expires</p>
|
|
</div>
|
|
<p class="text-secondary">Production API key for CI/CD pipelines. Rotate every 90 days.</p>
|
|
<div class="flex-row" style="margin-top:16px;">
|
|
<span class="badge badge-primary">Active</span>
|
|
<span class="badge badge-default">API</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Badges -->
|
|
<div class="section">
|
|
<div class="section-title">Badges</div>
|
|
<div class="flex-row">
|
|
<span class="badge badge-default">Default</span>
|
|
<span class="badge badge-primary">Primary</span>
|
|
<span class="badge badge-accent">Accent</span>
|
|
<span class="badge badge-success">Success</span>
|
|
<span class="badge badge-warning">Warning</span>
|
|
<span class="badge badge-error">Error</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alerts -->
|
|
<div class="section">
|
|
<div class="section-title">Alerts</div>
|
|
<div class="flex-col">
|
|
<div class="alert alert-accent">
|
|
<strong>Info:</strong> Your vault is end-to-end encrypted. We cannot access your data.
|
|
</div>
|
|
<div class="alert alert-success">
|
|
<strong>Success:</strong> Credential rotated successfully. API key updated.
|
|
</div>
|
|
<div class="alert alert-error">
|
|
<strong>Error:</strong> Failed to connect to vault. Check your network connection.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tables -->
|
|
<div class="section">
|
|
<div class="section-title">Tables</div>
|
|
<table class="table">
|
|
<thead>
|
|
<tr><th>Name</th><th>Type</th><th>Status</th><th>Last Used</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Production DB</td><td>Password</td><td><span class="badge badge-success">Active</span></td><td>2 min ago</td></tr>
|
|
<tr><td>AWS API Key</td><td>API Key</td><td><span class="badge badge-warning">Expiring</span></td><td>1 hour ago</td></tr>
|
|
<tr><td>GitHub SSH</td><td>SSH Key</td><td><span class="badge badge-success">Active</span></td><td>3 days ago</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Code Block -->
|
|
<div class="section">
|
|
<div class="section-title">Code / Terminal</div>
|
|
<div class="code-block">
|
|
<span style="color:var(--brand-accent);">$</span> clavitor search github<br>
|
|
<span style="color:#A3A3A3;">Found 3 credentials:</span><br>
|
|
<span style="color:#A3A3A3;"> • github-personal (SSH key)</span><br>
|
|
<span style="color:#A3A3A3;"> • github-work (Token)</span><br>
|
|
<span style="color:#A3A3A3;"> • github-actions (API key)</span>
|
|
</div>
|
|
<p style="margin-top:16px;">Inline code looks like <code>--brand-accent</code> or <code>get_credential()</code></p>
|
|
</div>
|
|
|
|
<!-- Form Elements -->
|
|
<div class="section">
|
|
<div class="section-title">Form Elements</div>
|
|
<div class="flex-row">
|
|
<label class="checkbox"><input type="checkbox" class="checkbox-input" checked> Enable 2FA</label>
|
|
<label class="checkbox"><input type="checkbox" class="checkbox-input"> Share with team</label>
|
|
<div class="toggle on"></div>
|
|
<div class="toggle"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |