225 lines
12 KiB
HTML
225 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 — 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> |