The primary lockup on backgrounds

Same SVG, four contexts. The lockup is colored by currentColor — the surface chooses, the mark adapts.

Alternate lockups

For contexts where the horizontal lockup doesn't fit — narrow columns, square avatars with the wordmark beneath, headers where only the name needs to appear. Each is shipped as its own SVG with the same locked spacing and all-caps wordmark as the primary lockup. Use these instead of the primary, never combined with it.

Icon-only fallback

The star may appear alone only when the surface is square and too small to read the wordmark — favicons, profile avatars, app icons, social chips at < 32 px. Anywhere larger, use the full lockup.

Usage

Tertiary palettes

Two supporting families for roles the primary brand colors don't carry alone. They fill specific functional jobs — they don't compete with Brand Primary/Brand Secondary/Brand Accent for brand expression. Surfaces and borders are not in here: they use Brand Primary 800–950 directly, because the brand canvas IS Brand Primary.

Status tones

Four tones — Info, Success, Warning, Danger — for client-facing demos, pitch slides, roadmap labels, diagram pips ("live / planned / deprecated"), status pages, release notes. They share hue, peak chroma, and the same Gaussian curve as the in-product design system's status tokens, so anything that moves between a brand surface and the console reads as the same colour family.

Boundary — this is not a replacement for the design system's full status-token matrix (hover, border, light-fill, dark-fill, surface-adaptive variants). For interactive UI — alerts, toasts, badges, table-row status — pull from @vela/ds-tokens directly. The brand kit gives you one canonical shade per tone for non-interactive use, plus the full ramp for diagrams and charts.

Danger vs Brand Accent 600 — Brand Accent 600 (#9F4111) remains the brand-side default for "danger / urgent" (see §4.2). The Danger ramp below exists so the four tones live as a coherent set, and for the rare demo where a vivid red is genuinely required (e.g. a "critical risk" pip where Brand Accent's burnt-orange reads as warning not stop).

The marked default (●) is the canonical step on the dark navy canvas — Info 400, Success 400, Warning 300, Danger 400. On light surfaces, step one down (Info 500, Success 600, Warning 400, Danger 600). Warning sits a step lighter than the others because yellow at L ≤ 0.55 reads as olive / muddy.

Type scale

Labs product icons

Each Labs product gets its own glyph drawn in stroke, filled with the green → orange diagonal gradient. Same gradient, different shape. This is the only sanctioned use of the two-hue blend.

App-icon tile

Jack at 38% of tile width, Slate 50 fill, on a Brand Primary 900 (#07214D) rounded square (256 × 256, corner radius 56). Use for native app icons, web favicons at large sizes, splash screens, and product surfaces.

logos/sub-brands/deal-intelligence/mark/
  deal-intelligence-mark.svg          /* currentColor */
  deal-intelligence-mark-black.svg
  deal-intelligence-mark-white.svg
  deal-intelligence-app-icon.svg      /* navy tile */

Wordmark

DEAL INTELLIGENCE, drawn in Figtree 700 all-caps with custom per-letter spacing. The INTELLIGENCE half is lifted verbatim from the parent wordmark; only DEAL is new. (Figtree's G with its near-45° terminal is the distinguishing tell — compare Manrope's straight-cut G.)

Primary lockup

Jack mark + wordmark, horizontal. Default whenever the full name fits. Caps vertically centered on the mark.

Usage

The navy migration

The defining trick is that Brand Primary 900 stays the brand's structural anchor in both modes — it just changes role. On dark, it is the canvas; on light, it becomes the primary text. The eye reads the same hue in both modes; only the figure-ground inverts. This is what keeps both modes recognisably Vela Intelligence.

Semantic tokens

The brand kit publishes raw OKLCH ramps in §02. Semantic tokens sit on top and name colours by their UI role, so component CSS doesn't reach into raw --brand-primary-800 directly, and so a single component file can serve both modes by aliasing the same role to different stops. See the canonical CSS-variable definitions in brand-kit.md §7.

Naming note — --accent-emphasis means the more emphatic of the two accent tokens, not the literally brighter one. On dark, it's lighter (Brand Secondary 300); on light, it's darker (Brand Secondary 700). The role is preserved; the lightness inverts.

Danger note — on dark surfaces, Brand Accent 600 (the brand-side danger voice) reads as muddy when used as text. --status-danger therefore points at Danger 400 on dark and Danger 600 on light for text and border roles. Solid danger fills stay at Brand Accent 600 in both modes — the colour reads as "stop" on either canvas, and --white provides the on-fill text.

Light-mode body atmosphere

The optional two-radial-glow atmosphere from §4 has a light-mode counterpart. Both glows use Brand Secondary 300 at very low alpha — same family as the dark mode's Brand Secondary 600 glow, lifted to the lighter stop because we're glowing on white rather than on navy. No Gold corner — Gold's role is warm contrast on specific surfaces, pulling it into an atmospheric layer would dilute that specificity.

body[data-mode="light"] {
  background:
    radial-gradient(circle at 22% 18%, oklch(0.730 0.107 163 / 0.08) 0%, transparent 38%),
    radial-gradient(circle at 82% 78%, oklch(0.730 0.107 163 / 0.06) 0%, transparent 40%),
    linear-gradient(160deg, var(--canvas) 0%,
                    color-mix(in srgb, var(--surface-deep) 70%, var(--canvas)) 100%);
}