Vela brand resources.

Logo 01

Use the full logo with its blue sail accent when introducing Vela. Choose black lettering on a light background or white lettering on a dark background.

The black and white versions are for single-color use. SVG is best for web and print. PNG files have transparent backgrounds.

Clear space and sizing

Leave at least half the logo's height on every side.

Minimum width
Logo: 96px
Sail: 20px

Keep the original proportions. Do not rotate, recolor or add effects.

Sail mark

Use the sail on its own when space is limited and the Vela name is already visible nearby.

Wordmark

Use the supplied lettering. Do not retype it, change the letter spacing or separate the letters.

Color 02

White backgrounds and dark text make up most of the interface. Use blue for actions and selected states.

On dark backgrounds, use #52ABFF for links and focus indicators.

Do not rely on color alone to communicate a status. Include a label or icon.

Typography 03

Vela Display

Use for headings at 24px and above.

Vela Sans

Vela Sans for interface text. Body copy uses weight 430; labels use 550.

Vela Mono

Vela Mono for values, identifiers and technical references. Use weight 450 with tabular figures.

Use the supplied artwork for the wordmark. Font downloads retain their original licensing terms.

Interface 04

Use one blue primary button per view. Secondary actions use a neutral fill and a thin border.

Keep menus and panels opaque. Reserve the gradient and inset highlight for the primary action.

Spacing and corners

Use a 4px spacing scale. Controls have 8px corners, cards 10px and popovers 12px.

Interaction

Show keyboard focus, hover and pressed states. Respect the user's reduced-motion preference.

Sail animation 05

The loading animation used on Vela dashboard pages and during sign-in.

Each cycle lasts 2.8 seconds. The sails flex as the wind passes, with a small movement in the blue wave.

Use it while a page is loading. Show the still mark when reduced motion is enabled.