Foundation

The design tokens every component and theme is built from. Every token follows one of two naming conventions:

--eun-[content]-[variant]      /* e.g. --eun-space-m, --eun-fontSize-s */
--eun-color-[group]-[shade]    /* e.g. --eun-color-primary-500 */

Nothing here is a fixed value baked into a component: every size, color, radius, and shadow is a CSS custom property, switchable at runtime (see Theming).

Every size token above (space, radius, border width, height, font size, ...) is expressed in rem, which is always relative to the font-size set on <html> rather than any nearby parent. This site never overrides that value, so every measurement shown throughout the documentation assumes the browser default: 1rem = 16px. An app that sets its own font-size on <html> (directly, or through a CSS reset using %) makes every Eunomia component inherit that scale instead: components render uniformly smaller or larger than what's documented here, not broken, just scaled.

Import

These tokens only exist once a theme stylesheet is loaded; without one, components fall back to the same default values shown throughout this documentation site. Include one of the 7 prebuilt palettes and add its class to your app root:

<body class="eunomia-theme eunomia-violet-theme">
  <app-root></app-root>
</body>

How you get that stylesheet loaded depends on how your build handles CSS/Sass imports:

<link
  rel="stylesheet"
  href="node_modules/@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss"
/>

Works anywhere a plain <link> tag does. If your setup can't serve a .scss file directly (no build step compiling it), run it through Sass first and link the compiled .css output instead.

import "@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss";

Needs a bundler that already handles CSS/Sass imports (Vite, webpack with sass-loader, etc.) — the import itself has no exports, it's only there for the side effect of injecting the stylesheet.

// index.js / main.jsx, once, before rendering
import "@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss";

Same side-effect import, done once at the entry point (Create React App, Vite, or any webpack-based setup already resolve .scss imports).

// app/layout.tsx (App Router) or pages/_app.tsx (Pages Router)
import "@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss";

Next.js only allows global CSS/Sass imports in these two files (root layout or _app), not inside a regular component. Server or client component doesn't matter here since it's a plain stylesheet import.

// main.js, once, before mounting the app
import "@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss";

Vue CLI and Vite both resolve .scss imports out of the box (Vite needs the sass package installed as a dev dependency).

{
  "styles": [
    "node_modules/@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss",
    "src/styles.scss"
  ]
}

Angular CLI compiles Sass by default, so add the theme file to the styles array in angular.json's relevant build target instead of importing it from TypeScript.

For dark mode, use the eunomia-violet-theme--dark class instead (same import, just the class that follows it). Full detail (the 8 palettes, and generating a theme from your own two brand colors) is in Get started and Prebuilt themes.

Tokens

Space, radius, border, height, shadow, grid utilities

Typography

Font family, sizes, weights

Color

Grey scale, decorative, semantic states, neutral tokens

Tokens

Spacing, radius, border width, height, shadow, and grid layout utilities, identical across every brand and mode.

Category	Steps	Range
Space	`xxs` → `xxl`, 7 steps	`0.1rem` → `5rem`
Radius	`s` → `xl`, 4 steps	`5px` → `999px` (pill)
Border width	`s` → `l`, 3 steps	`1px` → `2px`
Height	`xxs` → `xxl`, 7 steps	`8px` → `56px`
Shadow	`xs` → `xl`, 5 steps	subtle → modal-level
Grid utilities	7 layout classes	`.eun-grid--halves`, `--2x2`, ...

See Tokens overview for the full detail on every value.

Typography

Category	Detail
Font family	Mulish, via `--eun-font-family`
Sizes	`xxs` → `xxxxl`, 9 steps
Weights	light (300) / medium (500) / bold (700)

See Typography overview for live specimens of every step.

Color

Category	Detail
Grey scale	10 steps, shared by every brand, inverts in dark mode
Decorative	6 hues × 7 steps, brand-independent, inverts in dark mode
Semantic states	success / warning / critical / info, light + dark
Neutral tokens	surface, text, border: named aliases onto the grey scale

See Color overview for every swatch on one page, or Theming: Prebuilt themes for the brand-specific primary/secondary palettes.

Foundation

Import

Tokens

Typography

Color

See also