Website Theme & DESIGN.md Generator

---
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.