Contrast is not a preference
Body text at 7:1 where possible, UI text at 4.5:1. Checked in both themes and every stage.
- ✓Ink on canvas for body copy
- ✕Grey-on-grey “subtle” captions
Principles
Twelve rules in three groups. When two conflict, the earlier group wins: accessibility over conversion, conversion over decoration.
Accessibility
Every drag has a button
Kanban, sorting and sliders all have a keyboard and a non-drag path (WCAG 2.5.7).
- ✓“Move to…” menu on every card
- ✕Drag as the only way to reorder
Motion can always stop
Anything moving longer than 5 seconds gets a visible pause. Reduced motion removes it entirely.
- ✓Pause on the Ship Log ticker
- ✕Autoplay loops without controls
44 px or it isn’t a target
Touch targets, focus rings and hit areas are designed, not left to defaults.
- ✓Visible 2 px magenta focus ring
- ✕outline: none
Conversion
Show the product, not the promise
Heroes embed working product UI built from app components. Screenshots go stale; Live UI can’t.
- ✓Interactive inbox in the first viewport
- ✕Abstract 3D blobs “representing” data
Every number has a baseline
Deltas show the start value, the period and the source. No baseline, no number.
- ✓Δ +38% activation · 90 days · from 37%
- ✕“10x faster”
One primary action per viewport
Magenta appears once per screen. Every section ends at a decision point, never a dead end.
- ✓Start free + Take the 2-min tour
- ✕Three magenta buttons fighting
Ethical by default
No fake scarcity, no confirmshaming, no hidden renewal. Cancel is as easy as signup.
- ✓“Cancel” and “Keep plan” weighted equally
- ✕“No thanks, I like wasting time”
Design
Momentum is visible
Ship stamps, version tags and a changelog ticker make progress part of the interface.
- ✓“Shipped 3 days ago” with date on hover
- ✕A static “Features” grid
The product moves, the page stays calm
Motion lives inside product frames. Page chrome stays still; scrolling stays native.
- ✓Feedback sorting itself into themes
- ✕Scroll-jacked parallax sections
One system, two surfaces
Marketing and app share tokens and components. If the site needs it, the app has it.
- ✓Same table, same badge, same button
- ✕Marketing-only “fancy” card styles
Honest about being young
Say what’s in progress. Label illustrative data. Name customers only with permission.
- ✓“SOC 2 Type II in progress”
- ✕Borrowed logo walls