Create a Design System

Create a design system by documenting the small decisions that repeat: colours, type, spacing, radius, shadows, buttons, cards and reusable section patterns.

Start workflow View checklist Open ElementYard

Problem statement

What this workflow solves

Target outcome

A lightweight design system that helps developers and designers build consistently without inventing styles on every page.

Interactive workflow

Work through Design system

Track each step, focus the current task and copy a starter outline for your project notes or implementation plan.

0% complete

Start with core tokensTokens make repeated decisions explicit before they become inconsistent CSS values.Standardise typographyReadable type scale and consistent heading rhythm make the interface feel calmer.Define reusable componentsStart with components that appear everywhere before documenting rare patterns.

Focus step

Start with core tokens

Tokens make repeated decisions explicit before they become inconsistent CSS values.

Define colour roles instead of only colour names.
Choose spacing steps used by sections, cards and controls.
Document radius, shadow and border rules.

Starter codeCopy and adapt this outline for the workflow.

<section aria-labelledby="create-design-system-title">
  <p>Design system</p>
  <h2 id="create-design-system-title">Create a Design System</h2>
  <p>A lightweight design system that helps developers and designers build consistently without inventing styles on every page.</p>
  <ol>
    <li>Start with core tokens</li>
    <li>Standardise typography</li>
    <li>Define reusable components</li>
  </ol>
</section>

Best practices

Work this way

These are the patterns that keep the workflow practical, accessible and easier to maintain.

Define colour roles instead of only colour names.

Choose heading, body and small text sizes.

Document buttons, badges, cards, forms and navbars first.

Common mistakes

Avoid these traps

Adding sections because they look impressive instead of helping a decision.

Using inconsistent spacing, button styles or card treatments.

Treating mobile layout as a smaller desktop layout.

Checklist

Step-by-step workflow

Follow the steps in order, then use the resource sections when you need a tool, reference or UI pattern.

Start with core tokens

Tokens make repeated decisions explicit before they become inconsistent CSS values.

Define colour roles instead of only colour names.
Choose spacing steps used by sections, cards and controls.
Document radius, shadow and border rules.

Standardise typography

Readable type scale and consistent heading rhythm make the interface feel calmer.

Choose heading, body and small text sizes.
Set line-height rules for dense and long-form text.
Avoid viewport-based font scaling that becomes unpredictable.

Define reusable components

Start with components that appear everywhere before documenting rare patterns.

Document buttons, badges, cards, forms and navbars first.
Include empty, hover, focus, disabled and error states where relevant.
Keep examples realistic enough to copy into product work.

Related resources

Tools, cheatsheets and components

Use these linked DevKitYard sections when the guide moves from planning to doing.

Related Cheatsheets

CSS CheatsheetReview variables, spacing, shadows and responsive CSS.Tailwind CheatsheetMap design decisions into utility classes.

Related Components

Button ComponentsDefine action hierarchy.Card ComponentsStandardise repeated content groups.Badge ComponentsDocument status and metadata labels.

ElementYard CTA

Prototype system components in ElementYard

Use ElementYard to visually test component patterns before turning them into system guidelines.

Open ElementYard

FAQ

Design system questions

Does a small project need a design system?

It may only need a lightweight one. Documenting colours, type, spacing and common components can still prevent visual drift.

Should tokens come before components?

Usually yes. Tokens give components a shared foundation, but you can refine tokens as real components reveal gaps.

Next steps

Keep moving

Design Token GeneratorGenerate token structures for colours, spacing and UI values.CSS CheatsheetReview variables, spacing, shadows and responsive CSS.Button ComponentsDefine action hierarchy.Prototype system components in ElementYardUse ElementYard to visually test component patterns before turning them into system guidelines.