MMuwaffaq
← Design systems

Nūring design system

A dark, data-first system for athletes, coaches and guardians reading grip signals

5variable collections
39colour tokens
62components
14full-page templates
Role
System design, Figma build
Timeline
Oct 2026
Tools
Figma variables, Figma MCP
Scope
Web app · athlete, staff, guardian, coach

Why it was needed

Nūring turns grip into data: effort, recovery and accumulated load, starting with baseball. The same numbers are read by an athlete mid-session, a coach deciding who needs attention, and a parent checking on their child. The system had to make dense data calm to read, and make sure a colour never means two different things.

How it's structured

Five variable collections: Primitives, Color, Space, Radius and Motion. Components only use semantic tokens, never raw values.

01 · PrimitivePrimitives collection#0b0b0dPrimitives collection#4ade80
02 · Semanticcolor-bg-ground#0b0b0dcolor-status-good#4ade80
03 · ComponentApp shell · backgroundcolor-bg-groundStatus pill / Goodcolor-status-good

The Figma file runs from Foundations and Icons through Atoms (buttons, chips, form controls), Molecules (data display, navigation, rows, feedback) and Organisms (player card, app shell, tables, charts, session panels) to Templates.

Foundations

Semantic colour. Surfaces separate content, not borders. Green, amber and red only ever mean status.
Semantic colour. Surfaces separate content, not borders. Green, amber and red only ever mean status.
color-bg-ground#0b0b0dcolor-bg-surface#111114color-bg-raised#16161bcolor-bg-raised-2#1c1c22color-text-primary#f4f4f6color-text-secondary#b9b9c2color-status-good#4ade80color-status-watch#e8a33ccolor-status-flag#e2556ccolor-data-baseline#85858fcolor-border-default#2c2c35color-border-focus#f4f4f6

Three typefaces, each with one job: Archivo Black for display and hero numbers, Host Grotesk for interface text, JetBrains Mono for tabular data. Space doubles at every step from 2 to 128, and radius nests: an inner element's radius is the outer radius minus the padding between them.

One scale for every score

Resilience, swing quality and session scores share five bands, always measured against the player's own baseline, never a league average.
Resilience, swing quality and session scores share five bands, always measured against the player's own baseline, never a league average.

This is the decision I'm proudest of. One scale means a coach reads "Watch" the same way on every screen, and an athlete is only ever compared with themselves.

Components in real screens

62 components, 25 icons and 14 full-page templates across four roles: athlete, staff, guardian and coach.

Staff · Triage: who needs attention after a game, built entirely from system components.
Staff · Triage: who needs attention after a game, built entirely from system components.
Athlete · Resilience: KPI tiles, charts, alert cards and key moments from the same library.
Athlete · Resilience: KPI tiles, charts, alert cards and key moments from the same library.

Documentation and governance

  • Rules written into the file: depth comes from stacking surface tones; shadows are only for things that float (popovers, modals, the expanded player card).
  • Names that travel: each Figma token shows its CSS name beside it, such as bg/surface → --color-bg-surface.
  • Copy stored in natural case: the Label, Action and Code styles set capitals, so text isn't retyped when a style changes.
  • Status is reserved: green, amber and red are never used for decoration, so they always mean something.