Reverse-Engineering a Real Company's Visual Identity System
Objective: Given a real company's live touchpoints, extract and document the five pillars of its visual identity system as if writing their brand guidelines from observation alone.
You're a freelance brand consultant pitching Klaviyo for a competitive brand audit. To prove you understand systems thinking, you reverse-engineer their current visual identity from public touchpoints before the call.
Visit Klaviyo's website, app screenshots, and social profiles. Document their primary color (with hex if visible), heading font style, and photography/illustration style as if writing page 1 of their brand guidelines.
Before you start
What you'll need
Free path (everything below is enough to finish)
Free tier eyedropper and canvas is enough for a reverse-engineering pass
The process
2 steps
Step 01 of 02
The lesson's Color System pillar requires a primary color, secondary colors, neutrals, and semantic colors, each with a documented hex value.
Looking at Klaviyo's website and app screenshots, what's the primary brand color, and where does it show up versus where a neutral is used instead?
Procedure
- Take 3 screenshots: homepage hero, a CTA button, and the app product UI
- Paste into Figma and use the eyedropper to sample the CTA button color, this is very likely the primary
- Sample 2 more colors used for backgrounds or secondary buttons, label as secondary or neutral
- Write the hex values you found next to each label
Primary (CTA buttons): coral-orange accent, consistent across all 3 screenshots Secondary: soft yellow accent on data charts Neutral: off-white background, dark navy body text
Healthy
The color used most consistently on CTAs and key actions across all 3 screenshots is confidently labeled primary.
Unhealthy
Labeling a rarely-used accent color as primary because it happened to be the most visually striking one in a single hero image.
What this means
Primary color is defined by function (what carries the CTA) not by which color is largest on screen.
So what do I do about it?
| Symptom | Action | Effort |
|---|---|---|
| Two people on the audit disagree on the primary color | Re-check across all 3 screenshot types before deciding, not just the homepage | 5 min |
Step 02 of 02
The lesson's Typography and Imagery pillars call for naming the heading font's character and the photography's subject matter, color treatment, and composition rules.
What does the heading font's shape suggest about brand personality, and what's the dominant subject matter and color treatment in their marketing imagery?
Procedure
- Screenshot an H1 headline and describe its shape: geometric sans, humanist sans, serif, etc.
- Note whether body text is a different, more legible font or the same family
- Pull 2-3 marketing images and describe subject matter (people, product UI, abstract) and color treatment (high contrast, muted, warm)
- Write one sentence connecting the type and imagery choices to a likely brand personality
Heading font: geometric sans, tight letter spacing, confident Body font: same family, lighter weight, legible at small sizes Imagery: abstract data visualizations plus real founder headshots, high contrast, consistent accent color Personality read: precise and data-forward, but warmed up by real human photos, not purely corporate
Healthy
The type and imagery description could let a new designer produce an on-brand asset without seeing the original guidelines.
Unhealthy
A vague description like 'modern and clean' that could apply to almost any SaaS brand.
What this means
If your description isn't specific enough to reject an off-brand asset, it isn't a spec yet, just an impression.
So what do I do about it?
| Symptom | Action | Effort |
|---|---|---|
| A freelancer's first draft doesn't feel on-brand | Hand them this documented type/imagery read instead of just the logo file | 5 min |
Final deliverable
A one-page reverse-engineered visual identity brief covering primary/secondary/neutral colors with hex values, type character, and imagery style.
See a reference example
Swiggy, Reverse-Engineered Visual Brief (excerpt) Primary: #FC8019 orange, used on every CTA and the app icon Secondary: black used for headlines, high contrast against orange Type: bold, rounded sans, playful and energetic Imagery: bright, saturated food photography, close-cropped, appetite-forward
Success criteria
You're done when you can:
- Primary color is identified by CTA/functional consistency across 3+ touchpoints, not visual dominance in one image
- Type and imagery descriptions are specific enough to brief a new designer without seeing the original guidelines