Core Design System
The foundation layer: colour, type, spacing, components.
What this kit is
A complete design system board: the colour ramp with semantic status colours, a seven-step type scale with line heights written in, every button state, form controls, navigation patterns, the spacing scale and the UI element set. Everything is bound to variables, so retheming is one mode switch rather than a find-and-replace.
What you get
- Colour system: primary, secondary, accent, 7-step neutral ramp, 5 statuses
- Type scale from Display 1 (48/56) to Caption (12/16)
- Buttons, text fields, selects, checkboxes, radios, switches, tags
- Navigation, notifications, pagination and the spacing scale
- Every token bound to a Figma variable
- Components
- 88
- Variants
- 512
- Last updated
- 18 Oct 2026
What’s in the file
- core-design-system.fig
- The kit itself: 88 components and 512 variants in one Figma file, on labelled pages, with auto-layout and variables already wired.
- A token guide (PDF)
- How the variables are named, which modes exist, and how the components are meant to be put together.
- A changelog
- Every release dated, with what changed in it, so an update never arrives as a surprise.
- Font notes
- The file names the typefaces it uses and where to get them. Nothing is bundled that we cannot licence to you.
Downloads are in your account immediately after purchase.
Licence
You may
- Use it in unlimited commercial projects
- Use it in client work you bill for
- Modify, extend and recolour it freely
You may not
- Resell or redistribute the kit itself
- Put it in a competing kit or template marketplace
- Share the file outside your company
MTBAY Complete includes a team licence. Fourteen days to change your mind, no questions.
Read the full licence