System / v1.0

Practical patterns for a calm, inspectable planning interface.

This living reference turns the Weekmark approach into shared tokens, resilient components, and explicit states. Every example below is fictional and intentionally non-personal.

01 / Foundations

Semantic tokens make changes deliberate.

The public demo keeps brand color separate from meaning, then uses a compact spacing and type scale for predictable reflow.

Color roles

ActionBlue
PositiveMint
WatchAmber
Needs actionCoral

Every status also names its meaning; color is never the only signal.

Spacing + elevation

4812162432

Small gaps group related detail. Larger gaps make section changes legible without decoration.

Type roles

Decision first

Readable body copy explains context and limits without hiding the next action.

LABEL / EVIDENCE / DATE

02 / Components

Small primitives, consistent behavior.

The dashboard shares section headings, metric cards, range controls, status badges, and action buttons rather than rebuilding them one section at a time.

Meaningful status

On trackReview soonNeeds actionModeled

Visible text carries the state even when the colored treatment is unavailable.

Action hierarchy

All interactive controls have a visible focus treatment and a 44-pixel touch target.

Metric card

Synthetic guardrailSynthetic
64%

A fictional example with explicit modeled provenance.

03 / Patterns

An interaction should reveal its consequence.

Controls retain labels, values, bounds, and a visible summary. Dense data always has an accessible table or text alternative.

Segmented decision

Choose a fictional pacing mode

Demo control

Selected: balanced. The summary updates without moving focus or sending the decision anywhere.

Chart + alternative

Four fictional periods

Seeded
Visual comparison only; the table below contains the same fictional values.
Open the accessible data table
Synthetic pacing index by fictional period
PeriodIndexState
P142Review
P258Review
P348Review
P470On track

04 / Feedback + empty states

Never leave a person wondering what changed.

Loading, stale, empty, and error states preserve context and explain the next useful action in plain language.

Ready

Ready

The latest synthetic calculation is available to inspect.

Read the implementation contract
  • Use semantic landmarks, native buttons, labels, and disclosures before adding ARIA.
  • Keep visible status text, even when a color or icon reinforces the meaning.
  • At narrow widths, stack decisions before supporting detail and preserve horizontal table access.
  • Use motion only as feedback and honor a reduced-motion preference.