Tokens full list
This page is generated from the token catalog on every @airframeui/tokens build.
Components use the unsuffixed name (--af-color-background).
Light, dark, and high-contrast values use the --light / --dark / --hc-* suffixes and show here as columns — not extra rows. Derived hover / active / soft / hard colours are color-mix() results, not stored hex.
Machine-readable copy for AI and tooling:
@airframeui/tokens/catalog.jsonimport { catalog } from '@airframeui/tokens'
How to override values: Theming.
How the system is structured: Tokens.
Color primitives 19
| Token | Light | Dark | HC light | HC dark | Used for |
|---|---|---|---|---|---|
--af-base-black | #000000 | #000000 | #000000 | #000000 | Literal black. Prefer semantic text/surface tokens in UI. |
--af-base-danger | #dc2626 | #dc2626 | #dc2626 | #dc2626 | Danger accent hex. Feeds --af-color-danger. |
--af-base-info | #38bdf8 | #38bdf8 | #38bdf8 | #38bdf8 | Info accent hex. Feeds --af-color-info. |
--af-base-neutral-100 | #f1f5f9 | #f1f5f9 | #f1f5f9 | #f1f5f9 | Very light gray. Default light --af-color-surface-tertiary. |
--af-base-neutral-200 | #e2e8f0 | #e2e8f0 | #e2e8f0 | #e2e8f0 | Light gray. Subtle fills and disabled chrome. |
--af-base-neutral-300 | #cbd5e1 | #cbd5e1 | #cbd5e1 | #cbd5e1 | Light gray. Default light --af-color-border. |
--af-base-neutral-400 | #94a3b8 | #94a3b8 | #94a3b8 | #94a3b8 | Mid-light gray. Default light --af-color-border-strong. |
--af-base-neutral-50 | #f8fafc | #f8fafc | #f8fafc | #f8fafc | Lightest gray. Default light --af-color-surface-secondary. |
--af-base-neutral-500 | #64748b | #64748b | #64748b | #64748b | Mid gray. Icons and muted chrome — not body text. |
--af-base-neutral-600 | #475569 | #475569 | #475569 | #475569 | Mid-dark gray. Default dark borders / tertiary dark surfaces. |
--af-base-neutral-700 | #1d2434 | #1d2434 | #1d2434 | #1d2434 | Dark gray. Default light --af-color-text-muted; dark secondary surface. |
--af-base-neutral-800 | #121620 | #121620 | #121620 | #121620 | Near-black. Default dark --af-color-surface-primary. |
--af-base-neutral-900 | #0d1117 | #0d1117 | #0d1117 | #0d1117 | Darkest gray. Default light --af-color-text and dark --af-color-background. |
--af-base-primary | #1f3fe0 | #2463eb | #1f3fe0 | #2463eb | Brand accent hex. Override to rebrand; components should use --af-color-primary / --af-color-action, not this directly. |
--af-base-secondary | #dbe1f4 | #dbe1f4 | #dbe1f4 | #dbe1f4 | Secondary accent hex. Feeds --af-color-secondary (chips, secondary buttons). |
--af-base-success | #22c55e | #22c55e | #22c55e | #22c55e | Success accent hex. Feeds --af-color-success. |
--af-base-tertiary | #111827 | #111827 | #111827 | #111827 | Tertiary accent hex. Feeds --af-color-tertiary (quiet / high-contrast fills). |
--af-base-warning | #fbbf24 | #fbbf24 | #fbbf24 | #fbbf24 | Warning accent hex. Feeds --af-color-warning. |
--af-base-white | #ffffff | #ffffff | #ffffff | #ffffff | Literal white. Prefer --af-color-background / surfaces in UI; use this for overrides and mixes. |
Surfaces, text, and borders 13
| Token | Light | Dark | HC light | HC dark | Used for |
|---|---|---|---|---|---|
--af-color-background | #ffffff | #0d1117 | #ffffff | #000000 | Page / document canvas. Set on html/body; not for cards or controls. |
--af-color-border | #cbd5e1 | #475569 | #000000 | #ffffff | Default hairline border and dividers. |
--af-color-border-strong | #94a3b8 | #64748b | #000000 | #ffffff | Stronger border (hover, emphasis, key dividers). |
--af-color-focus | #1f3fe0 | #2463eb | #1f3fe0 | #2463eb | Focus ring color. Defaults to primary; prefer --af-focus-ring-* for width/offset. |
--af-color-surface-inverse-primary | #0d1117 | #ffffff | #000000 | #ffffff | Inverse raised surface (e.g. dark footer on a light page). |
--af-color-surface-inverse-secondary | #121620 | #f8fafc | #1a1a1a | #f5f5f5 | Inverse secondary surface. Pair with --af-color-text-inverse. |
--af-color-surface-inverse-tertiary | #1d2434 | #f1f5f9 | #333333 | #e6e6e6 | Inverse tertiary surface. Pair with --af-color-text-inverse. |
--af-color-surface-primary | #ffffff | #121620 | #ffffff | #1a1a1a | Raised surface on the page (cards, dialogs, inputs). |
--af-color-surface-secondary | #f8fafc | #1d2434 | #f5f5f5 | #2a2a2a | Recessed / grouped surface (sidebars, wells). Sit on background, under primary. |
--af-color-surface-tertiary | #f1f5f9 | #475569 | #e6e6e6 | #333333 | Deepest recessed surface (nested wells, table chrome). |
--af-color-text | #0d1117 | #f8fafc | #000000 | #ffffff | Default body text on page/surface backgrounds. |
--af-color-text-inverse | #ffffff | #0d1117 | #ffffff | #000000 | Text/icons on inverse surfaces — not on normal backgrounds. |
--af-color-text-muted | #1d2434 | #cbd5e1 | #333333 | #cccccc | Secondary / helper text. Prefer for captions; still needs contrast. |
Intents and action 16
| Token | Light | Dark | HC light | HC dark | Used for |
|---|---|---|---|---|---|
--af-color-action | #1f3fe0 | #2463eb | #1f3fe0 | #2463eb | CTA / interactive brand color (buttons, links, focus). Defaults to primary; override when CTA ≠ brand primary. |
--af-color-danger | #dc2626 | #dc2626 | #dc2626 | #dc2626 | Danger solid fill / icon. Not for small text on soft or white — use --af-color-danger-hard. |
--af-color-info | #38bdf8 | #38bdf8 | #38bdf8 | #38bdf8 | Info solid fill / icon. Not for small text on soft or white — use --af-color-info-hard. |
--af-color-on-action | #ffffff | #ffffff | #ffffff | #000000 | Text/icon on an action solid fill. |
--af-color-on-danger | #ffffff | #ffffff | #ffffff | #000000 | Text/icon on a danger solid fill. |
--af-color-on-info | #ffffff | #ffffff | #ffffff | #000000 | Text/icon on an info solid fill. |
--af-color-on-primary | #ffffff | #ffffff | #ffffff | #000000 | Text/icon on a primary solid fill. Do not use on soft tints. |
--af-color-on-secondary | #0d1117 | #0d1117 | #000000 | #000000 | Text/icon on a secondary solid fill. |
--af-color-on-success | #0d1117 | #ffffff | #0d1117 | #000000 | Text/icon on a success solid fill. |
--af-color-on-tertiary | #ffffff | #ffffff | #ffffff | #ffffff | Text/icon on a tertiary solid fill. |
--af-color-on-warning | #0d1117 | #0d1117 | #000000 | #000000 | Text/icon on a warning solid fill. |
--af-color-primary | #1f3fe0 | #2463eb | #1f3fe0 | #2463eb | Primary solid fill / icon color. For soft badges use *-soft + *-hard, not this as small text. |
--af-color-secondary | #dbe1f4 | #dbe1f4 | #dbe1f4 | #dbe1f4 | Secondary solid fill / icon color. Same soft/hard rule as primary. |
--af-color-success | #22c55e | #22c55e | #22c55e | #22c55e | Success solid fill / icon. Not for small text on soft or white — use --af-color-success-hard. |
--af-color-tertiary | #111827 | #111827 | #111827 | #111827 | Tertiary solid fill / icon color. Same soft/hard rule as primary. |
--af-color-warning | #fbbf24 | #fbbf24 | #fbbf24 | #fbbf24 | Warning solid fill / icon. Not for small text on soft or white — use --af-color-warning-hard. |
Derived interaction colors 32
| Token | Light | Dark | HC light | HC dark | Used for |
|---|---|---|---|---|---|
--af-color-action-active | #1934b8 | #1e51c1 | #1934b8 | #1e51c1 | Pressed / active state of --af-color-action. Prefer this over inventing an active color. |
--af-color-action-hard | #11237b | #87a9f4 | #11237b | #87a9f4 | AA text/icon of --af-color-action on --af-color-action-soft (and soft surfaces). Not for solid fills — use --af-color-action + on-* there. |
--af-color-action-hover | #1b37c5 | #2057cf | #1b37c5 | #2057cf | Hover state of --af-color-action. Prefer this over inventing a hover color. |
--af-color-action-soft | #e4e8fb | #141f38 | #e4e8fb | #1b2333 | Soft tint of --af-color-action for badge/chip backgrounds. Pair text with --af-color-action-hard — not mid-tone --af-color-action. |
--af-color-danger-active | #b41f1f | #b41f1f | #b41f1f | #b41f1f | Pressed / active state of --af-color-danger. Prefer this over inventing an active color. |
--af-color-danger-hard | #791515 | #ec8888 | #791515 | #ec8888 | AA text/icon of --af-color-danger on --af-color-danger-soft (and soft surfaces). Not for solid fills — use --af-color-danger + on-* there. |
--af-color-danger-hover | #c22121 | #c22121 | #c22121 | #c22121 | Hover state of --af-color-danger. Prefer this over inventing a hover color. |
--af-color-danger-soft | #fbe5e5 | #2a1821 | #fbe5e5 | #311b1b | Soft tint of --af-color-danger for badge/chip backgrounds. Pair text with --af-color-danger-hard — not mid-tone --af-color-danger. |
--af-color-info-active | #2e9bcb | #2e9bcb | #2e9bcb | #2e9bcb | Pressed / active state of --af-color-info. Prefer this over inventing an active color. |
--af-color-info-hard | #1f6888 | #92dbfb | #1f6888 | #92dbfb | AA text/icon of --af-color-info on --af-color-info-soft (and soft surfaces). Not for solid fills — use --af-color-info + on-* there. |
--af-color-info-hover | #31a6da | #31a6da | #31a6da | #31a6da | Hover state of --af-color-info. Prefer this over inventing a hover color. |
--af-color-info-soft | #e7f7fe | #172a3a | #e7f7fe | #1e2e35 | Soft tint of --af-color-info for badge/chip backgrounds. Pair text with --af-color-info-hard — not mid-tone --af-color-info. |
--af-color-primary-active | #1934b8 | #1e51c1 | #1934b8 | #1e51c1 | Pressed / active state of --af-color-primary. Prefer this over inventing an active color. |
--af-color-primary-hard | #11237b | #87a9f4 | #11237b | #87a9f4 | AA text/icon of --af-color-primary on --af-color-primary-soft (and soft surfaces). Not for solid fills — use --af-color-primary + on-* there. |
--af-color-primary-hover | #1b37c5 | #2057cf | #1b37c5 | #2057cf | Hover state of --af-color-primary. Prefer this over inventing a hover color. |
--af-color-primary-soft | #e4e8fb | #141f38 | #e4e8fb | #1b2333 | Soft tint of --af-color-primary for badge/chip backgrounds. Pair text with --af-color-primary-hard — not mid-tone --af-color-primary. |
--af-color-secondary-active | #b4b9c8 | #b4b9c8 | #b4b9c8 | #b4b9c8 | Pressed / active state of --af-color-secondary. Prefer this over inventing an active color. |
--af-color-secondary-hard | #787c86 | #ebeff9 | #787c86 | #ebeff9 | AA text/icon of --af-color-secondary on --af-color-secondary-soft (and soft surfaces). Not for solid fills — use --af-color-secondary + on-* there. |
--af-color-secondary-hover | #c1c6d7 | #c1c6d7 | #c1c6d7 | #c1c6d7 | Hover state of --af-color-secondary. Prefer this over inventing a hover color. |
--af-color-secondary-soft | #fbfbfe | #2a2e39 | #fbfbfe | #313234 | Soft tint of --af-color-secondary for badge/chip backgrounds. Pair text with --af-color-secondary-hard — not mid-tone --af-color-secondary. |
--af-color-success-active | #1ca24d | #1ca24d | #1ca24d | #1ca24d | Pressed / active state of --af-color-success. Prefer this over inventing an active color. |
--af-color-success-hard | #136c34 | #85dfa6 | #136c34 | #85dfa6 | AA text/icon of --af-color-success on --af-color-success-soft (and soft surfaces). Not for solid fills — use --af-color-success + on-* there. |
--af-color-success-hover | #1ead53 | #1ead53 | #1ead53 | #1ead53 | Hover state of --af-color-success. Prefer this over inventing a hover color. |
--af-color-success-soft | #e4f8ec | #142b27 | #e4f8ec | #1b2f22 | Soft tint of --af-color-success for badge/chip backgrounds. Pair text with --af-color-success-hard — not mid-tone --af-color-success. |
--af-color-tertiary-active | #0e1420 | #0e1420 | #0e1420 | #0e1420 | Pressed / active state of --af-color-tertiary. Prefer this over inventing an active color. |
--af-color-tertiary-hard | #090d15 | #7c8088 | #090d15 | #7c8088 | AA text/icon of --af-color-tertiary on --af-color-tertiary-soft (and soft surfaces). Not for solid fills — use --af-color-tertiary + on-* there. |
--af-color-tertiary-hover | #0f1522 | #0f1522 | #0f1522 | #0f1522 | Hover state of --af-color-tertiary. Prefer this over inventing a hover color. |
--af-color-tertiary-soft | #e2e3e5 | #121621 | #e2e3e5 | #191a1c | Soft tint of --af-color-tertiary for badge/chip backgrounds. Pair text with --af-color-tertiary-hard — not mid-tone --af-color-tertiary. |
--af-color-warning-active | #ce9d1e | #ce9d1e | #ce9d1e | #ce9d1e | Pressed / active state of --af-color-warning. Prefer this over inventing an active color. |
--af-color-warning-hard | #8a6914 | #fddc87 | #8a6914 | #fddc87 | AA text/icon of --af-color-warning on --af-color-warning-soft (and soft surfaces). Not for solid fills — use --af-color-warning + on-* there. |
--af-color-warning-hover | #dda820 | #dda820 | #dda820 | #dda820 | Hover state of --af-color-warning. Prefer this over inventing a hover color. |
--af-color-warning-soft | #fff7e5 | #2e2a20 | #fff7e5 | #352e1b | Soft tint of --af-color-warning for badge/chip backgrounds. Pair text with --af-color-warning-hard — not mid-tone --af-color-warning. |
Typography 61
| Token | Value | Used for |
|---|---|---|
--af-base-font-mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mo… | Raw system mono stack. Prefer --af-font-code / --af-font-mono in UI. |
--af-base-font-sans | ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,… | Raw system sans stack. Prefer --af-font-body / --af-font-heading in UI. |
--af-font-body | var(--af-base-font-sans) | Body copy family. Override for reading text without changing chrome. |
--af-font-code | var(--af-base-font-mono) | Code / pre family. Defaults to the mono stack. |
--af-font-heading | var(--af-font-primary) | Heading family. Override for display type without changing body. |
--af-font-mono | var(--af-base-font-mono) | Monospace family for code, kbd, and mono utilities. |
--af-font-primary | var(--af-base-font-sans) | Default UI sans family. Alias for branding; headings fall back here. |
--af-leading-loose | 1.75 | Loose line-height for long-form reading. |
--af-leading-normal | 1.55 | Default body line-height. |
--af-leading-tight | 1.15 | Tight line-height (headings). Prefer --af-type-*-leading on roles. |
--af-text-2xl | 2rem | Raw type scale ~32px (page titles). |
--af-text-3xl | 2.5rem | Raw type scale ~40px (default h1 size source). |
--af-text-4xl | 3.5rem | Raw type scale ~56px (display). |
--af-text-5xl | 4.5rem | Raw type scale ~72px (hero / display). |
--af-text-body-leading | var(--af-leading-normal) | Default body leading alias. |
--af-text-body-size | var(--af-text-md) | Default body size alias (→ --af-text-md). Prefer --af-type-body-size for roles. |
--af-text-heading-leading | var(--af-leading-tight) | Default heading leading alias. |
--af-text-heading-weight | var(--af-weight-semibold) | Default heading weight alias. |
--af-text-lg | 1.1875rem | Raw type scale ~19px (emphasized body). |
--af-text-md | 1rem | Raw type scale ~16px (default body). |
--af-text-sm | 0.875rem | Raw type scale ~14px (labels, captions). |
--af-text-xl | 1.5rem | Raw type scale ~24px (section titles). |
--af-text-xs | 0.75rem | Raw type scale ~12px. Prefer --af-type-* roles; use for one-off utility sizing. |
--af-type-body-leading | var(--af-leading-normal) | Body role line-height. |
--af-type-body-size | var(--af-text-md) | Body role size (af-body / paragraphs). |
--af-type-body-weight | var(--af-weight-regular) | Body role weight. |
--af-type-caption-leading | var(--af-leading-normal) | Caption role line-height. |
--af-type-caption-size | var(--af-text-sm) | Caption / meta role size (af-caption). |
--af-type-caption-weight | var(--af-weight-regular) | Caption role weight. |
--af-type-display-leading | var(--af-leading-tight) | Display / hero role line-height. |
--af-type-display-size | var(--af-text-5xl) | Display / hero role size. Use with af-display / marketing headers. |
--af-type-display-weight | var(--af-weight-bold) | Display / hero role weight. |
--af-type-h1-leading | var(--af-leading-tight) | h1 role line-height. |
--af-type-h1-size | var(--af-text-3xl) | h1 role size (af-h1 / h1). Prefer this over raw --af-text-*. |
--af-type-h1-tracking | -0.02em | h1 letter-spacing (slightly tight by default). |
--af-type-h1-weight | var(--af-weight-semibold) | h1 role weight. |
--af-type-h2-leading | var(--af-leading-tight) | h2 role line-height. |
--af-type-h2-size | var(--af-text-2xl) | h2 role size. |
--af-type-h2-tracking | -0.01em | h2 letter-spacing. |
--af-type-h2-weight | var(--af-weight-semibold) | h2 role weight. |
--af-type-h3-leading | var(--af-leading-tight) | h3 role line-height. |
--af-type-h3-size | var(--af-text-xl) | h3 role size. |
--af-type-h3-tracking | 0em | h3 letter-spacing. |
--af-type-h3-weight | var(--af-weight-semibold) | h3 role weight. |
--af-type-h4-leading | var(--af-leading-normal) | h4 role line-height. |
--af-type-h4-size | var(--af-text-lg) | h4 role size. |
--af-type-h4-tracking | 0em | h4 letter-spacing. |
--af-type-h4-weight | var(--af-weight-semibold) | h4 role weight. |
--af-type-h5-leading | var(--af-leading-normal) | h5 role line-height. |
--af-type-h5-size | var(--af-text-md) | h5 role size. |
--af-type-h5-tracking | 0em | h5 letter-spacing. |
--af-type-h5-weight | var(--af-weight-semibold) | h5 role weight. |
--af-type-h6-leading | var(--af-leading-normal) | h6 role line-height. |
--af-type-h6-size | var(--af-text-sm) | h6 role size. |
--af-type-h6-tracking | 0em | h6 letter-spacing. |
--af-type-h6-weight | var(--af-weight-semibold) | h6 role weight. |
--af-weight-bold | 700 | Font weight 700. |
--af-weight-extrabold | 800 | Font weight 800. |
--af-weight-medium | 500 | Font weight 500. |
--af-weight-regular | 400 | Font weight 400. Prefer --af-type-*-weight on roles. |
--af-weight-semibold | 600 | Font weight 600 (default headings). |
Space and radius 17
| Token | Value | Used for |
|---|---|---|
--af-border-width | 1px | Default 1px border width for controls and cards. |
--af-hit-size | 2.75rem | Minimum touch target (~44px). Prefer for clickable hit areas. |
--af-radius-0 | 0px | Square corners (no radius). |
--af-radius-full | 9999px | Pill / circle radius. Default buttons. |
--af-radius-lg | 16px | Large radius — default controls and cards. |
--af-radius-md | 10px | Medium radius — compact surfaces. |
--af-radius-sm | 6px | Small radius — chips, small controls. |
--af-radius-xl | 24px | Extra-large radius — large panels. |
--af-space-0 | 0px | Spacing 0. Used by af-gap-0 / af-p-0 / af-m-0. |
--af-space-1 | 4px | Spacing 4px. Used by af-*-xs utilities and tight pattern gaps. |
--af-space-2 | 8px | Spacing 8px. Common control / stack gap. |
--af-space-3 | 12px | Spacing 12px. Common padding and inline gaps. |
--af-space-4 | 16px | Spacing 16px. Default layout gap / container padding source. |
--af-space-5 | 24px | Spacing 24px. Section and card padding. |
--af-space-6 | 32px | Spacing 32px. Large section gaps. |
--af-space-7 | 40px | Spacing 40px. Extra-large section gaps. |
--af-space-8 | 48px | Spacing 48px. Hero / empty-state padding. |
Shadow, z-index, and motion 22
| Token | Value | Used for |
|---|---|---|
--af-animation-duration-fast | 200ms | Short keyframe duration (spinners, micro-motion). |
--af-animation-duration-md | 400ms | Default keyframe duration. |
--af-animation-duration-slow | 600ms | Long keyframe duration. |
--af-animation-duration-slower | 1500ms | Looping / skeleton duration. |
--af-duration-fast | 120ms | Short CSS transition (hover, color). Respects prefers-reduced-motion. |
--af-duration-md | 200ms | Default CSS transition length. |
--af-duration-slow | 320ms | Longer CSS transition (layout, panels). |
--af-ease-emphasized | cubic-bezier(0.2, 0, 0, 1) | Stronger decelerate easing for emphasis. |
--af-ease-in | cubic-bezier(0.4, 0, 1, 1) | Ease-in curve. |
--af-ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | Ease-in-out curve. |
--af-ease-linear | linear | Linear easing (progress, indeterminate). |
--af-ease-out | cubic-bezier(0, 0, 0.2, 1) | Ease-out curve. |
--af-ease-standard | cubic-bezier(0.2, 0, 0.2, 1) | Default easing for UI transitions. |
--af-shadow-lg | 0 16px 40px rgba(0, 0, 0, 0.14) | High elevation — dialogs and floating panels. |
--af-shadow-md | 0 6px 16px rgba(0, 0, 0, 0.1) | Medium elevation — hover, menus, popovers. |
--af-shadow-sm | 0 1px 2px rgba(0, 0, 0, 0.06) | Low elevation — resting cards and inputs. |
--af-z-base | 0 | Stacking baseline (0). Rarely override. |
--af-z-dropdown | 1000 | Dropdowns / popovers above page content. |
--af-z-modal | 1300 | Modal dialogs above the overlay. |
--af-z-overlay | 1200 | Dimmed scrim behind dialogs. |
--af-z-sticky | 1100 | Sticky headers / toolbars above content, below overlays. |
--af-z-toast | 1400 | Toasts / live regions above modals. |
Layout 9
| Token | Value | Used for |
|---|---|---|
--af-container-max-w | 90em | Default af-container max-width (~1440px). |
--af-container-max-w-2xl | 96rem | af-container-2xl max-width. |
--af-container-max-w-lg | 64rem | af-container-lg max-width. |
--af-container-max-w-md | 48rem | af-container-md max-width. |
--af-container-max-w-sm | 40rem | af-container-sm max-width. |
--af-container-max-w-xl | 80rem | af-container-xl max-width. |
--af-container-max-w-xs | 25rem | af-container-xs max-width. |
--af-container-padding-x | var(--af-space-4) | Horizontal padding inside af-container. |
--af-layout-gap | var(--af-space-4) | Default gap for af-stack / af-inline / af-grid. |
Component tokens 57
| Token | Value | Used for |
|---|---|---|
--af-btn-active-brightness | 0.82 | af-btn pressed brightness filter. |
--af-btn-border-width | 1px | af-btn border width. |
--af-btn-default-active | var(--af-color-primary-active) | Solid primary af-btn pressed fill. |
--af-btn-default-bg | var(--af-color-primary) | Solid primary af-btn background. |
--af-btn-default-color | var(--af-color-on-primary) | Solid primary af-btn label/icon. |
--af-btn-default-hover | var(--af-color-primary-hover) | Solid primary af-btn hover fill. |
--af-btn-font-weight | var(--af-weight-medium) | af-btn label weight. |
--af-btn-gap | var(--af-space-2) | Gap between af-btn label and icon. |
--af-btn-hover-brightness | 0.9 | af-btn hover brightness filter (darkens in light, lightens in dark). |
--af-btn-icon-button-size | var(--af-hit-size) | Hit size for icon-only af-btn. |
--af-btn-icon-size | 1.25rem | Icon size inside af-btn. |
--af-btn-min-height | var(--af-control-min-height) | af-btn min-height. Override for denser or taller buttons. |
--af-btn-outline-active | color-mix( in srgb, var(--af-color-primary), var(--af-color-surface-p… | Outline af-btn pressed fill. |
--af-btn-outline-border | var(--af-color-primary) | Outline af-btn border color. |
--af-btn-outline-color | var(--af-color-primary) | Outline af-btn label color. |
--af-btn-outline-hover | var(--af-color-primary-hover) | Outline af-btn hover label/border. |
--af-btn-outline-hover-bg | var(--af-color-primary-soft) | Outline af-btn hover fill (soft tint). |
--af-btn-padding-x | var(--af-space-4) | af-btn horizontal padding. |
--af-btn-padding-y | var(--af-control-padding-y) | af-btn vertical padding. |
--af-btn-radius | var(--af-radius-full) | af-btn corner radius (pill by default). |
--af-btn-secondary-active | var(--af-color-secondary-active) | Secondary af-btn pressed fill. |
--af-btn-secondary-bg | var(--af-color-secondary) | Secondary af-btn background. |
--af-btn-secondary-color | var(--af-color-on-secondary) | Secondary af-btn label/icon. |
--af-btn-secondary-hover | var(--af-color-secondary-hover) | Secondary af-btn hover fill. |
--af-card-border-width | 1px | af-card border width. |
--af-card-gap | var(--af-space-3) | Gap between af-card header, body, and footer. |
--af-card-padding | var(--af-space-5) | af-card inner padding. |
--af-card-radius | var(--af-radius-lg) | af-card corner radius. |
--af-card-shadow | var(--af-shadow-sm) | af-card resting shadow. |
--af-card-shadow-hover | var(--af-shadow-md) | af-card hover shadow (interactive cards). |
--af-choice-size | 1.5rem | Shared checkbox / radio size and switch track height. Scale all choice controls together. |
--af-control-border | var(--af-color-border) | Default form-control border color. |
--af-control-border-hover | var(--af-color-border-strong) | Form-control border on hover. |
--af-control-border-width | 1px | Shared form-control border width. |
--af-control-min-height | auto | Shared form-control min-height (default auto). Inputs use --af-input-min-height instead. |
--af-control-padding-x | var(--af-space-3) | Shared form-control horizontal padding. |
--af-control-padding-y | var(--af-space-2) | Shared form-control vertical padding. |
--af-control-radius | var(--af-radius-lg) | Shared form-control radius (inputs, selects). |
--af-focus-ring-color | var(--af-color-focus) | Focus ring stroke color (keyboard focus). |
--af-focus-ring-offset | 2px | Focus ring offset from the control edge. |
--af-focus-ring-width | 2px | Focus ring stroke width. |
--af-input-border | var(--af-control-border) | Text input resting border color. |
--af-input-border-focus | var(--af-color-primary) | Text input border on focus. |
--af-input-border-hover | var(--af-control-border-hover) | Text input border on hover. |
--af-input-border-width | var(--af-control-border-width) | Text input border width. |
--af-input-font-size | var(--af-text-md) | Text input font size. |
--af-input-leading | var(--af-leading-normal) | Text input line-height. |
--af-input-min-height | var(--af-hit-size) | Text input / select min-height (touch target). |
--af-input-padding-x | var(--af-control-padding-x) | Text input horizontal padding. |
--af-input-padding-y | var(--af-control-padding-y) | Text input vertical padding. |
--af-input-placeholder-color | var(--af-color-text-muted) | Input placeholder text color. |
--af-input-radius | var(--af-control-radius) | Text input corner radius. |
--af-link-hover-primary | var(--af-color-primary-hover) | Link color on hover. |
--af-link-primary | var(--af-color-primary) | Default link color (af-link). Prefer over raw primary for inline links. |
--af-switch-height | var(--af-choice-size) | Switch track height (defaults to --af-choice-size). |
--af-switch-thumb-inset | 2px | Switch thumb inset from the track edge. |
--af-switch-width-ratio | 0.8 | Switch width factor: width = height × (1 + ratio). |
Breakpoints 6
| Token | Value | Used for |
|---|---|---|
--af-bp-2xl | 1536px | Breakpoint 1536px. Drives responsive @2xl utilities. |
--af-bp-lg | 1024px | Breakpoint 1024px. Drives responsive @lg utilities. |
--af-bp-md | 768px | Breakpoint 768px. Drives responsive @md utilities. |
--af-bp-sm | 640px | Breakpoint 640px. Drives responsive @sm utilities. |
--af-bp-xl | 1280px | Breakpoint 1280px. Drives responsive @xl utilities. |
--af-bp-xs | 360px | Breakpoint 360px. Drives responsive @xs utilities — do not use as a width token in layouts. |
Mix knobs 6
| Token | Value | Used for |
|---|---|---|
--af-active-mix | 18% | Knob: how far *-active mixes toward black for pressed states. |
--af-border-mix | 22% | Knob reserved for derived border mixes toward an intent color. |
--af-hard-mix | 45% | Knob: how far *-hard mixes toward --af-hard-toward for AA text on soft. |
--af-hard-toward | black | Mix target for *-hard (black in light, white in dark). Do not set freely per component. |
--af-hover-mix | 12% | Knob: how far *-hover mixes toward black. Prefer overriding this over hand-rolling hover colors. |
--af-soft-mix | 12% | Knob: how much intent remains in *-soft (rest mixes toward surface). |