Precision for every student journey.

The design language behind Anchora — charcoal surfaces, hairline structure and one quiet accent, built to make the next step obvious and a long journey feel calm.

Precise: Every label, date and status helps you decide what to do next.
Calm: Dates are factual and visible without making the journey feel alarming.
Yours: You own your journey. Planning targets stay separate from official deadlines.

Color

Charcoal greys build structure: a darker sidebar, a calm canvas and slightly raised panels, separated by hairlines. Gold marks wayfinding. Feature code uses semantic roles rather than palette names.

surface-chrome

Sidebar

#111111

canvas

Canvas

#191919

surface

Panel

#202020

surface-active

Selected

#262626

border-default

Border

#2A2A2A

text-primary

Text

#EDEDED

text-secondary

Secondary text

#B4B4B4

brand-gold

Wayfinding gold

#D9AA50

Success

Text
Surface
Border

Warning

Text
Surface
Border

Danger

Text
Surface
Border

Information

Text
Surface
Border

Gold marks the way, not focus

Use gold sparingly: the selected item's icon, progress, and next-step tags. Focus rings stay neutral grey.

Typography

Geist carries headings, body, labels and controls; Commissioner is kept for editorial marketing headings. Geist Mono sets numbers, dates, counts and short tags. Hierarchy comes from size and weight, not more 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

Your next step is always at the top of your journey.

Body SM

14 / 22 · Regular

Due 17 Jul 2026 · due today

Micro label

12 / 18 · Semibold

Application journey

Mono tag

11 / 16 · Geist Mono

07/18 · WINTER 2027 · IN 3 DAYS

Dates and counts

17 Jul 2026 · 08 / 12

Use Geist Mono for dates and counts, and tabular numerals wherever values update in place.

Sentence case

At riskIn progressNot started

Use sentence case for product labels; reserve uppercase for compact structural headings.

Supporting scales

A four-pixel spacing grid, a short radius ladder and flat, hairline-separated surfaces keep Anchora precise without feeling cramped.

Spacing · 4px base

044px

088px

1212px

1616px

2424px

3232px

4848px

6464px

Radius

Buttons, tags

Controls, rows

Panels, cards

Full

Avatars, pills

Elevation

Canvas

Panel

Surfaces step up in grey and are split by hairlines. Shadows are reserved for floating menus and dialogs.

Motion and icons

120

Instant

180

Fast

280

Standard

350

Deliberate

16 control20 nav32 empty

Components

Components encode states, focus behavior, targets, and semantic tone so feature teams assemble consistent interfaces instead of restyling controls.

Buttons

One clear primary action per region.

Badges and status

NeutralAccentInformationSuccessWarningDanger

OverdueAt riskOn trackNot startedIn progressBlockedDone

Progress and identity

Ajinkya Kale

Winter 2027 · Germany

Form controls

Full name

Target intake

Enter a valid email address

Show completed tasks

Feedback states

Information

Planning targets are your own dates, not official deadlines.

Saved

The task status is up to date.

Deadline approaching

This item is due within seven days.

Status not saved

Try the update again.

Search field

One search control everywhere: live result count, ⌘K to focus, Esc to leave, and a divided clear button.

Highlight the matched text in results with a soft gold mark, and open collapsed rows that contain a match.

People in controls

Show a face wherever a person is named.

Ajinkya KaleYouPassport

The You pill marks the signed-in person. The gold dot marks something new and clears once the row is opened.

Loading

No documents yet

Uploaded documents appear here.

Dashboard patterns

Signed-in surfaces share one frame: a roomy sidebar, a page header with mono counts, segmented tabs, stat grids and hairline tables. Admin uses it today; the student app follows.

Navigation

JourneyDocumentsBackground & Goals

Your journey

Winter 2027 · MSc Computer Science

07/18 doneWinter 2027

Open steps

Due this week

Documents

4/5

Step	Stage	Planning target	Status
Plan language test	Tests and documents	IN 3 DAYS	In progress
Prepare APS documents	Eligibility & APS	IN 7 DAYS	Not started
Core profile	Profile & Goals	DONE	Done

Sidebar

264px wide on a darker grey than the canvas, split by a hairline.
Rows are 36px with 14px text and a 16px icon; 4px between rows.
The current row is a solid grey with a gold icon. No side bars or gold text.

Tables and counts

Column heads are 11px Geist Mono, uppercase, muted.
Dates and counts sit in mono; counts in the header use mono tags.
Rows highlight on hover only when the whole row is a link.

Dialogs and sheets

Confirmations are short and centered around the subject. Risky actions ask for a typed code. Side sheets hold settings and forms with a pinned action bar.

Confirmation dialog

Centered, with a close button, a short question title, one line of copy, and a full-bleed band naming the subject.

Confirm button carries a leading icon; destructive ones use the danger tone.
Deleting an account requires a fresh six-character code. Paste is blocked with an inline error, the input is focused, and Enter confirms once it matches.

Settings action rows

Each account action is a row: icon tile, title, one-line effect, and a small trailing button.

Sign out
End this session on this device.
Delete account
Remove your journey, documents and profile for good.

Danger rows tint the icon and title, never the whole row. Avoid solid destructive buttons outside the confirmation itself.

Side sheet anatomy

Edit profile

Contact, study and intake details.

Sheet rules

Title plus a single descriptive line; no section headers inside short forms.
Group related fields with spacing: 12px inside a group, 20px between groups. Pair short fields side by side.
Use the system select, never the native one.
Actions live in a pinned footer. Save stays disabled until something changes and resets when the sheet reopens.
Do not auto-focus or select a field when the sheet opens.
Read-only values look read-only: muted surface, not-allowed cursor, and a short reason underneath.

Empty states

Small line illustrations make empty moments feel finished. Each one names what is missing in a few words and stops there.

You're all caught up!

Nothing waiting on you.

No documents match

Try a different name or status.

No students match

Try a different search or filter.

Illustration recipe

80 × 64 viewBox, rendered 72px tall, 1.25px strokes in border and muted text tokens.
A soft radial glow: success for done, gold for no results.
One corner badge carries the meaning: a check, a question mark, or a lens.
Gold sparkles sparingly; gradient ids come from useId so repeats never collide.

Copy and actions

Title states the fact; one short hint at most.
No-results states have no buttons. The search box already clears itself.
Hide sections that cannot match the current search instead of showing them empty.

Content and terminology

Anchora sounds calm, exact, and helpful. It names the state, shows the relevant date, and gives a specific recovery path.

“Status not saved. Try the update again.”
“17 Jul 2026 · due today”
“Email hello@tryanchora.com for help.”
“Delete your account?” with one line of consequence.
“Pasting isn't allowed. Type the code instead.” directly under the field.
“Planning target · 17 Jul 2026” for dates you set.
Speak to the student as “you”.

Do not

“Oops! Something went wrong.”
“Urgent!!!” without an exact date
“Talk to someone for help.”
Two-sentence dialog descriptions that restate the title.
Errors only in a toast when the field is on screen.
Names without a face where a person is the subject.
Call a planning target a deadline.

Approved lifecycle labels

OverdueAt riskOn trackNot startedIn progressBlockedDone

Accessibility baseline

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.

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.

Ink · primaryGold · comparisonSemantic · meaning

Use

Direct labels beside the data.
Consistent baselines and ordering.
One highlighted comparison at a time.

Avoid

Status colors used decoratively.
Meaning communicated by hue alone.
More series than the decision requires.