name: design-system description: Single source of truth for all visual decisions in the AI Donor Matcher Frontend. Use this skill whenever styling any component, page, or UI element. Defines the teal/emerald color palette, Space Grotesk typography, glassmorphism system, component tokens, spacing, shadows, and transitions. Reference this before writing any Tailwind classes.

AI Donor Matcher — Design System

Color Palette

Primary (Teal)

Accent (Emerald)

Neutrals (Slate)

Status Colors

Category Pin Colors

FOOD:       #EF4444 (red-500)
CLOTHING:   #0EA5E9 (sky-500)
MEDICINE:   #10B981 (emerald-500)
EDUCATION:  #F59E0B (amber-500)
HOUSEHOLD:  #F97316 (orange-500)
OTHER:      #8B5CF6 (violet-500)

Typography — Space Grotesk

Font: 'Space Grotesk', system-ui, sans-serif Import: Google Fonts — weights 400, 500, 600, 700

Scale

Glassmorphism System

Three tiers — applied via utility classes in index.css:

.glass — Standard card

background: rgba(255, 255, 255, 0.70);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.30);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);

.glass-subtle — Overlays, secondary panels

background: rgba(255, 255, 255, 0.50);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.20);

.glass-nav — Navbar

background: rgba(15, 118, 110, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.10);

Usage rules:

• Glass on cards, modals, nav ONLY — not on every element
• Page backgrounds stay flat (bg-teal-50)
• Glass works best when content behind it varies (maps, images, gradient)

Shadows (Apple-inspired, soft & layered)

Spacing & Radius

Transitions

Component Tokens

Buttons

Primary:

bg-teal-600 text-white hover:bg-teal-700 rounded-xl px-5 py-2.5 font-medium
transition-all duration-200 shadow-sm hover:shadow

Secondary:

bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 rounded-xl
px-5 py-2.5 font-medium transition-all duration-200

Danger:

bg-red-50 border border-red-200 text-red-600 hover:bg-red-100 rounded-xl
px-5 py-2.5 font-medium transition-all duration-200

Inputs

bg-white/70 backdrop-blur-sm border border-slate-200 rounded-xl px-4 py-2.5
text-slate-900 placeholder:text-slate-400
focus:ring-2 focus:ring-teal-400 focus:border-transparent focus:outline-none
transition-all duration-200

Cards

Standard glass card:

glass rounded-2xl p-6

Elevated glass card:

bg-white/80 backdrop-blur-lg border border-white/40 rounded-2xl p-8 shadow-md

Modals

Overlay: fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 Modal box: bg-white/90 backdrop-blur-xl rounded-2xl p-8 shadow-lg max-w-md mx-auto

Badges

px-2.5 py-0.5 rounded-full text-xs font-medium

Status badge variants:

• Delivered: bg-emerald-100 text-emerald-700
• Fulfilled: bg-teal-100 text-teal-700
• Cancelled: bg-red-100 text-red-700
• Expired: bg-slate-100 text-slate-500
• Pending: bg-amber-100 text-amber-700

Page Headers

text-4xl font-bold text-slate-900 tracking-tight

With subtitle:

text-slate-600 mt-1

Tabs

Active: border-b-2 border-teal-600 text-teal-700 font-medium Inactive: text-slate-500 hover:text-slate-700