Back to Schema Browser

CSS Variables Reference

Comprehensive list of CSS custom properties (variables) available in PageHub design system. Use with Tailwind arbitrary value syntax: bg-primary

Usage

Use CSS variables with Tailwind's arbitrary value syntax:

bg-[var(--primary)]text-[var(--text)]gap-[var(--section-gap)]

Quick Reference

backgrounds

bg-primarybg-secondarybg-accentbg-base-100bg-base-200

text Colors

text-base-contenttext-base-contenttext-primarytext-primary-contenttext-secondary-content

borders

border-primaryborder-[var(--input-border-color)]rounded-[var(--radius)]rounded-[var(--radius-lg)]rounded-[var(--radius-box)]

spacing

p-[var(--container-padding)]px-[var(--container-padding-x)]py-[var(--container-padding-y)]px-[var(--button-padding-x)]py-[var(--button-padding-y)]

effects

shadow-[var(--shadow-style)]focus:ring-[var(--input-focus-ring-color)]

Colors

Dynamic color palette variables that adapt to theme

--primary

Primary brand color

Usage
bg-primarytext-primaryborder-primary
Examples
bg-primaryhover:bg-primary
--primary-foreground

Text color that contrasts with primary color

Usage
text-primary-content
Examples
text-primary-content
--secondary

Secondary brand color

Usage
bg-secondarytext-secondaryborder-secondary
Examples
bg-secondaryborder-secondary
--secondary-foreground

Text color that contrasts with secondary color

Usage
text-secondary-content
Examples
text-secondary-content
--accent

Accent color for highlights and CTAs

Usage
bg-accenttext-accentborder-accent
Examples
bg-accenthover:text-accent
--accent-foreground

Text color that contrasts with accent color

Usage
text-accent-content
Examples
text-accent-content
--muted

Neutral color for backgrounds and borders

Usage
bg-neutraltext-neutralborder-neutral
Examples
bg-neutralborder-neutral
--muted-foreground

Text color that contrasts with neutral color

Usage
text-neutral-content
Examples
text-neutral-content
--background

Default page background color (alias for --base-100)

Usage
bg-base-100
Examples
bg-base-100
--foreground

Default body text color (alias for --base-content). Prefer this over legacy --text.

Usage
text-base-contenttext-base-content
Examples
text-base-contenttext-base-content
--text

LEGACY: only exists if the palette includes a slot literally named "Text". Default themes use --foreground instead.

Usage
text-[var(--text)]
Examples
text-[var(--text)]
--card

Alternate background color for sections

Usage
bg-base-200
Examples
bg-base-200
--card-foreground

Text color for alternate backgrounds

Usage
text-base-content
Examples
text-base-content
--accent-color

Additional accent color variant

Usage
bg-[var(--accent-color)]text-[var(--accent-color)]
Examples
text-[var(--accent-color)]

FormColors

Form input color variables

--input-border-color

Border color for form inputs

Usage
border-[var(--input-border-color)]
Examples
border-[var(--input-border-color)]
--input-bg-color

Background color for form inputs

Usage
bg-[var(--input-bg-color)]
Examples
bg-[var(--input-bg-color)]
--input-text-color

Text color for form inputs

Usage
text-[var(--input-text-color)]
Examples
text-[var(--input-text-color)]
--input-placeholder-color

Placeholder text color for form inputs

Usage
placeholder:text-[var(--input-placeholder-color)]
Examples
placeholder:text-[var(--input-placeholder-color)]
--input-focus-ring-color

Focus ring color for form inputs

Usage
focus:ring-[var(--input-focus-ring-color)]
Examples
focus:ring-[var(--input-focus-ring-color)]

LinkColors

Link color variables

--link-color

Default link color

Usage
text-[var(--link-color)]
Examples
text-[var(--link-color)]
--link-hover-color

Link hover color

Usage
hover:text-[var(--link-hover-color)]
Examples
hover:text-[var(--link-hover-color)]

Spacing

Spacing and dimension variables

--section-gap

Gap between major page sections

