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

# Styling

> Load the @ekanos/ui token layer and use semantic Tailwind tokens so your components match Ekanos.

`@ekanos/ui` components emit Tailwind class strings bound to Ekanos's semantic tokens (`bg-primary`, `text-muted-foreground`, `border-border`, `shadow-card`, …). Something has to define those classes, and `@ekanos/ui` ships that CSS. Pick **one** of the two paths below — loading both gives you two copies of every utility. The [UI styling](/ui/styling) page has the full detail.

## Without Tailwind: the compiled stylesheet

```ts theme={null}
import '@ekanos/ui/styles.css';
```

Self-contained: Tailwind's Preflight, the design tokens for light and dark, and every utility class the `@ekanos/ui` components emit, pre-compiled. It is **not** a copy of Tailwind — a class you write in your own markup (`p-8`, `grid-cols-3`) has no rule in it and does nothing. Preflight is a global reset, so it also normalizes margins, headings, and form controls across the page.

## With Tailwind v4: the preset

```css theme={null}
@import 'tailwindcss';
@import '@ekanos/ui/theme.css';
```

This registers the token map, the token values for both themes, the base rules, the `dark:` variant, and an `@source` pointing at the package's bundles, so your own class strings get the Ekanos tokens too. The pieces are also published separately as `@ekanos/ui/tokens.css` (custom properties only) and `@ekanos/ui/base.css` (base rules).

## Semantic color tokens

Use semantic classes rather than hex/rgb/oklch values or raw Tailwind palette classes (`bg-white`, `text-gray-500`, `bg-blue-500`), so your UI follows the theme and dark mode:

| Semantic class | Usage |
| - | - |
| `bg-background` / `text-foreground` | Page backgrounds, primary text |
| `bg-card` / `text-card-foreground` | Card surfaces |
| `bg-primary` / `text-primary-foreground` | Primary actions |
| `bg-secondary` / `text-secondary-foreground` | Secondary actions |
| `bg-muted` / `text-muted-foreground` | Subdued backgrounds, secondary text |
| `bg-accent` / `text-accent-foreground` | Highlighted items, hover states |
| `bg-destructive` / `text-destructive-foreground` | Danger actions, error states |
| `border-border` | Default borders |
| `border-input` | Form input borders |
| `ring-ring` | Focus rings |

### Elevation shadows

On the Tailwind path, `theme.css` registers Ekanos's elevation scale, which carries depth in place of borders:

```tsx theme={null}
<div className="shadow-card">Card</div>
<div className="shadow-widget">Widget</div>
<div className="shadow-popover">Popover</div>
<div className="shadow-modal">Modal</div>
<div className="shadow-overlay">Overlay</div>
```

On the compiled-stylesheet path, only the utilities the `@ekanos/ui` components themselves emit exist.

## Dark mode

Tokens resolve in this order:

| State | Result |
| - | - |
| nothing set | light |
| `@media (prefers-color-scheme: dark)` | dark |
| `.dark` or `[data-theme='dark']` ancestor | dark, beating the media query |
| `.light` or `[data-theme='light']` on `:root` | light, beating the media query |

The stylesheet does not repaint your page on its own. To adopt Ekanos's page surface (so dark mode doesn't leave dark cards on a white page), add the opt-in class:

```html theme={null}
<body class="ekanos-root"></body>
```

## Fonts

Ekanos pairs **Figtree** (body, `--font-sans`) with **Bricolage Grotesque** (headings, `--font-heading`). `@ekanos/ui` only names them, followed by a system fallback stack — no webfont is bundled or fetched. For typographic parity, load them yourself:

```html theme={null}
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Figtree:wght@300..700&family=Bricolage+Grotesque:wght@200..800&display=swap"
/>
```

## Icons

`Icon` from `@ekanos/ui/icon` renders Font Awesome markup, and `@ekanos/ui` ships **no icon font** — you must load Font Awesome yourself (Pro if you hold a licence, otherwise Free):

```tsx theme={null}
import { Icon } from '@ekanos/ui/icon';

<Icon name="fa-light fa-credit-card" className="h-6 w-6" aria-hidden />;
```

* **No Font Awesome loaded at all** — the CSS draws a `□` placeholder, so a missing icon font looks different from broken code.
* **Font Awesome loaded but the glyph is missing** (for example a Pro-only name on Free) — the icon renders a question-mark fallback, and in development `Icon` warns once per missing name.

Font Awesome Free has no `fa-light` family. See [Fonts and icons](/ui/fonts-and-icons) for forcing a family Free has, and how icons are sized.

## Component library

Use `@ekanos/ui` components instead of building from scratch:

```tsx theme={null}
import { Button } from '@ekanos/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@ekanos/ui/card';
import { Input } from '@ekanos/ui/input';

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>
    <Input placeholder="…" />
    <Button>Submit</Button>
  </CardContent>
</Card>;
```

See [UI components](/ui/components) for the full list.

## Next steps

* [Widgets](/sdk/surfaces/widgets) — the `Widget.*` compound API
* [UI overview](/ui/overview) — the `@ekanos/ui` package


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.