Start a design system from a reference

A single good reference can become a complete first draft: colours, type, shapes, components and example screens. Colours are measured from the pixels; a model reads type, shapes, components and screens, and anything it isn't sure of is marked for you to check.

Build the system from a reference

1. Choose the reference

   Select Start from a reference in the System Foundations panel, or Start a system from a reference in Board's Add reference menu.

2. Check what was read

   M1rror shows what it found. Findings it isn't sure of say Needs a quick look. Text colours are adjusted to reach a 4.5:1 contrast ratio, the WCAG minimum for normal text; choose Keep my original if you'd rather keep the measured value.

3. Decide what to do with it

   The summary is titled Here's your design system. From there you can:

   • Open your design system to keep editing it in System;
   • Preview the screens it produced;
   • Build the app or hand it to my coding agent, which walks through adding the draft to your project, sending it for review, approval, the build plan and the pull request.

Cost

Making a design system from a reference uses up to 6 usage units, or 1 unit when only colours are read. See usage units and credits.