The logo, the colours, and the type Vela is built from. Take what you need. If you are putting Vela in a deck, on a badge, or beside your own mark, work from this sheet rather than from a screenshot.
Clear space and sizing
Give the logo room to breathe. Keep at least half the lockup’s height clear on every side, and more when the layout around it is busy. Nothing sits inside that margin, including your own mark.
The mark on its own
When there is no room for the wordmark, use the mark alone. Avatars, favicons, app icons, a browser tab. Keep it on a plain ground and leave the width of the hull clear around it.
The hull is the only blue in the artwork and it stays blue on every background. Do not recolour it, and do not put the mark inside a coloured circle.
Trademark use
Use the ™ symbol on the first or most prominent mention of “Vela” in written text, such as documentation, a legal disclaimer, or a footer.
Do not add ™ to the Vela logo itself. The logo stays clean and unobstructed in every visual application.
Do not stretch it, rotate it, add a shadow, put it on a photograph without a plain plate underneath, or rebuild the wordmark by setting the letters yourself. Every one of those ends up in a screenshot somebody else works from.
Logo
The sail is the anchor. It signs everything, from the product sidebar to a conference badge. There are two parts: the mark, and the wordmark set in our own cut.
Use the full lockup wherever there is room for it. The SVG is the master and scales to any size. The PNG is there for the places that will not take a vector.
Vela Blue
The primary action, the focus ring, the first data series, the hull of the mark.
Vela Ink
All body and heading type on a light ground.
Vela Sail
Page and panel ground in light mode. Type on a dark ground.
Vela Abyss
The dark ground. Never a fill on a light page.
Accent and data
On a dark ground the blue lightens to the same hue at a readable contrast. The four series colours below are fixed in meaning: a reader who has learned one Vela chart should not have to re-read the legend on the next one.
Blue, on dark
The same hue lightened. Links, rings, and accents on black.
Solar
Solar generation in every chart.
Wind
Wind generation in every chart.
Storage
Storage in every chart.
Steel
Forecast and secondary series. Never a brand colour.
Color
One blue, spent carefully. Vela blue carries the primary action and the first data series, and nothing else in a view competes with it. Everything around it is ink, white, and the near-black the product uses as its dark ground.
In code, reach for the token rather than the hex. The dark ground swaps the value underneath, and a hardcoded colour does not follow it.
Vela Display
Headlines and chapter titles
--font-heading-displayOne weight, where size does the weight's job. It reads like another face's medium once it is large, so the tune is tracking and leading and never a heavier grade. It has a floor: below 24px it loses the advantage it was drawn for, and smaller titles go to Vela Sans at 550 instead.
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
The only weight. Never pair it with a bold utility.
Vela Sans
Interface, body copy, labels, buttons
--font-vela-sansThe face most of Vela is made of. The axis runs 100 to 900, but the product uses two grades. 430 for interface text, which is crisper than 400 on a grey panel without the jump to medium that makes a dense table shout. 550 for emphasis and for titles under 24px.
Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Large quiet type only.
Text
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
The default grade for everything.
Emphasis
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Small titles, active states, labels that carry weight.
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Rare. One word, not a sentence.
Vela Mono
Anything a reader compares or copies
--font-vela-monoIDs, amounts, dates, capacities, hashes. Tabular figures are the default rather than an opt-in, because this is a data product and columns that do not line up are a bug. It sits at 0.94em beside the sans, which runs optically large next to it.
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
The data grade. Tabular figures on.
The wordmark face
Reach for the logo file rather than this face. Setting the word `vela` in Soliden by hand is how a lockup ends up at the wrong tracking beside a mark at the wrong size. It sets four letters on this entire brand and nothing else, so it is listed here to be recognised rather than to be used.
vela
Soliden Bold Expanded
--font-brandFallback
Where the Vela families cannot be installed, such as a slide deck on someone else’s machine, an email template, or a client system, set everything in Arial. It is the first fallback in our own font stack, so nothing shifts in the places it takes over.
Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Type
Three families, one tune. Each ships as a variable file, so weight is a setting rather than a separate cut, and there is no synthetic bold anywhere in the stack.
Vela Display is a tuned cut of Saprona, and the wordmark is set in Soliden. Both are licensed faces, so we do not redistribute the font files. If you are working on something for Vela and need them, write to us.
One glossy button per view. The two beside it are the flat tier, and every other control on a Vela surface belongs to it.
One glossy button per view
The gradient button is the primary action and nothing else. Form submits, the single CTA on a page, the checked state of a checkbox. Never navigation, never a secondary action, never a repeated action in a list.
Everything else is flat
Menus, popovers, cards, tabs, badges, chips, docks, and the sidebar are opaque surfaces with a hairline border and almost no shadow. No blur, no translucent fills on chrome.
Reach for the token, not the hex
Vela blue is #007bee, but a component should say bg-primary or bg-vela-blue. The dark ground swaps the value underneath and a hardcoded hex does not follow.
One radius family
Panels and cards sit at 10px, menus and selects at the large radius, composers at the round end. New one-off radii are how a system starts to look assembled rather than designed.
Interface
The rule is binary. One treatment is rich and it is spent on the single primary action in a view. Everything else is flat: opaque, hairline-bordered, almost no shadow.
This is the short version, published so that anything built next to Vela sits at the same weight. The product’s own design language document carries the full detail.
Need something that is not here, such as a founder photo, a product screenshot, or the logo in a format this page does not carry? Ask us.
Email hello@velaenergy.ai