Vairo Design System

Colors

The color palette provides a cohesive visual identity across the platform.

Primary Palette

Neutral Palette

Semantic Colors

Success

#10B981

Warning

#F59E0B

Error

#EF4444

Info

#3B82F6

Section Accents

Agency

#3b82f6

Corporate

#10B981

Extension

#8B5CF6

Analytics

#F59E0B

Email

#EC4899

Typography

Typography scale and font families for consistent text styling.

Font Families

Plus Jakarta Sans

The quick brown fox jumps over the lazy dog. 0123456789

--font-sans
Primary typeface

JetBrains Mono

const booking = "XYZ123";

--font-mono
Code & data

Type Scale

Heading 1

36px / 800
--text-4xl

Heading 2

28px / 700
--text-3xl

Heading 3

22px / 700
--text-2xl

Heading 4

18px / 600
--text-xl

Heading 5

16px / 600
--text-lg

Body text — The quick brown fox jumps over the lazy dog.

13px / 400
--text-base

Small text — Secondary information and captions

12px / 400
--text-sm

Extra small — Labels and micro copy

11px / 400
--text-xs

Spacing

Consistent spacing scale based on 4px base unit.

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

Borders & Radius

Border radius scale for consistent rounded corners.

4px
sm

6px
md

8px
lg

12px
xl

16px
2xl

24px
3xl

9999px
full

Shadows

Elevation scale for depth and visual hierarchy.

sm

md

lg

xl

2xl

Buttons

Button variants for different actions and contexts.

Variants

Sizes

With Icons

Form Inputs

Input fields for forms and user data entry.

States

Badges

Status indicators and labels.

Variants

Primary ✓ Confirmed ⏳ Pending ✗ Cancelled

Cards

Container components for grouping content.

Basic Card

Card Title

This is a basic card component with a title and description.

Icons

Icon set used throughout the platform (Lucide icons).

plane

search

user

calendar

mail

check-square

chart

settings

plus

minus

x

check

chevron-left

chevron-right

lock

download

CSS Tokens

Copy-paste CSS custom properties for your project.

tokens.css

/* Vairo Design Tokens */
:root {
  /* Colors - Primary */
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-50: #eff6ff;
  
  /* Colors - Neutral */
  --color-slate-900: #0F172A;
  --color-slate-500: #64748B;
  --color-slate-200: #E2E8F0;
  --color-slate-50: #F8FAFC;
  
  /* Colors - Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  
  /* Typography */
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  
  /* Border Radius */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
}
          

Token Reference Table

Token	Value	Usage
`--color-primary-500`	#3b82f6	Primary actions, links, active states
`--color-slate-900`	#0F172A	Primary text, headings
`--color-slate-500`	#64748B	Secondary text, icons
`--color-slate-200`	#E2E8F0	Borders, dividers
`--radius-xl`	12px	Cards, modals, large containers
`--radius-lg`	8px	Buttons, inputs, badges
`--space-4`	16px	Standard padding/margin
`--space-6`	24px	Section padding