> ## Documentation Index
> Fetch the complete documentation index at: https://greenteagentic.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Design System

> Matcha-dark, terminal-tinged, calm.

## Palette

Defined in `src/styles.css` using OKLCH. Never hardcode hex in components — use semantic tokens.

| Token                                | Role                           |
| ------------------------------------ | ------------------------------ |
| `--background`                       | App background (matcha-dark)   |
| `--foreground`                       | Default text                   |
| `--primary` / `--primary-foreground` | Jade green CTA                 |
| `--jade`                             | Brand accent                   |
| `--terminal`                         | Terminal-green for mono labels |
| `--border`                           | Subtle dividers                |
| `--input`                            | Form fields                    |

## Typography

* **Display:** serif for headings and gradient text
* **Mono:** for agent labels, stage names, terminal prompts (`$ brew.new()`)
* **Body:** sans-serif

## Motion

* `steam` — slow rising blur for background ambience
* `flicker` — subtle terminal glow
* `glow-soft`, `glow-terminal` — utility classes for selected/active surfaces

## Surfaces

* `.panel` — bordered card
* `.panel-hover` — interactive hover state
* `.gradient-text` — jade → terminal gradient on display headings

## Rules

1. **Tokens only** — `bg-primary`, not `bg-[#1f7a4d]`
2. **Dark by default** — there is no light mode
3. **Calm motion** — animations should feel like steam, never like notifications