docs: add design system guidelines to CLAUDE.md
Add Design System section with: - Core principles (restraint, clarity, consistency, density) - Typography table (Geist Sans, Geist Mono, Playfair Display) - Color philosophy (no brand color, semantic colors for state) - Component library reference (Shadcn/UI) - UI building guidelines Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
54d84abc8b
commit
9c4588374f
1 changed files with 40 additions and 0 deletions
40
CLAUDE.md
40
CLAUDE.md
|
|
@ -122,6 +122,46 @@ See `docs/package-management.md` for detailed package management guide.
|
||||||
|
|
||||||
- **Comments**: Always write code comments in English, regardless of the conversation language.
|
- **Comments**: Always write code comments in English, regardless of the conversation language.
|
||||||
|
|
||||||
|
## Design System
|
||||||
|
|
||||||
|
The UI follows a **restrained, professional** design language. This is a work tool, not a consumer app.
|
||||||
|
|
||||||
|
### Core Principles
|
||||||
|
|
||||||
|
1. **Restraint over decoration** — No flashy colors, minimal animations
|
||||||
|
2. **Clarity over cleverness** — Obvious > subtle, explicit > implicit
|
||||||
|
3. **Consistency over novelty** — Use Shadcn/UI patterns, don't reinvent
|
||||||
|
4. **Density over sprawl** — Respect screen real estate
|
||||||
|
|
||||||
|
### Typography
|
||||||
|
|
||||||
|
| Font | CSS Variable | Usage |
|
||||||
|
|------|--------------|-------|
|
||||||
|
| Geist Sans | `font-sans` | Primary UI text |
|
||||||
|
| Geist Mono | `font-mono` | Code, technical values |
|
||||||
|
| Playfair Display | `font-brand` | Brand name "Multica" ONLY |
|
||||||
|
|
||||||
|
Fonts are loaded via `@fontsource` packages (not Google Fonts) for cross-platform consistency.
|
||||||
|
|
||||||
|
### Colors
|
||||||
|
|
||||||
|
- **No brand color** — Purple/blue "AI colors" feel generic. We use neutral grays.
|
||||||
|
- **Color is for state** — Running (blue), success (green), error (red)
|
||||||
|
- **Dark mode is true dark** — Not gray, actual near-black
|
||||||
|
|
||||||
|
### Component Library
|
||||||
|
|
||||||
|
- **Base**: Shadcn/UI (Radix primitives + Tailwind)
|
||||||
|
- **Styling**: Tailwind CSS v4 with OKLCH colors
|
||||||
|
- **Config**: `packages/ui/src/styles/globals.css`
|
||||||
|
|
||||||
|
### When Building UI
|
||||||
|
|
||||||
|
- Prefer existing Shadcn components over custom implementations
|
||||||
|
- Use semantic color variables (`--muted`, `--destructive`), not raw colors
|
||||||
|
- Keep animations subtle and purposeful (no gratuitous motion)
|
||||||
|
- Test in both light and dark modes
|
||||||
|
|
||||||
## Credentials Setup
|
## Credentials Setup
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue