Design System & Identity

The Vara Brand.

A visual identity built on the principles of quiet luxury, architectural balance, and long-horizon institutional stewardship.

Logo System

Institutional marks & logotypes

The Vara logotype features geometric letterforms crowned by an upward arc over the final letterform, symbolising generational momentum and forward stewardship.

Primary Logotype (Light Canvas)SVG Vector

Use on light, neutral backgrounds (#f3f6f4, #ffffff). The deep teal color represents institutional gravity and patient capital.

Inverted Logotype (Dark Surfaces)SVG Vector

Used in the site footer, dark hero banners, and deep teal surfaces. Maintains maximum contrast and crisp legibility.

Vara Monogram Icon
App & Favicon Monogram

The V & Generational Arc Monogram

The standalone favicon mark combines the geometric V from the logotype crowned by the forward-looking directional arc in clean optical balance. Built in multi-resolution SVG, ICO, and Apple Touch Icon formats.

Color Tokens

Calibrated palette

A cohesive system composed of mineral slates, institutional teals, warm terracotta earth tones, and stone celadons.

#004751

Primary Teal

--primary

Core institutional mark, primary buttons, structural identity anchors

#112c2d

Deep Slate Teal

--foreground

Headings, authoritative display typography, primary ink

#a64d38

Terracotta Earth

--accent

Warm focus cards, active indicators, section eyebrow anchors

#061f22

Institutional Dark

--dark-surface

Hero background, footer baseline, dark architectural panels

#f3f6f4

Stone Celadon

--background

Standard canvas, crisp architectural whitespace

#dce7e4

Pale Mist Teal

--secondary

Inset secondary panels, alternate grid cells, soft containers

#dfcbc5

Sandstone Rose

--perspectives-surface

Perspectives & testimonial surfaces, warm grounding accent

#d1dcda

Chalk Teal Border

--border

1px hairline architectural grid divisions & frame borders

Typography

Dual typographic framework

Typography at Vara pairs the architectural clarity of Manrope for display headlines with the rigorous functional precision of IBM Plex Sans for long-form reading.

Display & Headings

Manrope

Weights: 400 (Regular), 500 (Medium), 600 (Semi-bold), 700 (Bold)

Stewardship is measured over time.

Usage: All page headlines, section titles, card headers, and prominent numerical milestones. Characterised by balanced geometry, open apertures, and modern architectural clarity.
Google Fonts CDN (preconnect in RootLayout)
Body & Interface

IBM Plex Sans

Weights: 400 (Regular), 500 (Medium), 600 (Semi-bold)

Capital carries obligations that outlast any one decision-maker. The institution exists to steward those obligations with clarity, dignity, and care.

Usage: All narrative prose, descriptive copy, navigation menus, labels, and metadata. Delivers maximum legibility and understated institutional restraint.
Google Fonts CDN (preconnect in RootLayout)
Design Principles

Brand standards & covenants

Architectural Precision

Strict 1px hairline borders (#d1dcda), 0.25rem micro-radii, and disciplined grid structures reflect order and institutional endurance.

Restraint Over Noise

Avoid neon gradients, aggressive floating widgets, or transient startup trends. Quiet authority is conveyed through generous whitespace and calibrated typography.

Dignity-First Representation

All imagery and narrative representation honours communities as participants and self-determining agents, never as passive beneficiaries.