The Crit brand system
Design guidelines for critique that feels direct, specific, and useful.
A practical reference for logos, tokens, typography, components, states, icons, and motion across The Crit.
01
Foundations
The brand is built around the feeling of useful critique arriving: clear, editorial, and forward-moving.
Direct
Say what matters. Lead with the concrete observation before the explanation.
Editorial
Use the underline, dot, and type hierarchy like markups on a draft.
Useful
Every interface state should answer: what happened, what matters, what next?
02
Logo
Use the approved lockup and keep the orange dot and underline tied together.
Dark on light
Light on dark
Use
- Dark logo on white, off-white, or light neutral surfaces.
- Light logo on black, near-black, or dark image surfaces.
- Clear space equal to the cap height of the T.
Avoid
- Moving the dot away from the underline system.
- Stretching, outlining, shadowing, or rotating the lockup.
- Using the full wordmark as a tiny favicon.
Favicon
03
Color
The system is neutral first. Orange marks action, attention, and critique moments.
Core
Black
neutral-950
#050505
Ink
neutral-900
#131313
White
neutral-50
#FAFAFA
Paper
neutral-100
#F0F0F0
Border
neutral-200
#DBDBDB
Accent
Crit orange
primary-500
#FF6D0C
Burnt orange
primary-600
#D25400
Accent magenta
secondary-500
#DB1AF1
Success
success-500
#22C55E
Info
info-500
#3B82F6
04
Typography
Fraunces gives the brand its editorial voice. Satoshi keeps the product interface precise and scannable.
Display / Fraunces
Get the feedback that moves the work forward.
UI / Satoshi
Specific critique, prioritized clearly.
Use Satoshi for nav, body copy, forms, labels, buttons, and interface states.
Tokens: font-display, font-ui
05
Components
Core components should feel practical: obvious affordances, clear hierarchy, and restrained accent use.
Buttons
Badges and labels
Inputs
Validation copy should tell people exactly what to fix.
06
Motion
Motion should explain progress or reinforce a critique mark. It should not feel like generic loading decoration.
Crit Pass
Full-page loading after submission
Quiet Submit
Compact loading inside buttons and modals
Wordmark reveal
Entrance and hover moments. Keep it short and confident.
Underline sweep
Attention marker. Use it to identify the point of critique.
Dot pop
Confirmation, completion, or the focused point of attention.
07
States and icons
States should use plain language, a familiar icon, and one clear next action.
Info
We are reading your URL and checking for visible design signals.
Success
Your critique is queued. We will email the result when it is ready.
Needs action
We could not read that link. Try a public URL or upload screenshots.
Icon style
Use Lucide icons at 16-24px. Icons should clarify the action; avoid using them as pattern decoration.
08
Brand rollout 1-6
The next brand improvements should happen in this order so the system grows without fragmenting.
Loading
Use Crit Pass for full-page submission loading and Quiet Submit for compact states.
Results reveal
Reveal summary, priority issues, fixes, and next move in order. Use the underline as the point marker.
Form and upload
Make URL paste, upload, validation, credit, and submit states feel like one continuous flow.
Empty, error, success
Use specific, action-oriented copy with small state icons and restrained accent color.
Resources and tools
Use neutral-first dark bands, 8px cards, category accent colors, and quiet hover behavior. Avoid unrelated glow, orb, or rainbow gradient systems.
Brand QA
Check logo sizing, header alignment, color use, typography scale, reduced motion, and mobile fit.