Brand · reference
Chain reaction.A living styleguide.
Tokens are code. Every sample below renders the class from globals.css, so this page cannot drift from the product. Not indexed.
Color
Void, paper, one accent.
Restraint is the premium signal. Lime is a decision, not a decoration.
- #0A0A0B
Void
Page ground. The void everything happens in.
- #121214
Ink
Panels, feeds, chart backgrounds.
- #18181B
Ink 2
Raised panels inside ink.
- #D4FF3F
Efekt Lime
The one accent. Primary CTA, frozen winners, focus rings. Never more than 10% of a screen.
- #9FC32A
Lime dim
Lime on light ground, pressed states.
- #F4F2EC
Paper
Body text and headlines on void. Warm, not white.
- #8A8A93
Gray
Secondary text, eyebrows, axis labels.
- #2A2A2E
Gray dim
Borders on inputs, progress tracks.
- rgba(255,255,255,.08)
Line
Hairlines between sections and rows.
- #3FDC97
OK
Proven, qualified, money moved to a winner.
- #FFB020
Warn
Attention: expensive, refresh, approval waiting.
- #FF5C5C
Kill
Paused by the lifecycle, antipatterns.
Type
Space Grotesk speaks.Inter works.
Display for statements, Inter for everything you read twice. Numbers are always tabular.
.h1
Space Grotesk 700 · clamp(2.4rem, 7vw, 5.2rem) · lh 1.02 · ls −0.035em
You set the budget.
.h2
Space Grotesk 700 · clamp(1.9rem, 4.2vw, 3.4rem) · lh 1.05 · ls −0.03em
Weak ads die young.
.h3
Space Grotesk 600 · clamp(1.25rem, 2vw, 1.6rem) · lh 1.15
Winners are protected.
.sub
Inter 400 · clamp(1rem, 2vw, 1.25rem) · lh 1.55 · gray · max 40rem
Efekto writes, produces, publishes and prunes your Meta ads - then learns from which leads become customers.
.body
Inter 400 · 0.95rem · lh 1.6
Paused #1 C - $72 lifetime without a lead over 16 days (1.5× benchmark).
.eyebrow
Space Grotesk · 0.78rem · uppercase · ls 0.22em · gray
Autonomy & trust
.mono / tnum
ui-monospace · tabular-nums on every number in the cockpit
06:14 · $9.97 · 0.81 · 3 / 4
Logo · options
Four takes on the “o”.We picked the pebble.
The letters never change. Only the mark does. The pebble is crisp at 16 px, reads as a drop hitting water, and never looks like a loading spinner.
- efektefektefekt
Ripple (retired 8.09)
Animated wave. Lively in the hero, but a static frame reads as a target.
- efektefektefekt
Pebble - chosen
Solid lime drop, one thin ring, one quiet pulse on the marketing site. Static in the app, favicon, print.
- efektefektefekt
Frozen ripple
Two rings, the lime one offset. More ‘designed’, slightly busier at small sizes.
- efektefektefekt
Serif italic
Editorial voice for the marketing site only; the app would keep the grotesk.
Wordmark
efekto, lowercase.The “o” is the pebble.
One quiet pulse on the marketing site, static in the app. The pebble alone is the favicon. Never letterspace it, never recolor the letters.
Components
Buttons, badges, cards.
Three button weights, five badge tones, one card. If you need a fourth button, you need a different page.
Buttons
Primary is lime and magnetic. Ghost is a hairline. Quiet is text with an underline on hover. One primary per viewport.
Badges
Tones map to product states, not moods: lime = frozen/on, ok = proven/qualified, warn = refresh/expensive, kill = paused/antipattern, gray = held/paused-by-you.
Card · glow
Cards are 14px radius, hairline border, 2.5% white fill. Glow only for the highlighted plan or a frozen winner.
Motion
Springs, not bounces.Zero confetti, zero sound.
Every movement shows cause and effect: impulse, cascade, result. If it does not explain something, it does not move.
| What | Duration | Easing & note |
|---|---|---|
| UI transitions | 120–250 ms | Hover, toggles, tabs. `--ease-spring` cubic-bezier(0.2, 0.6, 0.3, 1). |
| Section reveal | 800 ms | y 28px → 0, blur 6px → 0. `--ease-out-expo` cubic-bezier(0.16, 1, 0.3, 1). |
| Headline lines | 900 ms · +80 ms per line | Masked, from 110% below with a 2° rotate. SplitLines. |
| Counters | 1.6–1.8 s | Out-expo, once, on entering the viewport. |
| Chart draw | 1.8 s | pathLength 0 → 1; annotations follow the pen. |
| Ripple | 2.8 s loop | Only in the wordmark. Static in the app. |
| Magnetic CTA | spring 220 / 18 | Strength 0.35. Primary buttons only. |
| Reduced motion | full static fallback | Every animation collapses to its end state. No exceptions. |