# Theme definition

URL: /code/project-structure/theme-definition · Id: `convention:theme-definition`

> A Theme definition holds one Theme's design tokens, read by every Component that renders under it.

A [Theme](/business/nouns/theme) definition holds one Theme's design tokens, read by every [Component](/business/nouns/component) that renders under it.

| Property | Value |
| --- | --- |
| Path | `brand/theme.mdx` |
| Holds | [Theme](/business/nouns/theme) |
| Kind | file |
| Leaders | db-first, git-first |
| Team | [Product Team](/agents/product) |
| Written by | [Change.merge](/business/nouns/change/merge) |
| Compiled by | [SiteBuilder](/code/builders/site) |

### Example
`brand/theme.mdx` in a Startup repository.

```mdx title="brand/theme.mdx"
---
tokens:
  accent: { light: '#1f6f5c', dark: '#5fc2a7' }
  surface: { light: '#ffffff', dark: '#0f1412' }
  radius: { light: 6px, dark: 6px }
  font: { light: Inter, dark: Inter }
---
```

### Props
The frontmatter keys the file takes. The body is its prose.

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `tokens` | `json` | Yes | The design tokens, each with a `light` and a `dark` value. |

### Generates
[SiteBuilder](/code/builders/site) compiles it into these records, Verbs and routes.

| Kind | What |
| --- | --- |
| Records | [Theme](/business/nouns/theme) |
| Verbs | None. |
| Routes | None. |