Foundations
Color palettes, typography scales, spacing grid, and all design tokens that power the visual language.
Prosper Design System
The complete reference for every component, token, and pattern used across Prosper's landing site and admin dashboard.
Architecture
Prosper is a monorepo with two applications sharing a common UI package:
| Layer | Path | Description |
|---|---|---|
| Shared UI | packages/shared/components/ui/ | 50+ shadcn-based primitives (Button, Card, Dialog, Table, etc.) |
| Design Tokens | packages/shared/tokens/ | Primitive and semantic CSS custom properties |
| Theme | packages/shared/styles/ | Tailwind v4 theme mappings and base styles |
| Landing | apps/landing/ | Public-facing site — job board, contact, application forms |
| Admin | apps/admin/ | Internal dashboard — job management, candidate review, AI chat |
Import Convention
All shared components are imported from the @prosper/shared package:
import { Button } from "@prosper/shared/components/ui/button";import { Card, CardContent } from "@prosper/shared/components/ui/card";Design tokens are consumed via CSS imports:
@import "@prosper/shared/tokens/primitives.css";@import "@prosper/shared/tokens/semantic.css";Components
50+ shared UI primitives built on Radix UI and styled with Tailwind. Each page documents props, variants, and real usage examples.
Patterns
Composite patterns like loading states, motion utilities, search input, and shader gradient backgrounds.
Reference
Component usage matrix across apps, and consolidation opportunities to help unify the codebase.