Accent colors

Principles

Three rules that decide whether to reach for an accent, and which token to start with.

Anatomy of an accent

Every accent ships five tokens, each pinned to a step on the hue ramp. Together they cover the canvas, the layered surfaces inside it, the headline that names the section, and the line that contains it.

Icons inherit from text.accent.<hue> via currentColor— there's no separate icon accent token. Set the colour on the wrapper; the icon follows. (See Iconography › Color for the rule.)

The layering rule

Always start with subtlest.It's the canvas — a tinted page section, an empty-state surface, an accent-flavoured callout. Only reach for subtler when a child element needs to read as a step in from the canvas. Only reach for subtle when a third tier of nesting earns the depth.

The accent palettes

Eight brand hues plus natural. Each ships the full ladder — three backgrounds, a border, a headline text. Each ramp is a hue family in the underlying palette; the accent tokens just name the steps the system commits to.

Pairing text, icons, and borders

Every accent surface inherits its foreground from the same hue family. A blurple background carries blurple text and a blurple border — never a green or charcoal mix. The token names enforce this; the rule is to follow them.

• Headline / accent text → text.accent.<hue>. The dark hue (900 step). Pairs with subtlest, subtler, or subtle. Always meets WCAG AA against the matching background.
• Body copy → text.primary. The default neutral charcoal. Body running on top of a subtlest or subtler background reads as ordinary prose, just on a tint.
• Icons → currentColor. No separate icon accent tokens. Set the parent's text colour (text.accent.<hue> or text.primary) and the icon follows.
• Borders → border.accent.<hue>. Same step as subtle. Pair with a subtler background to clear the 3:1 contrast bar for non-text UI.

Accents vs. status colors

The hue is the same; the role is different. background.accent.green.subtlest and background.success.subtlest can resolve to the same hex — but they communicate two different things, and they shouldn't be substitutable in code.

Accessibility

Every text.accent.<hue> is calibrated to meet WCAG AA against the three accent backgrounds in its family — 4.5:1 for body, 3:1 for large text and non-text UI. The system pre-pairs these; you don't need to hand-check every combination so long as you stay inside one hue.

Never carry meaning in colour alone. Pair every accent surface with a label, an icon, or a structural cue (a heading, a list group). A blurple card without a label is a decoration; with the label “Discovery”, it's a section.

In code

Reach for the accent CSS variables exposed by @flatpay-dk/ui/styles. The variables resolve to the right primitive in light or dark mode without the consumer thinking about it.

// Default — start with subtlest, layer subtler/subtle as needed
<section
  className="rounded-xl p-6"
  style={{ backgroundColor: "var(--color-bg-accent-blurple-subtlest)" }}
>
  <h3
    className="font-display text-2xl font-bold uppercase"
    style={{ color: "var(--color-text-accent-blurple)" }}
  >
    Discovery
  </h3>
  <p className="mt-3 text-sm">
    A note on what this section communicates.
  </p>

  {/* Step in for a child surface */}
  <article
    className="mt-4 rounded-md p-4"
    style={{ backgroundColor: "var(--color-bg-accent-blurple-subtler)" }}
  >
    <p className="text-sm">A card that needs to read as nested.</p>

    {/* The deepest layer — used sparingly */}
    <span
      className="ml-2 inline-block rounded px-2 py-0.5 text-xs"
      style={{ backgroundColor: "var(--color-bg-accent-blurple-subtle)" }}
    >
      Highlight
    </span>
  </article>
</section>

Don'ts

• 01Don't skip subtlest. Opening a section on subtler or subtle burns the ladder before the child elements can climb it.
• 02Don't mix accent families inside one component. Blurple background plus green border plus pink badge reads as a bug. Same family, every surface.
• 03Don't use accents for state. accent.green communicates “this thing is green-coded”, not “this thing succeeded”. Status uses the success role.
• 04Don't reach for primitives. color/blurple/200 skips the system. Components consume accent.blurple.subtler so light/dark themes resolve the right step.
• 05Don't pair accent text with charcoal accent backgrounds (and vice versa). The contrast pair is calibrated within one hue family. Crossing families breaks the pairing.
• 06Don't carry meaning in colour alone. Pair every accent surface with a heading, label, or icon. The colour is the dressing; the copy is the message.

Related