sleak
All rules

Intentional accent

1 focal point / view

Intentional accent use (core rule)

Use the main accent with intent, not decoration. The accent exists to pull the eye to the most important task on the page. Every extra hit of full accent dilutes that signal and wastes brand impact.

Goal

One clear visual priority per view. The user should know what to do next without scanning a sea of the same brand color.

Rule

Tier Use Saturation
Primary accent The main action, critical link, or single focal control Full accent
Accent tints Selected row, subtle highlight, focus ring fill, badge that supports the primary task Same hue, lower opacity or lower saturation
Neutrals Body text, surfaces, borders, icons, secondary buttons Accent hue only on tinted darks (see below), not full chroma

Full accent is scarce. If everything is accent, nothing is.

Allowed (intent)

  • Primary CTA button
  • Current nav item / active tab (one)
  • Key inline link or single hero action
  • Critical status that blocks or unlocks the main task (error on submit, required field)
  • Focus indicator (often accent at partial opacity)

Limit or remove (decoration)

  • Accent icon on every feature card
  • Accent borders on all containers
  • Accent headings, eyebrows, and dividers on the same page
  • Gradient wash and accent buttons and accent bullets
  • Secondary buttons in full accent when one primary already exists
  • Decorative badges ("New", "Popular") on every block unless they drive the one main action

Test: Cover the page with your thumb except one element. If the main task isn't obvious, you have too much accent, or it's on the wrong things.

Try it · One focal point
Overview
Reports
Settings
Team plan
Usage
recent activity
Start free trial

Opacity variations

Same accent hue at reduced strength is fine when it supports hierarchy, not when it spreads color for looks:

--accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));

--accent-primary: var(--accent);                    /* full, primary CTA only */
--accent-subtle:  hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.12);
--accent-muted:   hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.08);
--accent-border:  hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.24);

Use tints for: selected state background, hover on related items, focus halo, progress toward the primary action.

Do not stack many tint layers across unrelated sections, that recreates "accent everywhere" at lower saturation.

Try it · Tints support, don't stack
Overview
Reports
Settings
Save changes

Workflow

  1. Name the one job, "Sign up", "Export", "Choose plan", "Send message".
  2. Assign full accent to that control (and at most 1–2 supporting calls if truly co-equal).
  3. Demote everything else, neutral secondary buttons, neutral icons, spacing for structure.
  4. Audit decorative accent, remove any full-chroma use that doesn't change what the user does next.
  5. Tints sparingly, opacity variants only where they reinforce the primary path.

Audit

Signal Severity
Can't identify primary task in 3 seconds High
4+ elements at full accent saturation High
Accent on icons, borders, and headings with no action tie Medium
More than one competing primary-strength CTA Medium
Tinted accents on every section background Medium, trim to active/related areas

Count full-saturation accent instances. Target: 1 primary, rarely 2 on dense screens. Everything else neutral or low-opacity tint.