Tokens

Tokens defines how EnterUI handles design tokens published by froggdesign and consumed by every enterui component, including default structure, accessible states, and token-driven styling.

#Two layers

Two layers exist so apps can re-skin EnterUI without touching implementation classes or component source. Override a token once, and every state that reads it stays aligned.

#Categories

#Color

Color tokens establish hierarchy before component styling begins. Neutrals carry the page, surfaces, text, and borders. Green remains a small brand signal, not the default fill for the UI.

:root {
  --fd-color-brand-green: #5ec551;
  --fd-color-neutral-charcoal: #0f172a;
  --fd-color-neutral-blue-gray: #334155;
  --fd-color-neutral-almost-white: #f8fafc;
}

#Semantic color

Semantic tokens communicate state without competing with brand green. Each state has a strong value for edges/text and a soft value for quiet surfaces.

:root {
  --fd-success: #2f9e44;
  --fd-warning: #b7791f;
  --fd-error: #dc143c;
  --fd-info: #0e7490;
  --fd-ruby: #9b111e;
}

#Typography

Typography tokens keep documentation, product UI, and component examples on the same scale. Headings create structure, body copy explains, and label/caption sizes keep dense controls readable.

:root {
  --fd-font-size-body: 16px;
  --fd-font-size-body-small: 15px;
  --fd-font-size-label: 14px;
  --fd-font-size-caption: 13px;
}

#Spacing

Spacing uses a predictable 4px-based scale. Dense controls use smaller steps, while docs sections, cards, and product layouts use larger steps for rhythm and scanability.

:root {
  --fd-space-1: 4px;
  --fd-space-2: 8px;
  --fd-space-4: 16px;
  --fd-space-6: 24px;
  --fd-space-10: 40px;
}

#Radius

Radius tokens keep shapes consistent across controls, cards, dialogs, badges, and navigation. Use medium radius for product controls and larger radius only for larger surfaces.

:root {
  --fd-radius-sm: 6px;
  --fd-radius-md: 8px;
  --fd-radius-lg: 12px;
  --fd-radius-full: 999px;
}

#Shadow

Shadow tokens add depth only when a surface needs separation. Use subtle shadows for cards, stronger elevation for overlays, and colored button shadow only where interaction needs emphasis.

:root {
  --fd-shadow-card-soft: 0 10px 30px -24px rgba(15, 23, 42, 0.35);
  --fd-shadow-card-elevated: 0 24px 60px -40px rgba(15, 23, 42, 0.45);
  --fd-shadow-modal: 0 32px 80px -42px rgba(15, 23, 42, 0.5);
}

#Glass surface

Glass and surface tokens are for restrained depth in navbars, popovers, command palettes, and docs chrome. Use them sparingly so content remains the focus.

:root {
  --fd-glass-surface-strong: rgba(255, 255, 255, 0.86);
  --fd-glass-border-soft: rgba(148, 163, 184, 0.28);
  --fd-glass-blur-sm: 12px;
}

#Theme defaults

Every variable below is set in @froggdesign/theme/styles.css. Apps can import the file once and consume the tokens everywhere.

:root {
  --fd-primary: #334155;
  --fd-background: #f8fafc;
  --fd-foreground: #0f172a;
  --fd-error: #dc143c;
  --fd-ruby: #9b111e;
}

#Override strategy

Re-define variables on :root or any scoped selector after the theme import. Components inside that scope inherit the new values automatically.

@import "@froggdesign/theme/styles.css";
@import "@froggdesign/enter-ui-react/styles.css";

:root {
  --fd-primary: #1f2937;
  --fd-radius-md: 8px;
}

[data-theme="dark"] {
  --fd-primary: #91d851;
}

For local rebrands, scope overrides to a className instead of :root:

.brand-billing {
  --eui-color-brand-green: #6366f1;
  --eui-error: #f97316;
}

#Principles

• Neutral first. Charcoal and slate carry the interface. Green is a signal, not a fill.
• Green as signal. --fd-color-brand-green appears for selected states, primary actions, and successful moments. It never dominates a page.
• Crimson and ruby for error. --fd-error drives invalid borders and focus rings; --fd-ruby handles destructive actions like Delete.
• Token-driven styling. Components never hard-code colors or sizes. The token layer is the source of truth across light, dark, and bespoke product themes.

#Next steps

Move on to the Theming guide for the complete override reference, or read the Styling Philosophy for how the token system fits together with className and CSS Modules.