427 lines
20 KiB
HTML
427 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=Figtree:wght@400..700&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400..500&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ============================================
|
||
CLAVITOR DESIGN SYSTEM — v0.1
|
||
Violet #7C3AED + Figtree + JetBrains Mono
|
||
============================================ */
|
||
|
||
:root {
|
||
/* Brand */
|
||
--brand-black: #0A0A0A;
|
||
--brand-accent: #7C3AED;
|
||
--brand-accent-light: #8B5CF6;
|
||
--brand-accent-dark: #6D28D9;
|
||
|
||
/* Core Colors */
|
||
--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: "Figtree", system-ui, sans-serif;
|
||
|
||
/* Wordmark — FINAL: Figtree 700, 0.25em */
|
||
--wordmark-font: "Figtree", system-ui, sans-serif;
|
||
--wordmark-weight: 700;
|
||
--wordmark-spacing: 0.25em;
|
||
|
||
/* Spacing */
|
||
--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);
|
||
}
|
||
|
||
*, *::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;
|
||
}
|
||
|
||
.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 { font-size: 18px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; }
|
||
.wordmark-lg { font-size: 32px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); }
|
||
|
||
/* Brand Block */
|
||
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
||
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
||
|
||
/* Logo Lockup — The Trinity */
|
||
.logo-lockup { display: inline-flex; gap: 20px; align-items: stretch; }
|
||
.logo-lockup-square { width: 80px; height: 80px; background: var(--brand-black); flex-shrink: 0; }
|
||
.logo-lockup-text { display: flex; flex-direction: column; justify-content: space-between; height: 80px; }
|
||
.logo-lockup-wordmark { font-family: var(--font-family); font-size: 56px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); line-height: 1; }
|
||
.logo-lockup-tagline { font-size: 16px; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; margin-bottom: -2px; }
|
||
|
||
/* 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: "JetBrains Mono", monospace; background: var(--bg-secondary); padding: 2px 4px; border-radius: 4px; }
|
||
|
||
/* Layout Patterns (from vault1984.com) */
|
||
.max-width { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||
.grid-2-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; overflow: visible; }
|
||
.grid-3-equal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
|
||
.grid-4-equal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
|
||
|
||
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; overflow: visible; }
|
||
.pill {
|
||
display: inline-flex; align-items: center;
|
||
height: 32px; padding: 0 16px;
|
||
white-space: nowrap;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-default);
|
||
border-radius: 9999px;
|
||
font-size: 14px; font-weight: 500;
|
||
}
|
||
.pill-accent { background: var(--brand-accent); color: white; border-color: var(--brand-accent); }
|
||
|
||
.feature-card { background: var(--bg-secondary); border-radius: 12px; padding: 32px; }
|
||
.feature-card-dark { background: var(--bg-inverse); color: var(--text-inverse); border-radius: 12px; padding: 32px; }
|
||
.section-vault { padding: 80px 0; }
|
||
.section-vault-dark { padding: 80px 0; background: var(--bg-inverse); color: var(--text-inverse); }
|
||
|
||
.stat-number { font-size: 72px; font-weight: 700; color: var(--brand-accent); line-height: 1; margin-bottom: 8px; }
|
||
.stat-label { font-size: 14px; color: var(--text-secondary); }
|
||
|
||
/* 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); }
|
||
|
||
/* 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(124, 58, 237, 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; }
|
||
.alert-accent { background: rgba(124, 58, 237, 0.05); }
|
||
.alert-success { background: rgba(22, 163, 74, 0.05); }
|
||
.alert-error { background: rgba(220, 38, 38, 0.05); }
|
||
|
||
/* 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: "JetBrains Mono", monospace; font-size: 14px; line-height: 1.6; padding: 16px; border-radius: 12px; overflow-x: auto; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
<!-- Header -->
|
||
<div class="section">
|
||
<div class="brand-block">
|
||
<div class="black-square"></div>
|
||
<div>
|
||
<h1 style="font-size:40px;">Clavitor</h1>
|
||
<p class="text-secondary">Design System v0.1 — Violet + Figtree + JetBrains Mono</p>
|
||
</div>
|
||
</div>
|
||
<p class="wordmark-lg" style="margin-top: 24px;">CLAVITOR</p>
|
||
<p class="text-secondary" style="max-width: 600px; margin-top: 12px;">
|
||
A black box vault for AI infrastructure. Tokens, components, layouts.
|
||
Based on vault1984.com patterns.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Logo Lockup — The Trinity -->
|
||
<div class="section">
|
||
<div class="section-title">Logo Lockup (Black Square + Wordmark + Tagline)</div>
|
||
<div class="logo-lockup">
|
||
<div class="logo-lockup-square"></div>
|
||
<div class="logo-lockup-text">
|
||
<div class="logo-lockup-wordmark">CLAVITOR</div>
|
||
<div class="logo-lockup-tagline">Black-box credential issuance</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-tertiary text-xs" style="margin-top: 16px;">
|
||
<strong>Spec:</strong> Square: 80×80px #0A0A0A (Black Square) · Wordmark: Figtree 700, 56px, 0.25em, #7C3AED (Violet) · Tagline: 16px, 0.22em, uppercase, #737373 (Text Tertiary)
|
||
</p>
|
||
<p style="margin-top: 12px; display: flex; gap: 24px;">
|
||
<a href="clavitor-logo.svg" download="clavitor-logo.svg" style="font-size: 14px; color: var(--brand-accent); font-weight: 500;">↓ Download clavitor-logo.svg</a>
|
||
<a href="clavitor-logo.png" download="clavitor-logo.png" style="font-size: 14px; color: var(--brand-accent); font-weight: 500;">↓ Download clavitor-logo.png (800×800)</a>
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Logo Lockup — Scale Variants -->
|
||
<div class="section">
|
||
<div class="section-title">Logo Lockup — Scale Variants</div>
|
||
|
||
<p class="text-tertiary text-xs" style="margin-bottom: 16px;">200%</p>
|
||
<div style="transform: scale(2); transform-origin: top left; margin-bottom: 180px; display: inline-block;">
|
||
<div class="logo-lockup">
|
||
<div class="logo-lockup-square"></div>
|
||
<div class="logo-lockup-text">
|
||
<div class="logo-lockup-wordmark">CLAVITOR</div>
|
||
<div class="logo-lockup-tagline">Black-box credential issuance</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-tertiary text-xs" style="margin-bottom: 16px;">150%</p>
|
||
<div style="transform: scale(1.5); transform-origin: top left; margin-bottom: 80px; display: inline-block;">
|
||
<div class="logo-lockup">
|
||
<div class="logo-lockup-square"></div>
|
||
<div class="logo-lockup-text">
|
||
<div class="logo-lockup-wordmark">CLAVITOR</div>
|
||
<div class="logo-lockup-tagline">Black-box credential issuance</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-tertiary text-xs" style="margin-bottom: 16px;">100%</p>
|
||
<div style="margin-bottom: 40px; display: inline-block;">
|
||
<div class="logo-lockup">
|
||
<div class="logo-lockup-square"></div>
|
||
<div class="logo-lockup-text">
|
||
<div class="logo-lockup-wordmark">CLAVITOR</div>
|
||
<div class="logo-lockup-tagline">Black-box credential issuance</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-tertiary text-xs" style="margin-bottom: 16px;">50%</p>
|
||
<div style="transform: scale(0.5); transform-origin: top left; margin-bottom: -20px; display: inline-block;">
|
||
<div class="logo-lockup">
|
||
<div class="logo-lockup-square"></div>
|
||
<div class="logo-lockup-text">
|
||
<div class="logo-lockup-wordmark">CLAVITOR</div>
|
||
<div class="logo-lockup-tagline">Black-box credential issuance</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>Violet</strong><br><code>--brand-accent</code><br>#7C3AED</div></div>
|
||
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-light);"></div><div class="color-label"><strong>Violet Light</strong><br><code>--brand-accent-light</code><br>#8B5CF6</div></div>
|
||
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-dark);"></div><div class="color-label"><strong>Violet Dark</strong><br><code>--brand-accent-dark</code><br>#6D28D9</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Typography -->
|
||
<div class="section">
|
||
<div class="section-title">Typography — Figtree</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;">72px</span><span style="font-size:72px;font-weight:700;">Heading 72</span></div>
|
||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">56px</span><span style="font-size:56px;font-weight:600;">Heading 56</span></div>
|
||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">40px</span><span style="font-size:40px;font-weight:600;">Heading 40</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 over the lazy dog</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Buttons -->
|
||
<div class="section">
|
||
<div class="section-title">Buttons</div>
|
||
<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">Violet Accent</button>
|
||
<button class="btn btn-ghost">Ghost</button>
|
||
<button class="btn btn-primary" disabled>Disabled</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">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>
|
||
</div>
|
||
|
||
<!-- Layout Patterns -->
|
||
<div class="section">
|
||
<div class="section-title">Layout Patterns (from vault1984.com)</div>
|
||
|
||
<h4 style="margin-bottom:16px;">2-Column Equal (Hero/Feature)</h4>
|
||
<div class="grid-2-equal" style="margin-bottom:48px;">
|
||
<div>
|
||
<h3>Heading Left</h3>
|
||
<p class="text-secondary">Description text goes here. This is the left column of a two-column layout pattern used for hero sections and feature comparisons.</p>
|
||
<div class="pill-row" style="margin-top:16px;">
|
||
<span class="pill">MCP</span>
|
||
<span class="pill">REST API</span>
|
||
<span class="pill-accent">CLI</span>
|
||
</div>
|
||
</div>
|
||
<div class="feature-card-dark">
|
||
<p style="font-family:'JetBrains Mono',monospace;">$ clavitor status<br>Vault: secure</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h4 style="margin-bottom:16px;">3-Column Features</h4>
|
||
<div class="grid-3-equal" style="margin-bottom:48px;">
|
||
<div class="feature-card">
|
||
<h4>Feature One</h4>
|
||
<p class="text-secondary">Description of the first feature with details.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Feature Two</h4>
|
||
<p class="text-secondary">Description of the second feature with details.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Feature Three</h4>
|
||
<p class="text-secondary">Description of the third feature with details.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h4 style="margin-bottom:16px;">4-Column Stats</h4>
|
||
<div class="grid-4-equal">
|
||
<div>
|
||
<div class="stat-number">1</div>
|
||
<div class="stat-label">Binary</div>
|
||
</div>
|
||
<div>
|
||
<div class="stat-number">1</div>
|
||
<div class="stat-label">SQLite</div>
|
||
</div>
|
||
<div>
|
||
<div class="stat-number">5</div>
|
||
<div class="stat-label">MCP Tools</div>
|
||
</div>
|
||
<div>
|
||
<div class="stat-number">0</div>
|
||
<div class="stat-label">Dependencies</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Code -->
|
||
<div class="section">
|
||
<div class="section-title">Code — JetBrains Mono</div>
|
||
<div class="code-block">
|
||
<span style="color:var(--brand-accent);">$</span> clavitor deploy production<br>
|
||
<span style="color:#D4D4D4;">Deploying to production... 0x7f3a9b2c</span><br>
|
||
<span style="color:#D4D4D4;">Credentials: github-token, aws-key</span>
|
||
</div>
|
||
<p style="margin-top:16px;">Inline code: <code>--brand-accent</code> or <code>get_credential()</code></p>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|
||
>
|
||
|
||
</html>
|
||
>
|