Foundation Sprints
Sign in

Build · 12 of 12

System

The shared building blocks that make every screen consistent instead of a one-off.

Sounds like what you need?

  • A system so new screens don't start from zero
  • Buttons, colors and spacing that stay consistent
  • A source of truth developers can build from
  • Rethink a few key screens first
  • Settle the brand's colors and type

What the Build Sprint looks like

The questions this sprint answers

  • What's the path from first touch to done?
  • What's the riskiest assumption we need to test?
  • What's the most important thing on each screen, and does it read that way?
  • What are our tokens — color, type, spacing, radius?

Decisions we'll make together

  • The path from first touch to done
  • Where people drop off, and the fix
  • The riskiest assumption to test
  • What counts as a pass

Week 1 · Get unstuck

  1. MonWorkshop — We confirm the scope, check the foundation, and agree what we're testing and how.
  2. TueExplore — Research, and two or three directions for flow, prototype, interface and system.
  3. WedExplore — The directions, taken far enough to compare honestly.
  4. ThuShape — The strongest direction, sharpened for the lock.
  5. FriDirection lock — We review the directions together and commit to one.

Week 2 · Get something real

  1. MonMake — The chosen direction, built out.
  2. TueMake — The core of it, made real.
  3. WedRefine — A review together, then the fixes it turns up.
  4. ThuTest — Checked against what we set out to learn, and finished.
  5. FriDelivery — A walkthrough, and everything lands in your Hub.

You leave with: A user journey · A screen map · A clickable prototype · A test plan you can run · Key screens, designed · Specs a developer can build from · Design tokens · A component library

Every sprint follows this shape; yours is written around your project when you start.

In a real project

Miles

What system produced in a real engagement, exactly as the client has it. See the whole Hub

Design tokens

Color primitives from the MILES-UI Figma file (Primitives frame, 232:932), named after its variables: https://www.figma.com/design/gmbbHEuKytveyy1lENPfK2/MILES-UI-260506?node-id=232-932

Color — Gray

  • gray-0#FFFFFF
  • gray-50#F7F6F2
  • gray-100#EBE9E6
  • gray-200#DBDAD7
  • gray-300#C7C5C3
  • gray-400#A3A19E
  • gray-500#85827F
  • gray-600#696764
  • gray-700#4D4B49
  • gray-800#363432
  • gray-900#242322
  • gray-950#030712
  • gray-1000#000000

Color — Green

  • green-50#F2F9F5
  • green-100#E5F4EB
  • green-200#BCE8D3
  • green-300#8DD5B3
  • green-400#5EBE91
  • green-500#32A871
  • green-600#309061
  • green-700#2F7852
  • green-800#2D6041
  • green-900#1F2420
  • green-950#181A17

Color — Blue

  • blue-50#EBF1F5
  • blue-100#DEF2FE
  • blue-200#B8E4FF
  • blue-300#73CCFF
  • blue-400#42BAFF
  • blue-500#00A2FF
  • blue-600#008CE5
  • blue-700#1571AD
  • blue-800#285C7F
  • blue-900#16364C
  • blue-950#122026

Color — Red

  • red-50#FFECE4
  • red-100#FFDCCB
  • red-200#FFB899
  • red-300#FF9466
  • red-400#FE7133
  • red-500#FE4D00
  • red-600#CD3D00
  • red-700#982E01
  • red-800#661F00
  • red-900#330F00
  • red-950#240B00

Color — Yellow

  • yellow-50#F5F2ED
  • yellow-100#FAE9CD
  • yellow-200#FFDB99
  • yellow-300#FCC76A
  • yellow-400#FFB83D
  • yellow-500#FFA710
  • yellow-600#E5900C
  • yellow-700#C47509
  • yellow-800#854F05
  • yellow-900#5C390F
  • yellow-950#1F180B

Type

  • font-family-display'Acme Gothic Condensed', sans-serif
  • font-family-tight'Inter Tight', 'Inter', ui-sans-serif, system-ui
  • font-family-sans'Inter', ui-sans-serif, system-ui
  • font-family-mono'Overpass Mono', ui-monospace

Miles design system

Figma

The tokens the app is built from, published in the MILES-UI Figma so engineering can pull styles and components straight in.

Miles design tokens: colors in light and dark, primitives, spacing, border radius and the type scale.

Miles design tokens: colors in light and dark, primitives, spacing, border radius and the type scale.

Open in Figma