Qiki run · r-1788521382105-whcag

← Qiki · all runs · 📊 leaderboard

r-1788521382105-whcag

Create the brand style guide for a sovereign-compute startup — palette with hex values and usage rules, type scale, logo clear-space, and do/don't examples

model /nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF upstream http://127.0.0.1:8080 harness 127.0.0.1 score 0 / 20

2026-09-04 11:29:42 UTC · total 42s · 2 steps

1 · Project Branding

Sovereign Compute

Your data, your rules, your infrastructure.

Theme

sovereign-AI desktop, brutalist + cyberpunk, electric cyan glow on deep black

Audience

indie devs + AI researchers

Vibe

bold, confident, futuristic, sovereign

Brand palette

#00FFFF

#0A0A0A

#FFFFFF

#1A1A1A

style-guide · done · 24s

Brand Style Guide

0 / 10

  model /nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF harness 127.0.0.1:8080    

validity 0/2 fidelity 0/2 structure 0/2 depth 0/2 cleanliness 0/2

why (1 notes)

unknown kind

1 LLM call on this step

 ok ·
24009 ms · prompt 1824c → resp 1518c ·
                        t=0.5 max=1100 ·

→ /nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF @ http://127.0.0.1:8080  

raw JSON

{
  "id": "r-1788521382105-whcag",
  "prompt": "Create the brand style guide for a sovereign-compute startup — palette with hex values and usage rules, type scale, logo clear-space, and do/don't examples",
  "project": {
    "name": "Sovereign Compute",
    "tagline": "Your data, your rules, your infrastructure.",
    "theme": "sovereign-AI desktop, brutalist + cyberpunk, electric cyan glow on deep black",
    "brandColors": [
      "#00FFFF",
      "#0A0A0A",
      "#FFFFFF",
      "#1A1A1A"
    ],
    "audience": "indie devs + AI researchers",
    "vibe": "bold, confident, futuristic, sovereign"
  },
  "steps": [
    {
      "id": "s1-acdhv",
      "kind": "project-dna",
      "params": {
        "brief": "Sovereign-compute startup. Positioning: Privacy-first, self-hosted, unbreakable encryption. Archetype: The Guardian / The Sage. Voice: Authoritative, precise, calm, technical but accessible. Palette direction: Deep navy, electric cyan, stark white, slate grey. Do: Emphasize control, ownership, security. Don't: Use flashy 'hacker green', chaotic visuals, or vague promises.",
        "project": {
          "name": "Sovereign Compute",
          "tagline": "Your data, your rules, your infrastructure.",
          "theme": "sovereign-AI desktop, brutalist + cyberpunk, electric cyan glow on deep black",
          "brandColors": [
            "#00FFFF",
            "#0A0A0A",
            "#FFFFFF",
            "#1A1A1A"
          ],
          "audience": "indie devs + AI researchers",
          "vibe": "bold, confident, futuristic, sovereign"
        },
        "heroPlanned": false
      },
      "label": "Brand DNA & Positioning"
    },
    {
      "id": "s2-o40gh",
      "kind": "style-guide",
      "params": {
        "brief": "Create a comprehensive brand style guide for the sovereign-compute startup defined in the DNA. Include: 1. Color Palette with exact HEX values and usage ratios. 2. Typography scale (headings, body, code snippets) with font recommendations. 3. Logo clear-space and minimum size rules. 4. Visual language (gradients, textures, iconography style). 5. Do/Don't examples for imagery and layout. 6. Tone of voice guidelines.",
        "variant": "style-guide",
        "project": {
          "name": "Sovereign Compute",
          "tagline": "Your data, your rules, your infrastructure.",
          "theme": "sovereign-AI desktop, brutalist + cyberpunk, electric cyan glow on deep black",
          "brandColors": [
            "#00FFFF",
            "#0A0A0A",
            "#FFFFFF",
            "#1A1A1A"
          ],
          "audience": "indie devs + AI researchers",
          "vibe": "bold, confident, futuristic, sovereign"
        },
        "heroPlanned": false
      },
      "label": "Brand Style Guide"
    }
  ],
  "results": {
    "s1-acdhv": {
      "status": "done",
      "startedAt": 1788521382107,
      "attempt": 1,
      "output": {
        "html": "<!doctype html><html><head><meta charset=\"utf-8\"><title>Sovereign Core — DNA</title>\n<style>\n:root{\n  --bg:#07080c;--surface:#101219;--elevated:#171a24;\n  --text:#f2f4f8;--muted:#9aa3b4;--border:rgba(255,255,255,.10);\n  --accent:#00E5FF;--accent-btn:#00E5FF;--accent-text:#00E5FF;--ink:#0a0a0a;--glow:rgba(0,229,255,0.20);--soft:rgba(0,229,255,0.13);\n  /* Foreground for anything painted on --soft. See the derivation above: a token\n     computed against --bg is not valid on a tinted surface. */\n  --soft-ink:#00E5FF;\n  /* Minimum comfortable hit area. Referenced by every interactive rule so a\n     tap target can never regress below the 44px WCAG/iOS floor. */\n  --tap:44px;\n  /* Translucent chrome derived from the direction's own background. Hardcoding\n     rgba(10,10,11,.62) here put dark text on a dark nav (1.08:1) the moment a\n     light direction shipped. */\n  --nav-bg:rgba(7,8,12,0.72);--hairline:rgba(255,255,255,.18);\n  --font:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  --font-display:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  --w-display:800;--w-body:300;\n  --track-display:-.045em;\n  --texture:radial-gradient(1000px 460px at 78% -12%, rgba(61,220,151,.16), transparent 62%),radial-gradient(700px 380px at 8% 8%, rgba(80,120,255,.12), transparent 60%);\n  --maxw:1200px;--r:14px;--r-lg:22px;--ease:cubic-bezier(.4,0,.2,1);\n  color-scheme:dark;\n}\nbody{background:var(--bg);background-image:var(--texture);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\nfont-weight:var(--w-body);margin:0;padding:clamp(28px,5vw,72px);line-height:1.6}\nh1{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:var(--w-display);letter-spacing:var(--track-display);font-size:clamp(2.2rem,5vw,3.4rem);margin:0}\n.tag{color:var(--muted);font-size:1.15rem;margin:8px 0 34px}\n.pos{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:1.35rem;max-width:60ch;border-left:3px solid var(--accent-text);padding-left:20px;margin:0 0 36px}\n.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}\nh3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}\nul{margin:0;padding-left:18px}li{margin-bottom:6px}\n.axis{display:flex;align-items:center;gap:12px;margin-bottom:10px}\n.axis span{width:80px;font-size:.9rem;color:var(--muted)}\n.track{flex:1;height:8px;background:var(--soft);border-radius:99px;overflow:hidden}\n.track i{display:block;height:100%;background:var(--accent-btn)}\n.chip{display:inline-block;background:var(--soft);color:var(--soft-ink);padding:6px 14px;border-radius:99px;font-size:.85rem}</style>\n</head><body>\n<h1>Sovereign Core</h1>\n<p class=\"tag\">Self-hosted privacy infrastructure with military-grade encryption.</p>\n<p class=\"pos\">FOR enterprises who refuse third-party data exposure, Sovereign Core IS THE private cloud platform THAT guarantees total data ownership through unbreakable, self-contained encryption.</p>\n<div class=\"grid\">\n  <div><h3>Archetype</h3><span class=\"chip\">Sage</span>\n    <h3 style=\"margin-top:20px\">Audience</h3><p style=\"margin:0\">CTOs and security officers in regulated industries requiring absolute data sovereignty.</p></div>\n  <div><h3>Voice</h3><div class=\"axis\"><span>Formal</span><div class=\"track\"><i style=\"width:80%\"></i></div><b>0.8</b></div><div class=\"axis\"><span>Playful</span><div class=\"track\"><i style=\"width:10%\"></i></div><b>0.1</b></div><div class=\"axis\"><span>Technical</span><div class=\"track\"><i style=\"width:90%\"></i></div><b>0.9</b></div></div>\n  <div><h3>Do say</h3><ul><li>You retain administrative control.</li><li>End-to-end encryption, zero-knowledge architecture.</li><li>Deploy on your hardware, own your data.</li></ul></div>\n  <div><h3>Don't say</h3><ul><li>We handle everything for you.</li><li>State-of-the-art security measures.</li><li>Easy-to-use interface for everyone.</li></ul></div>\n  <div><h3>Proof points</h3><ul><li>Open-source codebase available for independent audit on GitHub.</li><li>SOC 2 Type II certification for infrastructure compliance.</li><li>Zero-knowledge proof implementation verified by third-party security firms.</li></ul></div>\n</div></body></html>",
        "name": "Sovereign Core",
        "tagline": "Self-hosted privacy infrastructure with military-grade encryption.",
        "positioning": "FOR enterprises who refuse third-party data exposure, Sovereign Core IS THE private cloud platform THAT guarantees total data ownership through unbreakable, self-contained encryption.",
        "archetype": "Sage",
        "voice": {
          "formal": 0.8,
          "playful": 0.1,
          "technical": 0.9
        },
        "audience": "CTOs and security officers in regulated industries requiring absolute data sovereignty.",
        "accent": "#00E5FF",
        "doSay": [
          "You retain administrative control.",
          "End-to-end encryption, zero-knowledge architecture.",
          "Deploy on your hardware, own your data."
        ],
        "dontSay": [
          "We handle everything for you.",
          "State-of-the-art security measures.",
          "Easy-to-use interface for everyone."
        ],
        "proofPoints": [
          "Open-source codebase available for independent audit on GitHub.",
          "SOC 2 Type II certification for infrastructure compliance.",
          "Zero-knowledge proof implementation verified by third-party security firms."
        ],
        "warnings": []
      },
      "produces": {
        "brandAccent": "#00E5FF",
        "brandName": "Sovereign Core",
        "brandVoice": {
          "formal": 0.8,
          "playful": 0.1,
          "technical": 0.9
        },
        "siteHtml": "<!doctype html><html><head><meta charset=\"utf-8\"><title>Sovereign Core — DNA</title>\n<style>\n:root{\n  --bg:#07080c;--surface:#101219;--elevated:#171a24;\n  --text:#f2f4f8;--muted:#9aa3b4;--border:rgba(255,255,255,.10);\n  --accent:#00E5FF;--accent-btn:#00E5FF;--accent-text:#00E5FF;--ink:#0a0a0a;--glow:rgba(0,229,255,0.20);--soft:rgba(0,229,255,0.13);\n  /* Foreground for anything painted on --soft. See the derivation above: a token\n     computed against --bg is not valid on a tinted surface. */\n  --soft-ink:#00E5FF;\n  /* Minimum comfortable hit area. Referenced by every interactive rule so a\n     tap target can never regress below the 44px WCAG/iOS floor. */\n  --tap:44px;\n  /* Translucent chrome derived from the direction's own background. Hardcoding\n     rgba(10,10,11,.62) here put dark text on a dark nav (1.08:1) the moment a\n     light direction shipped. */\n  --nav-bg:rgba(7,8,12,0.72);--hairline:rgba(255,255,255,.18);\n  --font:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  --font-display:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  --w-display:800;--w-body:300;\n  --track-display:-.045em;\n  --texture:radial-gradient(1000px 460px at 78% -12%, rgba(61,220,151,.16), transparent 62%),radial-gradient(700px 380px at 8% 8%, rgba(80,120,255,.12), transparent 60%);\n  --maxw:1200px;--r:14px;--r-lg:22px;--ease:cubic-bezier(.4,0,.2,1);\n  color-scheme:dark;\n}\nbody{background:var(--bg);background-image:var(--texture);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\nfont-weight:var(--w-body);margin:0;padding:clamp(28px,5vw,72px);line-height:1.6}\nh1{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:var(--w-display);letter-spacing:var(--track-display);font-size:clamp(2.2rem,5vw,3.4rem);margin:0}\n.tag{color:var(--muted);font-size:1.15rem;margin:8px 0 34px}\n.pos{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:1.35rem;max-width:60ch;border-left:3px solid var(--accent-text);padding-left:20px;margin:0 0 36px}\n.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}\nh3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}\nul{margin:0;padding-left:18px}li{margin-bottom:6px}\n.axis{display:flex;align-items:center;gap:12px;margin-bottom:10px}\n.axis span{width:80px;font-size:.9rem;color:var(--muted)}\n.track{flex:1;height:8px;background:var(--soft);border-radius:99px;overflow:hidden}\n.track i{display:block;height:100%;background:var(--accent-btn)}\n.chip{display:inline-block;background:var(--soft);color:var(--soft-ink);padding:6px 14px;border-radius:99px;font-size:.85rem}</style>\n</head><body>\n<h1>Sovereign Core</h1>\n<p class=\"tag\">Self-hosted privacy infrastructure with military-grade encryption.</p>\n<p class=\"pos\">FOR enterprises who refuse third-party data exposure, Sovereign Core IS THE private cloud platform THAT guarantees total data ownership through unbreakable, self-contained encryption.</p>\n<div class=\"grid\">\n  <div><h3>Archetype</h3><span class=\"chip\">Sage</span>\n    <h3 style=\"margin-top:20px\">Audience</h3><p style=\"margin:0\">CTOs and security officers in regulated industries requiring absolute data sovereignty.</p></div>\n  <div><h3>Voice</h3><div class=\"axis\"><span>Formal</span><div class=\"track\"><i style=\"width:80%\"></i></div><b>0.8</b></div><div class=\"axis\"><span>Playful</span><div class=\"track\"><i style=\"width:10%\"></i></div><b>0.1</b></div><div class=\"axis\"><span>Technical</span><div class=\"track\"><i style=\"width:90%\"></i></div><b>0.9</b></div></div>\n  <div><h3>Do say</h3><ul><li>You retain administrative control.</li><li>End-to-end encryption, zero-knowledge architecture.</li><li>Deploy on your hardware, own your data.</li></ul></div>\n  <div><h3>Don't say</h3><ul><li>We handle everything for you.</li><li>State-of-the-art security measures.</li><li>Easy-to-use interface for everyone.</li></ul></div>\n  <div><h3>Proof points</h3><ul><li>Open-source codebase available for independent audit on GitHub.</li><li>SOC 2 Type II certification for infrastructure compliance.</li><li>Zero-knowledge proof implementation verified by third-party security firms.</li></ul></div>\n</div></body></html>"
      },
      "finishedAt": 1788521399611,
      "llmCalls": [
        {
          "upstream": "http://127.0.0.1:8080",
          "modelRequested": "txt2txt",
          "temperature": 0.6,
          "maxTokens": 1400,
          "timeoutMs": 180000,
          "startedAt": 1788521382107,
          "finishedAt": 1788521399610,
          "ok": true,
          "promptChars": 1531,
          "responseChars": 1082,
          "modelServed": "/nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF"
        }
      ]
    },
    "s2-o40gh": {
      "status": "done",
      "startedAt": 1788521399612,
      "attempt": 1,
      "output": {
        "html": "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>Sovereign Compute — style guide</title>\n<style>:root{\n  --bg:#07080c;--surface:#101219;--elevated:#171a24;\n  --text:#f2f4f8;--muted:#9aa3b4;--border:rgba(255,255,255,.10);\n  --accent:#00FFFF;--accent-btn:#00FFFF;--accent-text:#00FFFF;--ink:#0a0a0a;--glow:rgba(0,255,255,0.20);--soft:rgba(0,255,255,0.13);\n  /* Foreground for anything painted on --soft. See the derivation above: a token\n     computed against --bg is not valid on a tinted surface. */\n  --soft-ink:#00FFFF;\n  /* Minimum comfortable hit area. Referenced by every interactive rule so a\n     tap target can never regress below the 44px WCAG/iOS floor. */\n  --tap:44px;\n  /* Translucent chrome derived from the direction's own background. Hardcoding\n     rgba(10,10,11,.62) here put dark text on a dark nav (1.08:1) the moment a\n     light direction shipped. */\n  --nav-bg:rgba(7,8,12,0.72);--hairline:rgba(255,255,255,.18);\n  --font:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  --font-display:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  --w-display:800;--w-body:300;\n  --track-display:-.045em;\n  --texture:radial-gradient(1000px 460px at 78% -12%, rgba(61,220,151,.16), transparent 62%),radial-gradient(700px 380px at 8% 8%, rgba(80,120,255,.12), transparent 60%);\n  --maxw:1200px;--r:14px;--r-lg:22px;--ease:cubic-bezier(.4,0,.2,1);\n  color-scheme:dark;\n}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);background-image:var(--texture);color:var(--text);\nfont-family:var(--font);font-weight:var(--w-body);font-size:16px;line-height:1.55;\n-webkit-font-smoothing:antialiased}\n.wrap{max-width:var(--maxw);margin:0 auto;padding:56px 24px 104px}\nh1,h2,h3{font-family:var(--font-display);font-weight:var(--w-display);\nletter-spacing:var(--track-display);line-height:1.1;margin:0}\nh1{font-size:clamp(2.2rem,5vw,3.4rem)}\nh2{font-size:1.5rem;margin:0 0 6px}\n.sub{color:var(--muted);margin:12px 0 0;max-width:62ch;font-size:1.05rem}\nsection{margin-top:56px;padding-top:28px;border-top:1px solid var(--border)}\n.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);\nfont-weight:600;margin:0 0 10px}\n.note{color:var(--muted);font-size:13px;margin:8px 0 0;max-width:70ch}\n.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}\ntable{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}\nth{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;\ncolor:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border)}\ntd{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}\ntr td:first-child{white-space:nowrap}\ncode,.mono{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}\n.chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px;\nborder:1px solid var(--border);border-radius:var(--r);background:var(--surface);font-size:14px}\n.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r);\nbackground:var(--elevated);font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap;\nborder-left:3px solid var(--muted)}\n.badge.pass{border-left-color:#2f9e5f}.badge.warn{border-left-color:#c98a11}.badge.fail{border-left-color:#d1453b}\n.dot{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);display:inline-block;\nvertical-align:middle;margin-right:10px;flex:0 0 auto}\n\n.spec{padding:20px 0;border-bottom:1px solid var(--border)}\n.spec-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;color:var(--muted);font-size:12px;margin-bottom:10px}\n.spec-meta b{color:var(--text);font-size:13px;letter-spacing:.06em;text-transform:uppercase}\n.spec-line{line-height:1.15;overflow-wrap:anywhere}\n.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:22px}\n.rule{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}\n.rule h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}\n.rule ul{margin:0;padding-left:1.1em}.rule li{margin:8px 0;font-size:14px}\n.rule.do{border-left:3px solid #2f9e5f}.rule.dont{border-left:3px solid #d1453b}\n.space{display:flex;flex-direction:column;gap:10px;margin-top:18px}\n.space-row{display:flex;align-items:center;gap:14px;font-size:13px}\n.space-bar{height:14px;background:var(--accent-text);border-radius:2px;flex:0 0 auto}\n.space-row .mono{color:var(--muted);min-width:92px}\n.radii{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}\n.radii div{width:110px;height:76px;background:var(--surface);border:1px solid var(--border);\ndisplay:grid;place-items:center;font-size:12px;color:var(--muted)}\n.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;margin-top:18px}\n.icon{margin:0;text-align:center}\n.glyph{display:grid;place-items:center;min-height:var(--tap);height:72px;background:var(--surface);\nborder:1px solid var(--border);border-radius:var(--r);color:var(--text)}\n.icon figcaption{margin-top:7px;font-size:12px;color:var(--muted)}\n.tone{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}</style></head><body><div class=\"wrap\"><p class=\"eyebrow\">Brand style guide</p>\n<h1>Sovereign Compute</h1>\n<p class=\"sub\">Write with the confidence of a system architect who guarantees data sovereignty, using precise technical language without unnecessary fluff.</p>\n<div class=\"tone\"><span class=\"chip\">authoritative</span><span class=\"chip\">precise</span><span class=\"chip\">secure</span><span class=\"chip\">modern</span><span class=\"chip\">minimal</span></div>\n\n<section><p class=\"eyebrow\">01</p><h2>Type scale</h2>\n<p class=\"note\">Modular scale, ratio 1.333, base 16px. Sizes below are rendered at their real value — measure them on screen and they will match the label. Display steps use ui-sans-serif; body uses ui-sans-serif.</p>\n<div class=\"spec\">\n<div class=\"spec-meta\"><b>Display</b><span class=\"mono\">67px / 4.188rem</span>\n<span class=\"mono\">800</span><span>hero headline, one per page</span></div>\n<div class=\"spec-line\" style=\"font-size:67px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Heading 1</b><span class=\"mono\">51px / 3.188rem</span>\n<span class=\"mono\">800</span><span>page title</span></div>\n<div class=\"spec-line\" style=\"font-size:51px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Heading 2</b><span class=\"mono\">38px / 2.375rem</span>\n<span class=\"mono\">800</span><span>section title</span></div>\n<div class=\"spec-line\" style=\"font-size:38px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Heading 3</b><span class=\"mono\">28px / 1.75rem</span>\n<span class=\"mono\">800</span><span>card and sub-section title</span></div>\n<div class=\"spec-line\" style=\"font-size:28px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Lead</b><span class=\"mono\">21px / 1.313rem</span>\n<span class=\"mono\">300</span><span>standfirst under a headline</span></div>\n<div class=\"spec-line\" style=\"font-size:21px;font-weight:300;font-family:var(--font)\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Body</b><span class=\"mono\">16px / 1rem</span>\n<span class=\"mono\">300</span><span>running copy, the default</span></div>\n<div class=\"spec-line\" style=\"font-size:16px;font-weight:300;font-family:var(--font)\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Caption</b><span class=\"mono\">12px / 0.75rem</span>\n<span class=\"mono\">300</span><span>labels, captions, table meta</span></div>\n<div class=\"spec-line\" style=\"font-size:12px;font-weight:300;font-family:var(--font)\">Sovereign Compute</div></div></section>\n\n<section><p class=\"eyebrow\">02</p><h2>Colour</h2>\n<p class=\"note\">Each ratio is computed from the sRGB relative luminance of the pair. AA needs 4.5:1 for body text and 3:1 for text at 24px or 19px bold — \"LARGE ONLY\" means the pairing clears the second bar and not the first.</p>\n<div class=\"scroll\"><table><thead><tr>\n<th>Colour</th><th>Hex</th><th>Token</th><th>vs background</th><th>vs text</th></tr></thead><tbody><tr><td><span class=\"dot\" style=\"background:#07080c\"></span>Background</td>\n<td class=\"mono\">#07080C</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--bg</td>\n<td class=\"mono\">1.00:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">18.18:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#101219\"></span>Surface</td>\n<td class=\"mono\">#101219</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--surface</td>\n<td class=\"mono\">1.07:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">16.99:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#171a24\"></span>Elevated</td>\n<td class=\"mono\">#171A24</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--elevated</td>\n<td class=\"mono\">1.15:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">15.77:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#f2f4f8\"></span>Text</td>\n<td class=\"mono\">#F2F4F8</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--text</td>\n<td class=\"mono\">18.18:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.00:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#9aa3b4\"></span>Muted</td>\n<td class=\"mono\">#9AA3B4</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--muted</td>\n<td class=\"mono\">7.88:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">2.31:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent (brand)</td>\n<td class=\"mono\">#00FFFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent</td>\n<td class=\"mono\">15.96:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent (button fill)</td>\n<td class=\"mono\">#00FFFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-btn</td>\n<td class=\"mono\">15.96:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent (text)</td>\n<td class=\"mono\">#00FFFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-text</td>\n<td class=\"mono\">15.96:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#0A0F14\"></span>background depth</td>\n<td class=\"mono\">#0A0F14</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.04:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">17.48:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#1A2330\"></span>interface surfaces</td>\n<td class=\"mono\">#1A2330</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.26:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">14.37:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#E0E6ED\"></span>text hierarchy</td>\n<td class=\"mono\">#E0E6ED</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">15.93:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#FF3D00\"></span>error states</td>\n<td class=\"mono\">#FF3D00</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">5.64:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">3.22:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td></tr></tbody></table></div>\n<h2 style=\"margin-top:34px;font-size:1.15rem\">Key pairings</h2>\n<div class=\"scroll\"><table><thead><tr><th>Pairing</th><th>Colours</th><th>Ratio</th><th>AA 4.5:1</th><th>Where it is used</th></tr></thead>\n<tbody><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#f2f4f8\"></span>Body text on background</td>\n<td class=\"mono\">#f2f4f8 on #07080c</td>\n<td class=\"mono\"><b>18.18:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">the default reading pair</td></tr><tr><td><span class=\"dot\" style=\"background:#101219\"></span><span class=\"dot\" style=\"background:#f2f4f8\"></span>Body text on surface</td>\n<td class=\"mono\">#f2f4f8 on #101219</td>\n<td class=\"mono\"><b>16.99:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">cards, panels, table rows</td></tr><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#9aa3b4\"></span>Muted text on background</td>\n<td class=\"mono\">#9aa3b4 on #07080c</td>\n<td class=\"mono\"><b>7.88:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">captions and metadata — usually the first to fail</td></tr><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#00FFFF\"></span>Brand accent on background</td>\n<td class=\"mono\">#00FFFF on #07080c</td>\n<td class=\"mono\"><b>15.96:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">decorative only; see the next row before setting text in it</td></tr><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent text on background</td>\n<td class=\"mono\">#00FFFF on #07080c</td>\n<td class=\"mono\"><b>15.96:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">links and emphasis — the accent shifted until it cleared AA</td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span><span class=\"dot\" style=\"background:#0a0a0a\"></span>Button label on button fill</td>\n<td class=\"mono\">#0a0a0a on #00FFFF</td>\n<td class=\"mono\"><b>15.79:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">the primary CTA; the fill moved, not the brand colour</td></tr></tbody></table></div></section>\n\n<section><p class=\"eyebrow\">03</p><h2>Spacing</h2>\n<p class=\"note\">A 4px base grid. Use these steps and nothing between them; the value of a scale is what it forbids.</p>\n<div class=\"space\"><div class=\"space-row\"><span class=\"mono\">3xs · 4px</span><span class=\"space-bar\" style=\"width:4px\"></span></div><div class=\"space-row\"><span class=\"mono\">2xs · 8px</span><span class=\"space-bar\" style=\"width:8px\"></span></div><div class=\"space-row\"><span class=\"mono\">xs · 12px</span><span class=\"space-bar\" style=\"width:12px\"></span></div><div class=\"space-row\"><span class=\"mono\">sm · 16px</span><span class=\"space-bar\" style=\"width:16px\"></span></div><div class=\"space-row\"><span class=\"mono\">md · 24px</span><span class=\"space-bar\" style=\"width:24px\"></span></div><div class=\"space-row\"><span class=\"mono\">lg · 32px</span><span class=\"space-bar\" style=\"width:32px\"></span></div><div class=\"space-row\"><span class=\"mono\">xl · 48px</span><span class=\"space-bar\" style=\"width:48px\"></span></div><div class=\"space-row\"><span class=\"mono\">2xl · 64px</span><span class=\"space-bar\" style=\"width:64px\"></span></div><div class=\"space-row\"><span class=\"mono\">3xl · 96px</span><span class=\"space-bar\" style=\"width:96px\"></span></div></div></section>\n\n<section><p class=\"eyebrow\">04</p><h2>Radius &amp; hit area</h2>\n<div class=\"radii\">\n<div style=\"border-radius:14px\">--r · 14px</div>\n<div style=\"border-radius:22px\">--r-lg · 22px</div>\n<div style=\"border-radius:999px\">pill · 999px</div></div>\n<p class=\"note\">Every interactive element sets <code>min-height:var(--tap)</code> — 44px, the WCAG and iOS floor. Smaller controls are the single most common accessibility regression in a redesign.</p></section>\n\n<section><p class=\"eyebrow\">05</p><h2>Icons</h2>\n<p class=\"note\">7 glyphs on a 24&times;24 grid, 2px stroke, round caps and joins. Stroke weight is set once on the root element so no glyph can carry its own.</p>\n<div class=\"icons\"><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"shield icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2.5L19.5 5.5V11.5C19.5 16 16.3 19.6 12 21.5C7.7 19.6 4.5 16 4.5 11.5V5.5Z\"/></svg></div><figcaption class=\"mono\">shield</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"lock icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4.5\" y=\"10.5\" width=\"15\" height=\"10\" rx=\"2\"/><path d=\"M8 10.5V7a4 4 0 0 1 8 0v3.5\"/></svg></div><figcaption class=\"mono\">lock</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"gear icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3.4\"/><path d=\"M18 12H21M16.24 16.24L18.36 18.36M12 18V21M7.76 16.24L5.64 18.36M6 12H3M7.76 7.76L5.64 5.64M12 6V3M16.24 7.76L18.36 5.64\"/></svg></div><figcaption class=\"mono\">gear</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"globe icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18\"/><path d=\"M12 3c3.2 3.4 3.2 14.6 0 18c-3.2-3.4-3.2-14.6 0-18Z\"/></svg></div><figcaption class=\"mono\">globe</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"search icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"M15.3 15.3L20.5 20.5\"/></svg></div><figcaption class=\"mono\">search</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"bolt icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 2.5L5.5 13.5H11L10.5 21.5L18.5 10.5H13Z\"/></svg></div><figcaption class=\"mono\">bolt</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"check icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12.5L9.5 18L20 6.5\"/></svg></div><figcaption class=\"mono\">check</figcaption></figure></div></section>\n\n<section><p class=\"eyebrow\">06</p><h2>Usage</h2>\n<div class=\"cols\">\n<div class=\"rule do\"><h3>Do</h3><ul><li>use high-contrast monospace fonts for all code snippets and technical identifiers</li><li>apply the accent color only to interactive elements and critical data points</li><li>maintain a minimum clear space of 40px around the logo mark on dark backgrounds</li><li>use geometric, linear iconography with 2px stroke weight for all UI elements</li></ul></div>\n<div class=\"rule dont\"><h3>Don't</h3><ul><li>use gradients that obscure the clarity of the data visualization</li><li>place the logo on photographic backgrounds without a solid overlay</li><li>use decorative or handwritten typefaces for any body copy</li><li>apply the accent color to more than 10% of the total screen area</li></ul></div></div></section></div></body></html>",
        "variant": "style-guide",
        "name": "Sovereign Compute",
        "direction": "neon",
        "accent": "#00FFFF",
        "tone": [
          "authoritative",
          "precise",
          "secure",
          "modern",
          "minimal"
        ],
        "voice": "Write with the confidence of a system architect who guarantees data sovereignty, using precise technical language without unnecessary fluff.",
        "usage": {
          "do": [
            "use high-contrast monospace fonts for all code snippets and technical identifiers",
            "apply the accent color only to interactive elements and critical data points",
            "maintain a minimum clear space of 40px around the logo mark on dark backgrounds",
            "use geometric, linear iconography with 2px stroke weight for all UI elements"
          ],
          "dont": [
            "use gradients that obscure the clarity of the data visualization",
            "place the logo on photographic backgrounds without a solid overlay",
            "use decorative or handwritten typefaces for any body copy",
            "apply the accent color to more than 10% of the total screen area"
          ]
        },
        "palette": [
          {
            "role": "background",
            "hex": "#07080c"
          },
          {
            "role": "surface",
            "hex": "#101219"
          },
          {
            "role": "elevated",
            "hex": "#171a24"
          },
          {
            "role": "text",
            "hex": "#f2f4f8"
          },
          {
            "role": "muted",
            "hex": "#9aa3b4"
          },
          {
            "role": "accent",
            "hex": "#00FFFF"
          },
          {
            "role": "accent-btn",
            "hex": "#00FFFF"
          },
          {
            "role": "accent-text",
            "hex": "#00FFFF"
          },
          {
            "role": "ink",
            "hex": "#0a0a0a"
          },
          {
            "role": "background depth",
            "hex": "#0A0F14"
          },
          {
            "role": "interface surfaces",
            "hex": "#1A2330"
          },
          {
            "role": "text hierarchy",
            "hex": "#E0E6ED"
          },
          {
            "role": "error states",
            "hex": "#FF3D00"
          }
        ],
        "contrast": [
          {
            "pairing": "Body text on background",
            "fg": "#f2f4f8",
            "bg": "#07080c",
            "ratio": 18.18,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Body text on surface",
            "fg": "#f2f4f8",
            "bg": "#101219",
            "ratio": 16.99,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Muted text on background",
            "fg": "#9aa3b4",
            "bg": "#07080c",
            "ratio": 7.88,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Brand accent on background",
            "fg": "#00FFFF",
            "bg": "#07080c",
            "ratio": 15.96,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Accent text on background",
            "fg": "#00FFFF",
            "bg": "#07080c",
            "ratio": 15.96,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Button label on button fill",
            "fg": "#0a0a0a",
            "bg": "#00FFFF",
            "ratio": 15.79,
            "passesAA": true,
            "passesAALarge": true
          }
        ],
        "typeScale": [
          {
            "name": "Display",
            "px": 67,
            "rem": "4.188rem",
            "weight": 800
          },
          {
            "name": "Heading 1",
            "px": 51,
            "rem": "3.188rem",
            "weight": 800
          },
          {
            "name": "Heading 2",
            "px": 38,
            "rem": "2.375rem",
            "weight": 800
          },
          {
            "name": "Heading 3",
            "px": 28,
            "rem": "1.75rem",
            "weight": 800
          },
          {
            "name": "Lead",
            "px": 21,
            "rem": "1.313rem",
            "weight": 300
          },
          {
            "name": "Body",
            "px": 16,
            "rem": "1rem",
            "weight": 300
          },
          {
            "name": "Caption",
            "px": 12,
            "rem": "0.75rem",
            "weight": 300
          }
        ],
        "spacing": [
          {
            "name": "3xs",
            "px": 4
          },
          {
            "name": "2xs",
            "px": 8
          },
          {
            "name": "xs",
            "px": 12
          },
          {
            "name": "sm",
            "px": 16
          },
          {
            "name": "md",
            "px": 24
          },
          {
            "name": "lg",
            "px": 32
          },
          {
            "name": "xl",
            "px": 48
          },
          {
            "name": "2xl",
            "px": 64
          },
          {
            "name": "3xl",
            "px": 96
          }
        ],
        "radius": {
          "base": "14px",
          "large": "22px",
          "tap": "44px"
        },
        "icons": [
          {
            "name": "shield",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"shield icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2.5L19.5 5.5V11.5C19.5 16 16.3 19.6 12 21.5C7.7 19.6 4.5 16 4.5 11.5V5.5Z\"/></svg>"
          },
          {
            "name": "lock",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"lock icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4.5\" y=\"10.5\" width=\"15\" height=\"10\" rx=\"2\"/><path d=\"M8 10.5V7a4 4 0 0 1 8 0v3.5\"/></svg>"
          },
          {
            "name": "gear",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"gear icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3.4\"/><path d=\"M18 12H21M16.24 16.24L18.36 18.36M12 18V21M7.76 16.24L5.64 18.36M6 12H3M7.76 7.76L5.64 5.64M12 6V3M16.24 7.76L18.36 5.64\"/></svg>"
          },
          {
            "name": "globe",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"globe icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18\"/><path d=\"M12 3c3.2 3.4 3.2 14.6 0 18c-3.2-3.4-3.2-14.6 0-18Z\"/></svg>"
          },
          {
            "name": "search",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"search icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"M15.3 15.3L20.5 20.5\"/></svg>"
          },
          {
            "name": "bolt",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"bolt icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 2.5L5.5 13.5H11L10.5 21.5L18.5 10.5H13Z\"/></svg>"
          },
          {
            "name": "check",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"check icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12.5L9.5 18L20 6.5\"/></svg>"
          }
        ],
        "iconVocabulary": [
          "arrow",
          "check",
          "star",
          "bolt",
          "leaf",
          "clock",
          "shield",
          "chat",
          "cart",
          "pin",
          "heart",
          "gear",
          "lock",
          "search",
          "user",
          "mail",
          "globe",
          "spark"
        ],
        "iconStrokeWidth": 2,
        "contact": {
          "person": null,
          "role": null,
          "email": null,
          "phone": null,
          "web": null
        },
        "placeholders": [
          "name",
          "job title",
          "email",
          "phone number",
          "domain"
        ],
        "fromModel": true,
        "warnings": []
      },
      "produces": {
        "siteHtml": "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>Sovereign Compute — style guide</title>\n<style>:root{\n  --bg:#07080c;--surface:#101219;--elevated:#171a24;\n  --text:#f2f4f8;--muted:#9aa3b4;--border:rgba(255,255,255,.10);\n  --accent:#00FFFF;--accent-btn:#00FFFF;--accent-text:#00FFFF;--ink:#0a0a0a;--glow:rgba(0,255,255,0.20);--soft:rgba(0,255,255,0.13);\n  /* Foreground for anything painted on --soft. See the derivation above: a token\n     computed against --bg is not valid on a tinted surface. */\n  --soft-ink:#00FFFF;\n  /* Minimum comfortable hit area. Referenced by every interactive rule so a\n     tap target can never regress below the 44px WCAG/iOS floor. */\n  --tap:44px;\n  /* Translucent chrome derived from the direction's own background. Hardcoding\n     rgba(10,10,11,.62) here put dark text on a dark nav (1.08:1) the moment a\n     light direction shipped. */\n  --nav-bg:rgba(7,8,12,0.72);--hairline:rgba(255,255,255,.18);\n  --font:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  --font-display:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  --w-display:800;--w-body:300;\n  --track-display:-.045em;\n  --texture:radial-gradient(1000px 460px at 78% -12%, rgba(61,220,151,.16), transparent 62%),radial-gradient(700px 380px at 8% 8%, rgba(80,120,255,.12), transparent 60%);\n  --maxw:1200px;--r:14px;--r-lg:22px;--ease:cubic-bezier(.4,0,.2,1);\n  color-scheme:dark;\n}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);background-image:var(--texture);color:var(--text);\nfont-family:var(--font);font-weight:var(--w-body);font-size:16px;line-height:1.55;\n-webkit-font-smoothing:antialiased}\n.wrap{max-width:var(--maxw);margin:0 auto;padding:56px 24px 104px}\nh1,h2,h3{font-family:var(--font-display);font-weight:var(--w-display);\nletter-spacing:var(--track-display);line-height:1.1;margin:0}\nh1{font-size:clamp(2.2rem,5vw,3.4rem)}\nh2{font-size:1.5rem;margin:0 0 6px}\n.sub{color:var(--muted);margin:12px 0 0;max-width:62ch;font-size:1.05rem}\nsection{margin-top:56px;padding-top:28px;border-top:1px solid var(--border)}\n.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);\nfont-weight:600;margin:0 0 10px}\n.note{color:var(--muted);font-size:13px;margin:8px 0 0;max-width:70ch}\n.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}\ntable{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}\nth{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;\ncolor:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border)}\ntd{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}\ntr td:first-child{white-space:nowrap}\ncode,.mono{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}\n.chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px;\nborder:1px solid var(--border);border-radius:var(--r);background:var(--surface);font-size:14px}\n.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r);\nbackground:var(--elevated);font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap;\nborder-left:3px solid var(--muted)}\n.badge.pass{border-left-color:#2f9e5f}.badge.warn{border-left-color:#c98a11}.badge.fail{border-left-color:#d1453b}\n.dot{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);display:inline-block;\nvertical-align:middle;margin-right:10px;flex:0 0 auto}\n\n.spec{padding:20px 0;border-bottom:1px solid var(--border)}\n.spec-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;color:var(--muted);font-size:12px;margin-bottom:10px}\n.spec-meta b{color:var(--text);font-size:13px;letter-spacing:.06em;text-transform:uppercase}\n.spec-line{line-height:1.15;overflow-wrap:anywhere}\n.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:22px}\n.rule{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}\n.rule h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}\n.rule ul{margin:0;padding-left:1.1em}.rule li{margin:8px 0;font-size:14px}\n.rule.do{border-left:3px solid #2f9e5f}.rule.dont{border-left:3px solid #d1453b}\n.space{display:flex;flex-direction:column;gap:10px;margin-top:18px}\n.space-row{display:flex;align-items:center;gap:14px;font-size:13px}\n.space-bar{height:14px;background:var(--accent-text);border-radius:2px;flex:0 0 auto}\n.space-row .mono{color:var(--muted);min-width:92px}\n.radii{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}\n.radii div{width:110px;height:76px;background:var(--surface);border:1px solid var(--border);\ndisplay:grid;place-items:center;font-size:12px;color:var(--muted)}\n.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;margin-top:18px}\n.icon{margin:0;text-align:center}\n.glyph{display:grid;place-items:center;min-height:var(--tap);height:72px;background:var(--surface);\nborder:1px solid var(--border);border-radius:var(--r);color:var(--text)}\n.icon figcaption{margin-top:7px;font-size:12px;color:var(--muted)}\n.tone{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}</style></head><body><div class=\"wrap\"><p class=\"eyebrow\">Brand style guide</p>\n<h1>Sovereign Compute</h1>\n<p class=\"sub\">Write with the confidence of a system architect who guarantees data sovereignty, using precise technical language without unnecessary fluff.</p>\n<div class=\"tone\"><span class=\"chip\">authoritative</span><span class=\"chip\">precise</span><span class=\"chip\">secure</span><span class=\"chip\">modern</span><span class=\"chip\">minimal</span></div>\n\n<section><p class=\"eyebrow\">01</p><h2>Type scale</h2>\n<p class=\"note\">Modular scale, ratio 1.333, base 16px. Sizes below are rendered at their real value — measure them on screen and they will match the label. Display steps use ui-sans-serif; body uses ui-sans-serif.</p>\n<div class=\"spec\">\n<div class=\"spec-meta\"><b>Display</b><span class=\"mono\">67px / 4.188rem</span>\n<span class=\"mono\">800</span><span>hero headline, one per page</span></div>\n<div class=\"spec-line\" style=\"font-size:67px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Heading 1</b><span class=\"mono\">51px / 3.188rem</span>\n<span class=\"mono\">800</span><span>page title</span></div>\n<div class=\"spec-line\" style=\"font-size:51px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Heading 2</b><span class=\"mono\">38px / 2.375rem</span>\n<span class=\"mono\">800</span><span>section title</span></div>\n<div class=\"spec-line\" style=\"font-size:38px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Heading 3</b><span class=\"mono\">28px / 1.75rem</span>\n<span class=\"mono\">800</span><span>card and sub-section title</span></div>\n<div class=\"spec-line\" style=\"font-size:28px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Lead</b><span class=\"mono\">21px / 1.313rem</span>\n<span class=\"mono\">300</span><span>standfirst under a headline</span></div>\n<div class=\"spec-line\" style=\"font-size:21px;font-weight:300;font-family:var(--font)\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Body</b><span class=\"mono\">16px / 1rem</span>\n<span class=\"mono\">300</span><span>running copy, the default</span></div>\n<div class=\"spec-line\" style=\"font-size:16px;font-weight:300;font-family:var(--font)\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Caption</b><span class=\"mono\">12px / 0.75rem</span>\n<span class=\"mono\">300</span><span>labels, captions, table meta</span></div>\n<div class=\"spec-line\" style=\"font-size:12px;font-weight:300;font-family:var(--font)\">Sovereign Compute</div></div></section>\n\n<section><p class=\"eyebrow\">02</p><h2>Colour</h2>\n<p class=\"note\">Each ratio is computed from the sRGB relative luminance of the pair. AA needs 4.5:1 for body text and 3:1 for text at 24px or 19px bold — \"LARGE ONLY\" means the pairing clears the second bar and not the first.</p>\n<div class=\"scroll\"><table><thead><tr>\n<th>Colour</th><th>Hex</th><th>Token</th><th>vs background</th><th>vs text</th></tr></thead><tbody><tr><td><span class=\"dot\" style=\"background:#07080c\"></span>Background</td>\n<td class=\"mono\">#07080C</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--bg</td>\n<td class=\"mono\">1.00:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">18.18:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#101219\"></span>Surface</td>\n<td class=\"mono\">#101219</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--surface</td>\n<td class=\"mono\">1.07:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">16.99:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#171a24\"></span>Elevated</td>\n<td class=\"mono\">#171A24</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--elevated</td>\n<td class=\"mono\">1.15:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">15.77:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#f2f4f8\"></span>Text</td>\n<td class=\"mono\">#F2F4F8</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--text</td>\n<td class=\"mono\">18.18:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.00:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#9aa3b4\"></span>Muted</td>\n<td class=\"mono\">#9AA3B4</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--muted</td>\n<td class=\"mono\">7.88:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">2.31:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent (brand)</td>\n<td class=\"mono\">#00FFFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent</td>\n<td class=\"mono\">15.96:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent (button fill)</td>\n<td class=\"mono\">#00FFFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-btn</td>\n<td class=\"mono\">15.96:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent (text)</td>\n<td class=\"mono\">#00FFFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-text</td>\n<td class=\"mono\">15.96:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#0A0F14\"></span>background depth</td>\n<td class=\"mono\">#0A0F14</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.04:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">17.48:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#1A2330\"></span>interface surfaces</td>\n<td class=\"mono\">#1A2330</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.26:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">14.37:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#E0E6ED\"></span>text hierarchy</td>\n<td class=\"mono\">#E0E6ED</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">15.93:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#FF3D00\"></span>error states</td>\n<td class=\"mono\">#FF3D00</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">5.64:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">3.22:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td></tr></tbody></table></div>\n<h2 style=\"margin-top:34px;font-size:1.15rem\">Key pairings</h2>\n<div class=\"scroll\"><table><thead><tr><th>Pairing</th><th>Colours</th><th>Ratio</th><th>AA 4.5:1</th><th>Where it is used</th></tr></thead>\n<tbody><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#f2f4f8\"></span>Body text on background</td>\n<td class=\"mono\">#f2f4f8 on #07080c</td>\n<td class=\"mono\"><b>18.18:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">the default reading pair</td></tr><tr><td><span class=\"dot\" style=\"background:#101219\"></span><span class=\"dot\" style=\"background:#f2f4f8\"></span>Body text on surface</td>\n<td class=\"mono\">#f2f4f8 on #101219</td>\n<td class=\"mono\"><b>16.99:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">cards, panels, table rows</td></tr><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#9aa3b4\"></span>Muted text on background</td>\n<td class=\"mono\">#9aa3b4 on #07080c</td>\n<td class=\"mono\"><b>7.88:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">captions and metadata — usually the first to fail</td></tr><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#00FFFF\"></span>Brand accent on background</td>\n<td class=\"mono\">#00FFFF on #07080c</td>\n<td class=\"mono\"><b>15.96:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">decorative only; see the next row before setting text in it</td></tr><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent text on background</td>\n<td class=\"mono\">#00FFFF on #07080c</td>\n<td class=\"mono\"><b>15.96:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">links and emphasis — the accent shifted until it cleared AA</td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span><span class=\"dot\" style=\"background:#0a0a0a\"></span>Button label on button fill</td>\n<td class=\"mono\">#0a0a0a on #00FFFF</td>\n<td class=\"mono\"><b>15.79:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">the primary CTA; the fill moved, not the brand colour</td></tr></tbody></table></div></section>\n\n<section><p class=\"eyebrow\">03</p><h2>Spacing</h2>\n<p class=\"note\">A 4px base grid. Use these steps and nothing between them; the value of a scale is what it forbids.</p>\n<div class=\"space\"><div class=\"space-row\"><span class=\"mono\">3xs · 4px</span><span class=\"space-bar\" style=\"width:4px\"></span></div><div class=\"space-row\"><span class=\"mono\">2xs · 8px</span><span class=\"space-bar\" style=\"width:8px\"></span></div><div class=\"space-row\"><span class=\"mono\">xs · 12px</span><span class=\"space-bar\" style=\"width:12px\"></span></div><div class=\"space-row\"><span class=\"mono\">sm · 16px</span><span class=\"space-bar\" style=\"width:16px\"></span></div><div class=\"space-row\"><span class=\"mono\">md · 24px</span><span class=\"space-bar\" style=\"width:24px\"></span></div><div class=\"space-row\"><span class=\"mono\">lg · 32px</span><span class=\"space-bar\" style=\"width:32px\"></span></div><div class=\"space-row\"><span class=\"mono\">xl · 48px</span><span class=\"space-bar\" style=\"width:48px\"></span></div><div class=\"space-row\"><span class=\"mono\">2xl · 64px</span><span class=\"space-bar\" style=\"width:64px\"></span></div><div class=\"space-row\"><span class=\"mono\">3xl · 96px</span><span class=\"space-bar\" style=\"width:96px\"></span></div></div></section>\n\n<section><p class=\"eyebrow\">04</p><h2>Radius &amp; hit area</h2>\n<div class=\"radii\">\n<div style=\"border-radius:14px\">--r · 14px</div>\n<div style=\"border-radius:22px\">--r-lg · 22px</div>\n<div style=\"border-radius:999px\">pill · 999px</div></div>\n<p class=\"note\">Every interactive element sets <code>min-height:var(--tap)</code> — 44px, the WCAG and iOS floor. Smaller controls are the single most common accessibility regression in a redesign.</p></section>\n\n<section><p class=\"eyebrow\">05</p><h2>Icons</h2>\n<p class=\"note\">7 glyphs on a 24&times;24 grid, 2px stroke, round caps and joins. Stroke weight is set once on the root element so no glyph can carry its own.</p>\n<div class=\"icons\"><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"shield icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2.5L19.5 5.5V11.5C19.5 16 16.3 19.6 12 21.5C7.7 19.6 4.5 16 4.5 11.5V5.5Z\"/></svg></div><figcaption class=\"mono\">shield</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"lock icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4.5\" y=\"10.5\" width=\"15\" height=\"10\" rx=\"2\"/><path d=\"M8 10.5V7a4 4 0 0 1 8 0v3.5\"/></svg></div><figcaption class=\"mono\">lock</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"gear icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3.4\"/><path d=\"M18 12H21M16.24 16.24L18.36 18.36M12 18V21M7.76 16.24L5.64 18.36M6 12H3M7.76 7.76L5.64 5.64M12 6V3M16.24 7.76L18.36 5.64\"/></svg></div><figcaption class=\"mono\">gear</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"globe icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18\"/><path d=\"M12 3c3.2 3.4 3.2 14.6 0 18c-3.2-3.4-3.2-14.6 0-18Z\"/></svg></div><figcaption class=\"mono\">globe</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"search icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"M15.3 15.3L20.5 20.5\"/></svg></div><figcaption class=\"mono\">search</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"bolt icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 2.5L5.5 13.5H11L10.5 21.5L18.5 10.5H13Z\"/></svg></div><figcaption class=\"mono\">bolt</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"check icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12.5L9.5 18L20 6.5\"/></svg></div><figcaption class=\"mono\">check</figcaption></figure></div></section>\n\n<section><p class=\"eyebrow\">06</p><h2>Usage</h2>\n<div class=\"cols\">\n<div class=\"rule do\"><h3>Do</h3><ul><li>use high-contrast monospace fonts for all code snippets and technical identifiers</li><li>apply the accent color only to interactive elements and critical data points</li><li>maintain a minimum clear space of 40px around the logo mark on dark backgrounds</li><li>use geometric, linear iconography with 2px stroke weight for all UI elements</li></ul></div>\n<div class=\"rule dont\"><h3>Don't</h3><ul><li>use gradients that obscure the clarity of the data visualization</li><li>place the logo on photographic backgrounds without a solid overlay</li><li>use decorative or handwritten typefaces for any body copy</li><li>apply the accent color to more than 10% of the total screen area</li></ul></div></div></section></div></body></html>",
        "brandAccent": "#00FFFF",
        "brandName": "Sovereign Compute",
        "styleGuideHtml": "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>Sovereign Compute — style guide</title>\n<style>:root{\n  --bg:#07080c;--surface:#101219;--elevated:#171a24;\n  --text:#f2f4f8;--muted:#9aa3b4;--border:rgba(255,255,255,.10);\n  --accent:#00FFFF;--accent-btn:#00FFFF;--accent-text:#00FFFF;--ink:#0a0a0a;--glow:rgba(0,255,255,0.20);--soft:rgba(0,255,255,0.13);\n  /* Foreground for anything painted on --soft. See the derivation above: a token\n     computed against --bg is not valid on a tinted surface. */\n  --soft-ink:#00FFFF;\n  /* Minimum comfortable hit area. Referenced by every interactive rule so a\n     tap target can never regress below the 44px WCAG/iOS floor. */\n  --tap:44px;\n  /* Translucent chrome derived from the direction's own background. Hardcoding\n     rgba(10,10,11,.62) here put dark text on a dark nav (1.08:1) the moment a\n     light direction shipped. */\n  --nav-bg:rgba(7,8,12,0.72);--hairline:rgba(255,255,255,.18);\n  --font:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  --font-display:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  --w-display:800;--w-body:300;\n  --track-display:-.045em;\n  --texture:radial-gradient(1000px 460px at 78% -12%, rgba(61,220,151,.16), transparent 62%),radial-gradient(700px 380px at 8% 8%, rgba(80,120,255,.12), transparent 60%);\n  --maxw:1200px;--r:14px;--r-lg:22px;--ease:cubic-bezier(.4,0,.2,1);\n  color-scheme:dark;\n}\n*{box-sizing:border-box}\nbody{margin:0;background:var(--bg);background-image:var(--texture);color:var(--text);\nfont-family:var(--font);font-weight:var(--w-body);font-size:16px;line-height:1.55;\n-webkit-font-smoothing:antialiased}\n.wrap{max-width:var(--maxw);margin:0 auto;padding:56px 24px 104px}\nh1,h2,h3{font-family:var(--font-display);font-weight:var(--w-display);\nletter-spacing:var(--track-display);line-height:1.1;margin:0}\nh1{font-size:clamp(2.2rem,5vw,3.4rem)}\nh2{font-size:1.5rem;margin:0 0 6px}\n.sub{color:var(--muted);margin:12px 0 0;max-width:62ch;font-size:1.05rem}\nsection{margin-top:56px;padding-top:28px;border-top:1px solid var(--border)}\n.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);\nfont-weight:600;margin:0 0 10px}\n.note{color:var(--muted);font-size:13px;margin:8px 0 0;max-width:70ch}\n.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}\ntable{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}\nth{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;\ncolor:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border)}\ntd{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}\ntr td:first-child{white-space:nowrap}\ncode,.mono{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}\n.chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px;\nborder:1px solid var(--border);border-radius:var(--r);background:var(--surface);font-size:14px}\n.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r);\nbackground:var(--elevated);font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap;\nborder-left:3px solid var(--muted)}\n.badge.pass{border-left-color:#2f9e5f}.badge.warn{border-left-color:#c98a11}.badge.fail{border-left-color:#d1453b}\n.dot{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);display:inline-block;\nvertical-align:middle;margin-right:10px;flex:0 0 auto}\n\n.spec{padding:20px 0;border-bottom:1px solid var(--border)}\n.spec-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;color:var(--muted);font-size:12px;margin-bottom:10px}\n.spec-meta b{color:var(--text);font-size:13px;letter-spacing:.06em;text-transform:uppercase}\n.spec-line{line-height:1.15;overflow-wrap:anywhere}\n.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:22px}\n.rule{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}\n.rule h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}\n.rule ul{margin:0;padding-left:1.1em}.rule li{margin:8px 0;font-size:14px}\n.rule.do{border-left:3px solid #2f9e5f}.rule.dont{border-left:3px solid #d1453b}\n.space{display:flex;flex-direction:column;gap:10px;margin-top:18px}\n.space-row{display:flex;align-items:center;gap:14px;font-size:13px}\n.space-bar{height:14px;background:var(--accent-text);border-radius:2px;flex:0 0 auto}\n.space-row .mono{color:var(--muted);min-width:92px}\n.radii{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}\n.radii div{width:110px;height:76px;background:var(--surface);border:1px solid var(--border);\ndisplay:grid;place-items:center;font-size:12px;color:var(--muted)}\n.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;margin-top:18px}\n.icon{margin:0;text-align:center}\n.glyph{display:grid;place-items:center;min-height:var(--tap);height:72px;background:var(--surface);\nborder:1px solid var(--border);border-radius:var(--r);color:var(--text)}\n.icon figcaption{margin-top:7px;font-size:12px;color:var(--muted)}\n.tone{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}</style></head><body><div class=\"wrap\"><p class=\"eyebrow\">Brand style guide</p>\n<h1>Sovereign Compute</h1>\n<p class=\"sub\">Write with the confidence of a system architect who guarantees data sovereignty, using precise technical language without unnecessary fluff.</p>\n<div class=\"tone\"><span class=\"chip\">authoritative</span><span class=\"chip\">precise</span><span class=\"chip\">secure</span><span class=\"chip\">modern</span><span class=\"chip\">minimal</span></div>\n\n<section><p class=\"eyebrow\">01</p><h2>Type scale</h2>\n<p class=\"note\">Modular scale, ratio 1.333, base 16px. Sizes below are rendered at their real value — measure them on screen and they will match the label. Display steps use ui-sans-serif; body uses ui-sans-serif.</p>\n<div class=\"spec\">\n<div class=\"spec-meta\"><b>Display</b><span class=\"mono\">67px / 4.188rem</span>\n<span class=\"mono\">800</span><span>hero headline, one per page</span></div>\n<div class=\"spec-line\" style=\"font-size:67px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Heading 1</b><span class=\"mono\">51px / 3.188rem</span>\n<span class=\"mono\">800</span><span>page title</span></div>\n<div class=\"spec-line\" style=\"font-size:51px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Heading 2</b><span class=\"mono\">38px / 2.375rem</span>\n<span class=\"mono\">800</span><span>section title</span></div>\n<div class=\"spec-line\" style=\"font-size:38px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Heading 3</b><span class=\"mono\">28px / 1.75rem</span>\n<span class=\"mono\">800</span><span>card and sub-section title</span></div>\n<div class=\"spec-line\" style=\"font-size:28px;font-weight:800;font-family:var(--font-display);letter-spacing:-.045em\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Lead</b><span class=\"mono\">21px / 1.313rem</span>\n<span class=\"mono\">300</span><span>standfirst under a headline</span></div>\n<div class=\"spec-line\" style=\"font-size:21px;font-weight:300;font-family:var(--font)\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Body</b><span class=\"mono\">16px / 1rem</span>\n<span class=\"mono\">300</span><span>running copy, the default</span></div>\n<div class=\"spec-line\" style=\"font-size:16px;font-weight:300;font-family:var(--font)\">Sovereign Compute</div></div><div class=\"spec\">\n<div class=\"spec-meta\"><b>Caption</b><span class=\"mono\">12px / 0.75rem</span>\n<span class=\"mono\">300</span><span>labels, captions, table meta</span></div>\n<div class=\"spec-line\" style=\"font-size:12px;font-weight:300;font-family:var(--font)\">Sovereign Compute</div></div></section>\n\n<section><p class=\"eyebrow\">02</p><h2>Colour</h2>\n<p class=\"note\">Each ratio is computed from the sRGB relative luminance of the pair. AA needs 4.5:1 for body text and 3:1 for text at 24px or 19px bold — \"LARGE ONLY\" means the pairing clears the second bar and not the first.</p>\n<div class=\"scroll\"><table><thead><tr>\n<th>Colour</th><th>Hex</th><th>Token</th><th>vs background</th><th>vs text</th></tr></thead><tbody><tr><td><span class=\"dot\" style=\"background:#07080c\"></span>Background</td>\n<td class=\"mono\">#07080C</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--bg</td>\n<td class=\"mono\">1.00:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">18.18:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#101219\"></span>Surface</td>\n<td class=\"mono\">#101219</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--surface</td>\n<td class=\"mono\">1.07:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">16.99:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#171a24\"></span>Elevated</td>\n<td class=\"mono\">#171A24</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--elevated</td>\n<td class=\"mono\">1.15:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">15.77:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#f2f4f8\"></span>Text</td>\n<td class=\"mono\">#F2F4F8</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--text</td>\n<td class=\"mono\">18.18:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.00:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#9aa3b4\"></span>Muted</td>\n<td class=\"mono\">#9AA3B4</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--muted</td>\n<td class=\"mono\">7.88:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">2.31:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent (brand)</td>\n<td class=\"mono\">#00FFFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent</td>\n<td class=\"mono\">15.96:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent (button fill)</td>\n<td class=\"mono\">#00FFFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-btn</td>\n<td class=\"mono\">15.96:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent (text)</td>\n<td class=\"mono\">#00FFFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-text</td>\n<td class=\"mono\">15.96:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#0A0F14\"></span>background depth</td>\n<td class=\"mono\">#0A0F14</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.04:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">17.48:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#1A2330\"></span>interface surfaces</td>\n<td class=\"mono\">#1A2330</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.26:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">14.37:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#E0E6ED\"></span>text hierarchy</td>\n<td class=\"mono\">#E0E6ED</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">15.93:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">1.14:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td></tr><tr><td><span class=\"dot\" style=\"background:#FF3D00\"></span>error states</td>\n<td class=\"mono\">#FF3D00</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">5.64:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">3.22:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td></tr></tbody></table></div>\n<h2 style=\"margin-top:34px;font-size:1.15rem\">Key pairings</h2>\n<div class=\"scroll\"><table><thead><tr><th>Pairing</th><th>Colours</th><th>Ratio</th><th>AA 4.5:1</th><th>Where it is used</th></tr></thead>\n<tbody><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#f2f4f8\"></span>Body text on background</td>\n<td class=\"mono\">#f2f4f8 on #07080c</td>\n<td class=\"mono\"><b>18.18:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">the default reading pair</td></tr><tr><td><span class=\"dot\" style=\"background:#101219\"></span><span class=\"dot\" style=\"background:#f2f4f8\"></span>Body text on surface</td>\n<td class=\"mono\">#f2f4f8 on #101219</td>\n<td class=\"mono\"><b>16.99:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">cards, panels, table rows</td></tr><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#9aa3b4\"></span>Muted text on background</td>\n<td class=\"mono\">#9aa3b4 on #07080c</td>\n<td class=\"mono\"><b>7.88:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">captions and metadata — usually the first to fail</td></tr><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#00FFFF\"></span>Brand accent on background</td>\n<td class=\"mono\">#00FFFF on #07080c</td>\n<td class=\"mono\"><b>15.96:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">decorative only; see the next row before setting text in it</td></tr><tr><td><span class=\"dot\" style=\"background:#07080c\"></span><span class=\"dot\" style=\"background:#00FFFF\"></span>Accent text on background</td>\n<td class=\"mono\">#00FFFF on #07080c</td>\n<td class=\"mono\"><b>15.96:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">links and emphasis — the accent shifted until it cleared AA</td></tr><tr><td><span class=\"dot\" style=\"background:#00FFFF\"></span><span class=\"dot\" style=\"background:#0a0a0a\"></span>Button label on button fill</td>\n<td class=\"mono\">#0a0a0a on #00FFFF</td>\n<td class=\"mono\"><b>15.79:1</b></td><td><span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td style=\"color:var(--muted);font-size:13px\">the primary CTA; the fill moved, not the brand colour</td></tr></tbody></table></div></section>\n\n<section><p class=\"eyebrow\">03</p><h2>Spacing</h2>\n<p class=\"note\">A 4px base grid. Use these steps and nothing between them; the value of a scale is what it forbids.</p>\n<div class=\"space\"><div class=\"space-row\"><span class=\"mono\">3xs · 4px</span><span class=\"space-bar\" style=\"width:4px\"></span></div><div class=\"space-row\"><span class=\"mono\">2xs · 8px</span><span class=\"space-bar\" style=\"width:8px\"></span></div><div class=\"space-row\"><span class=\"mono\">xs · 12px</span><span class=\"space-bar\" style=\"width:12px\"></span></div><div class=\"space-row\"><span class=\"mono\">sm · 16px</span><span class=\"space-bar\" style=\"width:16px\"></span></div><div class=\"space-row\"><span class=\"mono\">md · 24px</span><span class=\"space-bar\" style=\"width:24px\"></span></div><div class=\"space-row\"><span class=\"mono\">lg · 32px</span><span class=\"space-bar\" style=\"width:32px\"></span></div><div class=\"space-row\"><span class=\"mono\">xl · 48px</span><span class=\"space-bar\" style=\"width:48px\"></span></div><div class=\"space-row\"><span class=\"mono\">2xl · 64px</span><span class=\"space-bar\" style=\"width:64px\"></span></div><div class=\"space-row\"><span class=\"mono\">3xl · 96px</span><span class=\"space-bar\" style=\"width:96px\"></span></div></div></section>\n\n<section><p class=\"eyebrow\">04</p><h2>Radius &amp; hit area</h2>\n<div class=\"radii\">\n<div style=\"border-radius:14px\">--r · 14px</div>\n<div style=\"border-radius:22px\">--r-lg · 22px</div>\n<div style=\"border-radius:999px\">pill · 999px</div></div>\n<p class=\"note\">Every interactive element sets <code>min-height:var(--tap)</code> — 44px, the WCAG and iOS floor. Smaller controls are the single most common accessibility regression in a redesign.</p></section>\n\n<section><p class=\"eyebrow\">05</p><h2>Icons</h2>\n<p class=\"note\">7 glyphs on a 24&times;24 grid, 2px stroke, round caps and joins. Stroke weight is set once on the root element so no glyph can carry its own.</p>\n<div class=\"icons\"><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"shield icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2.5L19.5 5.5V11.5C19.5 16 16.3 19.6 12 21.5C7.7 19.6 4.5 16 4.5 11.5V5.5Z\"/></svg></div><figcaption class=\"mono\">shield</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"lock icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4.5\" y=\"10.5\" width=\"15\" height=\"10\" rx=\"2\"/><path d=\"M8 10.5V7a4 4 0 0 1 8 0v3.5\"/></svg></div><figcaption class=\"mono\">lock</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"gear icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3.4\"/><path d=\"M18 12H21M16.24 16.24L18.36 18.36M12 18V21M7.76 16.24L5.64 18.36M6 12H3M7.76 7.76L5.64 5.64M12 6V3M16.24 7.76L18.36 5.64\"/></svg></div><figcaption class=\"mono\">gear</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"globe icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18\"/><path d=\"M12 3c3.2 3.4 3.2 14.6 0 18c-3.2-3.4-3.2-14.6 0-18Z\"/></svg></div><figcaption class=\"mono\">globe</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"search icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"M15.3 15.3L20.5 20.5\"/></svg></div><figcaption class=\"mono\">search</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"bolt icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 2.5L5.5 13.5H11L10.5 21.5L18.5 10.5H13Z\"/></svg></div><figcaption class=\"mono\">bolt</figcaption></figure><figure class=\"icon\"><div class=\"glyph\"><svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" role=\"img\" aria-label=\"check icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12.5L9.5 18L20 6.5\"/></svg></div><figcaption class=\"mono\">check</figcaption></figure></div></section>\n\n<section><p class=\"eyebrow\">06</p><h2>Usage</h2>\n<div class=\"cols\">\n<div class=\"rule do\"><h3>Do</h3><ul><li>use high-contrast monospace fonts for all code snippets and technical identifiers</li><li>apply the accent color only to interactive elements and critical data points</li><li>maintain a minimum clear space of 40px around the logo mark on dark backgrounds</li><li>use geometric, linear iconography with 2px stroke weight for all UI elements</li></ul></div>\n<div class=\"rule dont\"><h3>Don't</h3><ul><li>use gradients that obscure the clarity of the data visualization</li><li>place the logo on photographic backgrounds without a solid overlay</li><li>use decorative or handwritten typefaces for any body copy</li><li>apply the accent color to more than 10% of the total screen area</li></ul></div></div></section></div></body></html>",
        "brandPalette": [
          {
            "role": "background",
            "hex": "#07080c"
          },
          {
            "role": "surface",
            "hex": "#101219"
          },
          {
            "role": "elevated",
            "hex": "#171a24"
          },
          {
            "role": "text",
            "hex": "#f2f4f8"
          },
          {
            "role": "muted",
            "hex": "#9aa3b4"
          },
          {
            "role": "accent",
            "hex": "#00FFFF"
          },
          {
            "role": "accent-btn",
            "hex": "#00FFFF"
          },
          {
            "role": "accent-text",
            "hex": "#00FFFF"
          },
          {
            "role": "ink",
            "hex": "#0a0a0a"
          },
          {
            "role": "background depth",
            "hex": "#0A0F14"
          },
          {
            "role": "interface surfaces",
            "hex": "#1A2330"
          },
          {
            "role": "text hierarchy",
            "hex": "#E0E6ED"
          },
          {
            "role": "error states",
            "hex": "#FF3D00"
          }
        ],
        "brandContrast": [
          {
            "pairing": "Body text on background",
            "fg": "#f2f4f8",
            "bg": "#07080c",
            "ratio": 18.18,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Body text on surface",
            "fg": "#f2f4f8",
            "bg": "#101219",
            "ratio": 16.99,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Muted text on background",
            "fg": "#9aa3b4",
            "bg": "#07080c",
            "ratio": 7.88,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Brand accent on background",
            "fg": "#00FFFF",
            "bg": "#07080c",
            "ratio": 15.96,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Accent text on background",
            "fg": "#00FFFF",
            "bg": "#07080c",
            "ratio": 15.96,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Button label on button fill",
            "fg": "#0a0a0a",
            "bg": "#00FFFF",
            "ratio": 15.79,
            "passesAA": true,
            "passesAALarge": true
          }
        ],
        "brandIcons": [
          {
            "name": "shield",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"shield icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2.5L19.5 5.5V11.5C19.5 16 16.3 19.6 12 21.5C7.7 19.6 4.5 16 4.5 11.5V5.5Z\"/></svg>"
          },
          {
            "name": "lock",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"lock icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4.5\" y=\"10.5\" width=\"15\" height=\"10\" rx=\"2\"/><path d=\"M8 10.5V7a4 4 0 0 1 8 0v3.5\"/></svg>"
          },
          {
            "name": "gear",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"gear icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3.4\"/><path d=\"M18 12H21M16.24 16.24L18.36 18.36M12 18V21M7.76 16.24L5.64 18.36M6 12H3M7.76 7.76L5.64 5.64M12 6V3M16.24 7.76L18.36 5.64\"/></svg>"
          },
          {
            "name": "globe",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"globe icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18\"/><path d=\"M12 3c3.2 3.4 3.2 14.6 0 18c-3.2-3.4-3.2-14.6 0-18Z\"/></svg>"
          },
          {
            "name": "search",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"search icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"M15.3 15.3L20.5 20.5\"/></svg>"
          },
          {
            "name": "bolt",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"bolt icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 2.5L5.5 13.5H11L10.5 21.5L18.5 10.5H13Z\"/></svg>"
          },
          {
            "name": "check",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"check icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12.5L9.5 18L20 6.5\"/></svg>"
          }
        ],
        "brandTypeScale": [
          {
            "name": "Display",
            "px": 67,
            "rem": "4.188rem",
            "weight": 800,
            "display": true,
            "use": "hero headline, one per page"
          },
          {
            "name": "Heading 1",
            "px": 51,
            "rem": "3.188rem",
            "weight": 800,
            "display": true,
            "use": "page title"
          },
          {
            "name": "Heading 2",
            "px": 38,
            "rem": "2.375rem",
            "weight": 800,
            "display": true,
            "use": "section title"
          },
          {
            "name": "Heading 3",
            "px": 28,
            "rem": "1.75rem",
            "weight": 800,
            "display": true,
            "use": "card and sub-section title"
          },
          {
            "name": "Lead",
            "px": 21,
            "rem": "1.313rem",
            "weight": 300,
            "display": false,
            "use": "standfirst under a headline"
          },
          {
            "name": "Body",
            "px": 16,
            "rem": "1rem",
            "weight": 300,
            "display": false,
            "use": "running copy, the default"
          },
          {
            "name": "Caption",
            "px": 12,
            "rem": "0.75rem",
            "weight": 300,
            "display": false,
            "use": "labels, captions, table meta"
          }
        ],
        "designDirection": "neon"
      },
      "finishedAt": 1788521423623,
      "llmCalls": [
        {
          "upstream": "http://127.0.0.1:8080",
          "modelRequested": "txt2txt",
          "temperature": 0.5,
          "maxTokens": 1100,
          "timeoutMs": 180000,
          "startedAt": 1788521399612,
          "finishedAt": 1788521423621,
          "ok": true,
          "promptChars": 1824,
          "responseChars": 1518,
          "modelServed": "/nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF"
        }
      ]
    }
  },
  "startedAt": 1788521382105,
  "fingerprint": {
    "ownAiUrl": "http://127.0.0.1:8080",
    "harnessHost": "127.0.0.1",
    "modelServed": "qwen-image",
    "nodeVersion": "v24.18.1",
    "capturedAt": 1788521382105
  },
  "finishedAt": 1788521423624,
  "scores": {
    "perStep": {
      "s1-acdhv": {
        "validity": 0,
        "fidelity": 0,
        "structure": 0,
        "depth": 0,
        "cleanliness": 0,
        "total": 0,
        "notes": [
          "unknown kind"
        ]
      },
      "s2-o40gh": {
        "validity": 0,
        "fidelity": 0,
        "structure": 0,
        "depth": 0,
        "cleanliness": 0,
        "total": 0,
        "notes": [
          "unknown kind"
        ]
      }
    },
    "total": 0,
    "perKind": {
      "project-dna": 0,
      "style-guide": 0
    },
    "axes": [
      "validity",
      "fidelity",
      "structure",
      "depth",
      "cleanliness"
    ]
  }
}