elvix
Brand kit

Use elvix in your work.

Download the marks, copy the colours, follow the rules. If you're placing a "Secured by elvix" badge in your app, you don't need permission. Just keep the mark legible and don't change its proportions.

The mark

One shield. One brand.

A heraldic shield with a lowercase "e" carved as negative space. Adapts to light and dark by inheriting the page colour.

On dark·elvix-mark-light.svg
Download SVG
On light·elvix-mark-dark.svg
Download SVG
App icons

Square. Sized for stores + tiles.

Play Store, App Store, iOS home screen, Android adaptive tile, OS dock, favicons, app pickers. Two variants — one for light backgrounds, one for dark — so the icon stays legible everywhere it lands. Rounded corners are clipped by the host surface; we ship the full square.

On light·elvix-icon-light.svg
Download SVG
On dark·elvix-icon-dark.svg
Download SVG

Size matrix

120 · home screen
72 · drawer
48 · app picker
32 · favicon
20 · tile
Customer apps upload their own square icon set on Console → Branding. We require both light and dark variants — falling back across themes looked sloppy in mixed surfaces.
Wordmark

Lowercase. Always.

The wordmark is always lowercase. Tracking is tight at -0.025em. The mark sits 6 to 8 pixels to the left of the "e", vertically centred.

elvix
elvix
Colours

The full chord.

Black and white do the work. Lavender is the brand accent; Deep is its more-saturated CTA cousin (the "do the thing" button). Live mint marks active state — presence dots, success ticks.

Ink
#0A0A0B
Canvas dark · body text on light
Paper
#FAFAFA
Canvas light · body text on dark
Active
#8E7DFF
Brand accent · borders · highlights
Deep
#6C5CE7
Primary CTA · focused inputs
Live
#5EE0A4
Active state · presence · success
Mist
#E7E2FF
Soft highlight · gradient endpoints
Sign-in button

The official login button.

When an app integrates elvix, drop this button on the sign-in surface. Same sizing, gap, and proportions as "Sign in with Google" — so it sits flush in the same row. Five variants × two shapes × three sizes × icon-only covers every host surface.

Variants

Filled · deep purpleSign in with elvixSign in with elvixSign in with elvix
Filled-black · inkSign in with elvixSign in with elvixSign in with elvix
White · social rowSign in with elvixSign in with elvixSign in with elvix
Outline · on lightSign in with elvixSign in with elvixSign in with elvix
Outline · on darkSign in with elvixSign in with elvixSign in with elvix
Ghost · minimalSign in with elvixSign in with elvixSign in with elvix

Shapes

Rectangle · 10 px radiusSign in with elvixSign in with elvixSign in with elvix
Pill · fully roundedSign in with elvixSign in with elvixSign in with elvix

Icon only · square + circle

Square · 10 px radius
Circle · perfectly round

Text presets

Pick the verb that matches your CTAsSign in with elvixSign up with elvixContinue with elvixSign inLog inContinue
The button is exported from @elvix/react as <ElvixSignInButton />. Keep the shield mark on the left, never recolour it, and pair it with a verb preset that matches the rest of your CTAs.
Secured-by badge

The trust chip.

Drop this pill into a footer, a settings page, or anywhere users may want to know who handles their sign-in. Three variants cover every surface; three sizes match the sign-in button so the two read as one family.

White · on darkSecured byelvixSecured byelvixSecured byelvix
Dark · on lightSecured byelvixSecured byelvixSecured byelvix
Outline · on darkSecured byelvixSecured byelvixSecured byelvix
Outline · on lightSecured byelvixSecured byelvixSecured byelvix
Exported as <ElvixSecuredBadge /> from @elvix/react. Pair it with the sign-in button by matching the size — small badges with small buttons, large with large.
Typography

Inter for everything.

We use Inter from rsms.me. Headlines at semibold (600) with tight letter-spacing. Body at regular (400). Code in JetBrains Mono or system mono.

72px · 600 · -0.04em
Identity, kept in Europe.
40px · 600 · -0.03em
Plain language.
20px · 600 · -0.02em
Section heading
16px · 400 · 0
Body copy in Inter Regular. This is what most paragraphs look like at the default reading weight.
13px · 500 · 0.02em
Small label / pill copy
Usage

Don't modify the mark.

Do
  • ·Use the SVG so the mark stays sharp at any size.
  • ·Keep the active-protection dot in the upper-right.
  • ·Use Ink on light backgrounds, Paper on dark.
  • ·Pair the mark with the lowercase wordmark when there is room.
  • ·When placing "Secured by elvix" in a footer, keep the mark at least 14px tall.
Don't
  • ·Don't rotate, skew, or distort the shield.
  • ·Don't change the proportion between the mark and the wordmark.
  • ·Don't recolour the active-protection dot. It is always Active lavender.
  • ·Don't put the mark on a busy photographic background without a solid plate.
  • ·Don't capitalise the wordmark. It is always 'elvix'.
The elvix trademark belongs to elvix. You can use the marks to refer to our products in your own content (articles, comparisons, dashboards that integrate with us). You cannot modify the marks or imply endorsement.