Terra Vita Hub
Design System

Brand Kit

A complete design-system reference for Terra Vita Hub.

1. Typography

Primary Typeface — Inter

Weights: 300 / 400 / 500 / 600 / 700

Usage
Headings: 500–700
Body: 400
UI Labels: 500

font-family: Inter;

Secondary Typeface — IBM Plex Mono

Usage: Data labels, code snippets, technical diagrams

font-family: IBM Plex Mono;

Type Scale

TokenSizeUsage
--font-xxl48pxHero headlines
--font-xl32pxSection headers
--font-lg24pxSubheads
--font-md18pxBody large
--font-sm16pxBody default
--font-xs14pxUI labels

2. Color Tokens

Core Palette

--brand-primary #1A3A5F
--brand-secondary #4A90A4
--brand-tertiary #A8C4C8

Neutral Palette

--neutral-900 #0F1114
--neutral-700 #2A2E33
--neutral-500 #6A7179
--neutral-300 #D0D4D9
--neutral-100 #F5F7F8

Semantic Colors

--success #2E8B57
--warning #DFAF2B
--error #C0392B
--info #3A7BD5

3. Spacing System

A consistent 4‑point grid.

--space-1 4px · --space-2 8px · --space-3 12px · --space-4 16px · --space-6 24px · --space-8 32px · --space-12 48px · --space-16 64px

4. UI Components

Buttons

Primary: solid institutional blue
Secondary: outline neutral
Tertiary: text-only subtle

Primary Secondary Tertiary

Cards

16px padding · 1px neutral-300 border · 8px radius · subtle shadow

Navigation

Sticky top bar · 16px vertical padding · Active underline + brand-secondary

Form Elements

12px radius · 1px neutral-300 border · Focus ring brand-secondary 2px

Data Visual Components

  • ESG gauges
  • Compliance status chips
  • Risk scoring bars
  • Modular ecosystem icons