Pathwise
A decision engine for education choices, designed so the thing that decides the choice is the first thing you read — on a white page where space, type and tonal fills do the separating.
What it believes
“A white page where space, type and tonal fills do the separating.”
“No borders, no shadows, no glass. One teal. One typeface: Hanken Grotesk.”
“Prominence = importance: the thing that decides the choice is the biggest thing on the screen.”
“State before words: status reads from a coloured dot before you read the label.”
“A projection never looks like a fact: every career read says whether it was researched, and cites its sources.”
“Zone 2: the one thing to do next. ONE job — answer "what now?".”
How it looks and moves
Light on :root, dark under prefers-color-scheme: dark.
--accent: #05616d — teal text + links
--font-sans: var(--font-hanken), ui-sans-serif, system-ui, sans-serif
Section container: .ds-card (tonal panel); .ds-row for ledger rows that alternate bands.
Elevation: flat by design
Motion: --ease cubic-bezier(0.22, 1, 0.36, 1); --dur-fast 140ms, --dur 220ms, --dur-enter 420ms, --dur-meter 600ms.
Tokens the app runs
Each swatch shows light (left) and dark (right), resolved from the token file this app runs.
Surfaces
--bg
#ffffff · dark #111313
the page
--surface
#f4f6f6 · dark #1a1d1d
tonal panel / alternating ledger row
--sunken
#eef1f1 · dark #161818
inputs, quiet buttons, hover
--track
#e4e8e8 · dark #2a2e2e
meter + ring tracks, quiet hover
Text
--ink
#141a1c · dark #ededed
--ink-muted
#525d62 · dark #a9b0b1
--ink-faint
#5b6569 · dark #8f9798
AA 4.5:1+ on every surface and tint
Accent
--accent
#05616d · dark #62c9d2
teal text + links
--accent-strong
#044e58 · dark #8adbe2
hover / pressed teal text
--accent-tint
color-mix(in srgb, #078b9c 10%, var(--bg)) · dark color-mix(in srgb, #2bb3c0 14%, var(--bg))
primary button at rest, selected
--accent-tint-strong
color-mix(in srgb, #078b9c 18%, var(--bg)) · dark color-mix(in srgb, #2bb3c0 22%, var(--bg))
primary button hover
--accent-fill
#05616d · dark #1d6d76
solid fill under white text (7.0:1)
--on-accent
#ffffff
Semantic
--ok
#256b43 · dark #71c79a
--warn
#875100 · dark #e3ae62
--bad
#b42318 · dark #f2907f
Overlay
--scrim
rgba(20, 26, 28, 0.45) · dark rgba(0, 0, 0, 0.6)
Borders and charts: none. Separation is space and tone, so the border tokens resolve to transparent; Pathwise draws no charts.
One family, Hanken Grotesk, doing every job — var(--font-hanken), ui-sans-serif, system-ui, sans-serif.
Display
Explore Programs
Section title
Your applications
Verdict
A design-leadership degree with real AI depth.
Row title
Example University
Lede
Ranked by career fit, then by match.
Body
Every projection says whether it was researched, and cites its sources.
Small
Hybrid · Cambridge, MA
Eyebrow
Fits your goals?
A 4px rhythm; 72px between ledger sections.
--radius-card
6px
--radius-control
8px
--radius-pill
999px
Flat by design. There are no shadow levels: panels separate by tone, and overlays sit on the scrim.
Easing --ease · cubic-bezier(0.22, 1, 0.36, 1). Click a row to play it.
WCAG AA, computed from the token file for both modes. Text needs 4.5:1; the focus ring is a non-text indicator and needs 3:1.
| Pair | Needs | Light | Dark |
|---|---|---|---|
| --ink on --bg | 4.5:1 | 17.58:1 pass | 15.92:1 pass |
| --ink on --surface | 4.5:1 | 16.21:1 pass | 14.50:1 pass |
| --ink on --sunken | 4.5:1 | 15.48:1 pass | 15.23:1 pass |
| --ink-muted on --bg | 4.5:1 | 6.77:1 pass | 8.46:1 pass |
| --ink-muted on --surface | 4.5:1 | 6.24:1 pass | 7.70:1 pass |
| --ink-muted on --sunken | 4.5:1 | 5.96:1 pass | 8.09:1 pass |
| --ink-faint on --bg | 4.5:1 | 5.98:1 pass | 6.26:1 pass |
| --ink-faint on --surface | 4.5:1 | 5.52:1 pass | 5.70:1 pass |
| --ink-faint on --sunken | 4.5:1 | 5.27:1 pass | 5.98:1 pass |
| --accent on --bg | 4.5:1 | 7.15:1 pass | 9.59:1 pass |
| --accent on --surface | 4.5:1 | 6.59:1 pass | 8.73:1 pass |
| --accent on --sunken | 4.5:1 | 6.29:1 pass | 9.17:1 pass |
| --accent on --accent-tint (primary) | 4.5:1 | 6.32:1 pass | 7.78:1 pass |
| --accent on --accent-tint-strong (hover) | 4.5:1 | 5.71:1 pass | 6.64:1 pass |
| --on-accent on --accent-fill | 4.5:1 | 7.15:1 pass | 6.00:1 pass |
| --ok on its own tint | 4.5:1 | 5.57:1 pass | 7.76:1 pass |
| --warn on its own tint | 4.5:1 | 5.65:1 pass | 7.88:1 pass |
| --bad on its own tint | 4.5:1 | 5.57:1 pass | 6.93:1 pass |
| Focus ring --accent vs --bg | 3:1 | 7.15:1 pass | 9.59:1 pass |
One component per job
One primary, one quiet, one text and one destructive action — nothing in between.
Use when
Don't
| Variant | Default | Hover | Focus | Pressed | Disabled | Loading |
|---|---|---|---|---|---|---|
| Primary | ||||||
| Secondary | ||||||
| Text | ||||||
| Destructive |
More versions
Live — try it
Teal text that goes somewhere — another page, a section, a source.
Use when
Don't
| Variant | Default | Hover | Focus |
|---|---|---|---|
| Link | See the full projection → | See the full projection → | See the full projection → |
Live — try it
A tonal fill you type into — never a box with a border.
Use when
Don't
| Variant | Default | Focus | Disabled |
|---|---|---|---|
| Input | |||
| Textarea |
Live — try it
Native selects on a tonal fill; filter-select is the compact one for filter rows.
Use when
Don't
| Variant | Default | Hover | Focus | Disabled |
|---|---|---|---|---|
| Filter | ||||
| Form |
Live — try it
A toggle or a tag. Tonal at rest, teal when selected.
Use when
Don't
| Variant | Default | Hover | Focus | Pressed | Selected | Disabled |
|---|---|---|---|---|---|---|
| Toggle |
More versions
Live — try it
State you read before the words: a coloured dot and plain text, never a pill.
Use when
Don't
More versions
Live — try it
A note or message as a tinted block — the tone is the fill, never a border.
Use when
Don't
More versions
Re-checked against sources — every program is current.
Some figures are estimated or derived.
Program refresh failed. Please retry.
Tracker created from Explore.
Live — try it
Some figures are estimated or derived.
Grouping by tone, not by line: a panel, a sunken well, and ledger rows that alternate bands.
Use when
Don't
| Variant | Default | Hover |
|---|---|---|
| Card | Panel | Panel |
| Row | Row one Row two | Row one Row two |
More versions
Live — try it
How far along a tracker is.
Use when
Don't
More versions
Live — try it
Pathwise only
The one match gauge: how well a profile meets a program’s requirements.
Use when
Don't
More versions
Live — try it
One decision unit per program: the career verdict and four questions lead; match sits beside them.
Use when
Don't
Live — try it
Match
Graphic Design
In-Person · Providence, RI
Due 1/5/2027
A respected graphic design MFA that deepens your visual and critical craft, but it teaches no leadership and no AI, and costs two years out of work.
Wordmark left, text links right; the active section carries a teal underline.
Use when
Don't
Live — try it
Live at the top of this page — Program and tracker pages light up their section.
How to use it
Do
Use a primitive first; add utilities only for layout gaps and sizing.
Every value comes from a token, motion included.
Lead with the career read; the match ring sits beside it as the "can I get in" number.
Don’t
Separate with space and tonal fills, never with a border or a shadow.
Status is a dot and text; a pill is only ever a toggle, a tag, or a button.
Values set by this spec
None. Every value on this page comes from Pathwise's own token file — the system defines all of them itself.