Creating a custom theme

A custom theme is a config object. Start from the questions every design system must answer.

1. Palette#

Pick a base hue and generate an 11-step ramp (or reuse one of the 22 built-ins). Brand colors slot in as extra palettes:

theme: {
  extend: {
    colors: {
      brand: {
        50: '#f5f3ff', 500: '#6d28d9', 900: '#312e81',
      },
    },
  },
}

2. Typography, radii, shadows#

Extend fontFamily, borderRadius, boxShadow the same way — every key deep-merges (configuration/extend|extend vs override).

3. Ship it as a preset#

// my-company-theme.js
export const myCompanyTheme = {
  theme: { /* …all tokens… */ },
};

// consumer
import myCompanyTheme from './my-company-theme.js';
export default { presets: [myCompanyTheme] };