Color

Structural, action, categorical, and semantic roles #

Start with warm ivory for the canvas and ink navy for text or a dark field. Slate supports muted text on light surfaces; pale steel supplies quiet borders and muted text on dark surfaces. These four colors form the exported structuralColors array.

Existing system rule: core cobalt is the primary action, link, and CTA color. Signal teal, insight coral, focus saffron, and systems violet are reserved for data categories, charts, stat colors, and campaign accents. Do not use those four accents as logo fills, primary CTAs, or persistent navigation colors.

The six-color categoricalPalette starts with cobalt and cornflower, followed by those four storytelling accents. Use labels, shapes, or visible values as well as color to identify categories.

semanticColors maps positive to green, warning to saffron, and error to coral. Positive green is a status color, not a chart category or brand fill. Saffron and coral have two permitted roles; surrounding words distinguish a warning or error from a data category. The marketing conventions describe green as a future state, but this revision already exposes it through video tone tokens and status-capable components.

[
  "#F4F1E9",
  "#0B1221",
  "#596579",
  "#C7CDD6"
]

[
  "#2457F5",
  "#6F91E8",
  "#15877A",
  "#E66752",
  "#D99A24",
  "#7657A8"
]

{
  "positive": "#2F8A5B",
  "warning": "#D99A24",
  "error": "#E66752"
}

var(--ds-focus-saffron)

var(--ds-insight-coral)

Copy palette names and values #

JavaScript names below are public exports; import coreuxPalette from @coreux/ui. CSS names are the installed stylesheet’s --ds-* properties: use var(--ds-core-cobalt) in CSS. Tailwind exposes the matching semantic names, such as bg-core-cobalt and text-ink-navy. Import the package stylesheet once before using its CSS variables or utilities.

#F4F1E9

#f4f1e9

#0B1221

#0b1221

#2457F5

#2457f5

#596579

#596579

#C7CDD6

#c7cdd6

#6F91E8

#6f91e8

#15877A

#15877a

#E66752

#e66752

#D99A24

#d99a24

#7657A8

#7657a8

#2F8A5B

#2f8a5b

Choose combinations by role #

The comparison below teaches color purpose, not a blanket contrast guarantee. Swatches and tone samples keep their text labels outside ambiguous colors. Check the final text/background pairing and provide a readable label rather than assuming every palette combination works for small text.

Appearance fields and shared tones #

Video-derived primitives use fieldMode="light" | "dark" and, where supported, tone="neutral" | "accent" | "muted" | "positive" | "warning" | "error". Each tone supplies surface, text, border, and accent values. Expand a sample to copy its complete object. Actual component props decide which fields they use.

These objects do not create a global theme. Marketing templates instead use their own background and tone="ink" | "ivory" props. Refer to each component’s contract before applying either vocabulary.

{
  "field": "#F4F1E9",
  "foreground": "#0B1221",
  "mutedForeground": "#596579",
  "surface": "#F4F1E9",
  "border": "#596579",
  "grid": "#C7CDD6"
}

{
  "surface": "#F4F1E9",
  "text": "#0B1221",
  "border": "#596579",
  "accent": "#0B1221"
}

{
  "surface": "#2457F5",
  "text": "#F4F1E9",
  "border": "#2457F5",
  "accent": "#F4F1E9"
}

{
  "surface": "#C7CDD6",
  "text": "#0B1221",
  "border": "#596579",
  "accent": "#596579"
}

{
  "surface": "#F4F1E9",
  "text": "#0B1221",
  "border": "#2F8A5B",
  "accent": "#2F8A5B"
}

{
  "surface": "#F4F1E9",
  "text": "#0B1221",
  "border": "#D99A24",
  "accent": "#D99A24"
}

{
  "surface": "#F4F1E9",
  "text": "#0B1221",
  "border": "#E66752",
  "accent": "#E66752"
}

{
  "field": "#0B1221",
  "foreground": "#F4F1E9",
  "mutedForeground": "#C7CDD6",
  "surface": "#0B1221",
  "border": "#C7CDD6",
  "grid": "#596579"
}

{
  "surface": "#0B1221",
  "text": "#F4F1E9",
  "border": "#C7CDD6",
  "accent": "#F4F1E9"
}

{
  "surface": "#2457F5",
  "text": "#F4F1E9",
  "border": "#6F91E8",
  "accent": "#F4F1E9"
}

{
  "surface": "#596579",
  "text": "#F4F1E9",
  "border": "#C7CDD6",
  "accent": "#C7CDD6"
}

{
  "surface": "#0B1221",
  "text": "#F4F1E9",
  "border": "#2F8A5B",
  "accent": "#2F8A5B"
}

{
  "surface": "#0B1221",
  "text": "#F4F1E9",
  "border": "#D99A24",
  "accent": "#D99A24"
}

{
  "surface": "#0B1221",
  "text": "#F4F1E9",
  "border": "#E66752",
  "accent": "#E66752"
}

Apply color tokens #

'use client';

import { coreuxPalette, categoricalPalette } from '@coreux/ui';

export default function ColorComposition() {
  return (
    <div style={{ background: coreuxPalette.warmIvory, color: coreuxPalette.inkNavy, padding: 24, border: `1px solid ${coreuxPalette.paleSteel}`, borderRadius: 16 }}>
      <p style={{ margin: 0, fontFamily: 'Switzer', fontSize: 24, fontWeight: 600 }}>Choose a clear next step.</p>
      <p style={{ color: coreuxPalette.slate, margin: '12px 0', lineHeight: 1.5 }}>Keep the action color separate from the categories in your story.</p>
      <ul style={{ display: 'flex', flexWrap: 'wrap', gap: 16, listStyle: 'none', padding: 0 }}>
        {['Research', 'Design', 'Delivery'].map((label, index) => (
          <li key={label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span aria-hidden="true" style={{ width: 12, height: 12, background: categoricalPalette[index] }} />{label}
          </li>
        ))}
      </ul>
      <a href="#color-details" style={{ color: coreuxPalette.coreCobalt, textDecoration: 'underline', textUnderlineOffset: 4 }}>Read the color details</a>
      <p id="color-details" style={{ color: coreuxPalette.slate, margin: '16px 0 0', lineHeight: 1.5 }}>Labels identify categories even without color. This is an illustrative composition.</p>
    </div>
  );
}

Values generated from @coreux/ui at 06f42fd: public foundation tokens, marketing stylesheet, bundled font definitions, and marketing conventions. Source links require repository access. Install the package and styles once.