Foundation

The foundation layer is the design system's single source of truth. It defines all visual primitives that components are built on.

Token anatomy

All tokens follow a naming convention:

--mk-{category}-{scale/variant}

For example:

--mk-color-primary-600 — Primary blue at shade 600
--mk-spacing-4 — 16px spacing unit
--mk-radius-lg — Large border radius (8px)
--mk-font-size-base — Base font size (16px)

Using tokens in CSS

.my-component {
  background-color: var(--mk-bg-surface);
  padding: var(--mk-spacing-4) var(--mk-spacing-6);
  border-radius: var(--mk-radius-lg);
  border: 1px solid var(--mk-border-default);
  box-shadow: var(--mk-shadow-sm);
}

Using tokens in a new component

When Claude creates a new component, it should always reference tokens:

// ✅ Correct — uses token variables
<div style={{ padding: 'var(--mk-spacing-4)', borderRadius: 'var(--mk-radius-lg)' }}>
 
// ❌ Wrong — hardcoded values
<div style={{ padding: '16px', borderRadius: '8px' }}>

Explore each section to see the full token catalog.

Introduction Colors