A design-forward, component-driven UI system that blends modern SaaS clarity with the textures and palette of the high desert and mountains. Built for speed, polish, and multi-brand extensibility across Crest Code Creative projects.
- Framework: React + Next.js
- Styling: Tailwind CSS + Radix primitives inspiration
- Library base: ShadCN/UI patterns adapted to Crest tokens
- Docs: Storybook (Vite builder)
- Monorepo: Turbo + npm workspaces
- Nature + Precision aesthetics with calm, intentional UI
- Design tokens as a single source of truth (JSON → CSS variables → Tailwind)
- Reusable primitives with accessible defaults
- Multi-brand theming (TeamCrest, Yoga-Flow, High Desert Holistic)
- AI-friendly schemas for prompt-to-component generation (planned)
- Requirements: Node 18+ and npm
- Install
npm install
- Run the demo app (Next.js)
npm run dev # http://localhost:3000 - Run the docs (Storybook)
npm run docs # http://localhost:6006
/crest-ui/
├── apps/
│ ├── demo/ # Next.js demo app
│ └── docs/ # Storybook docs (Vite builder)
└── packages/
├── ui/ # Core React components (Button, Input, ...)
├── tokens/ # Design tokens (tokens.json + CSS variables)
├── config/ # Tailwind preset + base tsconfig
└── themes/ # Brand themes (overrides)
Tokens live in packages/tokens/tokens.json and are exposed as CSS variables for easy consumption across apps.
- Colors:
crest-blue-500,sand-200,mesa-400,peak-950 - Typography: Display
League Spartan, SansInter - Radius:
--radius-md: 12px - Elevation:
--shadow-low|mid|high
Usage (global CSS):
@import "@crest-ui/tokens/css/variables.css";Usage (Tailwind classes via preset):
<button className="bg-crest-blue-500 text-white rounded-xl shadow-low">Crest</button>The UI package provides accessible, token-aware primitives.
- Available now:
Button,Input,Card,Tabs,Badge,Alert,Tooltip,Modal,Navbar,Breadcrumbs,Footer,TextArea,Select,Checkbox,Switch,Avatar,Drawer - Planned:
- Location:
apps/docs - Global styles:
apps/docs/src/styles.cssimports token CSS and Tailwind layers - Tailwind scanning includes
packages/ui/srcso classes used in the component library are picked up - Author pages in MDX when you want narrative + guidelines, or use Autodocs for fast prop tables from TS
- Runner: Vitest (jsdom) with React Testing Library and user-event
- Location: tests live next to components, e.g.
packages/ui/src/*.test.tsx - Scripts:
# all packages npm run test # UI package only npm run test -w @crest-ui/ui npm run test:watch -w @crest-ui/ui npm run coverage -w @crest-ui/ui
- TypeScript tips:
- Node versions: Vitest 4 targets Node 20/22/24. If you see engine warnings on other versions, use an LTS version.
- Iconography: Geometric, Lucide-inspired
- Palette: Earthy tones (sand, mesa) with sky/sunrise accents
- Motion: Ease-out cubic transitions, subtle parallax/physics micro-interactions
Use CSS variable overrides or data attributes to switch brands at runtime.
Example (brand switch using a data attribute):
<html data-brand="teamcrest">
{/* ... */}
</html>/* Override tokens for TeamCrest */
html[data-brand="teamcrest"] {
--color-crest-blue-500: 22 119 255; /* example override */
}Organize brand objects in packages/themes and generate CSS (optional) or apply via decorators in Storybook to preview.
- A11y: Aim for WCAG 2.1 AA; Storybook A11y addon for checks
- Tests (planned): Vitest + React Testing Library
- Lint/format: ESLint + Prettier (base config present)
- Performance: Keep bundles lean; analyze and tree-shake where possible
components.schema.jsonto describe component props/variants- Embeddings for natural-language retrieval of docs
- Prompt-to-component generation and layout composition helpers
- Phase 1: Tokens + Base Components (Button, Inputs)
- Phase 2: Layout & Navigation (Cards, Modals, Nav, Footer)
- Phase 3: Product-specific components (Scheduler, Pose Player)
- Phase 4: Theming & Documentation (multi-brand, docs site)
- Phase 5: AI Integration (schemas + retrieval pipeline)
- Start everything:
npm run dev # demo + package watches via turbo npm run docs # storybook docs
- Develop components in
packages/ui/srcand create matching stories inapps/docs/stories. - Keep token usage consistent. Prefer utility classes powered by the preset.
- Accessibility first: keyboard states, focus rings, labels, color contrast.
License TBD. Choose MIT/Apache-2.0 or similar if you intend public reuse.
Made with intention in the Gunnison Valley — built to travel everywhere.