Global CSS Variables

Global CSS variables are the foundation of the BEEQ theme system. They cover brand colors, neutrals, typography, spacing, radius, shadows, and strokes. On top of these base variables, mode roles map each value to a specific role in the UI — backgrounds, text, borders, icons, UI elements, and interactive states — and automatically adapt to light and dark mode.

For how the color layers fit together, the default values in each theme and mode, and which tokens to pair, see Colors.

Base variables are the foundation of your theme and should be set at the root level for global consistency. See the Custom Theme page for details on overriding them.

Base theme variables

Base variables define the raw design values for your theme. They are set once at the root level and consumed by the declarative color variables below.

Intent colors

Each intent — brand, accent, info, success, warning, and danger — has the same five-step scale. See Intent scale for what each step is for.

/* Brand — your primary brand identity */
--bq-brand-light:  /* Light tint (light mode backgrounds) */
--bq-brand:        /* Main fill color */
--bq-brand-dark:   /* Dark tint (dark mode backgrounds) */
--bq-brand-strong: /* Text, icons, and strokes on light surfaces */
--bq-brand-bright: /* Text, icons, and strokes on dark surfaces */

/* Accent — secondary highlight color */
--bq-accent-light:
--bq-accent:
--bq-accent-dark:
--bq-accent-strong:
--bq-accent-bright:

/* Info — informational messages */
--bq-info-light:
--bq-info:
--bq-info-dark:
--bq-info-strong:
--bq-info-bright:

/* Success — positive actions and states */
--bq-success-light:
--bq-success:
--bq-success-dark:
--bq-success-strong:
--bq-success-bright:

/* Warning — cautionary messages */
--bq-warning-light:
--bq-warning:
--bq-warning-dark:
--bq-warning-strong:
--bq-warning-bright:

/* Danger — errors and destructive actions */
--bq-danger-light:
--bq-danger:
--bq-danger-dark:
--bq-danger-strong:
--bq-danger-bright:

The focus ring color, --bq-focus, isn’t a base variable. It’s a mode role that defaults to --bq-brand-strong in light mode and --bq-brand-bright in dark mode. See State colors.

Neutral colors

The neutral color scale provides a range of grays for backgrounds, borders, and text.

--bq-white: /* Pure white or near-white */
--bq-black: /* Pure black or near-black */

/* Neutral scale (50–1000) */
--bq-neutral-50:    /* Lightest neutral */
--bq-neutral-100:   /* Very light neutral */
--bq-neutral-200:   /* Light neutral */
--bq-neutral-300:   /* Light-medium neutral */
--bq-neutral-400:   /* Medium-light neutral */
--bq-neutral-500:   /* Medium neutral */
--bq-neutral-600:   /* Medium-dark neutral */
--bq-neutral-700:   /* Dark-medium neutral */
--bq-neutral-800:   /* Dark neutral */
--bq-neutral-900:   /* Very dark neutral */
--bq-neutral-950:   /* Extra dark neutral */
--bq-neutral-1000:  /* Darkest neutral */

BEEQ also provides an extensive primitive color palette — blue, coral, cyan, gold, green, indigo, iris, lime, magenta, orange, purple, red, sky, teal, volcano, and yellow (each with 10 shades, 100–1000). Use these when defining brand and accent tokens in a custom theme.See the Colors page for the full palette and guidance on usage.

Data visualization colors

For charts and graphs — 12 distinct colors.

--bq-data-01:  /* First data color */
--bq-data-02:  /* Second data color */
--bq-data-03:  /* Third data color */
--bq-data-04:  /* Fourth data color */
--bq-data-05:  /* Fifth data color */
--bq-data-06:  /* Sixth data color */
--bq-data-07:  /* Seventh data color */
--bq-data-08:  /* Eighth data color */
--bq-data-09:  /* Ninth data color */
--bq-data-10:  /* Tenth data color */
--bq-data-11:  /* Eleventh data color */
--bq-data-12:  /* Twelfth data color */

Typography

Typography variables define font family, sizes, weights, and line heights.

See also the Typography page for the full type system.

/* Font family */
--bq-font-family: /* Main font stack, e.g., "'Outfit', sans-serif" */

