# 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