vibe-kanban/frontend/CLAUDE.md

New Design System Styling Guidelines

CSS Variables & Tailwind Config

The new design uses custom CSS variables defined in src/styles/new/index.css and configured in tailwind.new.config.js. All styles are scoped to the .new-design class.

Colors

Text colors (use these instead of text-gray-*):

• text-high - Primary text, highest contrast
• text-normal - Standard text
• text-low - Muted/secondary text, placeholders

Background colors:

• bg-primary - Main background
• bg-secondary - Slightly darker, used for inputs, cards, sidebars
• bg-panel - Panel/elevated surfaces

Accent colors:

• brand - Orange accent (hsl(25 82% 54%))
• error - Error states
• success - Success states

Typography

Font families:

• font-ibm-plex-sans - Default sans-serif
• font-ibm-plex-mono - Monospace/code

Font sizes (smaller than typical Tailwind defaults):

• text-xs - 8px
• text-sm - 10px
• text-base - 12px (default)
• text-lg - 14px
• text-xl - 16px

Spacing

Custom spacing tokens:

• p-half / m-half - 6px
• p-base / m-base - 12px
• p-double / m-double - 24px

Border Radius

Uses a small radius by default (--radius: 0.125rem):

• rounded - Default small radius
• rounded-sm, rounded-md, rounded-lg - Progressively larger

Focus States

Focus rings use ring-brand (orange) and are inset by default.

Example Component Styling

// Input field
className="px-base bg-secondary rounded border text-base text-normal placeholder:text-low focus:outline-none focus:ring-1 focus:ring-brand"

// Button (icon)
className="flex items-center justify-center bg-secondary rounded border text-low hover:text-normal"

// Sidebar container
className="w-64 bg-secondary shrink-0 p-base"

Architecture Rules

• View components (in views/) should be stateless - receive all data via props
• Container components (in containers/) manage state and pass to views
• UI components (in ui-new/) are reusable primitives
• File names in ui-new/ must be PascalCase (e.g., Field.tsx, Label.tsx)