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.

Paper is the counterpart to Slate. Slate is the cool neutral — Brand Primary's side of the wheel with the chroma pulled out, carrying text on the dark canvas. Paper is the warm neutral — Gold's hue with the chroma pulled out, carrying surfaces in the contexts that get read rather than presented on a screen. It stops at 300 deliberately: it is a surface family, not a colour family, and anything darker would just be a warm black that Brand Primary 950 already does better.

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 (#873D00) 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.

Getting the fonts

All three families are SIL Open Font License and ship inside this repository — nothing to buy, nothing to sign. There are three ways to load them. Pick by what you're making; never mix two in one document.

Installing onto a Mac

From the repository root:

./scripts/install-fonts.sh

Copies five variable TTFs into ~/Library/Fonts. Per-user — no sudo, no password, nothing outside your home folder is touched. Safe to run again any time: identical files are skipped, changed files are replaced, and older hand-installed duplicates are retired only when the bytes prove they're redundant. Run ./scripts/install-fonts.sh --check to see the status without changing anything.

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.

Deck — a cadence, not a canvas

The mistake that makes a deck exhausting is picking one ground and using it for forty slides. A deck alternates. Its unit of design is the sequence, not the slide. Seven archetypes, each with a fixed ground:

A well-shaped section, read left to right — the navy returns often enough to feel like the brand, and leaves often enough that nobody gets tired:

Document — paper, and restraint

A report is read alone for twenty minutes. It wants consistency, not rhythm. Paper 50 is the canvas for essentially the whole document — the cover is the one dark page.

Producing a document — the report stylesheet

Most Vela reports and client-facing PDFs are written as Markdown and rendered to PDF by Vaelora, a Mac app that paginates properly — headings never split from their content, the table of contents carries real page numbers, and the PDF gets a clickable outline. Everything above in the Document context is available as a ready-made Vaelora stylesheet, so a report comes out brand-correct without anyone styling it by hand.

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%);
}