--- name: tailwind-design-system description: Hará Match design system knowledge — tokens, liquid-glass patterns, animation easings, and UI conventions. Triggers on "style", "design", "component", "card", "button", "animation", "glass", "token", "color", "shadow", "UI". --- # Hará Match Design System Wellness-focused design language. Think "therapy app designed by Apple" — calm, warm, trustworthy, premium. ## Color Palette (from `app/globals.css` `@theme`) ### Neutrals | Token | Class | Hex | Usage | |-------|-------|-----|-------| | `--color-background` | `bg-background` | `#FBF7F2` | Page backgrounds (warm beige) | | `--color-surface` | `bg-surface` | `#FFFFFF` | Cards, modals | | `--color-surface-2` | `bg-surface-2` | `#F6F0E8` | Warm tinted surfaces | | `--color-outline` | `border-outline` | `#E7DDCF` | Borders, dividers | | `--color-foreground` | `text-foreground` | `#1F1A24` | Primary text | | `--color-muted` | `text-muted` | `#6B6374` | Secondary text | ### Brand | Token | Class | Hex | Usage | |-------|-------|-----|-------| | `--color-brand` | `bg-brand`, `text-brand` | `#4B2BBF` | Primary violet | | `--color-brand-weak` | `bg-brand-weak` | `#EEE8FF` | Light brand tint | | `--color-brand-hover` | `hover:bg-brand-hover` | `#3F24A4` | Hover state | ### Feedback States | Token | Class | Hex | Usage | |-------|-------|-----|-------| | `--color-success` | `text-success`, `bg-success-weak` | `#2F8A73` / `#E7F6F1` | Positive (teal) | | `--color-warning` | `text-warning`, `bg-warning-weak` | `#F2A43A` / `#FFF2DE` | Caution (apricot) | | `--color-danger` | `text-danger`, `bg-danger-weak` | `#D6455D` / `#FDECEF` | Error (coral) | | `--color-info` | `text-info`, `bg-info-weak` | `#7B61D9` / `#F0EDFF` | Info (lavender) | ## Shadows ```tsx
{/* 0 1px 3px — subtle */}
{/* 0 4px 12px — cards, modals */}
{/* 0 8px 24px — sheets, popovers */} ``` ## Border Radius ```tsx
{/* 8px */}
{/* 12px */}
{/* 16px */}
{/* 24px — large cards */}
{/* pills, avatars */} ``` ## Glass Effect The `.liquid-glass` utility class creates a frosted glass effect. Defined in `app/globals.css`. ```tsx // Standard glass card
{children}
// Glass works best when there's something behind it to blur through // On solid backgrounds, it appears as a semi-transparent white card ``` ## Button Patterns ```tsx // Primary CTA (violet, full-width on mobile) // Secondary link // Press feedback classes (from globals.css) // .btn-press-glow — scale + glow on active // .btn-press-inset — inset shadow on active ``` ## Animation Constants Always use these established values, don't invent new curves: ```typescript // iOS spring-like easing — for slides, sheets, cards const EASING = 'cubic-bezier(0.32, 0.72, 0, 1)'; // Smooth feel — for transitions, fades const TRANSITION_EASING = 'cubic-bezier(0.2, 0.8, 0.2, 1)'; // Timing const SHEET_ANIMATION_MS = 250; // Bottom sheet open/close const REVEAL_EXIT_DURATION_MS = 320; // Reveal screen fade out const DECK_ENTER_DURATION_MS = 380; // Card deck fade in const CARD_SWIPE_DURATION_MS = 500; // Card position change ``` ## Chip/Badge Pattern ```tsx // Success chip Perfil revisado // Warning chip Turnos esta semana // Neutral chip Online ``` ## Card Pattern ```tsx // Recommendation card (from /r/ route)
{/* Hero section */}

{name}

{specialty}

{/* Body */}
{/* chips, reasons, CTA */}
{/* Footer */}

Privacy message

``` ## Spacing Rhythm 4px base unit: `1` (4px), `2` (8px), `3` (12px), `4` (16px), `5` (20px), `6` (24px), `8` (32px), `10` (40px), `12` (48px), `16` (64px). Use Tailwind spacing classes (`p-4`, `gap-6`, `mb-3`) — never hardcode pixel values. ## Typography - **Display font**: `var(--font-display)` — Crimson Pro (serif, for headings) - **Body font**: `var(--font-body)` — Manrope (sans, for everything else) - Headings: `font-semibold`, `tracking-tight` (`-0.02em`) - Body: `leading-relaxed` (1.6 line-height) ## Tailwind v4 Reminders - Tokens defined with `@theme` directive, NOT `theme.extend` - Use `@import "tailwindcss"` not `@tailwind base/components/utilities` - Color tokens auto-generate utilities: `--color-brand` → `bg-brand`, `text-brand`, `border-brand` - If cache corrupts: `rm -rf .next && npm run build`