chore: auto-commit uncommitted changes
This commit is contained in:
James
parent
c52195ef06
commit
f5e9b54767
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Font Test</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
body { font-family: system-ui; padding: 40px; }
|
||||||
|
.test { font-size: 24px; margin: 20px 0; padding: 20px; background: #f5f5f5; }
|
||||||
|
.jetbrains { font-family: 'JetBrains Mono', monospace; }
|
||||||
|
.fira { font-family: 'Fira Code', monospace; }
|
||||||
|
.system { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h2>Font Loading Test</h2>
|
||||||
|
<div class="test jetbrains">JetBrains Mono: $ clavitor deploy</div>
|
||||||
|
<div class="test fira">Fira Code: $ clavitor deploy</div>
|
||||||
|
<div class="test system">System Mono: $ clavitor deploy</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"log"
|
||||||
|
"net/http"
|
||||||
|
)
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
fs := http.FileServer(http.Dir("."))
|
||||||
|
|
||||||
|
// Wrap to add no-cache headers
|
||||||
|
handler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||||
|
w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
|
||||||
|
w.Header().Set("Pragma", "no-cache")
|
||||||
|
w.Header().Set("Expires", "0")
|
||||||
|
fs.ServeHTTP(w, r)
|
||||||
|
})
|
||||||
|
|
||||||
|
log.Println("Serving on http://192.168.1.16:8888")
|
||||||
|
log.Fatal(http.ListenAndServe("0.0.0.0:8888", handler))
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,225 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Clavitor — Deep Coral + General Sans</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=General+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--brand-black: #0A0A0A;
|
||||||
|
--brand-accent: #EA580C;
|
||||||
|
--brand-accent-light: #F97316;
|
||||||
|
--brand-accent-dark: #C2410C;
|
||||||
|
|
||||||
|
--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;
|
||||||
|
|
||||||
|
--success: #16A34A;
|
||||||
|
--warning: #CA8A04;
|
||||||
|
--error: #DC2626;
|
||||||
|
|
||||||
|
--font-family: "General Sans", system-ui, sans-serif;
|
||||||
|
|
||||||
|
--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;
|
||||||
|
|
||||||
|
--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; }
|
||||||
|
|
||||||
|
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: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
||||||
|
.wordmark-lg { font-size: 32px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
||||||
|
|
||||||
|
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
||||||
|
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.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(234, 88, 12, 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); }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.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); }
|
||||||
|
|
||||||
|
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 12px; }
|
||||||
|
.alert-accent { background: rgba(234, 88, 12, 0.05); }
|
||||||
|
.alert-success { background: rgba(22, 163, 74, 0.05); }
|
||||||
|
.alert-error { background: rgba(220, 38, 38, 0.05); }
|
||||||
|
|
||||||
|
.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-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; }
|
||||||
|
code { font-family: "JetBrains Mono", monospace; font-size: 0.9em; background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; color: var(--brand-accent); }
|
||||||
|
|
||||||
|
.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 { 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 { 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 { 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">
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="brand-block">
|
||||||
|
<div class="black-square"></div>
|
||||||
|
<div>
|
||||||
|
<h1>Clavitor</h1>
|
||||||
|
<p class="text-secondary">Deep Coral + General Sans</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;">
|
||||||
|
Warm energy, structured, distinct.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Brand Colors — DEEP CORAL</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>Deep Coral</strong><br><code>--brand-accent</code><br>#EA580C</div></div>
|
||||||
|
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-light);"></div><div class="color-label"><strong>Coral Light</strong><br><code>--brand-accent-light</code><br>#F97316</div></div>
|
||||||
|
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-dark);"></div><div class="color-label"><strong>Coral Dark</strong><br><code>--brand-accent-dark</code><br>#C2410C</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Typography — GENERAL 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;">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>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Buttons — CORAL ACCENT</div>
|
||||||
|
<div class="flex-row">
|
||||||
|
<button class="btn btn-primary">Primary</button>
|
||||||
|
<button class="btn btn-secondary">Secondary</button>
|
||||||
|
<button class="btn btn-accent">Coral Accent</button>
|
||||||
|
<button class="btn btn-ghost">Ghost</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Alerts</div>
|
||||||
|
<div class="flex-col">
|
||||||
|
<div class="alert alert-accent">
|
||||||
|
<strong>Info:</strong> Warm energy flowing. Coral background.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-error">
|
||||||
|
<strong>Error:</strong> Something needs attention.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Code — JETBRAINS MONO</div>
|
||||||
|
<div class="code-block">
|
||||||
|
<span style="color:var(--brand-accent);">$</span> clavitor deploy<br>
|
||||||
|
<span style="color:#A3A3A3;">Deploying with warm energy...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,225 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Clavitor — Forest Green + Satoshi</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=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--brand-black: #0A0A0A;
|
||||||
|
--brand-accent: #15803D;
|
||||||
|
--brand-accent-light: #16A34A;
|
||||||
|
--brand-accent-dark: #166534;
|
||||||
|
|
||||||
|
--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;
|
||||||
|
|
||||||
|
--success: #16A34A;
|
||||||
|
--warning: #CA8A04;
|
||||||
|
--error: #DC2626;
|
||||||
|
|
||||||
|
--font-family: "Satoshi", system-ui, sans-serif;
|
||||||
|
|
||||||
|
--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;
|
||||||
|
|
||||||
|
--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; }
|
||||||
|
|
||||||
|
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: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
||||||
|
.wordmark-lg { font-size: 32px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
||||||
|
|
||||||
|
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
||||||
|
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.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(21, 128, 61, 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); }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.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); }
|
||||||
|
|
||||||
|
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 12px; }
|
||||||
|
.alert-accent { background: rgba(21, 128, 61, 0.05); }
|
||||||
|
.alert-success { background: rgba(22, 163, 74, 0.05); }
|
||||||
|
.alert-error { background: rgba(220, 38, 38, 0.05); }
|
||||||
|
|
||||||
|
.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-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; }
|
||||||
|
code { font-family: "JetBrains Mono", monospace; font-size: 0.9em; background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; color: var(--brand-accent); }
|
||||||
|
|
||||||
|
.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 { 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 { 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 { 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">
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="brand-block">
|
||||||
|
<div class="black-square"></div>
|
||||||
|
<div>
|
||||||
|
<h1>Clavitor</h1>
|
||||||
|
<p class="text-secondary">Forest Green + Satoshi</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;">
|
||||||
|
Trust, growth, vault is alive. Modern tech feel.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Brand Colors — FOREST GREEN</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>Forest Green</strong><br><code>--brand-accent</code><br>#15803D</div></div>
|
||||||
|
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-light);"></div><div class="color-label"><strong>Green Light</strong><br><code>--brand-accent-light</code><br>#16A34A</div></div>
|
||||||
|
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-dark);"></div><div class="color-label"><strong>Green Dark</strong><br><code>--brand-accent-dark</code><br>#166534</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Typography — SATOSHI</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>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Buttons — GREEN ACCENT</div>
|
||||||
|
<div class="flex-row">
|
||||||
|
<button class="btn btn-primary">Primary</button>
|
||||||
|
<button class="btn btn-secondary">Secondary</button>
|
||||||
|
<button class="btn btn-accent">Forest Accent</button>
|
||||||
|
<button class="btn btn-ghost">Ghost</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Alerts</div>
|
||||||
|
<div class="flex-col">
|
||||||
|
<div class="alert alert-accent">
|
||||||
|
<strong>Info:</strong> Vault is secure and growing. Green background.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-error">
|
||||||
|
<strong>Error:</strong> Something went wrong. Check logs.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Code — JETBRAINS MONO</div>
|
||||||
|
<div class="code-block">
|
||||||
|
<span style="color:var(--brand-accent);">$</span> clavitor status<br>
|
||||||
|
<span style="color:#A3A3A3;">Vault: alive and growing...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,225 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Clavitor — Deep Teal + Space Grotesk</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=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--brand-black: #0A0A0A;
|
||||||
|
--brand-accent: #0D9488;
|
||||||
|
--brand-accent-light: #14B8A6;
|
||||||
|
--brand-accent-dark: #0F766E;
|
||||||
|
|
||||||
|
--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;
|
||||||
|
|
||||||
|
--success: #16A34A;
|
||||||
|
--warning: #CA8A04;
|
||||||
|
--error: #DC2626;
|
||||||
|
|
||||||
|
--font-family: "Space Grotesk", system-ui, sans-serif;
|
||||||
|
|
||||||
|
--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;
|
||||||
|
|
||||||
|
--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; }
|
||||||
|
|
||||||
|
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: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
||||||
|
.wordmark-lg { font-size: 32px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
||||||
|
|
||||||
|
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
||||||
|
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.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(13, 148, 136, 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); }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.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); }
|
||||||
|
|
||||||
|
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 12px; }
|
||||||
|
.alert-accent { background: rgba(13, 148, 136, 0.05); }
|
||||||
|
.alert-success { background: rgba(22, 163, 74, 0.05); }
|
||||||
|
.alert-error { background: rgba(220, 38, 38, 0.05); }
|
||||||
|
|
||||||
|
.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-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; }
|
||||||
|
code { font-family: "JetBrains Mono", monospace; font-size: 0.9em; background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; color: var(--brand-accent); }
|
||||||
|
|
||||||
|
.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 { 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 { 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 { 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">
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="brand-block">
|
||||||
|
<div class="black-square"></div>
|
||||||
|
<div>
|
||||||
|
<h1>Clavitor</h1>
|
||||||
|
<p class="text-secondary">Deep Teal + Space Grotesk</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;">
|
||||||
|
Infrastructure that flows. Technical, cool, distinctive geometry.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Brand Colors — DEEP TEAL</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>Deep Teal</strong><br><code>--brand-accent</code><br>#0D9488</div></div>
|
||||||
|
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-light);"></div><div class="color-label"><strong>Teal Light</strong><br><code>--brand-accent-light</code><br>#14B8A6</div></div>
|
||||||
|
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-dark);"></div><div class="color-label"><strong>Teal Dark</strong><br><code>--brand-accent-dark</code><br>#0F766E</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Typography — SPACE GROTESK</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>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Buttons — TEAL ACCENT</div>
|
||||||
|
<div class="flex-row">
|
||||||
|
<button class="btn btn-primary">Primary</button>
|
||||||
|
<button class="btn btn-secondary">Secondary</button>
|
||||||
|
<button class="btn btn-accent">Teal Accent</button>
|
||||||
|
<button class="btn btn-ghost">Ghost</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Alerts</div>
|
||||||
|
<div class="flex-col">
|
||||||
|
<div class="alert alert-accent">
|
||||||
|
<strong>Info:</strong> Infrastructure connected. Teal background.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-error">
|
||||||
|
<strong>Error:</strong> Connection failed. Check configuration.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Code — JETBRAINS MONO</div>
|
||||||
|
<div class="code-block">
|
||||||
|
<span style="color:var(--brand-accent);">$</span> clavitor deploy<br>
|
||||||
|
<span style="color:#A3A3A3;">Connected to teal infrastructure...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -6,22 +6,22 @@
|
||||||
<title>Clavitor Design System — v0.1</title>
|
<title>Clavitor Design System — v0.1</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
<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>
|
<style>
|
||||||
/* ============================================
|
/* ============================================
|
||||||
CLAVITOR DESIGN SYSTEM — v0.1
|
CLAVITOR DESIGN SYSTEM — v0.1
|
||||||
One file. No dependencies. Copy what you need.
|
Violet #7C3AED + Figtree + JetBrains Mono
|
||||||
============================================ */
|
============================================ */
|
||||||
|
|
||||||
/* --- CSS Variables (Tokens) --- */
|
|
||||||
:root {
|
:root {
|
||||||
/* Brand */
|
/* Brand */
|
||||||
--brand-black: #0A0A0A;
|
--brand-black: #0A0A0A;
|
||||||
--brand-accent: #E11D48;
|
--brand-accent: #7C3AED;
|
||||||
--brand-accent-light: #F43F5E;
|
--brand-accent-light: #8B5CF6;
|
||||||
--brand-accent-dark: #BE123C;
|
--brand-accent-dark: #6D28D9;
|
||||||
|
|
||||||
/* Core Colors — Light Mode */
|
/* Core Colors */
|
||||||
--bg-primary: #FFFFFF;
|
--bg-primary: #FFFFFF;
|
||||||
--bg-secondary: #F5F5F5;
|
--bg-secondary: #F5F5F5;
|
||||||
--bg-tertiary: #E5E5E5;
|
--bg-tertiary: #E5E5E5;
|
||||||
|
|
@ -41,9 +41,9 @@
|
||||||
--error: #DC2626;
|
--error: #DC2626;
|
||||||
|
|
||||||
/* Typography */
|
/* Typography */
|
||||||
--font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
|
--font-family: "Figtree", system-ui, sans-serif;
|
||||||
|
|
||||||
/* Spacing (4px base) */
|
/* Spacing */
|
||||||
--space-1: 4px;
|
--space-1: 4px;
|
||||||
--space-2: 8px;
|
--space-2: 8px;
|
||||||
--space-3: 12px;
|
--space-3: 12px;
|
||||||
|
|
@ -60,7 +60,6 @@
|
||||||
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Reset --- */
|
|
||||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
|
@ -72,14 +71,13 @@
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Layout --- */
|
|
||||||
.container { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
|
.container { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
|
||||||
.section { margin-bottom: 64px; }
|
.section { margin-bottom: 64px; }
|
||||||
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
.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-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
|
||||||
.flex-col { display: flex; flex-direction: column; gap: 12px; }
|
.flex-col { display: flex; flex-direction: column; gap: 12px; }
|
||||||
|
|
||||||
/* --- Typography --- */
|
/* Typography */
|
||||||
h1 { font-size: 72px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; }
|
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; }
|
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; }
|
h3 { font-size: 40px; font-weight: 600; letter-spacing: -0.019em; }
|
||||||
|
|
@ -89,32 +87,46 @@
|
||||||
.text-secondary { color: var(--text-secondary); }
|
.text-secondary { color: var(--text-secondary); }
|
||||||
.text-tertiary { color: var(--text-tertiary); }
|
.text-tertiary { color: var(--text-tertiary); }
|
||||||
|
|
||||||
/* Wordmark — spaced uppercase, infrastructure feel */
|
.wordmark { font-size: 18px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
||||||
.wordmark {
|
.wordmark-lg { font-size: 32px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
||||||
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 */
|
||||||
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
||||||
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
||||||
|
|
||||||
/* --- Colors --- */
|
/* Colors */
|
||||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
|
.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-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); }
|
||||||
.color-block { height: 80px; }
|
.color-block { height: 80px; }
|
||||||
.color-label { padding: 12px; font-size: 12px; background: var(--bg-primary); }
|
.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; }
|
.color-label code { font-family: "JetBrains Mono", monospace; background: var(--bg-secondary); padding: 2px 4px; border-radius: 4px; }
|
||||||
|
|
||||||
/* --- Buttons --- */
|
/* 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; }
|
||||||
|
.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; }
|
||||||
|
.pill {
|
||||||
|
display: inline-flex; align-items: center;
|
||||||
|
height: 32px; padding: 0 16px;
|
||||||
|
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); }
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||||
font-family: inherit; font-size: 16px; font-weight: 500;
|
font-family: inherit; font-size: 16px; font-weight: 500;
|
||||||
|
|
@ -135,7 +147,7 @@
|
||||||
.btn-lg { height: 48px; padding: 0 20px; }
|
.btn-lg { height: 48px; padding: 0 20px; }
|
||||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
|
||||||
/* --- Inputs --- */
|
/* Inputs */
|
||||||
.input-group { display: flex; flex-direction: column; gap: 8px; }
|
.input-group { display: flex; flex-direction: column; gap: 8px; }
|
||||||
.input-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
|
.input-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
|
||||||
.input {
|
.input {
|
||||||
|
|
@ -146,19 +158,19 @@
|
||||||
transition: all 100ms ease;
|
transition: all 100ms ease;
|
||||||
}
|
}
|
||||||
.input:hover { border-color: var(--text-tertiary); }
|
.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: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::placeholder { color: var(--text-tertiary); }
|
||||||
.input-error { border-color: var(--error); }
|
.input-error { border-color: var(--error); }
|
||||||
.input-hint { font-size: 12px; color: var(--text-tertiary); }
|
.input-hint { font-size: 12px; color: var(--text-tertiary); }
|
||||||
.input-error-text { font-size: 12px; color: var(--error); }
|
.input-error-text { font-size: 12px; color: var(--error); }
|
||||||
|
|
||||||
/* --- Cards --- */
|
/* Cards */
|
||||||
.card { background: var(--bg-secondary); border-radius: 12px; padding: 24px; }
|
.card { background: var(--bg-secondary); border-radius: 12px; padding: 24px; }
|
||||||
.card-flat { background: var(--bg-secondary); border: 1px solid var(--border-default); }
|
.card-flat { background: var(--bg-secondary); border: 1px solid var(--border-default); }
|
||||||
.card-header { margin-bottom: 16px; }
|
.card-header { margin-bottom: 16px; }
|
||||||
.card-title { font-size: 18px; font-weight: 600; }
|
.card-title { font-size: 18px; font-weight: 600; }
|
||||||
|
|
||||||
/* --- Badges --- */
|
/* Badges */
|
||||||
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; font-size: 12px; font-weight: 500; border-radius: 8px; }
|
.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-default { background: var(--bg-tertiary); color: var(--text-secondary); }
|
||||||
.badge-primary { background: var(--brand-black); color: white; }
|
.badge-primary { background: var(--brand-black); color: white; }
|
||||||
|
|
@ -167,41 +179,24 @@
|
||||||
.badge-warning { background: rgba(202, 138, 4, 0.1); color: var(--warning); }
|
.badge-warning { background: rgba(202, 138, 4, 0.1); color: var(--warning); }
|
||||||
.badge-error { background: rgba(220, 38, 38, 0.1); color: var(--error); }
|
.badge-error { background: rgba(220, 38, 38, 0.1); color: var(--error); }
|
||||||
|
|
||||||
/* --- Alerts --- */
|
/* Alerts */
|
||||||
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 12px; border-left: 3px solid; }
|
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 12px; }
|
||||||
.alert-accent { background: rgba(180, 83, 9, 0.05); border-left-color: var(--brand-accent); }
|
.alert-accent { background: rgba(124, 58, 237, 0.05); }
|
||||||
.alert-success { background: rgba(22, 163, 74, 0.05); border-left-color: var(--success); }
|
.alert-success { background: rgba(22, 163, 74, 0.05); }
|
||||||
.alert-error { background: rgba(220, 38, 38, 0.05); border-left-color: var(--error); }
|
.alert-error { background: rgba(220, 38, 38, 0.05); }
|
||||||
|
|
||||||
/* --- Tables --- */
|
/* Tables */
|
||||||
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
.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 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 td { padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
|
||||||
.table tr:hover td { background: var(--bg-secondary); }
|
.table tr:hover td { background: var(--bg-secondary); }
|
||||||
|
|
||||||
/* --- Code --- */
|
/* 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 { 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; }
|
||||||
.code-block .prompt { color: var(--brand-accent); }
|
code { font-family: "JetBrains Mono", monospace; font-size: 0.9em; background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; 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 --- */
|
/* Section Title */
|
||||||
.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); }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -213,13 +208,13 @@
|
||||||
<div class="black-square"></div>
|
<div class="black-square"></div>
|
||||||
<div>
|
<div>
|
||||||
<h1>Clavitor</h1>
|
<h1>Clavitor</h1>
|
||||||
<p class="text-secondary">Design System v0.1</p>
|
<p class="text-secondary">Design System v0.1 — Violet + Figtree + JetBrains Mono</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="wordmark-lg" style="margin-top: 24px; color: var(--brand-accent);">CLAVITOR</p>
|
<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;">
|
<p class="text-secondary" style="max-width: 600px; margin-top: 12px;">
|
||||||
A black box vault for AI infrastructure. One file. No dependencies.
|
A black box vault for AI infrastructure. Tokens, components, layouts.
|
||||||
Copy the CSS variables and classes you need.
|
Based on vault1984.com patterns.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -228,58 +223,34 @@
|
||||||
<div class="section-title">Brand Colors</div>
|
<div class="section-title">Brand Colors</div>
|
||||||
<div class="color-grid">
|
<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-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);"></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>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-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>Accent Dark</strong><br><code>--brand-accent-dark</code><br>#92400E</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Typography -->
|
<!-- Typography -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Typography — Plus Jakarta Sans</div>
|
<div class="section-title">Typography — Figtree</div>
|
||||||
<div class="flex-col">
|
<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;">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;">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;">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;">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;">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;">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;">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 over the lazy dog</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Buttons -->
|
<!-- Buttons -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Buttons</div>
|
<div class="section-title">Buttons</div>
|
||||||
<h4 style="margin-bottom:16px;">Variants</h4>
|
|
||||||
<div class="flex-row" style="margin-bottom:24px;">
|
<div class="flex-row" style="margin-bottom:24px;">
|
||||||
<button class="btn btn-primary">Primary</button>
|
<button class="btn btn-primary">Primary</button>
|
||||||
<button class="btn btn-secondary">Secondary</button>
|
<button class="btn btn-secondary">Secondary</button>
|
||||||
<button class="btn btn-accent">Accent</button>
|
<button class="btn btn-accent">Violet Accent</button>
|
||||||
<button class="btn btn-ghost">Ghost</button>
|
<button class="btn btn-ghost">Ghost</button>
|
||||||
<button class="btn btn-primary" disabled>Disabled</button>
|
<button class="btn btn-primary" disabled>Disabled</button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Inputs -->
|
<!-- Inputs -->
|
||||||
|
|
@ -290,118 +261,80 @@
|
||||||
<label class="input-label">Default</label>
|
<label class="input-label">Default</label>
|
||||||
<input type="text" class="input" placeholder="Enter text...">
|
<input type="text" class="input" placeholder="Enter text...">
|
||||||
</div>
|
</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">
|
<div class="input-group">
|
||||||
<label class="input-label">Error State</label>
|
<label class="input-label">Error State</label>
|
||||||
<input type="text" class="input input-error" value="invalid@email">
|
<input type="text" class="input input-error" value="invalid@email">
|
||||||
<span class="input-error-text">Please enter a valid email address.</span>
|
<span class="input-error-text">Please enter a valid email address.</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
</div>
|
||||||
<label class="input-label">Disabled</label>
|
</div>
|
||||||
<input type="text" class="input" value="Cannot edit" disabled>
|
|
||||||
|
<!-- 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Cards -->
|
<!-- Code -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Cards</div>
|
<div class="section-title">Code — JetBrains Mono</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">
|
<div class="code-block">
|
||||||
<span style="color:var(--brand-accent);">$</span> clavitor search github<br>
|
<span style="color:var(--brand-accent);">$</span> clavitor deploy production<br>
|
||||||
<span style="color:#A3A3A3;">Found 3 credentials:</span><br>
|
<span style="color:#D4D4D4;">Deploying to production... 0x7f3a9b2c</span><br>
|
||||||
<span style="color:#A3A3A3;"> • github-personal (SSH key)</span><br>
|
<span style="color:#D4D4D4;">Credentials: github-token, aws-key</span>
|
||||||
<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>
|
||||||
|
<p style="margin-top:16px;">Inline code: <code>--brand-accent</code> or <code>get_credential()</code></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue