Cloove Design System: Calm Intelligence

This skill defines the visual and interactive identity of Cloove. Every component, page, and animation must align with the "Calm Intelligence" philosophy—power that is felt, not shouted.

Design Philosophy

•Invisible Power: The interface should be efficient and robust, but remain "calm" and unobtrusive.
•Academic Luxury: Use a blend of Serif typography for authority and Sans-Serif for modern clarity.
•Glass & Depth: Leverage backdrop blurs and subtle layering to create a sense of focused space.
•Contextual Intelligence: Insights should whisper, not scream. Use InsightWhisper and subtle badges for AI-driven recommendations.

Color Palette

The Cloove palette is inspired by natural forest depths and luxury academic environments.

Token	Hex	Usage
Brand Deep	`#062c21`	Backgrounds (Dark), Primary Text (Light), Sidebars
Brand Green	`#0b3d2e`	Secondary Backgrounds, Interactive Hovers
Brand Gold	`#d4af37`	Accents, Active Nav, AI-driven Highlights, Buttons
Brand Cream	`#fdfcf8`	Page Backgrounds (Light), Primary Text (Dark)
Brand Accent	`#1e4d3f`	Borders, Muted Text, Glass Shadows

Typography

Available in globals.css via CSS variables:

•Serif (var(--font-serif)): Playfair Display. Used for headings, stat values, and "human" elements.
•Sans (var(--font-sans)): Plus Jakarta Sans. Used for body text, UI controls, and data tables.
•Mono: System Mono. Used for IDs, dates, and technical data.

Core Component Patterns

1. The Glass Panel (`GlassCard`)

Use for dashboard containers. It should have a subtle backdrop blur and a thin, semi-transparent border.

tsx

<GlassCard className="p-6">
  {/* Content */}
</GlassCard>

2. Premium DataTable

Rows must lift on hover and show a chevron. Use the DataTable component which handles pagination and click flows automatically.

•Light Theme: Borderless with subtle row separators.
•Dark Theme: Enhanced contrast with glass-like backgrounds.

3. Management Headers

A unified command bar pattern using the ManagementHeader component:

•Global Search (left)
•Filter Popover (multi-select)
•Primary "Add" Action (right)

4. Interactive Drawers

All CRUD and detail views should use the Drawer system (built on vaul).

•Sticky Headers: Always keep the title and description visible.
•Focused Forms: Keep input widths controlled/centered for legibility.

Dark Mode Best Practices

•Avoid pure black (#000). Use Brand Deep (#062c21) as the base.
•Borders should be extremely subtle (e.g., rgba(255, 255, 255, 0.05)).
•Ensure Brand Gold provides at least 3:1 contrast against Brand Deep.

Implementation Rules

•Never use generic Tailwind colors (e.g., bg-blue-500). Use brand tokens like bg-brand-deep.
•Smooth Transitions: Always apply transition-all duration-300 to interactive elements.
•Micro-animations: Use framer-motion for entry transitions and hover states.
•Spacing: Follow the 4px grid defined in globals.css (e.g., gap-4, p-8).

Created to ensure Cloove remains the premium standard for all business management.