1d4dc38d06
- CLAUDE.md: updated API endpoints, dev workflow, current stack - web/AGENTS.md: replaced auto-generated text with Tessera design rules - docs/design-system.md: new — component patterns, typography scale, color tokens, anti-patterns to avoid Ensures design consistency across all future work. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
50 lines
2.1 KiB
Markdown
50 lines
2.1 KiB
Markdown
# Tessera Design Rules
|
|
|
|
Follow these rules when writing any frontend code. The design is clean, modern, and minimal — avoid the "2015 admin panel" look.
|
|
|
|
## Borders
|
|
- **Never** use `border-border` (full opacity). Always `border-border/50` or `border-border/30`.
|
|
- Section dividers: `border-b border-border/50`
|
|
- Subtle item separators: `border-b border-border/30`
|
|
- Card borders: `border border-border/50`
|
|
|
|
## Shadows
|
|
- **Never** use `shadow-sm` or `shadow-md` on cards, sections, or tabs.
|
|
- The sidebar is the only element with a shadow (subtle).
|
|
- No `bg-card/82`, no `bg-background/55` — use `bg-card` or `bg-transparent`.
|
|
|
|
## Section wrappers
|
|
- `rounded-lg border border-border/50` — NOT `rounded-md border border-border bg-card shadow-sm`
|
|
|
|
## List items
|
|
- `rounded-lg border border-border/50 p-3`, hover: `hover:border-primary/30 hover:bg-accent/30`
|
|
- Active: `border-primary/50 bg-primary/5`
|
|
|
|
## Nav items (sidebar)
|
|
- Default: `text-sidebar-foreground/55`, icons at 50% opacity
|
|
- Hover: `text-sidebar-foreground hover:bg-sidebar-accent/50`, icons at 70%
|
|
- Active: `bg-sidebar-accent text-sidebar-foreground font-medium`, icons at 90%
|
|
- No inset shadow on active items
|
|
|
|
## Typography
|
|
- Section headers: `text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60`
|
|
- No `text-[11px] font-semibold uppercase` anywhere — use the above pattern
|
|
- Body text: `text-sm` for main, `text-xs` for secondary
|
|
- Keep font sizes consistent: 10px (labels), 12-13px (content), 14px (headings)
|
|
|
|
## Icons
|
|
- Section headers: `h-3 w-3` (not `h-4 w-4`)
|
|
- In nav items: `w-4 h-4`
|
|
- Always dimmed when inactive (opacity-50), bright when active
|
|
|
|
## Forms
|
|
- Inputs/selects: `h-8 rounded-md border border-input bg-transparent px-2.5 text-sm`
|
|
- No `bg-card` on inputs unless inside a card
|
|
- Labels: `text-[10px] font-medium text-muted-foreground`
|
|
|
|
## General
|
|
- No `backdrop-blur` on headers or sections
|
|
- No `bg-card/82` or `bg-background/55` — use solid colors or `bg-transparent`
|
|
- Content areas: `bg-background/80` for the main page background
|
|
- Avoid `<dl>`/`<dt>`/`<dd>` grids for properties — use simple `flex justify-between` rows
|