Give your agenta DESIGN.md.

# Design system: Your brand

Exported from Xtractly.

## Rules for coding agents

- Use these tokens for every colour, font size and radius. Don't invent new hex values or Tailwind palette colours (no `blue-500`).
- Reference tokens as CSS variables (`var(--brand)`) or the matching Tailwind utilities if the project maps them.
- Primary actions use #5e6ad2 with #ffffff text.
- Text is #0f1011 on #ffffff.
- Set type in Inter; fall back to the system sans-serif stack.
- Corner radii come from the radius scale below; pick the nearest step rather than a new value.

## Colour

| Token | Value | Role | Uses on page |
| --- | --- | --- | --- |
| `--brand` | `#5e6ad2` | Primary — main actions, links, focus | — |
| `--background` | `#ffffff` | Page background | — |
| `--foreground` | `#0f1011` | Body text | — |
| `--surface` | `#f7f8f8` | Cards and raised surfaces | — |
| `--accent` | `#e8e9fb` | Accent — highlights, badges, emphasis | — |

## Typography

Font family: **Inter**

| Token | Size |
| --- | --- |
| `--text-sm` | `0.875rem` |
| `--text-base` | `1rem` |
| `--text-2xl` | `1.5rem` |

## Radius

- `--radius-sm`: `6px`
- `--radius-md`: `10px`

## CSS

```css
/* Your brand */
:root {
  --brand: #5e6ad2;
  --background: #ffffff;
  --foreground: #0f1011;
  --surface: #f7f8f8;
  --accent: #e8e9fb;
  --radius-sm: 6px;
  --radius-md: 10px;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-2xl: 1.5rem;
  --font-sans: "Inter", sans-serif;
}
```