One silhouette
Square corners and a consistent 2px stroke make every action feel related.
Button audit · proposed direction
A sharper, quieter button system.
One rectangular silhouette, one typographic voice, and a smaller set of purposeful colours. Built from the supplied “Get started” references.
00
System principles
The references become the foundation rather than another isolated variant.
One label voice
Bold Albert Sans, uppercase, and measured tracking across every size.
Colour signals intent
Dark green is standard; orange is reserved for campaigns and high-energy moments.
Accessible by default
44px minimum targets, visible focus, and the same left-to-right sweep on every action.
01
The core pair
These are the default choices for nearly every page: filled for the primary action, outline for the alternative.
02
Colour variants
Colour changes intent, not construction. Every variant shares the same type, proportions, border and interaction behavior.
03
Sizes and widths
Three sizes cover dense controls through statement CTAs. Label weight and border remain constant.
Small · 44px
Medium · 56px
Large · 88px
Full width · inherits height
04
Icons and compact controls
Icons use a 20px slot. Icon-only controls keep a 44px target and the same square silhouette.
05
States
Every intent supports the same state model. Hover and focus are interactive; the other states are shown directly.
Default
Hover preview
Focus preview
Loading
Disabled
Selected toggle
06
In context
Different use cases remain distinct through hierarchy and colour without introducing new geometry.
Behavioral science, applied.
Turn insight into impact.
Success stories
See how behavioral science changes outcomes.
Newsletter
Ideas worth acting on.
07
Migration map
The current audit families collapse into eight predictable proposed roles.
Current familyProposed roleWhat changes
Teal filled CTAPrimary dark
The default action becomes calmer and more editorial.
Dark filled CTAPrimary dark
Geometry and type are standardized.
Orange landing CTACampaign orange
Orange stays, using the same sizes and states.
Teal outlineSecondary outline
Stronger 2px border and shared hover fill.
White ghostInverse outline
Same construction, adapted for dark surfaces.
Pill filterCompact toggle
Square silhouette; teal identifies the selected state.
Text arrowQuiet action
Same label typography and icon spacing without a box.
Icon utilityIcon square
44px target with the same border and focus behavior.
08
Core specification
A small token set controls the entire family.
Corner radius0
Border2px solid
FontAlbert Sans Bold
CaseUppercase
Tracking0.12em
Icon20 × 20px
Minimum target44 × 44px
Focus ringTeal · 3px