A practical design language for Anchora's application control tower — built to make urgency visible, progress legible, and complex operations feel calm.
01 · Precise
Every label, date, and status supports an operational decision.
02 · Calm
Urgency is factual and visible without making the workspace feel alarming.
03 · Accountable
Students and consultants share clarity while official control stays explicit.
Foundation 01
Color
Ink carries authority, white space creates calm, gold marks focus, and red remains a controlled signal. Feature code uses semantic roles rather than palette names.
brand-ink
Brand ink
#171715
brand-gold
Brand gold
#D3A447
brand-gold-strong
Gold text
#8A6115
brand-red
Brand red
#A14545
canvas
Canvas
#F7F7F5
surface
Surface
#FFFFFF
surface-muted
Muted surface
#F1F1EF
border-strong
Strong border
#CACAC5
Success
Text
#317354
Surface
#F1F7F3
Border
#CBDED2
Warning
Text
#8A6115
Surface
#FBF8F0
Border
#DFD0AF
Danger
Text
#9B4848
Surface
#FBF3F3
Border
#E5CCCC
Information
Text
#3E6797
Surface
#F3F7FB
Border
#CEDBEB
Gold is a focus color
Use gold sparingly for selection, focus, and important wayfinding. Use the darker gold text token for copy on white surfaces.
Foundation 02
Typography
Anchora uses Geist across the authenticated product. Hierarchy comes from a compact scale, disciplined weight, calm rhythm, and tabular numerals — not extra font families.
Display XL
32 / 36 · Semibold
Every journey, controlled.
Display LG
28 / 32 · Semibold
Application control tower
Page title
24 / 30 · Semibold
Students
Section title
18 / 24 · Semibold
Global requirements
Component title
16 / 22 · Semibold
Winter 2027
Body LG
16 / 26 · Regular
Give each journey enough context to support the next decision.
Body MD
15 / 24 · Regular
Consultants see who needs attention today.
Body SM
14 / 22 · Regular
Due 17 Jul 2026 · due today
Micro label
12 / 18 · Semibold
Application journey
Dates and counts
17 Jul 2026 · 08 / 12
Use tabular numerals wherever values are compared vertically or updated in place.
Sentence case
At riskIn progressNot started
Use sentence case for product labels; reserve uppercase for compact structural headings.
Foundation 03
Supporting scales
A four-pixel spacing grid and limited radii, elevation, motion, and icon sizes keep Anchora dense enough for operations without feeling compressed.
Spacing · 4px base
044px
088px
1212px
1616px
2424px
3232px
4848px
6464px
Radius
4
6
8
12
16
Full
Elevation
Flat
Subtle
Popover
Motion and icons
120
Instant
180
Fast
280
Standard
350
Deliberate
16 control20 nav32 empty
System 01
Components
Components encode states, focus behavior, targets, and semantic tone so feature teams assemble consistent interfaces instead of restyling controls.
WCAG 2.2 AA is the product baseline. Accessibility is part of the component contract, not a finishing pass.
Contrast
Normal text reaches 4.5:1; large text and interface graphics reach 3:1.
No color-only status
Every state combines semantic color with text and an icon.
Keyboard and focus
Logical order, visible focus, skip links, and no keyboard traps.
Target size
Interactive targets meet the 24 by 24 pixel WCAG minimum; primary controls are larger.
Reduced motion
Motion collapses for users who request reduced movement.
Forms and errors
Labels, required state, descriptions, and recovery messages are programmatically connected.
Quality gate
Can someone understand and operate this without sight, color, precision pointing, or motion?
Verify keyboard access, VoiceOver reading order, 200% zoom, target size, focus visibility, reduced motion, and semantic landmarks on every new pattern.
Data visualization guidance
Use ink for the primary series, gold for a selected or comparative series, and semantic colors only when the data itself represents success, warning, danger, or information. Label every series directly and never depend on hue alone.
