Logo System
Our identity is one SVG: logo-vela-intelligence.svg — the star and the wordmark locked together as a single file. The wordmark carries specific kerning, optical sizing, and forced uppercase that can only be preserved by using the vector file. Treat it as one unit. The icon-only star exists only as a fallback for square contexts (favicons, avatars).
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
- Always use the full lockup SVG (
logo-vela-intelligence.svg) whenever there is room for the wordmark to be read. - Keep the star and "VELA INTELLIGENCE" together as one unit — they ship as one SVG for a reason.
- Preserve minimum clear space equal to the height of one star-point (≈ 25% of the lockup height) on all sides.
- Render the file in
currentColorwhen embedded in product code, so theme switches "just work" between light and dark mode. - Pair the white-on-brand variant with the primary 600/700 shades — not the lighter 50–300 shades.
- Don't separate the star from the wordmark — they belong together. The star alone is only for square contexts under 32 px.
- Don't re-typeset "Vela Intelligence" in Montserrat or any other font. The wordmark has its own kerning and forced uppercase — use the SVG.
- Don't change the case — the wordmark is always all-caps. No "Vela Intelligence" in mixed-case as a graphic.
- Don't change the spacing between the star and the wordmark, or rearrange them vertically as a custom stack.
- Don't recolor the star and wordmark independently — they are one mark, one color.
- Don't rotate, skew, outline, or stretch the lockup. Don't add drop shadows beyond the brand-supplied hero treatment.
Color Palette
Three primary families — Indigo, Emerald, Ember — plus two tertiary families: Slate (cool gray for text) and Gold (warm contrast). Each ramps across 11 shades. The canonical brand shades in practice are Indigo 900 (the dark canvas), Emerald 600 (voice / trust), and Ember 400 (action / CTA) — that last one is intentionally lighter than the 600 default because Ember at 600 reads as muddy, and the brand needs its accent bright. Hover any swatch and pick T to copy the CSS-variable token (e.g. --indigo-600), H for hex, O for the oklch() value — ready to paste into CSS or HTML.
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 Indigo/Emerald/Ember for brand expression. Surfaces and borders are not in here: they use Indigo 800–950 directly, because the brand canvas IS Indigo.
- Slate 50 — primary body text on the dark navy canvas (near-white with a cool cast). Replaces a generic
#F4F4F4off-white. - Slate 200 — secondary text. Subheadings, descriptions under headlines, less-prominent paragraphs.
- Slate 400 — tertiary text. Captions, metadata, timestamps ("Updated 2h ago"), source citations, helper text under form fields, disabled-state labels.
- Slate 700–950 — extremely rare; used only when an element specifically needs a desaturated dark variant the Indigo ramp can't supply.
- Gold 100–200 — warm contrast slide backgrounds in formal pitch decks. The sand-coloured rest from the navy → emerald cadence.
- Gold 300–500 — the "Social" pillar dot in ESG contexts, and similar single-purpose semantic markers.
- Never as a brand voice or CTA color — Gold supports a moment of warmth, then steps back.
Typography
Three type families. Manrope carries the headings and the numbers we want to feel confident. Inter handles everything that needs to read like a sentence. JetBrains Mono does the specific monospace work — eyebrows, code, token names, hex values, metadata.
Type scale
Gradient & Color Behavior
How the brand colors actually live on a page. Observed from the marketing site: a dark navy atmosphere, two-color pairings only, and "gradient" expressed more often as a colored glow than a literal fill. The working anchors below (navy, emerald, orange, sand) are pulled directly from the site CSS — they sit alongside the OKLCH brand palettes and are a candidate for a deeper color reconciliation pass.
A · The atmosphere
The brand's native habitat is dark navy, not white. Off-white type, emerald glow, orange singular CTA. Every page on the marketing site obeys this composition.
to Decisions.
B · Working anchors & roles
Every working color the brand uses, mapped to its canonical palette swatch. The hex is what currently ships; the palette name is the source of truth.
C · Pairing rules
linear-gradient(), radial-gradient(), conic-gradient(). Never a raster image (no background-image: url('gradient.png')) and never an SVG used as a page backdrop. Image-based gradients band visibly, leave hard seams where the image ends when users scroll or resize, and break on retina / ultra-wide / dark-mode. The single exception is inside SVG asset files — the Emerald → Ember labs gradient lives inside labs/zephlyn-icon.svg and labs/vaelth-icon.svg because those are vector icons, not page backdrops.Gradients pair exactly two colors. There are four allowed recipes and one explicit "never".
D · Glow as a brand technique
The site does most of its "colored light" with box-shadow, not with gradient fills. Hover any element below to see it.
E · Translucency
Brand color at reduced alpha is the third "gradient" technique. Use these target alphas for tinted glassmorphic surfaces.
F · Gradient angles
Where direction matters, only these angles appear in brand-approved usage.
G · Accents for data — charts, graphs, multi-series
When you need more than the brand triad — bar charts, line series, donut segments, any data split into groups — extend the palette from the token families in the original brand tokens.
Recommended chart palette · all at L = 0.63
The same palette on three contexts — see how each colour holds up
Picking order — what to reach for, in what scenario
| Scenario | Palette |
|---|---|
| 1–3 categorical series | Indigo 400, Emerald 400, Ember 400 — brand triad at the chart lightness |
| 4–6 categorical series | Brand triad + Lime 400, Pool 400, Plum 400 — fill the gaps between brand hues |
| 7–8 categorical series | Above + Amber 400, Teal 400 |
| > 8 categorical series | Reconsider — aggregate, facet, or split the view; more than 8 hues stops being legible |
| Sequential (low → high) | One brand or tertiary ramp end-to-end: Emerald 100 → 800 (growth), Indigo 100 → 800 (concentration), Slate 100 → 800 (neutral) |
| Diverging (neg ← 0 → pos) | Ember 400 ← Slate 200 → Emerald 400 — brand contrast through a neutral midpoint |
| ESG pillars | E = Emerald 400 · S = Gold 300 · G = Slate 400 (already codified) |
Icons
Vela uses two Font Awesome styles, picked by purpose — not by where the icon appears. Sharp Duotone (fa-sharp-duotone fa-solid) when the icon enhances — feature emphasis, illustration, decorative depth. Solid (fa-solid) when the icon is informational — bullets, button glyphs, chevrons, arrows, status pips, anything functional or directive. The signature feature-icon treatment is a 42 × 42 Emerald 600 tile with a Slate 50 icon at 18 px (1.125 rem).
b122b96a8f) is licensed under our account. velaintelligence.com and our approved related domains are enabled on the kit. Don't load it from a non-approved domain — license violation.<!-- in <head> --> <link rel="preconnect" href="https://kit.fontawesome.com" crossorigin> <link rel="preconnect" href="https://ka-f.fontawesome.com" crossorigin> <script src="https://kit.fontawesome.com/b122b96a8f.js" crossorigin="anonymous"></script> <!-- usage --> <i class="fa-sharp-duotone fa-solid fa-shield-halved"></i> <!-- enhancement: feature icon --> <i class="fa-solid fa-arrow-right"></i> <!-- informational: button arrow -->
Vela Labs
A distinct visual language for experimental work and internal tools. Labs uses an emerald crystal mark and the emerald → orange diagonal gradient on its product icons — the only place this two-hue blend is approved. Labs borrows the navy atmosphere from the main brand, but speaks with a brighter, more playful voice on top of it.
#2D6A4F) at three opacities — 1.0, 0.6, 0.4. The three facets create depth without ever leaving the emerald hue. Use this mark wherever Labs is named or branded; it replaces (never accompanies) the Vela Intelligence lockup.Labs product icons
Each Labs product gets its own glyph drawn in stroke, filled with the emerald → orange diagonal gradient. Same gradient, different shape. This is the only sanctioned use of the two-hue blend.
