Qiki run · r-1789166894383-2sz6g

← Qiki · all runs · 📊 leaderboard

r-1789166894383-2sz6g

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 20 / 20

2026-09-11 22:48:14 UTC · total 47s · 2 steps

1 · Project Branding

Sovereign Compute

Your data, your rules, your infrastructure.

Theme

institutional-grade security meets modern minimalism, matte charcoal surfaces with electric blue accents and crisp white typography

Audience

CTOs, security engineers, and privacy-conscious enterprises

Vibe

secure, precise, minimalist, trustworthy, technical

Brand palette

#1A1A1A

#0055FF

#F5F5F5

#888888

style-guide · done · 28s

Brand Style Guide

10 / 10

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

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

1 LLM call on this step

 ok ·
28298 ms · prompt 1843c → resp 1587c ·
                        t=0.5 max=1100 ·

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

raw JSON

{
  "id": "r-1789166894383-2sz6g",
  "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": "institutional-grade security meets modern minimalism, matte charcoal surfaces with electric blue accents and crisp white typography",
    "brandColors": [
      "#1A1A1A",
      "#0055FF",
      "#F5F5F5",
      "#888888"
    ],
    "audience": "CTOs, security engineers, and privacy-conscious enterprises",
    "vibe": "secure, precise, minimalist, trustworthy, technical"
  },
  "steps": [
    {
      "id": "s1-ror9w",
      "kind": "project-dna",
      "params": {
        "brief": "Sovereign-compute startup. Positioning: Data sovereignty, privacy-first, decentralized infrastructure. Archetype: The Guardian / The Sage. Voice: Authoritative, precise, secure, minimalist. Palette direction: Deep blues, slate greys, stark white, accent of electric cyan or secure green. Do's: Clean lines, technical precision, trust. Don'ts: Flashy, consumer-glossy, cluttered.",
        "project": {
          "name": "Sovereign Compute",
          "tagline": "Your data, your rules, your infrastructure.",
          "theme": "institutional-grade security meets modern minimalism, matte charcoal surfaces with electric blue accents and crisp white typography",
          "brandColors": [
            "#1A1A1A",
            "#0055FF",
            "#F5F5F5",
            "#888888"
          ],
          "audience": "CTOs, security engineers, and privacy-conscious enterprises",
          "vibe": "secure, precise, minimalist, trustworthy, technical"
        },
        "heroPlanned": false
      },
      "label": "Brand DNA & Positioning"
    },
    {
      "id": "s2-mb7dz",
      "kind": "style-guide",
      "params": {
        "brief": "Create a comprehensive brand style guide for a sovereign-compute startup. Include: 1. Color Palette with exact Hex values and usage rules (primary, secondary, accent, neutral). 2. Typography Type Scale (headings, body, code) with font recommendations. 3. Logo Clear-Space and minimum size rules. 4. Do/Don't examples for visual application (e.g., 'Do: Use ample whitespace on dark backgrounds' vs 'Don't: Overlay logo on busy textures').",
        "variant": "style-guide",
        "project": {
          "name": "Sovereign Compute",
          "tagline": "Your data, your rules, your infrastructure.",
          "theme": "institutional-grade security meets modern minimalism, matte charcoal surfaces with electric blue accents and crisp white typography",
          "brandColors": [
            "#1A1A1A",
            "#0055FF",
            "#F5F5F5",
            "#888888"
          ],
          "audience": "CTOs, security engineers, and privacy-conscious enterprises",
          "vibe": "secure, precise, minimalist, trustworthy, technical"
        },
        "heroPlanned": false
      },
      "label": "Brand Style Guide"
    }
  ],
  "results": {
    "s1-ror9w": {
      "status": "done",
      "startedAt": 1789166894384,
      "attempt": 1,
      "output": {
        "html": "<!doctype html><html><head><meta charset=\"utf-8\"><title>Custodia — 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:#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  /* Display type scale. Multiplies every heading clamp, so \"giant typography\"\n     is one number rather than six font-size rules that can drift apart. */\n  --display-scale:1;\n  --maxw:1200px;--r:14px;--r-lg:22px;--ease:cubic-bezier(.4,0,.2,1);\n  /* Derived corners. Chips, badges, focus rings and avatars used to hard-code\n     999px/50%/6px, so \"no rounded corners anywhere\" left 14 radius rules\n     standing even once --r was 0. One switch, so flat means flat. */\n  --r-sm:6px;--r-pill:999px;--r-round:50%;\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>Custodia</h1>\n<p class=\"tag\">Decentralized infrastructure for data sovereignty.</p>\n<p class=\"pos\">FOR enterprises requiring strict data sovereignty, Custodia is the decentralized infrastructure provider that guarantees privacy-first control without centralized intermediaries.</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 compliance officers at regulated industries (finance, healthcare, government) who cannot tolerate data leakage or third-party access.</p></div>\n  <div><h3>Voice</h3><div class=\"axis\"><span>Formal</span><div class=\"track\"><i style=\"width:90%\"></i></div><b>0.9</b></div><div class=\"axis\"><span>Playful</span><div class=\"track\"><i style=\"width:0%\"></i></div><b>0.0</b></div><div class=\"axis\"><span>Technical</span><div class=\"track\"><i style=\"width:80%\"></i></div><b>0.8</b></div></div>\n  <div><h3>Do say</h3><ul><li>Your data remains under your cryptographic control.</li><li>Infrastructure designed for zero-trust environments.</li><li>Verifiable sovereignty through decentralized nodes.</li></ul></div>\n  <div><h3>Don't say</h3><ul><li>Unlock your data's full potential.</li><li>Seamless user experience.</li><li>Revolutionary privacy solutions.</li></ul></div>\n  <div><h3>Proof points</h3><ul><li>SOC 2 Type II certified infrastructure.</li><li>100% open-source core protocol.</li><li>No third-party data retention policy enforced by smart contracts.</li></ul></div>\n</div></body></html>",
        "name": "Custodia",
        "tagline": "Decentralized infrastructure for data sovereignty.",
        "positioning": "FOR enterprises requiring strict data sovereignty, Custodia is the decentralized infrastructure provider that guarantees privacy-first control without centralized intermediaries.",
        "archetype": "Sage",
        "voice": {
          "formal": 0.9,
          "playful": 0,
          "technical": 0.8
        },
        "audience": "CTOs and compliance officers at regulated industries (finance, healthcare, government) who cannot tolerate data leakage or third-party access.",
        "accent": "#00FFFF",
        "doSay": [
          "Your data remains under your cryptographic control.",
          "Infrastructure designed for zero-trust environments.",
          "Verifiable sovereignty through decentralized nodes."
        ],
        "dontSay": [
          "Unlock your data's full potential.",
          "Seamless user experience.",
          "Revolutionary privacy solutions."
        ],
        "proofPoints": [
          "SOC 2 Type II certified infrastructure.",
          "100% open-source core protocol.",
          "No third-party data retention policy enforced by smart contracts."
        ],
        "warnings": [
          "banned filler used: seamless, solutions, revolutionary, unlock your"
        ]
      },
      "produces": {
        "brandAccent": "#00FFFF",
        "brandName": "Custodia",
        "brandVoice": {
          "formal": 0.9,
          "playful": 0,
          "technical": 0.8
        },
        "siteHtml": "<!doctype html><html><head><meta charset=\"utf-8\"><title>Custodia — 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:#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  /* Display type scale. Multiplies every heading clamp, so \"giant typography\"\n     is one number rather than six font-size rules that can drift apart. */\n  --display-scale:1;\n  --maxw:1200px;--r:14px;--r-lg:22px;--ease:cubic-bezier(.4,0,.2,1);\n  /* Derived corners. Chips, badges, focus rings and avatars used to hard-code\n     999px/50%/6px, so \"no rounded corners anywhere\" left 14 radius rules\n     standing even once --r was 0. One switch, so flat means flat. */\n  --r-sm:6px;--r-pill:999px;--r-round:50%;\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>Custodia</h1>\n<p class=\"tag\">Decentralized infrastructure for data sovereignty.</p>\n<p class=\"pos\">FOR enterprises requiring strict data sovereignty, Custodia is the decentralized infrastructure provider that guarantees privacy-first control without centralized intermediaries.</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 compliance officers at regulated industries (finance, healthcare, government) who cannot tolerate data leakage or third-party access.</p></div>\n  <div><h3>Voice</h3><div class=\"axis\"><span>Formal</span><div class=\"track\"><i style=\"width:90%\"></i></div><b>0.9</b></div><div class=\"axis\"><span>Playful</span><div class=\"track\"><i style=\"width:0%\"></i></div><b>0.0</b></div><div class=\"axis\"><span>Technical</span><div class=\"track\"><i style=\"width:80%\"></i></div><b>0.8</b></div></div>\n  <div><h3>Do say</h3><ul><li>Your data remains under your cryptographic control.</li><li>Infrastructure designed for zero-trust environments.</li><li>Verifiable sovereignty through decentralized nodes.</li></ul></div>\n  <div><h3>Don't say</h3><ul><li>Unlock your data's full potential.</li><li>Seamless user experience.</li><li>Revolutionary privacy solutions.</li></ul></div>\n  <div><h3>Proof points</h3><ul><li>SOC 2 Type II certified infrastructure.</li><li>100% open-source core protocol.</li><li>No third-party data retention policy enforced by smart contracts.</li></ul></div>\n</div></body></html>"
      },
      "finishedAt": 1789166912666,
      "llmCalls": [
        {
          "upstream": "http://127.0.0.1:8080",
          "modelRequested": "txt2txt",
          "temperature": 0.6,
          "maxTokens": 1400,
          "timeoutMs": 180000,
          "startedAt": 1789166894385,
          "finishedAt": 1789166912665,
          "ok": true,
          "promptChars": 1535,
          "responseChars": 1085,
          "modelServed": "/nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF"
        }
      ]
    },
    "s2-mb7dz": {
      "status": "done",
      "startedAt": 1789166912667,
      "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:#0055FF;--accent-btn:#0055FF;--accent-text:#276fff;--ink:#ffffff;--glow:rgba(0,85,255,0.20);--soft:rgba(0,85,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:#387bff;\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  /* Display type scale. Multiplies every heading clamp, so \"giant typography\"\n     is one number rather than six font-size rules that can drift apart. */\n  --display-scale:1;\n  --maxw:1200px;--r:14px;--r-lg:22px;--ease:cubic-bezier(.4,0,.2,1);\n  /* Derived corners. Chips, badges, focus rings and avatars used to hard-code\n     999px/50%/6px, so \"no rounded corners anywhere\" left 14 radius rules\n     standing even once --r was 0. One switch, so flat means flat. */\n  --r-sm:6px;--r-pill:999px;--r-round:50%;\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\">You write with the cold precision of encryption algorithms, favoring short, declarative sentences that leave no room for ambiguity or marketing fluff.</p>\n<div class=\"tone\"><span class=\"chip\">authoritative</span><span class=\"chip\">precise</span><span class=\"chip\">impenetrable</span><span class=\"chip\">technical</span><span class=\"chip\">sober</span><span class=\"chip\">direct</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:#0055FF\"></span>Accent (brand)</td>\n<td class=\"mono\">#0055FF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent</td>\n<td class=\"mono\">3.57:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td>\n<td class=\"mono\">5.09:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#0055FF\"></span>Accent (button fill)</td>\n<td class=\"mono\">#0055FF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-btn</td>\n<td class=\"mono\">3.57:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td>\n<td class=\"mono\">5.09:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#276fff\"></span>Accent (text)</td>\n<td class=\"mono\">#276FFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-text</td>\n<td class=\"mono\">4.58:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">3.97:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td></tr><tr><td><span class=\"dot\" style=\"background:#0A0A0A\"></span>background void</td>\n<td class=\"mono\">#0A0A0A</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.01:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">17.98:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#141414\"></span>interface surfaces</td>\n<td class=\"mono\">#141414</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.09:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">16.73:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#333333\"></span>disabled states</td>\n<td class=\"mono\">#333333</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.58:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">11.47:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#FF3333\"></span>critical alerts</td>\n<td class=\"mono\">#FF3333</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">5.50:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">3.30: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:#0055FF\"></span>Brand accent on background</td>\n<td class=\"mono\">#0055FF on #07080c</td>\n<td class=\"mono\"><b>3.57:1</b></td><td><span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</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:#276fff\"></span>Accent text on background</td>\n<td class=\"mono\">#276fff on #07080c</td>\n<td class=\"mono\"><b>4.58: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:#0055FF\"></span><span class=\"dot\" style=\"background:#ffffff\"></span>Button label on button fill</td>\n<td class=\"mono\">#ffffff on #0055FF</td>\n<td class=\"mono\"><b>5.61: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\">6 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=\"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=\"user 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=\"8\" r=\"4\"/><path d=\"M4.5 20.5a7.5 7.5 0 0 1 15 0\"/></svg></div><figcaption class=\"mono\">user</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></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>set all technical headings in uppercase with 3px letter-spacing to mimic terminal output</li><li>use monospaced fonts for all code snippets and system status indicators</li><li>maintain a minimum 48px padding around the logo mark on dark backgrounds</li><li>use the accent color only for active states, links, and critical data points</li></ul></div>\n<div class=\"rule dont\"><h3>Don't</h3><ul><li>use gradients or drop shadows on any UI elements</li><li>place the logo over photographic textures or busy backgrounds</li><li>use serif fonts for body copy or technical documentation</li><li>apply the accent color to large background areas</li></ul></div></div></section></div></body></html>",
        "variant": "style-guide",
        "name": "Sovereign Compute",
        "direction": "neon",
        "accent": "#0055FF",
        "tone": [
          "authoritative",
          "precise",
          "impenetrable",
          "technical",
          "sober",
          "direct"
        ],
        "voice": "You write with the cold precision of encryption algorithms, favoring short, declarative sentences that leave no room for ambiguity or marketing fluff.",
        "usage": {
          "do": [
            "set all technical headings in uppercase with 3px letter-spacing to mimic terminal output",
            "use monospaced fonts for all code snippets and system status indicators",
            "maintain a minimum 48px padding around the logo mark on dark backgrounds",
            "use the accent color only for active states, links, and critical data points"
          ],
          "dont": [
            "use gradients or drop shadows on any UI elements",
            "place the logo over photographic textures or busy backgrounds",
            "use serif fonts for body copy or technical documentation",
            "apply the accent color to large background areas"
          ]
        },
        "palette": [
          {
            "role": "background",
            "hex": "#07080c"
          },
          {
            "role": "surface",
            "hex": "#101219"
          },
          {
            "role": "elevated",
            "hex": "#171a24"
          },
          {
            "role": "text",
            "hex": "#f2f4f8"
          },
          {
            "role": "muted",
            "hex": "#9aa3b4"
          },
          {
            "role": "accent",
            "hex": "#0055FF"
          },
          {
            "role": "accent-btn",
            "hex": "#0055FF"
          },
          {
            "role": "accent-text",
            "hex": "#276fff"
          },
          {
            "role": "ink",
            "hex": "#ffffff"
          },
          {
            "role": "background void",
            "hex": "#0A0A0A"
          },
          {
            "role": "interface surfaces",
            "hex": "#141414"
          },
          {
            "role": "disabled states",
            "hex": "#333333"
          },
          {
            "role": "critical alerts",
            "hex": "#FF3333"
          }
        ],
        "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": "#0055FF",
            "bg": "#07080c",
            "ratio": 3.57,
            "passesAA": false,
            "passesAALarge": true
          },
          {
            "pairing": "Accent text on background",
            "fg": "#276fff",
            "bg": "#07080c",
            "ratio": 4.58,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Button label on button fill",
            "fg": "#ffffff",
            "bg": "#0055FF",
            "ratio": 5.61,
            "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": "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": "user",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"user 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=\"8\" r=\"4\"/><path d=\"M4.5 20.5a7.5 7.5 0 0 1 15 0\"/></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>"
          }
        ],
        "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": [
          "brand accent #0055FF measures 3.57:1 on the background — decorative only; --accent-text (#276fff, 4.58:1) is used for any text"
        ]
      },
      "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:#0055FF;--accent-btn:#0055FF;--accent-text:#276fff;--ink:#ffffff;--glow:rgba(0,85,255,0.20);--soft:rgba(0,85,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:#387bff;\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  /* Display type scale. Multiplies every heading clamp, so \"giant typography\"\n     is one number rather than six font-size rules that can drift apart. */\n  --display-scale:1;\n  --maxw:1200px;--r:14px;--r-lg:22px;--ease:cubic-bezier(.4,0,.2,1);\n  /* Derived corners. Chips, badges, focus rings and avatars used to hard-code\n     999px/50%/6px, so \"no rounded corners anywhere\" left 14 radius rules\n     standing even once --r was 0. One switch, so flat means flat. */\n  --r-sm:6px;--r-pill:999px;--r-round:50%;\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\">You write with the cold precision of encryption algorithms, favoring short, declarative sentences that leave no room for ambiguity or marketing fluff.</p>\n<div class=\"tone\"><span class=\"chip\">authoritative</span><span class=\"chip\">precise</span><span class=\"chip\">impenetrable</span><span class=\"chip\">technical</span><span class=\"chip\">sober</span><span class=\"chip\">direct</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:#0055FF\"></span>Accent (brand)</td>\n<td class=\"mono\">#0055FF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent</td>\n<td class=\"mono\">3.57:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td>\n<td class=\"mono\">5.09:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#0055FF\"></span>Accent (button fill)</td>\n<td class=\"mono\">#0055FF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-btn</td>\n<td class=\"mono\">3.57:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td>\n<td class=\"mono\">5.09:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#276fff\"></span>Accent (text)</td>\n<td class=\"mono\">#276FFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-text</td>\n<td class=\"mono\">4.58:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">3.97:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td></tr><tr><td><span class=\"dot\" style=\"background:#0A0A0A\"></span>background void</td>\n<td class=\"mono\">#0A0A0A</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.01:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">17.98:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#141414\"></span>interface surfaces</td>\n<td class=\"mono\">#141414</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.09:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">16.73:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#333333\"></span>disabled states</td>\n<td class=\"mono\">#333333</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.58:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">11.47:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#FF3333\"></span>critical alerts</td>\n<td class=\"mono\">#FF3333</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">5.50:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">3.30: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:#0055FF\"></span>Brand accent on background</td>\n<td class=\"mono\">#0055FF on #07080c</td>\n<td class=\"mono\"><b>3.57:1</b></td><td><span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</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:#276fff\"></span>Accent text on background</td>\n<td class=\"mono\">#276fff on #07080c</td>\n<td class=\"mono\"><b>4.58: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:#0055FF\"></span><span class=\"dot\" style=\"background:#ffffff\"></span>Button label on button fill</td>\n<td class=\"mono\">#ffffff on #0055FF</td>\n<td class=\"mono\"><b>5.61: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\">6 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=\"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=\"user 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=\"8\" r=\"4\"/><path d=\"M4.5 20.5a7.5 7.5 0 0 1 15 0\"/></svg></div><figcaption class=\"mono\">user</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></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>set all technical headings in uppercase with 3px letter-spacing to mimic terminal output</li><li>use monospaced fonts for all code snippets and system status indicators</li><li>maintain a minimum 48px padding around the logo mark on dark backgrounds</li><li>use the accent color only for active states, links, and critical data points</li></ul></div>\n<div class=\"rule dont\"><h3>Don't</h3><ul><li>use gradients or drop shadows on any UI elements</li><li>place the logo over photographic textures or busy backgrounds</li><li>use serif fonts for body copy or technical documentation</li><li>apply the accent color to large background areas</li></ul></div></div></section></div></body></html>",
        "brandAccent": "#0055FF",
        "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:#0055FF;--accent-btn:#0055FF;--accent-text:#276fff;--ink:#ffffff;--glow:rgba(0,85,255,0.20);--soft:rgba(0,85,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:#387bff;\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  /* Display type scale. Multiplies every heading clamp, so \"giant typography\"\n     is one number rather than six font-size rules that can drift apart. */\n  --display-scale:1;\n  --maxw:1200px;--r:14px;--r-lg:22px;--ease:cubic-bezier(.4,0,.2,1);\n  /* Derived corners. Chips, badges, focus rings and avatars used to hard-code\n     999px/50%/6px, so \"no rounded corners anywhere\" left 14 radius rules\n     standing even once --r was 0. One switch, so flat means flat. */\n  --r-sm:6px;--r-pill:999px;--r-round:50%;\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\">You write with the cold precision of encryption algorithms, favoring short, declarative sentences that leave no room for ambiguity or marketing fluff.</p>\n<div class=\"tone\"><span class=\"chip\">authoritative</span><span class=\"chip\">precise</span><span class=\"chip\">impenetrable</span><span class=\"chip\">technical</span><span class=\"chip\">sober</span><span class=\"chip\">direct</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:#0055FF\"></span>Accent (brand)</td>\n<td class=\"mono\">#0055FF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent</td>\n<td class=\"mono\">3.57:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td>\n<td class=\"mono\">5.09:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#0055FF\"></span>Accent (button fill)</td>\n<td class=\"mono\">#0055FF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-btn</td>\n<td class=\"mono\">3.57:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td>\n<td class=\"mono\">5.09:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#276fff\"></span>Accent (text)</td>\n<td class=\"mono\">#276FFF</td>\n<td class=\"mono\" style=\"color:var(--muted)\">--accent-text</td>\n<td class=\"mono\">4.58:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">3.97:1 <span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</span></td></tr><tr><td><span class=\"dot\" style=\"background:#0A0A0A\"></span>background void</td>\n<td class=\"mono\">#0A0A0A</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.01:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">17.98:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#141414\"></span>interface surfaces</td>\n<td class=\"mono\">#141414</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.09:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">16.73:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#333333\"></span>disabled states</td>\n<td class=\"mono\">#333333</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">1.58:1 <span class=\"badge fail\"><b aria-hidden=\"true\">&#10007;</b> FAIL</span></td>\n<td class=\"mono\">11.47:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td></tr><tr><td><span class=\"dot\" style=\"background:#FF3333\"></span>critical alerts</td>\n<td class=\"mono\">#FF3333</td>\n<td class=\"mono\" style=\"color:var(--muted)\">—</td>\n<td class=\"mono\">5.50:1 <span class=\"badge pass\"><b aria-hidden=\"true\">&#10003;</b> PASS</span></td>\n<td class=\"mono\">3.30: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:#0055FF\"></span>Brand accent on background</td>\n<td class=\"mono\">#0055FF on #07080c</td>\n<td class=\"mono\"><b>3.57:1</b></td><td><span class=\"badge warn\"><b aria-hidden=\"true\">&#9650;</b> LARGE ONLY</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:#276fff\"></span>Accent text on background</td>\n<td class=\"mono\">#276fff on #07080c</td>\n<td class=\"mono\"><b>4.58: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:#0055FF\"></span><span class=\"dot\" style=\"background:#ffffff\"></span>Button label on button fill</td>\n<td class=\"mono\">#ffffff on #0055FF</td>\n<td class=\"mono\"><b>5.61: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\">6 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=\"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=\"user 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=\"8\" r=\"4\"/><path d=\"M4.5 20.5a7.5 7.5 0 0 1 15 0\"/></svg></div><figcaption class=\"mono\">user</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></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>set all technical headings in uppercase with 3px letter-spacing to mimic terminal output</li><li>use monospaced fonts for all code snippets and system status indicators</li><li>maintain a minimum 48px padding around the logo mark on dark backgrounds</li><li>use the accent color only for active states, links, and critical data points</li></ul></div>\n<div class=\"rule dont\"><h3>Don't</h3><ul><li>use gradients or drop shadows on any UI elements</li><li>place the logo over photographic textures or busy backgrounds</li><li>use serif fonts for body copy or technical documentation</li><li>apply the accent color to large background areas</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": "#0055FF"
          },
          {
            "role": "accent-btn",
            "hex": "#0055FF"
          },
          {
            "role": "accent-text",
            "hex": "#276fff"
          },
          {
            "role": "ink",
            "hex": "#ffffff"
          },
          {
            "role": "background void",
            "hex": "#0A0A0A"
          },
          {
            "role": "interface surfaces",
            "hex": "#141414"
          },
          {
            "role": "disabled states",
            "hex": "#333333"
          },
          {
            "role": "critical alerts",
            "hex": "#FF3333"
          }
        ],
        "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": "#0055FF",
            "bg": "#07080c",
            "ratio": 3.57,
            "passesAA": false,
            "passesAALarge": true
          },
          {
            "pairing": "Accent text on background",
            "fg": "#276fff",
            "bg": "#07080c",
            "ratio": 4.58,
            "passesAA": true,
            "passesAALarge": true
          },
          {
            "pairing": "Button label on button fill",
            "fg": "#ffffff",
            "bg": "#0055FF",
            "ratio": 5.61,
            "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": "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": "user",
            "svg": "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-label=\"user 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=\"8\" r=\"4\"/><path d=\"M4.5 20.5a7.5 7.5 0 0 1 15 0\"/></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>"
          }
        ],
        "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": 1789166940967,
      "llmCalls": [
        {
          "upstream": "http://127.0.0.1:8080",
          "modelRequested": "txt2txt",
          "temperature": 0.5,
          "maxTokens": 1100,
          "timeoutMs": 180000,
          "startedAt": 1789166912667,
          "finishedAt": 1789166940965,
          "ok": true,
          "promptChars": 1843,
          "responseChars": 1587,
          "modelServed": "/nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF"
        }
      ]
    }
  },
  "startedAt": 1789166894383,
  "fingerprint": {
    "ownAiUrl": "http://127.0.0.1:8080",
    "harnessHost": "127.0.0.1",
    "modelServed": "qwen-image",
    "nodeVersion": "v24.18.1",
    "capturedAt": 1789166894383
  },
  "finishedAt": 1789166940968,
  "scores": {
    "perStep": {
      "s1-ror9w": {
        "validity": 2,
        "fidelity": 2,
        "structure": 2,
        "depth": 2,
        "cleanliness": 2,
        "total": 10,
        "notes": [],
        "graded": true
      },
      "s2-mb7dz": {
        "validity": 2,
        "fidelity": 2,
        "structure": 2,
        "depth": 2,
        "cleanliness": 2,
        "total": 10,
        "notes": [],
        "graded": true
      }
    },
    "total": 20,
    "perKind": {
      "project-dna": 10,
      "style-guide": 10
    },
    "failedSteps": {},
    "axes": [
      "validity",
      "fidelity",
      "structure",
      "depth",
      "cleanliness"
    ]
  }
}