tessera/web/AGENTS.md

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