Editorial palette
themes specs/themes/editorial-palette.kmd
12-color expressive palette for Koder marketing, landing illustration, blog headers, and social posts — distinct from Verge UI palette (Adwaita 1:1) which governs in-product surfaces. Editorial primaries are HCL-rotated derivatives of Verge primaries so brand + product feel kin. Tracker: meta/brand/koder-design#001. Source-of-truth files live under meta/brand/koder-design/palette/editorial/.
When this spec applies
Primary triggers
- Use color in a Koder marketing or editorial surface
All triggers
- Compose marketing illustration, landing hero, blog header, social post
- Pick a color for editorial / brand surface (NOT in-product UI)
- Decide between Verge color and editorial color for a brand asset
Specification body
Spec — Editorial palette
R1 — Scope split: editorial vs UI
The Koder visual system uses two palettes, with non-overlapping use:
| Palette | Where it ships | Examples |
|---|---|---|
Verge UI (specs/themes/verge.kmd) | Every in-product surface: app chrome, controls, form fields, dialogs, system feedback, settings, dashboards. | Koder Talk, Flow web UI, Hub catalog, every Koder Stack admin/console. |
| Editorial (this spec) | Brand / marketing / pre-product surfaces: landing illustrations, blog headers, social cards, sales decks, OG images for marketing posts. | koder.dev/about, koder.dev/blog/*, OG images for Twitter/LinkedIn campaigns. |
Surfaces MUST NOT mix the palettes within the same artifact. A product
dialog uses Verge; a marketing illustration uses editorial. The KDS
docs site itself (kds.koder.dev) uses Verge for chrome and MAY use
editorial in hero illustrations.
R2 — The 12 colors
Source-of-truth machine-readable file:
meta/brand/koder-design/palette/editorial/editorial-palette.json
(DTCG format, plus koder.derivation_from and koder.use extensions
per color). Master SVG swatch sheet: editorial-palette.svg.
| Slug | Hex | Derivation from Verge | Use |
|---|---|---|---|
indigo | #6366f1 | verge.blue rotated +20° | Primary editorial accent; hero. |
teal | #14b8a6 | verge.green rotated -10° | Growth / success / fresh narrative. |
amber | #fbbf24 | verge.yellow | Warmth / energy; pairs with indigo. |
coral | #fb7185 | verge.red softened | Emotional / human / community. |
magenta | #ec4899 | verge.purple shifted | Creative / playful / illustration accent. |
violet | #a855f7 | verge.purple | Mystical / AI / data-narrative. |
sage | #84cc16 | verge.green shifted toward yellow | Organic / natural / wellness. |
ochre | #d97706 | verge.orange | Earthy / craft / heritage. |
plum | #7c3aed | verge.purple deepened | Deep editorial; long-form covers. |
cyan | #06b6d4 | verge.blue shifted | Technology / clarity / data-viz cool. |
slate | #475569 | verge.neutral | Editorial body text, dividers. |
cream | #fef3c7 | verge.yellow at high lightness | Warm background tint. |
R3 — Derivation contract
Every editorial color MUST trace its koder.derivation_from back to a
Verge primary (or neutral). This is not aesthetic — it guarantees
that brand + product feel kin instead of like two unrelated visual
identities. New editorial colors require the same trace, and a PR
adding one MUST update both editorial-palette.json (with
koder.derivation_from) and this spec table.
The rotation is HCL-space, not RGB — colors derived in RGB drift in perceived brightness and break the kinship contract.
R4 — When to use Verge vs editorial
| Situation | Palette |
|---|---|
| In-app dialog / toast / control surface | Verge |
| Landing-page hero illustration | Editorial |
| OG image for product release post | Editorial |
| Status bar / system feedback in app | Verge |
| Status visualization in marketing infographic | Editorial |
| Email template body | Editorial (with Verge link colors) |
| Code block syntax highlighting | Verge (consistency with IDE themes) |
| Brand mark / wordmark colors | Editorial (specifically indigo) |
When in doubt: ask "is this rendered alongside a Verge component the user is interacting with?". If yes → Verge. If no → editorial.
R5 — Accessibility
- Editorial colors are not WCAG-audited as UI. They are for illustration / large-format surfaces where AA contrast against body text is enforced compositionally (text on a designated text-color, not on the editorial accent itself).
- When editorial colors carry text (e.g. social card with copy on top of the swatch), the consumer MUST verify AA contrast against the text color in their own surface — this spec does not pre-audit every editorial × text combination.
creamis the only editorial color safe as a body-text background in long-form reading mode (verified AA against slate body text).
R6 — Distribution
The DTCG JSON ships under meta/brand/koder-design/palette/editorial/
and is consumed by:
tools/design-gen— exposes editorial colors as CSS custom properties under--kds-editorial-<slug>alongside the Verge tokens, but at a different scope (NOT auto-applied to:root; consumers opt-in via a wrapper class.kds-editorial).- Marketing surfaces (landing pages, Hub catalog page) — import the JSON in build to compose hero illustrations.
A consumer that wants both palettes in one document scopes Verge to
the document root and editorial to a specific section via the
.kds-editorial wrapper:
<body class="kds-themed"> <!-- Verge tokens at :root -->
<main>
<article>…UI components…</article>
<section class="kds-editorial">
<!-- editorial colors only inside this section -->
<svg fill="var(--kds-editorial-indigo)">…</svg>
</section>
</main>
</body>
Tests
| ID | Test |
|---|---|
| T1 | editorial-palette.json parses as valid DTCG; every color carries koder.derivation_from and koder.use. |
| T2 | Every entry in §R2 table appears in the JSON; every JSON entry appears in the table. |
| T3 | No editorial color appears in a Verge token file (grep audit — palettes are non-overlapping at the impl level too). |
| T4 | Landing pages that apply editorial colors do so under a .kds-editorial wrapper (no --kds-editorial-* at :root). |
| T5 | Master SVG renders the 12 colors in the same hex values as the JSON. |
Não-escopo
- Application of editorial palette to existing landing pages — opens per-page tickets when individual landings update.
- Editorial typography — separate spec (see fonts/typography.kmd for Wave 2 display face roadmap).
- Light-mode variants — editorial colors are surface-color agnostic; they sit on illustrative backgrounds set independently.
References
specs/themes/verge.kmd— the UI palette this one derives frommeta/brand/koder-design/palette/editorial/editorial-palette.json— machine-readable source of truthmeta/brand/koder-design/palette/editorial/editorial-palette.svg— master swatch sheet- Help Scout brand (https://www.helpscout.com/brand/) — referenced pattern in evidence_url of ticket #001
References
specs/themes/verge.kmdmeta/brand/koder-design/palette/editorial/editorial-palette.json