Documentation

Everything you need to understand and build on this design system.

1-Minute Overview

What is this?

Airestate is a multi-tenant SaaS for real estate agents. Three apps share one design system:

Apps

AgentOS	Back-office for agents — listings, clients, website config	`apps/agentos` → `airestate.app`
Website	Public tenant websites — listings, map, search	`apps/website` → `*.airestate.website`
Designer	This app — design system gallery, docs, Sketch sync	`apps/designer` → `designer.airestate.app`

Tech Stack

Next.js 15 · React 19 · TypeScript · CSS Modules (no Tailwind) · Supabase (Postgres + Auth + Storage) · Drizzle ORM · pnpm monorepo · Vercel

Shared Packages

`@airestate/tokens`	36 design tokens + 5 materials + CSS generator	`packages/tokens`
`@airestate/ui`	40 React components + 10 blocks + 4 views + fixtures	`packages/ui`
`@airestate/db`	Drizzle schema, tenant isolation, migrations	`packages/db`
`@airestate/auth`	Supabase Auth helpers	`packages/auth`
`@airestate/types`	Shared TypeScript types	`packages/types`
`@airestate/permissions`	RBAC engine + plan limits	`packages/permissions`

Styling Rules

CSS Modules only — every component has [name].module.css
Design tokens — use var(--color-*), var(--space-*), never hardcode
No Tailwind — no utility classes anywhere
Inline styles — only for runtime-computed values (dynamic width, position)
Multi-tenancy — CSS vars injected on <html>, components consume via var()

Component Structure

packages/ui/src/components/[name]/
  [name].tsx            # Component logic + JSX
  [name].module.css     # All styles (CSS Modules + tokens)
  index.ts              # Barrel export

Key Commands

`pnpm dev`	Start all apps (turbo)
`pnpm design:dev`	Start Designer on port 3002
`pnpm design:generate`	Regenerate tokens.css from definitions
`pnpm build`	Build all packages + apps

To Build a New Feature

Read CLAUDE.md for the relevant system section
Create component in packages/ui/src/components/[name]/
Use CSS Modules + tokens, export from index.ts
Add preview page in apps/designer/src/app/components/[name]/page.tsx
Import in the app that needs it

Deep Dive

Architecture

Apps, packages, database, auth, deployment

Design System Rules

Naming conventions, component categories, Sketch mapping, checklists

Prompt Templates

Ready-to-use prompts for Sketch MCP and building new features