@adam-milo/tokens

Design tokens for the Adam Milo Design System. The single source of truth for colors, overlays, gradients, shadows, typography, spacing, and radius — shipped as CSS custom properties plus a Tailwind v4 theme bridge.

Installation

npm install @adam-milo/tokens

Usage

Tailwind v4 (recommended)

Import the theme bridge in your main CSS entry. It pulls in tokens.css and registers every token as a first-class Tailwind utility (bg-clickable, text-18, leading-20, rounded-12, shadow-card, font-sans, …), and sets Almoni as the default font.

@import '@adam-milo/tokens/theme.css';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

Plain CSS variables

If you only need the raw variables (no Tailwind), import tokens.css:

@import '@adam-milo/tokens/tokens.css';

.my-component {
  color: var(--color-text);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

What's inside

• tokens.css — raw :root CSS variables. The source of truth for every value.
• theme.css — Tailwind v4 @theme layer mapping the tokens onto utilities (@imports tokens.css).

Token groups

• Colors — brand/semantic, greens, teals, oranges, reds, indigos/violets, navies, neutrals
• Overlays — alpha colors (--color-overlay-*)
• Gradients — --gradient-*
• Shadows — --shadow-* (elevation; colors reference overlay tokens)
• Typography — font-size (--text-*), line-height (--leading-*), letter-spacing (--tracking-*), font family
• Spacing / Radius / Border width / Max width

All sizing values are in rem (the only px is --radius-pill: 9999px).

License

MIT