What is a DESIGN.md file?

A plain-text description of your design system: tokens (colours, type, radius, spacing) in YAML frontmatter followed by written guidance. Put it in your project or paste it into an AI design or coding assistant so the screens it generates stay on-brand.

What are colour roles?

Semantic names such as primary, on-primary and surface-container. Instead of using raw hex values, components use roles, so switching to dark mode or rebranding means changing tokens, not every component.

Does it work with shadcn/ui and Tailwind CSS v4?

Yes. The shadcn export replaces the :root and .dark blocks in globals.css, and the Tailwind export is an @theme block that creates utilities like bg-primary and text-on-surface.

Are the colours accessible?

Every fill and its matching on-colour are chosen to reach at least 4.5:1 contrast (WCAG AA for normal text) in both light and dark schemes.

ThemeT3 · Design

Website Theme & DESIGN.md Generator

Turn two brand colours and a font pairing into a full design system and DESIGN.md.

100% free
No sign-up
Runs in your browser

Your brand

Start from a preset

Brand name

Primary colour

Accent colour

Neutral tone

Font pairing (Google Fonts)

Feels technical, confident and slightly quirky.

Corner radius

Spacing

Live preview

New for 2026

Grow faster with a brand people trust.

Every colour, font, radius and spacing value on this preview comes straight from your generated tokens.

Get started See pricingBook a call

Growth planPOPULAR

SEO, ads and content in one monthly plan.

Weekly reports
Dedicated manager

Get the newsletterEmail you@company.com

Please enter a valid email.

Colour roles (light)

primary#6d28d9

primary-container#eae6ff

secondary#f97316

secondary-container#ffe3d5

tertiary#aa126b

tertiary-container#ffe0ec

error#dc2626

error-container#ffe2de

surface#f7faff

surface-variant#dfe9f7

inverse-surface#22272d

surface-container-highest#dde3ec

Bottom row: surface containers, lowest → highest. Every fill + “on” pair meets WCAG AA (4.5:1).

Export

DESIGN.md

---
name: Acme Studio
colors:
  primary: '#6d28d9'
  on-primary: '#fcfbff'
  primary-container: '#eae6ff'
  on-primary-container: '#331767'
  secondary: '#f97316'
  on-secondary: '#21120a'
  secondary-container: '#ffe3d5'
  on-secondary-container: '#4d1e00'
  tertiary: '#aa126b'
  on-tertiary: '#fffafc'
  tertiary-container: '#ffe0ec'
  on-tertiary-container: '#570034'
  error: '#dc2626'
  on-error: '#fffbfa'
  error-container: '#ffe2de'
  on-error-container: '#5d0004'
  background: '#f7faff'
  on-background: '#14191f'
  surface: '#f7faff'
  on-surface: '#14191f'
  surface-variant: '#dfe9f7'
  on-surface-variant: '#4e5660'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#eff6ff'
  surface-container: '#eaf1fa'
  surface-container-high: '#e4eaf3'
  surface-container-highest: '#dde3ec'
  outline: '#79818c'
  outline-variant: '#ccd5e1'
  inverse-surface: '#22272d'
  inverse-on-surface: '#ecf2fb'
  inverse-primary: '#b4a0ff'
typography:
  display-lg:
    fontFamily: Space Grotesk
    fontSize: 56px
    fontWeight: 700
    lineHeight: 64px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Space Grotesk
    fontSize: 40px
    fontWeight: 700
    lineHeight: 48px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Space Grotesk
    fontSize: 32px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Space Grotesk
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
  title-lg:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
  title-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  label-lg:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: 0.01em
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0.04em
rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  "2xl": 48px
  "3xl": 64px
---

# Acme Studio Design System

## Brand & Style

Acme Studio has technical, confident and slightly quirky typography, balanced, friendly rounding and comfortable, breathable layouts. The interface should feel consistent and purposeful: one clear primary action per view, plenty of contrast for text, and colour used to guide attention rather than decorate. The default scheme is light; a matching dark scheme is defined below.

