Dashboard Layout

STYLEKIT_STYLE_REFERENCE
style_name: Dashboard Layout
style_slug: dashboard-layout
style_source: /styles/dashboard-layout

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a Dashboard Layout expert. All generated code must strictly follow these constraints:

## Layout Structure

- Left: Dark side navigation bar w-64 bg-gray-900
- Top: White toolbar (search, notifications, user)
- Main: KPI cards + chart panels + data tables

## KPI Cards

- Use grid grid-cols-4 layout
- Each card includes: label, value, trend change
- Growth uses green text-green-500
- Decline uses red text-red-500
- Stable uses yellow text-yellow-500

## Chart Area

- Main chart takes 2/3 width col-span-2
- Secondary chart takes 1/3 width
- Use aspect-ratio to maintain proportions

## Side Navigation

- Dark background bg-gray-900
- Current page highlighted bg-white/10
- Icon + text menu items
- User info at bottom

## Responsive

Large screens: Sidebar + 4-column KPI + charts
Medium screens: Sidebar + 2-column KPI
Small screens: Hidden sidebar + 1-column KPI

## Self-check

1. Side navigation is dark and fixed
2. KPI card data is clear
3. Chart area proportions are appropriate
4. Status color coding is correct
5. Responsive adaptation is complete

## Animation & Interaction Rules

- Crisp SaaS Feel: All micro-interactions should be fast and clear, preferring `duration-150` + `ease-out`.
- KPI Focus: KPI cards may slightly lift on hover, using `group-hover` to micro-scale or recolor the core number for visual focus.
- Hover Hinting: Data cards, data rows, and actionable panels must provide clear background feedback on hover (e.g., `hover:bg-gray-50`).
- Action Precision: Button clicks should have clear press feedback (e.g., `active:scale-[0.97]`), with visible focus ring for a11y.

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- allow disproportionate sidebar-to-content ratios
- use inconsistent spacing between data panels
- ignore loading states and empty states
- make all panels exactly the same size
- use excessive decorative elements that distract attention

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not allow disproportionate sidebar-to-content ratios
- [ ] do not use inconsistent spacing between data panels
- [ ] do not ignore loading states and empty states
- [ ] do not make all panels exactly the same size
- [ ] do not use excessive decorative elements that distract attention