Docs Design Rules Greyscale palette — locked rule

Greyscale palette — locked rule

Instinctor's UI uses a strict greyscale palette. No non-grey colours in admin panels, editor chrome, or first-party templates. This rule is locked.

The palette

| Hex | Use | |---|---| | #1d2327 | Primary text, primary buttons (light bg), heaviest dark | | #1a1d21 | Editor / admin panel background, dark cards | | #2a2e33 | Editor / admin panel border, dark panel separators | | #555 | Secondary text, body copy on light bg | | #999 | Muted text, captions, icons | | #e0e0e0 | Input borders, faint separators, disabled states | | #f5f5f5 | Light backgrounds, panels, subtle fills | | #fff | White, primary CTAs on dark bg, page background |

That's eight values. Everything in the editor and admin chrome must use exactly these. No #888, no #1c1c1c, no rgba(...) variants of these colours that aren't on the list.

What this rule applies to

  • Admin / editor / settings panel UI chrome
  • Plugin admin pages
  • Platform admin pages
  • Marketing pages on instinctor.com (where Instinctor's own brand is shown)
  • Documentation surfaces (KB, in-editor Help)
  • Transactional emails (the Instinctor wrapper, not the user's content)

What this rule does NOT apply to

  • Client sites built in Instinctor — clients can use any colours

    • that fit their brand. Instinctor's editor is colour-agnostic

  • User-uploaded images — obviously can be any colour
  • 3D scene effects — can have any colours; they're effects, not chrome
  • Ecommerce product images — products are user content

Why

Greyscale chrome reads as professional, neutral, and stays out of the way of user content. When the chrome has no opinion about colour, the content (a brand's photos, a product's hero image) gets to be the point.

It also enforces visual discipline. Users who build inside Instinctor see neutral chrome and learn to put colour decisions where they matter — on the canvas, not in the toolbar.

Common violations to watch for

  • Green success toasts — use the dark / light variants of the

    • greyscale instead, with a Lucide check icon to signal success

  • Red error toasts — same: use greyscale with a warning icon, or a

    • thin coloured border that doesn't dominate

  • Yellow warning highlights — same approach
  • Blue link colours in admin — links are #fff, #e0e0e0, or #999

    • on dark; #1d2327 or #555 on light

  • Coloured progress bars — use white on dark backgrounds, dark on

    • light backgrounds

Don't

  • Don't add a primary brand colour to the editor chrome
  • Don't use coloured badges for status (green = active, red = error)

    • — use shape, position, and text instead

  • Don't introduce new greys — pick from the eight
  • Don't use rgba() opacity tricks to fake new shades — pick the

    • closest greyscale value

Related

  • rules/voice-and-self-reference — companion rule for copy
  • rules/no-emojis — no emoji even for status indicators
  • rules/lucide-icons-only — icons follow the same restraint