- Voice: clear, direct and helpful. Prefer short headlines and concrete button labels ("Get a quote", not "Submit").
- Primary colour `#6d28d9` carries the brand; accent `#f97316` is for emphasis only — never both on the same button.
- Imagery: real photos or simple illustrations that use the palette; avoid heavy gradients over text.

## Colors

All colours are semantic roles. Always pair a fill with its matching `on-*` role for text and icons — every pair meets WCAG AA (4.5:1) for normal text.

- **primary** `#6d28d9` — Main brand colour: primary buttons, links, active states and key highlights.
- **on-primary** `#fcfbff` — Text and icons placed on primary.
- **primary-container** `#eae6ff` — Soft brand fills: selected chips, info banners, tonal buttons.
- **secondary** `#f97316` — Accent colour for secondary actions, badges and illustrations.
- **tertiary** `#aa126b` — Supporting hue for charts, tags and occasional contrast.
- **error** `#dc2626` — Errors, destructive actions and validation messages.
- **background** `#f7faff` — Page background.
- **surface** `#f7faff` — Default surface for sections.
- **on-surface** `#14191f` — Primary text colour.
- **on-surface-variant** `#4e5660` — Secondary text, captions and placeholder text.
- **surface-container-lowest** `#ffffff` — Cards and inputs that sit on the page.
- **surface-container** `#eaf1fa` — Grouped content, table headers, sidebars.
- **surface-container-high** `#e4eaf3` — Menus, popovers and hover fills.
- **outline** `#79818c` — Input borders and focus-independent strokes.
- **outline-variant** `#ccd5e1` — Hairline dividers and card borders.

### Dark scheme

| Role | Value |
| --- | --- |
| primary | `#b4a0ff` |
| on-primary | `#161322` |
| primary-container | `#3b2b66` |
| on-primary-container | `#e5e0ff` |
| secondary | `#fd9056` |
| on-secondary | `#21120a` |
| secondary-container | `#5d2500` |
| on-secondary-container | `#ffdccb` |
| tertiary | `#f886ba` |
| on-tertiary | `#211017` |
| tertiary-container | `#5c1d3d` |
| on-tertiary-container | `#ffd8e7` |
| error | `#ff8b7e` |
| on-error | `#22110e` |
| error-container | `#621d19` |
| on-error-container | `#ffdbd6` |
| background | `#0c1016` |
| on-background | `#e2e8f1` |
| surface | `#0c1016` |
| on-surface | `#e2e8f1` |
| surface-variant | `#272e39` |
| on-surface-variant | `#b3bbc7` |
| surface-container-lowest | `#05070d` |
| surface-container-low | `#12161c` |
| surface-container | `#161b21` |
| surface-container-high | `#20242b` |
| surface-container-highest | `#292e35` |
| outline | `#7f8792` |
| outline-variant | `#373e48` |
| inverse-surface | `#e2e8f1` |
| inverse-on-surface | `#1d2228` |
| inverse-primary | `#6d28d9` |

## Typography

Headings use **Space Grotesk** and body text uses **Inter** (both free on Google Fonts). Load them with:

```html
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
```

- `display-lg` for landing-page heroes only; `headline-lg`/`headline-md` for page and section titles; `headline-sm` for card titles.
- `title-*` for sub-headings and emphasised UI text; `body-md` is the default paragraph size; `body-sm` for captions and helper text.
- `label-*` for buttons, tabs, badges and form labels. Keep line length to 60–75 characters for body copy.

## Layout & Spacing

Spacing follows a comfortable scale: xs 4px, sm 8px, md 16px, lg 24px, xl 32px, 2xl 48px, 3xl 64px.

- Content max width 1200px, centred, with `lg` side padding on mobile and `xl` on desktop.
- 12-column grid on desktop, 4 columns on mobile; gutters use `lg`.
- Vertical rhythm: `3xl` between page sections, `xl` between blocks, `md` inside cards, `sm` between a label and its field.
- Mobile first: every layout must work at 360px wide without horizontal scrolling.

## Elevation & Depth

Depth comes mainly from tonal surfaces, not heavy shadows. Stack surfaces from `surface` → `surface-container-low` → `surface-container` → `surface-container-high` as elements get closer to the user.