Usage
gap-[var(--section-gap)]py-[var(--section-gap)]
Examples
gap-[var(--section-gap)]py-[var(--section-gap)]
--container-gap

Gap between elements within containers

Usage
gap-[var(--container-gap)]
Examples
gap-[var(--container-gap)]
--container-padding

Padding for containers (combined x and y)

Usage
p-[var(--container-padding)]
Examples
p-[var(--container-padding)]
--container-padding-x

Horizontal padding for containers

Usage
px-[var(--container-padding-x)]
Examples
px-[var(--container-padding-x)]
--container-padding-y

Vertical padding for containers

Usage
py-[var(--container-padding-y)]
Examples
py-[var(--container-padding-y)]
--button-padding

Padding for buttons (combined x and y)

Usage
p-[var(--button-padding)]
Examples
p-[var(--button-padding)]
--button-padding-x

Horizontal padding for buttons

Usage
px-[var(--button-padding-x)]
Examples
px-[var(--button-padding-x)]
--button-padding-y

Vertical padding for buttons

Usage
py-[var(--button-padding-y)]
Examples
py-[var(--button-padding-y)]
--content-width

Maximum width for content containers

Usage
max-w-[var(--content-width)]
Examples
max-w-[var(--content-width)]

Borders

Border styling variables

--radius

Default border radius (buttons, small surfaces, hero images)

Usage
rounded-[var(--radius)]
Examples
rounded-[var(--radius)]
--radius-lg

Larger radius for badges and emphasized chips (between default and card)

Usage
rounded-[var(--radius-lg)]
Examples
rounded-[var(--radius-lg)]
--radius-box

Border radius for cards and large media frames

Usage
rounded-[var(--radius-box)]
Examples
rounded-[var(--radius-box)]
--radius-full

Pill/circle geometry (avatars, circular masks)

Usage
rounded-[var(--radius-full)]
Examples
rounded-[var(--radius-full)]
--input-border-width

Border width for form inputs

Usage
border-[var(--border)]
Examples
border-[var(--border)]
--radius-field

Border radius for form inputs

Usage
rounded-[var(--radius-field)]
Examples
rounded-[var(--radius-field)]

Effects

Shadow and visual effect variables

--shadow-style

Default shadow style for elevated elements

Usage
shadow-[var(--shadow-style)]
Examples
shadow-[var(--shadow-style)]

Typography

Typography variables (dynamic based on design system)

--heading-font-family

Font family for headings

Usage
font-[var(--heading-font-family)]
Examples
font-[var(--heading-font-family)]
--heading-font-size

Font size for headings

Usage
text-[var(--heading-font-size)]
Examples
text-[var(--heading-font-size)]
--heading-font-weight

Font weight for headings

Usage
font-[var(--heading-font-weight)]
Examples
font-[var(--heading-font-weight)]
--heading-line-height

Line height for headings

Usage
leading-[var(--heading-line-height)]
Examples
leading-[var(--heading-line-height)]
--heading-letter-spacing

Letter spacing for headings

Usage
tracking-[var(--heading-letter-spacing)]
Examples
tracking-[var(--heading-letter-spacing)]
--heading-text-transform

Text transform for headings (uppercase, lowercase, etc.)

Usage
[text-transform:var(--heading-text-transform)]
Examples
[text-transform:var(--heading-text-transform)]
--body-font-family

Font family for body text

Usage
font-[var(--body-font-family)]
Examples
font-[var(--body-font-family)]
--body-font-size

Font size for body text

Usage
text-[var(--body-font-size)]
Examples
text-[var(--body-font-size)]
--body-font-weight

Font weight for body text

Usage
font-[var(--body-font-weight)]
Examples
font-[var(--body-font-weight)]
--body-line-height

Line height for body text

Usage
leading-[var(--body-line-height)]
Examples
leading-[var(--body-line-height)]

Notes

  • •All CSS variables follow the pattern: var(--{variable-name})
  • •Use with Tailwind arbitrary value syntax: property-[var(--variable)]
  • •Variables are defined in TypeScript at types/css.d.ts
  • •Variables are generated at runtime from design system settings
  • •Custom palette colors are automatically available as --{color-name}