Design System

A comprehensive guide to the visual language, components, and patterns used across ELHSS platforms.

Primary Color Palette

.text-teal-400, .from-teal-400, .from-blue-400, etc.

Color System

Brand Colors

Teal 400

#2dd4bf

Purple 600

#8b5cf6

Pink 600

#ec4899

Background Gradients

from-gray-800 to-gray-900
from-blue-900 to-teal-900

Typography

Headings

h1

h2

h3

h4

h5

Body Text

The default paragraph style with appropriate line-height and spacing for readability.

Code Snippets

.glassmorphism {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
}

UI Components

Buttons

bg-teal-600 hover:bg-teal-700

Cards

Example Card

Glassmorphism effect with subtle shadows and transitions.

Layout System

Grid Layout

1
2
3
4
5
6

Spacing System

p-4 padding
px-6 margin
mt-20 vertical margin

Design Principles

Accessibility First

Consistent Branding

Mobile-First Design

Scalable Patterns