- Level 0: page (`background`), no shadow.
- Level 1: cards (`surface-container-lowest`) with a 1px `outline-variant` border and an optional subtle shadow `0 1px 2px rgb(0 0 0 / 0.06)`.
- Level 2: menus, popovers and sticky headers (`surface-container-high`) with `0 8px 24px -8px rgb(0 0 0 / 0.18)`.
- Level 3: dialogs, with a scrim of `inverse-surface` at 40% opacity behind them.

## Shapes

Corner radius tokens: none 0px, sm 4px, md 8px, lg 12px, xl 16px, full 9999px.

- Buttons, inputs and chips use `rounded.md`.
- Cards and panels use `rounded.lg`; dialogs and large media use `rounded.xl`.
- Avatars and status dots use `rounded.full`. Keep radii consistent — never mix sharp and round corners in one component.

## Components

- **Primary button**: `primary` fill, `on-primary` text, `label-lg`, height 44px, horizontal padding `lg`, `rounded.md`. Hover darkens 8%; focus shows a 2px `primary` ring with 2px offset.
- **Secondary button**: `secondary-container` fill with `on-secondary-container` text. **Outline button**: transparent with 1px `outline` border and `primary` text.
- **Input**: `surface-container-lowest` fill, 1px `outline` border, `body-md`, height 44px, `rounded.md`; focus border `primary`; errors use `error` border and helper text.
- **Card**: `surface-container-lowest`, 1px `outline-variant` border, padding `lg`, `rounded.lg`, title in `headline-sm`, body in `body-md` `on-surface-variant`.
- **Badge / chip**: `primary-container` fill, `on-primary-container` text, `label-md`, padding `xs` × `sm`.
- **Navigation bar**: `surface` background with an `outline-variant` bottom border; links in `label-lg` `on-surface-variant`, active link `primary`.
- **Alerts**: tonal container fills (`error-container`, `primary-container`) with the matching `on-*` text and a leading icon.

DESIGN.md = design tokens (YAML frontmatter) + plain-English rules. Put it in your project root or paste it into an AI design or coding assistant so every screen it generates follows your brand.

Generated in your browser — nothing is uploaded.

How it works

How to use ThemeT3

Pick a preset or enter your brand name, primary and accent colours, neutral tone and font pairing.

Adjust corner radius and spacing, and flip the preview between light and dark.

Export DESIGN.md, CSS variables, Tailwind v4 or shadcn/ui variables — or download the .md file.

About

About this tool

ThemeT3 turns a primary colour, an accent, a neutral tone and a Google Fonts pairing into a complete, consistent design system. It generates Material 3-style colour roles for light and dark mode — primary, on-primary, containers, surfaces, outlines and error colours — and checks that every text-on-fill pair meets WCAG AA contrast.

You also get a typography scale from display to label sizes, rounded-corner and spacing tokens, and a live landing-page preview (navigation, hero, buttons, card, input and badge) so you can judge the theme on a real layout before you commit.

Export it the way your team works: a DESIGN.md file (design tokens in YAML frontmatter plus plain-English rules for brand, colour, typography, layout, elevation, shapes and components) that AI design and coding assistants can follow, CSS custom properties, a Tailwind CSS v4 @theme block, or shadcn/ui variables in oklch. Everything is generated in your browser, so you can iterate as often as you like.

Frequently asked questions

Free proposal

Want a brand and website that look this good? We design and build it end-to-end.

No obligation. A real strategist replies within 24 hours.

Keep going

More free tools

All free tools

Colour Palette GeneratorPopularBuild on-brand colour palettes with harmonies, 50–950 shades and ready-to-paste code.Colour Picker & Contrast CheckerPick any colour, convert it to every format and check WCAG contrast instantly.PromptT3PopularWrite clear, structured prompts for ChatGPT, Claude and Gemini — with a quality score.Meta Tag GeneratorGenerate title, description, canonical, robots, Open Graph and X tags with a live preview.

Done-for-you

Let's design a brand people remember

Free tools show you the problem. The T3 team fixes it, with a clear plan and pricing up front.

See our services Run a free website audit