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 — Buyable Agent
Agents you can install without a conversation. .card--buy sits between .card--agent (illustrative, unpriced) and .card--package (priced, but needs a conversation). .buy-row puts the priced spotlight beside the free ones, which use .card--try. Both reuse .agent__icon and .ia2. Side by side above 900px, stacked below.
Hierarchy is deliberate. The spotlight keeps the orange left edge, the larger price and the solid .ia2--dark; .card--try drops the edge and steps down to .ia2--outline. Adding an orange edge to a .card--try flattens the two and defeats the row.
Self-service
An agent that keeps a Webflow site up to date. It checks the site every week, fixes what it safely can on a private copy, and waits for your approval before anything goes live. Two change requests a month, by email.
Free
Build the messaging foundation your whole company can reuse. It guides you through company context, customer problems, competitive alternatives, personas, value, positioning, and proof: one focused question at a time.
Set data-label and data-sublabel. On mount, install-agent.js rewrites .ia2-main / .ia2-sub from those attributes, falling back to “Install agent” — so custom copy written only into the markup gets overwritten. The icon uses currentColor and is tinted by the component, not a hard-coded hex.
.buy-row is a 1.5fr / 1fr grid. A second .card--try needs the columns widening (1.5fr 1fr 1fr) or it will squeeze the spotlight; past three, move the free agents to their own .cards row below.
The label is color: inherit, so it takes the surrounding text colour and works on both surfaces unchanged. Orange text at 10px would sit near 2.9:1 against this tint and fail contrast, so the brand lives in the fill and the ring instead.
10 — Testimonial
Deliberately plain. .quote adds only an attribution block to .card--outline, so it inherits the surface, border and hover already in the system. No avatars, no logos, no carousel: the quote is the content.
“We had a tight timeline and Eldur Studio helped us find the best solution and launch on time, without sacrificing results.”
“Eldur Studio helped us stretch Webflow’s limits and has proven to be a fast and trustworthy partner. The quality of the work has been consistently great, the team is collaborative and has often helped us take our idea to the next level.”
Note the two quotes above are different lengths but the names still line up. .quote__by uses margin-top: auto, so the attribution is pinned to the bottom of the card whatever the quote does. Use <figure> / <figcaption>, not a bare div: it is the correct pairing for a quote and its source, and screen readers announce the attribution with the quote.
11 — Packages
Package cards live on black. The featured tier swaps to an orange border over a warm tint.
12 — Chips · Highlight
13 — Timeline
14 — 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.