The AI Brain design system
Letterhead tokens, ten components, no framework. Refine a component here and every page inherits it. This page never gets linked publicly.
Tokens — colour
Type: Cormorant Garamond 300/400 for display, Inter 300/400/500 for body. Square edges everywhere — the letterhead has no rounded corners.
Nav lockup
<nav class="nav"><a class="lockup" href="/"><b>Cluse & Co</b>  /  <b>AI Brain</b></a></nav>
Hero
Free · built on Claude Code
AI that remembers how you work.
A worked example of the hero. Kicker label, display headline, one lead paragraph, one button.
Primary action
<header class="hero">
<span class="label hero-kicker">Kicker</span>
<h1>Headline.</h1>
<p class="lead">Lead paragraph.</p>
<a class="btn" href="#">Primary action</a>
</header>
<!-- dark band variant: class="hero hero--ink" -->
Email-gate form
Check your inbox.
Success state — shown after submit, replaces the form.
<form class="gate" id="f"> …inputs + honeypot… </form>
<div class="gate-ok" id="ok"> …success… </div>
<!-- page JS swaps display on /api/capture success -->
Step card
03
Sign in to Claude
Body copy for the step, with a link out to an official source.
You'll know it worked when the terminal shows Claude's welcome message.
<article class="step">
<span class="step-no">03</span>
<h3>Step title</h3>
<p>Body.</p>
<p class="check"><b>You'll know it worked when</b> …</p>
</article>
Tab toggle
Shown on Mac.
Shown on Windows.
Shown on the VS Code path.
Shown on the Terminal-only path.
<div class="tabs" data-switch="os">
<button data-value="mac">Mac</button><button data-value="win">Windows</button>
</div>
<!-- content marked .only-mac / .only-win / .only-vscode / .only-terminal;
scope = closest [data-switch-scope] or body -->
Copy block
claude
<div class="copyblock"><code>claude</code><button type="button">Copy</button></div>
Callout
Info. Something useful to know before the next step.
If something doesn't match: the recovery path goes here.
<div class="callout"><p>…</p></div>
<div class="callout callout--warn"><p>…</p></div>
FAQ accordion
Does this cost anything?
The pack is free. You need your own Claude subscription — Pro or higher.
Second question
Second answer.
<div class="faq">
<details><summary>Q</summary><div class="faq-body">A</div></details>
</div>
CTA band
Ready when you are.
One line of support copy.
Action
<div class="cta-band"><div class="wrap">
<h2>Headline</h2><p>Support line.</p><a class="btn" href="#">Action</a>
</div></div>
Footer
<footer class="footer">
<p class="lockup"><b>Cluse & Co</b> / <b>AI Brain</b></p>
<p>NOTICE paragraph…</p><p>Privacy line…</p>
</footer>