Clarity at every scale.

System overview

A practical reference for the neighbourhood grid-readiness simulator. Foundations, live components, and composed patterns extracted from WijkWise Planner.

Keep the workspace neutral. Reserve color for risk, adoption inputs, and chart meaning. Pair every status color with a readable label. All figures below are illustrative demo data.

Color palette

White surfaces and warm neutral text create a quiet canvas for the four semantic risk tiers. Token names and values match the standalone app.

Accent colors · dark & light

Use dark shades for chart lines, markers, and input accents. Use matching light shades for risk backgrounds and soft highlights.

Risk scale

Adoption accents: heat pumps use orange, EVs use yellow, and solar uses blue. These identify input categories; risk badges describe outcomes.

Typography

Three type families separate navigation, explanations, and numerical evidence.

App scale: 28px outcome headings, 24px neighbourhood titles, 18px brand, 16px workflow headings, 14px controls, 12px supporting text. Metric values use 28px or 36px mono.

Spacing & surfaces

Use thin borders and restrained shadows to group dense planning information.

Metric cards: 16px padding, 9px internal gap. Metric grid: 14px gap. Agent panels: 20px padding. Pill badges and switches use a fully rounded radius.

.ww-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(50,40,25,.04),
              0 6px 18px rgba(50,40,25,.03);
}

Buttons & states

One dark primary action anchors the scenario builder. A quieter reset action restores defaults.

Primary: 15px / 600, 11px × 16px padding, 10px radius. Hover darkens to #333333; pressing moves the button down 1px. Disable while running and describe progress in text.

Scenario controls

Segmented choices, adoption sliders, percentage chips, and binary interventions. These examples are keyboard operable.

Sliders use 5-point steps, an 8px track, and a white 22px thumb with a colored border. Switches measure 44 × 26px; enabled is blue. Segmented selections use a white raised surface; selected chips use a dark fill.

Icons & indicators

The planner uses Unicode symbols for energy categories and actions, with CSS shapes for status indicators. These are the actual symbols used in the standalone app.

Status indicators

Size & usage

Metric icons use 15px at 85% opacity. Adoption labels use 13–14px symbols, and the empty-state grid symbol uses 30px. Keep symbols beside descriptive text; hide decorative symbols from assistive technology with aria-hidden="true". Give any icon-only control an accessible name.

These glyphs use the app’s body font and system fallback, so their appearance can vary by platform. The heat and solar symbols include a text-presentation selector. Status dots and the working spinner are CSS shapes, not font glyphs.

Badges & value tags

Use a dot plus a text label for risk. Use monospace value tags beside adoption controls.

Risk badges: 12.5px semibold text, 7px dot, 999px radius. Value tags: 22px bold mono, 7px radius, 2px × 8px padding.

Metric cards & capacity

Pair a large numerical reading with a risk label and a plain-language interpretation.

Capacity tier is based on rounded headroom: ≥28 points low, ≥14 medium, ≥5 high, otherwise critical. The fill caps at 100%; the numerical value must still show overload.

Load curve & sparklines

Distinguish the scenario from the baseline with both color and line style. Always show the transformer limit.

LoadCurve uses a 560-unit viewBox, a 2.4px scenario line, and a 1.8px dashed baseline. Compact sparklines use 96 × 30px, a 2px stroke, and a final-point marker.

Neighbourhood map

Risk-tinted polygons show neighbourhood context. Selection adds an outline; the selected name remains available as text.

Agent progress

Idle, working, and completed rows keep the model sequence readable.

Working rows use a white surface, border, and light shadow. Completed rows use #FAFAFA and a dark checkmark. Idle rows use reduced opacity. Motion is supplementary to the text state.

Application shell

The desktop app follows three steps: choose a neighbourhood, build a scenario, and review the outcome.

--ww-grid-columns: 340px 360px 1fr;

@media (max-width: 1180px) {
  :root { --ww-grid-columns: 300px 320px 1fr; }
}

These are the current app column widths. This reference stacks its examples on small screens for easier browsing.

Usage & accessibility

Preserve meaning when composing new planning screens.

• Keep demo-data identification visible beside simulation results.
• Use risk text and numeric readings alongside color.
• Label every input and expose selection with aria-pressed.
• Provide visible keyboard focus and announce asynchronous progress.
• Reserve faint text for secondary detail; use stronger text for instructions and essential values.
• Respect reduced-motion preferences for progress and transitions.

Source: WijkWise standalone app. Reference format: Atlas Signal design system.