Docs Platform Docs
Sandbox

Brand Colors

Platform provides default brand colors and each brand or site can override only the colors it needs.

Color Names

Use these color names everywhere:

  • primary
  • secondary
  • info
  • success
  • warning
  • danger
  • surface
  • surface_muted
  • text
  • muted

Avoid vague names like accent. If a color has a job, name the job.

Default Colors

Platform defaults live in config/platform.php under brand_colors.

These defaults are basic Tailwind-style colors. A site with no overrides still gets a complete color set.

Dark-mode defaults live in dark_brand_colors. These override surface and text colors when Flux applies the .dark class:

'dark_brand_colors' => [
    'surface' => '#18181b',
    'surface_muted' => '#27272a',
    'text' => '#f8fafc',
    'muted' => '#cbd5e1',
],

Brand identity colors like primary, secondary, info, success, warning, and danger keep their configured values in dark mode unless a later feature adds explicit dark variants.

Overrides

Brand and site records store overrides in a colors JSON column:

'colors' => [
    'primary' => '#0f766e',
    'secondary' => '#134e4a',
    'warning' => '#f59e0b',
],

Only store colors that differ from Platform defaults.

The resolution order is:

  1. Platform defaults from config('platform.brand_colors')
  2. Brand colors
  3. Site colors

Site colors win over brand colors. Brand colors win over Platform defaults.

Access

Use the Site helpers:

$site->brandColor('primary');
$site->brandColors();

Views receive the resolved colors as CSS variables:

--brand-primary
--brand-secondary
--brand-info
--brand-success
--brand-warning
--brand-danger
--brand-surface
--brand-surface-muted
--brand-text
--brand-muted

Components should use these variables instead of hardcoded brand colors.

Reusable rrr components should not use the --brand-* variables directly as their long-term API. Prefer semantic Tailwind utilities such as bg-surface, bg-surface-muted, text-muted, and border-border. Tailwind theme defaults define the utility names, and the body scope maps those semantic variables to the resolved --brand-* values so Flux dark mode can swap the values under html.dark body. Inline style usage is acceptable only as a temporary bridge until the semantic utility exists.

The semantic utilities are defined in resources/css/app.css:

bg-primary
bg-secondary
bg-info
bg-success
bg-warning
bg-danger
bg-surface
bg-surface-muted
text-primary
text-secondary
text-info
text-success
text-warning
text-danger
text-muted
border-border

Do not add a default text utility just to restate normal page text color. Headings and body copy should inherit by default; use a text color utility only when the component needs a specific color role.

Legacy Columns

The old primary_color, secondary_color, and accent_color columns still exist during the transition. New work should use colors.

Legacy accent_color maps to warning for compatibility.