Vantara logo
0
Brand kit

The Vantara system.

A quiet, considered identity for medical supplies. Use this page as the single source of truth for colour, typography, logo usage, and component tokens across every Vantara surface.

Logo

The Vantara wordmark is the primary brand mark. Always pair it with an accessible label and respect its clear-space.

On cream — default

Vantara logo

On forest — tone="dark"

Vantara logo
  • Minimum size28 px tall. Use size="sm" as the floor.
  • Clear spaceReserve ½× the wordmark height on every side. No graphics inside that zone.
  • ToneOn surfaces darker than Bone, switch to tone="dark".
Don't: stretch, rotate, recolour outside the cream/forest pair, add drop shadows, place on busy imagery without a frame, or use as a logo-only link without an aria-label.

Colour

Six brand colours, all defined in oklch. Components must consume semantic tokens (bg-primary, text-foreground), never raw values.

Forest
--brand-forest→ primary

Primary action, links, focused states.

Sage
--brand-sage→ primary-glow

Highlight, gradient companion to Forest.

Cream
--brand-cream→ background

Canvas background. Warm off-white.

Bone
--brand-bone→ secondary

Section surfaces, quiet panels.

Ink
--brand-ink→ foreground

Body copy, headings, primary text.

Stone
--brand-stone→ muted-foreground

Secondary text, captions, eyebrows.

Typography

Editorial serif for display, geometric sans for everything else. Two families do all the work.

Display — Fraunces

Quietly made.

Quietly made.

Used for h1–h3 and the .display-* utilities.

Body — DM Sans

The grown-ups in the room.

Vantara ships medical supplies — calibrated, compliant, and quietly designed.

Used for UI, body copy, captions, eyebrows.

.display-xl

Hero headline

.display-lg

Section / page title

.display-md

Sub-section title

.lead

Sub-headline / intro paragraph

.eyebrow

Section label / chip

uppercase tracking-[0.15em]

Footer column titles

Components

Reusable surfaces. Use these classes directly — don't reinvent.

Buttons

Eyebrow + rule

New release

Input

Radius & shadow

--shadow-card · --shadow-elegant

Voice

Quiet, precise, never clinical-cold. Sentences are short. Claims are true. We don't shout.

Do

  • "Sterile BAC water. Shipped from Auckland."
  • "Built on three things."
  • "Quietly considered."

Don't

  • "🔥 BEST PRICES on bac water!!"
  • "Revolutionary, life-changing supplies."
  • Medical claims about peptides.