# Design Tokens

All component styling is driven by CSS custom properties. Override any token by injecting a stylesheet via your Limio settings to customise the look of every component.

[**View live token swatches in Storybook**](https://innovate42.github.io/innovate42-service-template/?path=/docs/design-tokens--docs)

## Colour Tokens

### Primary

| Token                     | Purpose                       | Default        |
| ------------------------- | ----------------------------- | -------------- |
| `--tw-primary`            | Buttons, links, active states | `210, 7%, 33%` |
| `--tw-primary-foreground` | Text on primary backgrounds   | `0, 0%, 100%`  |

### Surfaces

| Token               | Purpose                  | Default        |
| ------------------- | ------------------------ | -------------- |
| `--tw-surface-main` | Page/section backgrounds | `210, 7%, 95%` |
| `--tw-surface`      | Secondary surfaces       | `0, 11%, 98%`  |
| `--tw-background`   | Base layer, inputs       | `0 0% 100%`    |

### Cards

| Token                  | Purpose                   | Default        |
| ---------------------- | ------------------------- | -------------- |
| `--tw-card`            | Card background           | `0 0% 100%`    |
| `--tw-card-foreground` | Card text                 | `210, 8%, 19%` |
| `--tw-card-secondary`  | Alternate card background | `0, 11%, 98%`  |

### Text

| Token                 | Purpose             | Default        |
| --------------------- | ------------------- | -------------- |
| `--tw-text-primary`   | Primary text colour | `210, 8%, 19%` |
| `--tw-text-secondary` | Secondary text      | `210, 7%, 33%` |
| `--tw-text-tertiary`  | De-emphasised text  | `208, 7%, 46%` |
| `--tw-text-muted`     | Muted/disabled text | `208, 7%, 46%` |

### Form States

| Token                   | Purpose             | Default         |
| ----------------------- | ------------------- | --------------- |
| `--tw-form-focus`       | Focus ring colour   | `210, 79%, 46%` |
| `--tw-form-disabled`    | Disabled background | `0, 0%, 95%`    |
| `--tw-form-destructive` | Validation errors   | `0, 65%, 51%`   |
| `--tw-form-accent`      | Checkboxes, toggles | `210, 79%, 42%` |

### Semantic

| Token              | Purpose             | Default         |
| ------------------ | ------------------- | --------------- |
| `--tw-secondary`   | Secondary actions   | `210 40% 96.1%` |
| `--tw-destructive` | Destructive actions | `0 100% 50%`    |
| `--tw-border`      | Borders             | `210, 7%, 83%`  |
| `--tw-popover`     | Popover backgrounds | `0 0% 100%`     |

## Layout Tokens

| Token         | Purpose                       | Default  |
| ------------- | ----------------------------- | -------- |
| `--tw-radius` | Border radius (cards, inputs) | `0.5rem` |

## Typography

The `Text` component provides these variants:

| Variant     | Typical use            |
| ----------- | ---------------------- |
| `h1`        | Page titles            |
| `h2`        | Section headings       |
| `h3`        | Sub-section headings   |
| `body`      | General text (default) |
| `paragraph` | Long-form content      |
| `label`     | Form labels            |
| `legend`    | Fieldset legends       |

Sizes: `small`, `medium`, `large`. Weights: `default`, `emphasised`.

## Overriding tokens

Inject a stylesheet with your custom values:

```css
@layer base {
  :root {
    --tw-primary: 350, 80%, 45%;
    --tw-primary-foreground: 0, 0%, 100%;
    --tw-radius: 0.75rem;
    /* override only what you need -- everything else inherits from default */
  }
}
```

All values are in HSL format **without** the `hsl()` wrapper, so opacity modifiers work automatically (e.g. `hsl(var(--tw-primary) / 0.8)`).

See the [theming guide](/components/ui-primitives-and-theming/theming.md) for more details.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.limio.com/components/ui-primitives-and-theming/design-tokens.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.