/* Font sizes */
--bq-font-size--xs:   0.75rem;   /* 12px */
--bq-font-size--s:    0.875rem;  /* 14px */
--bq-font-size--m:    1rem;      /* 16px */
--bq-font-size--l:    1.125rem;  /* 18px */
--bq-font-size--xl:   1.5rem;    /* 24px */
--bq-font-size--xxl:  2rem;      /* 32px */
--bq-font-size--xxl2: 2.5rem;    /* 40px */
--bq-font-size--xxl3: 3rem;      /* 48px */
--bq-font-size--xxl4: 3.5rem;    /* 56px */
--bq-font-size--xxl5: 4rem;      /* 64px */

/* Font weights */
--bq-font-weight--thin:     100;
--bq-font-weight--light:    300;
--bq-font-weight--regular:  400;
--bq-font-weight--medium:   500;
--bq-font-weight--semibold: 600;
--bq-font-weight--bold:     700;
--bq-font-weight--black:    900;

/* Line heights */
--bq-font-line-height--small:   1.2;
--bq-font-line-height--regular: 1.5;
--bq-font-line-height--large:   1.75;

Spacing

The spacing scale provides consistent spacing units for margins, paddings, and gaps. It is based on a 4px grid.

See also the Spacing page for the full spacing system.

--bq-spacing-xs3:  0.125rem;  /* 2px */
--bq-spacing-xs2:  0.25rem;   /* 4px */
--bq-spacing-xs:   0.5rem;    /* 8px */
--bq-spacing-s:    0.75rem;   /* 12px */
--bq-spacing-m:    1rem;      /* 16px */
--bq-spacing-l:    1.5rem;    /* 24px */
--bq-spacing-xl:   2rem;      /* 32px */
--bq-spacing-xxl:  2.5rem;    /* 40px */
--bq-spacing-xxl2: 3.5rem;    /* 56px */
--bq-spacing-xxl3: 4rem;      /* 64px */
--bq-spacing-xxl4: 4.5rem;    /* 72px */

Border radius

The border radius scale defines corner rounding for UI elements.

See also the Radius page for full usage guidance.

--bq-radius--none: 0;
--bq-radius--xs2:  0.125rem;  /* 2px */
--bq-radius--xs:   0.25rem;   /* 4px */
--bq-radius--s:    0.5rem;    /* 8px */
--bq-radius--m:    0.75rem;   /* 12px */
--bq-radius--l:    1.5rem;    /* 24px */
--bq-radius--full: 9999px;

Box shadow

The box shadow scale provides elevation effects for UI elements.

See also the Shadows page for elevation guidance.

--bq-box-shadow--xs: 0 2px 0 rgba(0, 0, 0, 0.016);
--bq-box-shadow--s:  0 8px 24px rgba(0, 0, 0, 0.04);
--bq-box-shadow--m:  0 10px 48px -16px rgba(0, 0, 0, 0.12);
--bq-box-shadow--l:  0 20px 58px -16px rgba(0, 0, 0, 0.16);

Dark mode replaces the scale with denser shadows and a 1px --bq-stroke--primary edge ring, so elevated layers stay visible on dark surfaces:

[bq-mode="dark"] {
  --bq-box-shadow--xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bq-box-shadow--s:  0 0 0 1px var(--bq-stroke--primary), 0 8px 24px rgba(0, 0, 0, 0.4);
  --bq-box-shadow--m:  0 0 0 1px var(--bq-stroke--primary), 0 10px 48px -16px rgba(0, 0, 0, 0.6);
  --bq-box-shadow--l:  0 0 0 1px var(--bq-stroke--primary), 0 20px 58px -16px rgba(0, 0, 0, 0.7);
}

Stroke

The stroke width scale defines standard border widths.

See also the Stroke page for border usage guidance.

--bq-stroke-s: 1px;
--bq-stroke-m: 2px;
--bq-stroke-l: 3px;

Declarative color variables

Mode roles are used throughout the components and change based on the mode (light/dark). Always prefer these over base or primitive values. In the lists below, {intent} stands for brand, accent, info, success, warning, or danger.

Background colors

Used for various background surfaces such as pages, cards, and panels.

