CRO Audits · Brand guide
Calm by default. Green when it counts.
The identity is built on one idea: the O is a chat bubble and a growth chart. Everything else stays quiet so scores, wins and the next fix stand out.
01 · Logo
The O is a chat bubble and a growth chart.
An audit is advice, a conversation, and the goal is growth. The mark puts both in one shape. Use the full lockup wherever there’s room; the mark alone works for app icons, favicons and tight spaces.
Do and don’t
✓Ink on off-white, or white on ink.
✕Don’t stretch or squash.
✕Don’t recolor the bars.
✕No busy backgrounds or rotation.
Logo animation
Hover or click the logo to play its entrance: the letters build, then the chart bars spring into place.
02 · Color
One loud green. Everything else stays calm.
Green means a win: a score, an uplift, the next action. Use it sparingly so it keeps that meaning. Ink and warm off-whites carry the rest. Click a swatch to copy its hex.
Green ramp
50–100 for soft fills and “High impact” tags · 400 on dark backgrounds · 600 for accents on light · 800 for green text on light (passes AA).
Balance
Roughly how a screen should feel. If green is more than a sliver, something has lost its meaning.
Signals
03 · Typography
Kanit everywhere. A handwritten note, rarely.
Kanit is geometric and friendly, with a slightly technical edge, right for a tool that’s precise but approachable. One family, five weights, no exceptions in product. Caveat is a single accent for the marketing site: a scribbled aside, never a heading.
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 %+$→
Scale
- Display
48–76px · 600Find what’s costing sales
- 3XL
32–44px · 600Your conversion score
- 2XL
24–28px · 500Top opportunities
- LG
18px · 400Show reviews beside the price.
- MD
16px · 300Shoppers look for proof at the moment they decide.
- XS
13px · 500Trust · Low effort
Accent
Get actionable insights in minutes
Caveat 500 · one line, one per page, green-400 on dark04 · Graphics
Soft shapes, real product, one signature: the ring.
The score ring is the brand’s most recognisable graphic after the logo. Pair it with the real product UI rather than illustration. Corners are generous, shadows are low and soft, and icons are a 2px rounded line.
Show reviews beside the price
Trust · Low effort · up to +9%
05 · Motion
Quick to arrive, gentle to settle.
Motion explains what the audit is doing (scanning, finding, scoring) and never decorates. Two curves cover almost everything. Every animation has a still, finished state for people who prefer reduced motion.
Ease out: default
cubic-bezier(.22, 1, .36, 1)
Fades, slides, bars and rings filling. Most things.
Spring: moments
cubic-bezier(.34, 1.56, .64, 1)
Small things popping in: findings, badges, toasts.
Signature moments
- 1 · Show reviews beside the price
- 2 · Show delivery costs early
- 3 · Make Add to cart dominant
- 150–200msHover, press, color changes.
- 350–550msThings entering: cards, findings, toasts.
- 1–1.6sData filling: score rings, bars, counters.
- NeverBounce text, spin logos, or animate anything the user didn’t cause or isn’t waiting for.
06 · Voice
A senior specialist who gets to the point.
Plain words, specific fixes, honest numbers. Lead with what to do, then why. Talk about shoppers, not “users”.
Show reviews beside the price. Shoppers look for proof right when they decide.
Leverage social proof elements to optimise the purchase-intent funnel.
12 fixes could lift conversions by up to 32%.
Unlock explosive growth with AI-powered insights!