Design System

A cohesive visual language that unifies our mission with our digital presence.

Explore the System

Design Principles

.Accessible

WCAG 2.1 AA/AAA compliance with high-contrast text and keyboard focus states

Responsive

Mobile-first fluid layout with breakpoints-aware components

Scalable

Token-based design system for consistent application across platforms

Color Palette

Primary Colors

Semantic Colors:
.text-teal-400, .bg-teal-500, .from-blue-400, etc.

Background

Base gradient: from-gray-800 to-gray-900
Used for cards, modals, and floating elements with backdrop-blur

Typographic Hierarchy

Display Heading

Base font size: 16px | Leading: 1.5

Paragraph text with 1.6x line height for readability

.text-lg leading-relaxed

UI Components

Buttons