01 — Brand
A hot orange-on-black system for a B2B agency that installs AI agents. Confident, warm, technical. The wordmark is set in Kamura; everything else is Basier Circle. Orange (--orange) is the single accent — used sparingly against deep black and clean light-gray surfaces.
02 — Color
Every color is a CSS variable in :root. Reach for the token, never a raw hex. The flame gradient is reserved for the loudest moments (hero install, key CTAs, the timeline spine).
03 — Typography
Two families: Kamura (serif display — wordmark only) and Basier Circle (everything else, weights 400–700). Headlines run tight (-0.03em); body is a comfortable 1.65.
04 — Spacing & Radii
Generous vertical rhythm — sections breathe at 96px (64px compact). Three corner radii cover everything; the pill is now reserved for tags only.
| Token | Value | Use |
|---|---|---|
--radius | 12px | Buttons, inputs, install CTA, callouts |
--radius-lg | 20px | Cards, panels, modals |
--max-w | 1160px | Page container |
.section | 96px | Vertical section padding (64px compact) |
05 — Buttons
The pill is retired. Buttons are now a confident 12px rounded rectangle — bigger (16/30 padding, 17px → wait 16px/700), they lift 2px on hover with a flame glow, and a trailing icon nudges right. New .btn--gradient for flame moments.
| Class | Use |
|---|---|
.btn--primary | Main action — orange fill, flame glow on hover |
.btn--gradient | Loud moments — flame orange→red (new) |
.btn--ghost | Secondary on dark (e.g. “View packages”) |
.btn--outline-white | Tertiary on dark |
.btn--white | On orange / CTA blocks |
.btn--nav | Compact nav CTA (keeps small size) |
Wrap a trailing icon in <span class="btn__ico"> so it nudges on hover.
06 — Install Agent
The hero call-to-action. A bot with personality plus a built-in install animation: the flame gradient sweeps left→right, a percentage counts up, then it settles into “Agent installed ✓” and the bot bounces. Click a button below to play it.
Direction B (default .ia2--dark): black button, flame gradient fill.
idle · installing (frozen mid-sweep) · done
| State | Main | Sub |
|---|---|---|
| idle | Install agent | Self-service guided setup |
| installing | Installing… | Provisioning your agent |
| done | Agent installed | Setup complete |
Real flow: hero = Stripe link → checkout → on success route to the setup page, which renders the controlled button and calls setState('installing') then setState('done'). A plain <button data-install-agent> with no data-href/data-controlled self-demos on click. Honors prefers-reduced-motion.
07 — Cards
Calm at rest. White (or --dark on black sections) with a hairline border and 20px radius. On hover the border turns orange; link cards now also lift.
Outline card. The default content surface — hairline border, white fill, generous 32px padding.
For black sections. Muted body, yellow emphasis when needed.
08 — Agent Cards
The icon tile now does the agent-bot wiggle on hover and the card lifts — the one sanctioned bit of personality, carried over from the Install Agent bot. Hover a card.
Orange border + soft orange shadow + 3px lift. The icon wiggle plays only on a real pointer hover.
09 — Packages
Package cards live on black. The featured tier swaps to an orange border over a warm tint.
10 — Chips · Highlight
11 — Timeline
12 — FAQ
Most single agents are installed within 2–3 weeks, including a tuning window against your real data.
Yes — agents are installed into your tools and workflows, not a separate dashboard you have to babysit.