Frontend Design

Frontend Design Skill

Bookkeep uses a cinematic dark theme with jewel-tone accents (emerald primary, amber accent) and extensive glassmorphism. The design prioritizes book covers as hero elements with reflection effects, glow states, and lazy-loaded imagery.

Quick Start

Card with Glassmorphism

<div className="glass rounded-xl p-6 space-y-4">
  <h3 className="text-lg font-semibold tracking-tight">Section Title</h3>
  <p className="text-sm text-muted-foreground">Description text</p>
</div>

Status Badge

<span className="status-approved inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full border">
  <CheckCircle className="h-3 w-3" />
  Approved
</span>

Interactive Card

<div className="group card-hover rounded-xl border border-border/50 bg-card/50 p-4 cursor-pointer">
  <div className="transition-transform duration-300 group-hover:translate-x-1">
    Content slides on hover
  </div>
</div>

Key Concepts

Common Patterns

Page Header with Ambient Glow

<div className="relative mb-8">
  <div className="absolute -top-20 -left-20 w-64 h-64 bg-primary/10 rounded-full blur-3xl" />
  <h1 className="text-3xl font-bold tracking-tight">Page Title</h1>
  <p className="text-muted-foreground mt-2">Subtitle description</p>
</div>

Form Input with Focus Ring

<Input
  className="bg-card/50 border-border/50 focus:bg-card focus:border-primary/30 
             transition-all duration-300 rounded-xl h-11"
  placeholder="Search..."
/>

Design Tokens

See Also

• aesthetics - Color, typography, visual identity
• components - UI component patterns
• layouts - Page structure and grids
• motion - Animation and transitions
• patterns - DO/DON'T guidance

Related Skills

• See the tailwind skill for utility classes and theme configuration
• See the react skill for component architecture and hooks
• See the shadcn-ui skill for primitive component usage