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

---

# Holy Grail Layout Design System

> The classic three-column web layout consisting of a fixed header, a three-column middle section (left navigation, main content, right sidebar), and a fixed footer -- a foundational layout paradigm in web design.

## Design Philosophy

Holy Grail Layout is the long-sought classic layout solution in web design, featuring a fixed header and footer with a three-column content area in between. The name originates from the difficulty of implementing this layout in the early days of CSS.

Core principles:
- Clear structure: Header, three-column content, and footer -- five regions each serving a distinct purpose
- Content-first: Main content precedes sidebars in HTML source for better SEO
- Equal-height columns: All three columns maintain equal height regardless of content
- Flexible adaptation: Sidebars have fixed widths while the main content area is fluid

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-gray-200
Radius: rounded-xl
```

### Shadow
```
sm: shadow-sm
md: shadow-sm
lg: shadow-md
hover: hover:shadow-md
focus: focus:shadow-sm
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-90
Transition: transition-colors duration-200
Active: active:scale-95
```

### Typefaces
```
Heading: font-semibold tracking-tight
Body: font-sans
Mono: font-mono
```

### Type scale
```
Hero: text-2xl md:text-3xl
H1: text-xl md:text-2xl
H2: text-lg md:text-xl
H3: text-base md:text-lg
Body: text-sm md:text-base
Small: text-xs
```

### Spacing
```
Section: py-4 md:py-6
Container: px-4 md:px-6
Card: p-4 md:p-6
Gap sm: gap-2 md:gap-3
Gap md: gap-3 md:gap-4
Gap lg: gap-4 md:gap-6
```

### Color roles
```
Background primary: bg-[#f1f5f9]
Background secondary: bg-white
Background accent: bg-[#3b82f6], bg-[#10b981], bg-[#f59e0b], bg-[#ef4444]
Text primary: text-[#1e293b]
Text secondary: text-gray-600
Text muted: text-gray-400
Button primary: bg-[#3b82f6] text-white
Button secondary: bg-gray-100 text-gray-700
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-none`
- `shadow-2xl`
- `font-black`
- `font-extrabold`
- `text-5xl`
- `text-6xl`
- `text-7xl`
- `text-8xl`

### Banned patterns
- matches `^rounded-none$`
- matches `^shadow-2xl`
- matches `^text-[5-8]xl`

### Why they are banned
- `rounded-none`: Holy Grail Layout uses moderate rounding (rounded-xl) for a professional look
- `shadow-2xl`: Holy Grail Layout uses subtle shadows befitting a standard web layout
- `text-6xl`: Holy Grail Layout uses moderate type sizes for balanced three-column reading

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-lg
font-medium text-sm
transition-colors
```

### Every card must include
```
bg-white
rounded-xl
shadow-sm
border border-gray-100
```

### Every input must include
```
bg-gray-50
border border-gray-200
rounded-lg
text-sm
focus:outline-none
focus:ring-2 focus:ring-[#3b82f6]/20 focus:border-[#3b82f6]
transition-all
```

---

## [COMPARE] Holy Grail Layout wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-lg font-medium text-sm transition-colors bg-[#3b82f6] text-white">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
  <h3 class="font-semibold tracking-tight text-base md:text-lg">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#3b82f6]/20 focus:border-[#3b82f6] transition-all" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Holy Grail Layout page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#f1f5f9] text-[#1e293b] border border-gray-200 px-4 md:px-6">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-3 md:gap-4">
    <a href="/" class="font-semibold tracking-tight text-base md:text-lg">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-3 md:gap-4 font-sans text-xs">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#3b82f6] text-[#1e293b] py-4 md:py-6 px-4 md:px-6">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-semibold tracking-tight text-2xl md:text-3xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-lg font-medium text-sm transition-colors bg-[#3b82f6] text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#f1f5f9] text-[#1e293b] py-4 md:py-6 px-4 md:px-6">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-semibold tracking-tight text-lg md:text-xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
      <!-- Card template - repeat for each card -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
        <h3 class="font-semibold tracking-tight text-base md:text-lg">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-gray-400">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#3b82f6]/20 focus:border-[#3b82f6] transition-all" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white text-gray-600 py-4 md:py-6 px-4 md:px-6">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
      <div>
        <span class="font-semibold tracking-tight text-base md:text-lg">{LOGO_TEXT}</span>
        <p class="font-sans text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-semibold tracking-tight text-base md:text-lg">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Holy Grail Layout post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-lg font-medium text-sm transition-colors`
- [ ] Card includes: `bg-white rounded-xl shadow-sm border border-gray-100`
- [ ] Input includes: `bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#3b82f6]/20 focus:border-[#3b82f6] transition-all`

### Forbidden check
- [ ] Not using `rounded-none`
- [ ] Not using `shadow-2xl`
- [ ] Not using `font-black`
- [ ] Not using `font-extrabold`
- [ ] Not using `text-5xl`
- [ ] Not using `text-6xl`
- [ ] Not using `text-7xl`
- [ ] Not using `text-8xl`

### Style rule check
- [ ] Use CSS Grid or Flexbox for equal-height three columns
- [ ] Sticky header and footer with sticky top-0 / sticky bottom-0
- [ ] Main content area uses flex-1 for fluid width
- [ ] Left navigation bar with fixed width w-60 or w-64
- [ ] Right sidebar with fixed width w-64 or w-72

### Style drift check
- [ ] Does not violate: Do not allow unequal column heights
- [ ] Does not violate: Do not make the main content area too narrow
- [ ] Does not violate: Do not ignore responsive collapsing
- [ ] Does not violate: Do not let sidebar width change with content
- [ ] Does not violate: Do not leave header and footer unfixed

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Holy Grail Layout

## 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