# AdiaUI — Styles
## Load the rollup CSS (one file, not 125)
AdiaUI's CSS is a single pre-flattened rollup. Load it once — never
import individual component stylesheets in Figma Make.
```html
```
```js
// OR, if the npm package is installed in the kit:
import '@adia-ai/web-components/css/bundled'; // the rollup — every primitive
```
Add a shell's CSS only for the shell tier you render:
```html
```
**Do not** restyle AdiaUI internals with Tailwind or utility classes.
Components are styled with CSS `@scope` and design tokens; utility classes
on the host won't reach the internals and will fight the cascade. Change
appearance through **attributes** (`variant`, `size`, `gap`) and
**`--a-*` tokens** (see `tokens.md`).
## Theming — two independent axes
Set both on a wrapper element (or ``). They are separate attributes:
| Attribute | Controls | Values |
|---|---|---|
| `theme` | Named color palette | `default` `ocean` `forest` `sunset` `midnight` `lavender` `rose` `slate` |
| `data-scheme` | Light/dark mode | `light` `dark` `system` |
```html
```
```
Choosing:
├─ Want a brand color set? ........... theme="ocean" (or forest/sunset/…)
├─ Want light or dark? ............... data-scheme="light" | "dark"
└─ Want to follow the user's OS? ..... data-scheme="system" (default behavior)
```
Omitting `theme` uses `default`. Omitting `data-scheme` follows the
OS preference. Both cascade — set them once high in the tree.
## Layout — use the layout primitives, not fl/grid utility CSS
| Need | Use | Notes |
|---|---|---|
| Row of items | `` | horizontal flex; `gap` = token step 1–6 |
| Column of items | `` | vertical flex |
| Grid | `` | responsive grid |
| Page wrapper | `` | max-width + page inset |
| Overlapping layers | `` | **z-axis** (badge over avatar) — NOT vertical |
| Spacer / divider | `` | |
`gap` (and most spacing attrs) take a **token step 1–6**, not pixels —
they scale with density (see `tokens.md`). `gap="3"` ≈ 12px at default
density.
```html
…………
```
### Structural layout is the one inline-style exception
The "use attributes, not inline CSS" rule targets things a primitive or
attribute *already covers* — `gap`, spacing, alignment, sizing, color.
**Page-frame scaffolding has no primitive, so inline structural CSS is
fine there:** a full-height app frame, fixed-width sidebars, scroll
panes, and custom CSS grids.
```html
…use row-ui/col-ui/card-ui INSIDE…
```
The test: **does a primitive or attribute already do this?**
- Yes (`gap`, `size`, `variant`, `color`, row/col/grid/stack) → use it, never inline.
- No (`height:100vh`, `flex:1` scroll pane, `grid-template-columns:1fr auto 1fr`) → inline structural CSS is acceptable; still use tokens (`var(--a-*)`), not raw px/hex, and put the *content* inside primitives.
Keep structural inline CSS on the **frame** only — never reach for it to
restyle a component that has an attribute for the job.
## Typography
Use the heading tags + ``; the rollup CSS styles them. Prose
scale tokens (`--a-display`, `--a-title`, `--a-body`, `--a-caption`)
back the sizes. Don't set raw `font-size` — use the semantic element
(`