Design Tokens

Systemized scales powering theming, semantics, and components.

Root scales

Defined in src/scss/tokens/_root.scss. Raw, brand‑agnostic numeric/color/size values.

--color-primary-900: #34156f;
--color-primary-800: #4c1ea5;
--color-primary-700: #6125cf;
--color-primary-600: #7532f2;
--color-primary-500: #8746ff;
--color-primary-400: #a06dff;
--color-primary-300: #bf97ff;
--color-primary-200: #d5b9ff;
--color-primary-100: #eadbff;
--color-primary-50: #f5efff;

--color-neutral-900: #202539;
--color-neutral-800: #363b50;
--color-neutral-700: #4c536c;
--color-neutral-600: #616b87;
--color-neutral-500: #7b85a4;
--color-neutral-400: #9aa3bf;
--color-neutral-300: #bcc3d9;
--color-neutral-200: #d8dced;
--color-neutral-100: #eceef6;
--color-neutral-50: #f6f7fb;

/* Success */
--color-success-700: #0a6e45;
--color-success-600: #096642;
--color-success-500: #0d8052;
--color-success-400: #20c38f;
--color-success-100: #e8fff4;
/* Warning */
--color-warning-700: #7a4b10;
--color-warning-600: #cc7f19;
--color-warning-500: #ffa321;
--color-warning-400: #ffc247;
--color-warning-100: #fff3d8;
/* Error */
--color-error-700: #8a1a36;
--color-error-600: #b02246;
--color-error-500: #d02b54;
--color-error-400: #ff6b87;
--color-error-100: #ffe5ea;
/* Info */
--color-info-700: #006fa8;
--color-info-600: #0098e0;
--color-info-500: #1cb8ff;
--color-info-400: #52d0ff;
--color-info-100: #e6f7ff;

--font-size-xs: 0.75rem;
--font-size-s: 0.875rem;
--font-size-m: 1rem;
--font-size-l: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;

--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;

--space-2xs: .25rem; /* 4px */
--space-xs: .5rem; /* 8px */
--space-s: .75rem; /* 12px */
--space-m: 1rem; /* 16px */
--space-l: 1.25rem; /* 20px */
--space-xl: 1.5rem; /* 24px */
--space-2xl: 2rem; /* 32px */
--space-3xl: 2.5rem; /* 40px */
--space-4xl: 3rem; /* 48px */

--radius-s: .25rem;
--radius-m: .375rem;
--radius-l: .5rem;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--radius-full: 12.5rem; /* pill */

--border-width-thin: .0625rem;
--border-width-medium: .125rem;
--border-width-thick: .25rem;

--shadow-xs: 0 1px 2px 0 rgba(0,0,0,.05);
--shadow-s: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
--shadow-m: 0 4px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
--shadow-l: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);

Dark theme overrides live under [data-theme="dark"] in _root.scss.

Semantic tokens

Defined in src/scss/tokens/_semantic.scss. Mapping intent (text, surface, border, icon) to raw scales.

/* Text */
--color-text-white: var(--color-white);
--color-text-neutral-600: var(--color-neutral-600);
--color-text-neutral-700: var(--color-neutral-700);
--color-text-neutral-800: var(--color-neutral-800);
--color-text-neutral-900: var(--color-neutral-900);
--color-text-primary-700: var(--color-primary-700);
--color-text-success-700: var(--color-success-700);
--color-text-warning-700: var(--color-warning-700);
--color-text-error-700: var(--color-error-700);
--color-text-info-700: var(--color-info-700);
/* Surfaces */
--color-surface-white: var(--color-white);
--color-surface-neutral-50: var(--color-neutral-50);
--color-surface-neutral-100: var(--color-neutral-100);
--color-surface-neutral-300: var(--color-neutral-300);
--color-surface-primary-50: var(--color-primary-50);
--color-surface-primary-600: var(--color-primary-600);
--color-surface-primary-700: var(--color-primary-700);
--color-surface-primary-800: var(--color-primary-800);
--color-surface-success-100: var(--color-success-100);
--color-surface-success-500: var(--color-success-500);
--color-surface-success-600: var(--color-success-600);
--color-surface-warning-100: var(--color-warning-100);
--color-surface-error-100: var(--color-error-100);
--color-surface-error-500: var(--color-error-500);
--color-surface-error-600: var(--color-error-600);
/* Borders */
--color-border-neutral-200: var(--color-neutral-200);
--color-border-neutral-300: var(--color-neutral-300);
--color-border-primary-500: var(--color-primary-500);
--color-border-primary-700: var(--color-primary-700);
--color-border-success-500: var(--color-success-500);
--color-border-warning-500: var(--color-warning-500);
--color-border-info-500: var(--color-info-500);
--color-border-error-500: var(--color-error-500);
/* Icons */
--color-icon-white: var(--color-white);
--color-icon-neutral-900: var(--color-neutral-900);
--color-icon-primary-700: var(--color-primary-700);
--color-icon-primary-800: var(--color-primary-800);
/* Spacing shorthands */
--padding-inline-2xs .. --padding-inline-xl
--padding-block-2xs .. --padding-block-xl

Tip: Keep semantic tokens meaningful and channel‑agnostic (avoid brand names).

Component tokens

Defined in src/scss/tokens/_components.scss. Mapping component anatomy to semantic tokens.

/* Alerts */
--color-alert-bg-info: var(--color-surface-info-100);
--color-alert-border-info: var(--color-border-info-500);
--color-alert-text-info: var(--color-text-info-600);
/* Badges */
--color-badge-bg-success: var(--color-surface-success-100);
--color-badge-text-success: var(--color-text-success-600);
/* Buttons */
--color-btn-filled-bg: var(--color-surface-primary-700);
--color-btn-filled-bg-hover: var(--color-surface-primary-800);
--color-btn-outline-border: var(--color-border-primary-700);
--color-btn-outline-text: var(--color-text-primary-700);
/* Cards */
--color-card-bg: var(--color-surface-white);
--color-card-border: var(--color-border-neutral-200);
--color-card-title: var(--color-text-neutral-900);
--color-card-subtitle: var(--color-text-neutral-600);
/* Form elements */
--color-form-element-bg: var(--color-surface-white);
--color-form-element-border: var(--color-border-neutral-300);
--color-form-element-border-focus: var(--color-border-primary-500);
--color-form-element-bg-checked: var(--color-surface-primary-700);
--color-form-element-border-checked: var(--color-border-primary-700);
--color-form-element-icon-checked: var(--color-icon-white);
/* Table */
--color-table-bg: var(--color-surface-white);
--color-table-cell-bg-hover: var(--color-surface-neutral-50);
--color-table-cell-border: var(--color-border-neutral-200);
/* Sizing, radii, paddings */
--radius-btn
--radius-card
--radius-form-element-input
--padding-inline-btn
--padding-block-btn

Components should only reference component tokens directly.

Usage example

/* SCSS (component) */
.an-btn.an-btn-filled {
  color: var(--color-btn-filled-text);
  background: var(--color-btn-filled-bg);
  padding-inline: var(--padding-inline-btn);
  padding-block: var(--padding-block-btn);
  border-radius: var(--radius-btn);
}
.an-btn.an-btn-filled:hover {
  background: var(--color-btn-filled-bg-hover);
}
/* Theming */
/* In _root.scss override scales for [data-theme="dark"]. For contrast fine-tuning, add adjustments under [data-theme="dark"] in _semantic.scss or _components.scss. */