--bq-background--primary:   /* Main background color */
--bq-background--secondary: /* Secondary background (cards, panels) */
--bq-background--tertiary:  /* Tertiary background (nested surfaces) */
--bq-background--alt:       /* Alternative background */
--bq-background--inverse:   /* Inverse background (tooltips, dark mode overlays) */
--bq-background--brand:     /* Brand-colored backgrounds */
--bq-background--overlay:   /* Overlay/backdrop color (with opacity) */

Icon colors

Used for SVG icons and graphical elements.

--bq-icon--primary:   /* Primary icon color */
--bq-icon--secondary: /* Secondary icon color */
--bq-icon--inverse:   /* Inverse icon color */
--bq-icon--{intent}:  /* Intent-colored icons on surfaces (strong/bright step) */
--bq-icon--alt:       /* Deprecated — use --bq-text--on-{intent} for icons on solid fills */

Border colors

Used for borders and outlines around UI elements.

--bq-stroke--primary:   /* Primary border color */
--bq-stroke--secondary: /* Secondary border color */
--bq-stroke--tertiary:  /* Tertiary border color */
--bq-stroke--inverse:   /* Inverse border color */
--bq-stroke--alt:       /* Alternative border color */
--bq-stroke--{intent}:  /* Intent-colored borders (strong/bright step) */
--bq-stroke--brand-alt: /* Subtle brand border */

Text colors

Used for typography and text elements.

--bq-text--primary:   /* Primary text color */
--bq-text--secondary: /* Secondary text color (muted) */
--bq-text--inverse:   /* Inverse text color (on dark backgrounds) */
--bq-text--{intent}:  /* Intent-colored text on surfaces and tints (strong/bright step) */
--bq-text--alt:       /* Deprecated — use --bq-text--on-{intent} for text on solid fills */

On-color text

Used for text and icons placed on a solid intent fill (--bq-ui--{intent}). Always pair each fill with its own on-color.

--bq-text--on-brand:   /* Content on --bq-ui--brand */
--bq-text--on-accent:  /* Content on --bq-ui--accent */
--bq-text--on-info:    /* Content on --bq-ui--info */
--bq-text--on-success: /* Content on --bq-ui--success */
--bq-text--on-warning: /* Content on --bq-ui--warning */
--bq-text--on-danger:  /* Content on --bq-ui--danger */

UI colors

Used for small UI elements like buttons, tags, and badges.

--bq-ui--primary:      /* Primary UI element color */
--bq-ui--secondary:    /* Secondary UI element color */
--bq-ui--tertiary:     /* Tertiary UI element color */
--bq-ui--inverse:      /* Inverse UI element color */
--bq-ui--alt:          /* Alternative UI color */
--bq-ui--{intent}:     /* Solid intent fill — pair with --bq-text--on-{intent} */
--bq-ui--{intent}-alt: /* Intent tint — pair with --bq-text--{intent} */

State colors

Used for interactive states. Hover and active colors aren’t separate tokens per element: components blend the rest color with --bq-hover or --bq-active using the CSS color-mix() function.

--bq-hover:  /* Hover blend color */
--bq-active: /* Active/pressed blend color */
--bq-focus:  /* Focus ring color */

/* Example usage */
background-color: color-mix(in srgb, var(--bq-ui--brand), var(--bq-hover) 20%);

See States for how components derive hover and active colors.

Next steps

Component CSS variables

Explore the CSS variables exposed by each BEEQ component for targeted, scoped customization.

Custom Theme

Follow the step-by-step guide to create and apply a fully custom theme to your app.

Get started

Frameworks

Foundations

Theming & customization

Guides

Base theme variables

Intent colors

Neutral colors

Data visualization colors

Typography

Spacing

Border radius

Box shadow

Stroke

Declarative color variables

Background colors

Icon colors

Border colors

Text colors

On-color text

UI colors

State colors

Next steps

Component CSS variables

Custom Theme

​Base theme variables

​Intent colors

​Neutral colors

​Data visualization colors

​Typography

​Spacing

​Border radius

​Box shadow

​Stroke

​Declarative color variables

​Background colors

​Icon colors

​Border colors

​Text colors

​On-color text

​UI colors

​State colors

​Next steps

Component CSS variables

Custom Theme

Base theme variables

Intent colors

Neutral colors

Data visualization colors

Typography

Spacing

Border radius

Box shadow

Stroke

Declarative color variables

Background colors

Icon colors

Border colors

Text colors

On-color text

UI colors

State colors

Next steps