Foundations
Design System
A neutral, documentation-first system with one accent color, built for clarity over decoration.
Color
Neutral scale + one accent
Accent is reserved for links, focus states, and primary actions. No gradients. Verified contrast 4.5:1 against WCAG 1.4.3 for body text.
Accent
50
#ECF0FC
100
#DCE4FC
300
#90B0F8
500
#2060E8
600
#1848D0
700
#1840A8
Neutral
0
#FFFFFF
50
#F7F7F5
100
#ECECE8
200
#D8D8D4
400
#A0A09A
500
#6E6E68
700
#3A3A36
900
#14141C
1000
#000000
Typography
Serif · Sans · Mono
Editorial headings in Source Serif 4. UI and body in Source Sans 3. Metrics, tags, and section numbers in IBM Plex Mono.
Aa Editorial
Aa Section title
Aa Subsection
Aa Card title
Aa Reading paragraph for long-form case studies.
Aa Default text for interface and supporting copy.
Aa Caption / meta
Aa Eyebrow label
Spacing & grid
4px base · 12 columns · 1200px
Page gutter 32px on desktop. Content max-width 1200px. Case study prose measure 700–800px.
Scale shown: 8 · 16 · 24 · 32 · 48 · 64
Components
Buttons, tags & case-study blocks
Buttons
Tags
Decision block
Decision 1
Net profit as one number at the top of the dashboard
Decision
Lead with a single net-profit figure before charts or tables.
Alternatives considered
- Line chart of income vs expenses
- Full transaction table as the primary view
Trade-off
Less data density in exchange for an immediate answer to the user’s primary question.
Outcome
Faster comprehension of portfolio health in early usability sessions.
Insight
Participants asked for fewer charts and a clearer answer — not more analytics.
User interviews
ExampleSemi-structured · Hosts managing 2–10 properties
<30 sec
Target time to understand net profit per property
4/5
Example completion signal from structured testing
I just want to know if I’m winning or losing on this property.
Process timeline
Week 1
Research
Needs, constraints, and competitive landscape
Week 2
Information architecture
Flows, structure, and prioritization
Week 3
Ship
High-fidelity UI and implementation