Split Test Pro
brand guide.
How the brand looks, sounds and moves, the rules behind the app, the marketing site and Splitty, the AI assistant.
01 · Essence
A precise tool with one friendly character in it.
Split Test Pro lets store owners design, target and launch A/B tests, by hand, or with Splitty. The brand stays calm so the results can speak, and saves its personality for the moments that matter.
Deep indigo night, thin lines and lots of room. Nothing shouts; one soft violet accent leads the eye.
Real product UI, honest numbers and plain words. Every claim can be checked in the app.
Splitty, a springy logo and small signs of life where something is working, never decoration for its own sake.
02 · Logo
One path, two outcomes.
A split arrow inside a hexagon: one visitor stream dividing into control and variant. The wordmark sits beside it in white, with "PRO" in the brand purple.
- Hexagonthe container, a test is a contained, controlled space#242148
- Lower facetdepth, so the mark reads as an object, not a sticker#4D4591
- Keylinethe brand purple traces the edge#8B7AFF
- Split arrowone stroke in, two directions out#FFFFFF
Lockups
Full logo · dark: the default, on canvas or panel
Full logo · light: wordmark #14142B, PRO #5846D2
Mark only: favicons, app icons and tight spaces
Clear space: keep x (half the mark's height) free on every side
03 · Colour
Indigo night, one violet accent.
Every colour is a token from the app's tokens.css. No new hues, anything else is mixed from these with color-mix(). No pure white surfaces and no pure black. Click a swatch to copy its hex.
Proportion on a page
- 85% indigo surfaces
- 10% text
- 5% accent
Surfaces & brand
Text
Status colours carry meaning
RunningCyan · live, in progress, AI at work
ScheduledAmber · upcoming, needs a look
CompletedMint · a finished test, a win, uplift
ArchivedPink-red · destructive, a loss
DraftLavender · not started yet
Dark first, light by token swap
The Settings switch, live: the same screen in both themes. In light, status colours deepen for text and the purple darkens to #5846D2 so it keeps its contrast. Click to switch, or watch it every 5 seconds.
04 · Typography
One typeface, two weights.
DM Sans everywhere, the app, the site and Splitty. Regular for reading, semibold for headings, buttons and labels. Nothing else.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 +12.4% → ✓
Body, descriptions
Headings, buttons, labels
Long runs of copy
Scale
- Hero · marketingBetter tests.clamp(40–64) / 1.05
- DisplayTesting Queue38 / 1.15 / 600
- H1Lead with customer reviews28 / 1.15 / 600
- H2Review your test24 / 1.15 / 600
- H3Conversion rate over time20 / 1.3 / 600
- H4Audience targeting16 / 1.3 / 600
- BodyVariant A has a 12.4% higher conversion rate than control.14 / 1.5 / 400
- Small · XSDefault goal · Add to Carts · Running since today12 · 11 / 1.5
Better tests. Built with AI.
Emphasis in purple. Colour one or two words of a headline --purple. Never gradient text.
Launch with confidence.
Sentence case everywhere. Headings and buttons alike. Buttons are verbs: "Build Test", "Save Draft".
The only all-caps are small eyebrow labels (12px, 600, +0.08em) and "PRO" in the logo.
Describe an idea. Splitty builds the variants, targeting and traffic split.
White for headlines, lavender for body. Keep body lines to 60–70 characters.
05 · Layout & shape
A 4px rhythm, small corners, thin lines.
Space comes from one scale. Corners stay small, never bubbly. In the dark theme, surfaces separate with a 1px line and a small step in tone, not with shadows.
Spacing: app 4–40 · sections 64–128
Radius: 16px is the ceiling, for large panels only
06 · Components
Built from the same tokens as the app.
The marketing site rebuilds the app's components rather than inventing its own, so a visitor who clicks "Start free" never leaves the same visual world. These are live: hover, press and type.
Buttons
Dark text on purple · press scales to .96
Badges & toggles
Pills only for badges and toggles
Inputs & cards
07 · Graphics
Thin lines, the real product, and Splitty.
Icons are thin strokes that inherit their colour. Product visuals are the real UI, rebuilt from the app's components, no stock photos or generic dashboards. And one character: Splitty.
24px, ~1.5px stroke, currentColor, muted at rest, white on hover.
Splitty, the AI assistant
#2F52C2 → #091748
#BB6CF8 → #562AE0
40% opacity08 · Animation
Fast out, soft landing.
The interface moves on one easing curve. Springs are saved for the two characters, the logo and Splitty, and nothing moves linearly. State changes take 180ms; reveals and progress fills up to about 550ms. Motion switches off entirely under reduced motion.
cubic-bezier(.22, 1, .36, 1)
The logo entrance
Every beat springs (overshoot, settle) on cubic-bezier(.33, 1, .68, 1). On hover the arrow, depth and wordmark dip 18px and bounce back while "PRO" rolls again.
09 · Voice
Plain, direct, honest.
Second person, present tense, short sentences. Say exactly what happens. Confident, not hypey, no "revolutionary", no exclamation marks, no invented numbers.
Write
Review every field, then launch when it looks right.
This cannot be undone. Anything you already saved is untouched.
Variant A is 96% likely to beat control.
Avoid
Supercharge your conversions 10x!
The revolutionary, game-changing testing platform.
Oops! Something went wrong 😅
Help me get more add to carts on this product page
Nice, I have your context. Here are 3 ideas for this page, aimed at Add to Carts.
Let's go with the reviews one
Great choice. I'm creating your variants and checking the setup. You'll review everything before launch.
Splitty's voice: first person, warm and brief. He tells you what he's doing and what you'll decide.
10 · Brand in action
A confident first step.
One field, a clear next step and reassurance where it matters. The signup experience brings the identity into a responsive product interface.