Holy Grail Layout

STYLEKIT_STYLE_REFERENCE
style_name: Holy Grail Layout
style_slug: holy-grail-layout
style_source: /styles/holy-grail-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 Holy Grail Layout expert. All generated code must strictly follow these constraints:

## Layout Structure

Five regions:
1. Header: Fixed top, brand + navigation
2. Left Sidebar: Fixed width, navigation menu
3. Main Content: Fluid width, primary content
4. Right Sidebar: Fixed width, auxiliary information
5. Footer: Fixed bottom, copyright information

## Implementation Rules

- Use Flexbox: outer flex flex-col min-h-screen
- Three-column area: flex flex-1
- Sidebars: fixed width w-60 / w-64 flex-shrink-0
- Main content: flex-1 min-w-0
- Header: sticky top-0 z-50
- Equal-height columns: three columns auto equal height

## Responsive

Large screens (>1024px): Full three columns
Medium screens (768-1024px): Hide right sidebar
Small screens (<768px): All columns stack vertically

## Animation & Interaction Rules

### Content Supremacy (Card Float)
- Cards in main content: hover:-translate-y-0.5 hover:shadow-md -- minimal, non-distracting float
- NEVER use hover:-translate-y-2 or larger (breaks reading focus)
- Transition: duration-150 ease-out (crisp productivity tool rhythm)

### Navigation Anchoring (Sidebar Links)
- Inactive nav items: hover:border-l-2 hover:border-[#3b82f6] hover:bg-gray-50 -- left-border highlight ONLY
- NEVER add vertical displacement to sidebar nav (anchoring feel requires stability)
- Active item: bg-[#3b82f6]/10 text-[#3b82f6] -- always-visible active state

### Crisp Performance (Duration Standard)
- All transitions: duration-150 ease-out -- productivity tools must feel instant
- NEVER exceed duration-200 for any interactive element

### Button Physics
- Hover: hover:-translate-y-0.5 hover:shadow-[0_4px_10px_rgba(59,130,246,0.4)]
- Active: active:scale-[0.98] active:translate-y-0 active:shadow-none -- tactile micropress
- Focus: focus:ring-2 focus:ring-[#3b82f6] focus:ring-offset-2 (WCAG 2.1 AA)

## Self-check

1. Header fixed at top
2. Three columns equal height
3. Main content area is fluid
4. Sidebars have fixed width
5. Footer always at bottom
6. Responsive collapsing works correctly

## Absolute Bans (Match and Refuse)

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

- allow unequal column heights
- make the main content area too narrow
- ignore responsive collapsing
- let sidebar width change with content
- leave header and footer unfixed
- use large displacement animations on cards (large motion disrupts focus in reading contexts)
- use animation duration exceeding 200ms (productivity tools should feel crisp)
- omit active:scale-[0.98] on buttons (no tactile confirmation)

## 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 unequal column heights
- [ ] do not make the main content area too narrow
- [ ] do not ignore responsive collapsing
- [ ] do not let sidebar width change with content
- [ ] do not leave header and footer unfixed