269 lines
12 KiB
HTML
269 lines
12 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">
|
||
<link rel="stylesheet" href="styleguide.css">
|
||
</head>
|
||
<body 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 mt-6">CLAVITOR</p>
|
||
<p class="text-secondary max-w-md mt-3">
|
||
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 mt-4">
|
||
<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 class="mt-3 flex-row">
|
||
<a href="clavitor-logo.svg" download="clavitor-logo.svg" class="btn btn-ghost btn-sm">↓ Download clavitor-logo.svg</a>
|
||
<a href="clavitor-logo.png" download="clavitor-logo.png" class="btn btn-ghost btn-sm">↓ 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 mb-4">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 mb-4">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 mb-4">100%</p>
|
||
<div class="mb-10">
|
||
<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 mb-4">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;">28px</span><span style="font-size:28px;font-weight:500;">Heading 28</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><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">14px</span><span style="font-size:14px;">Small 14 — Supporting text, labels, metadata</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Buttons -->
|
||
<div class="section">
|
||
<div class="section-title">Buttons</div>
|
||
<div class="flex-row mb-6">
|
||
<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 class="flex-row">
|
||
<button class="btn btn-primary btn-sm">Primary Small</button>
|
||
<button class="btn btn-secondary btn-sm">Secondary Small</button>
|
||
<button class="btn btn-accent btn-sm">Accent Small</button>
|
||
<button class="btn btn-primary btn-lg">Primary Large</button>
|
||
<button class="btn btn-accent btn-lg">Accent 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">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 class="mb-4">2-Column Equal (Hero/Feature)</h4>
|
||
<div class="grid-2-equal mb-12">
|
||
<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 mt-4">
|
||
<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 class="mb-4">3-Column Features</h4>
|
||
<div class="grid-3-equal mb-12">
|
||
<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 class="mb-4">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 class="mt-4">Inline code: <code>--brand-accent</code> or <code>get_credential()</code></p>
|
||
</div>
|
||
|
||
<!-- NEW: Utility Classes -->
|
||
<div class="section">
|
||
<div class="section-title">Utility Classes</div>
|
||
|
||
<h4 class="mb-4">Typography</h4>
|
||
<p class="text-lg mb-4">.text-lg — 18px subtitle size</p>
|
||
<div class="card text-center mb-4">This entire card is centered with .text-center</div>
|
||
|
||
<h4 class="mb-4 mt-8">Spacing (margin-top)</h4>
|
||
<div style="background: var(--bg-secondary); padding: 16px; border-radius: 8px;">
|
||
<div class="card" style="background: white;">mt-0 baseline</div>
|
||
<div class="card mt-4" style="background: white;">mt-4 adds 16px margin-top</div>
|
||
<div class="card mt-8" style="background: white;">mt-8 adds 32px margin-top</div>
|
||
</div>
|
||
|
||
<h4 class="mb-4 mt-8">Flex utilities</h4>
|
||
<div class="flex-row justify-center mb-4" style="background: var(--bg-secondary); padding: 16px; border-radius: 8px;">
|
||
<span class="pill">.justify-center</span>
|
||
<span class="pill">centers items</span>
|
||
</div>
|
||
<div class="flex-row justify-between mb-4" style="background: var(--bg-secondary); padding: 16px; border-radius: 8px;">
|
||
<span class="pill">.justify-between</span>
|
||
<span class="pill">pushes to edges</span>
|
||
</div>
|
||
|
||
<h4 class="mb-4 mt-8">Component variants</h4>
|
||
<div class="flex-row items-center mb-4">
|
||
<div class="black-square-sm mr-auto"></div>
|
||
<span class="text-secondary">.black-square-sm (48×48px)</span>
|
||
</div>
|
||
<div class="flex-row items-center">
|
||
<div class="black-square"></div>
|
||
<span class="text-secondary ml-auto">.black-square (64×64px)</span>
|
||
</div>
|
||
|
||
<h4 class="mb-4 mt-8">Border utilities</h4>
|
||
<div class="border-top pt-4">
|
||
<span class="text-secondary">.border-top — top border separator</span>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |