Magazine Grid

STYLEKIT_STYLE_REFERENCE
style_name: Magazine Grid
style_slug: magazine-grid
style_source: /styles/magazine-grid

# 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 frontend expert specializing in Magazine Grid layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make all content blocks same size
- Do NOT ignore mobile responsive layout
- Do NOT overcrowd content without whitespace
- Do NOT use inconsistent category styling
- Do NOT ignore image aspect ratios

## Must Follow

- Use CSS Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-4
- Featured content: col-span-2 row-span-2
- Consistent gaps: gap-6
- Category labels on all articles
- Image hover effects
- Line clamping for excerpts

## Grid Structure

Desktop (4 columns):
- Featured: 2x2 grid area
- Regular: 1x1 grid cells
- Mix large and small for variety

Tablet (2 columns):
- Featured: 2x1 or 1x2
- Regular: 1x1

Mobile (1 column):
- All items full width
- Stack vertically

## Article Card

Required elements:
1. Image with aspect ratio
2. Category label (colored)
3. Title (clamped)
4. Excerpt (optional, clamped)
5. Meta (author, date, read time)

## Category Colors

Use distinct colors per category:
- Tech: blue
- Business: green
- Culture: amber
- Opinion: purple
- Featured: red

## Animation & Interaction Rules

- Color Awakening: Default images can have slight grayscale (e.g. grayscale-[20%]), restoring full color and scale-105 on hover.
- Editorial Stretch: Category label decorative line can smoothly extend from w-4 to w-12, emphasizing typographic skeleton.
- Crisp Typographic Shift: Title hover directly switches to primary color (e.g. red-600), using duration-200 ease-out.
- Readability First: Body text paragraphs must not have displacement animations, ensuring reading stability and scanning efficiency.

## Self-Check

After generating code, verify:
1. Featured item is larger
2. Grid has visual variety
3. Categories are labeled
4. Mobile layout works
5. Images have proper ratios

---

# Magazine Grid Design System

> Multi-column grid layout inspired by print magazines, creating rich visual hierarchy through varied content block sizes. Ideal for news, blogs, and content aggregation.

## Design Philosophy

Magazine Grid borrows the typographic wisdom of traditional print magazines, creating professional editorial effects through multi-column and mixed-size content blocks.

Core principles:
- Visual hierarchy: Large images grab attention, small blocks fill in details
- Scan-friendly: Readers can quickly browse to find content of interest
- Spatial rhythm: Alternating large and small creates reading rhythm
- Professionalism: Conveys authority and credibility

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-zinc-200
Radius: rounded-lg
```

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

### Interaction
```
Hover translate: (none)
Hover scale: hover:scale-105
Hover opacity: (none)
Transition: transition-all duration-300
Active: active:scale-95
```

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

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

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

### Color roles
```
Background primary: bg-white
Background secondary: bg-zinc-50
Background accent: bg-[#e63946], bg-[#2a9d8f], bg-[#e9c46a], bg-[#264653]
Text primary: text-zinc-900
Text secondary: text-zinc-600
Text muted: text-zinc-500
Button primary: bg-[#e63946] text-white
Button secondary: bg-zinc-100 text-zinc-700
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-none`
- `border-4`
- `border-8`
- `shadow-2xl`
- `font-black`

### Banned patterns
- matches `^border-[48]`
- matches `^shadow-2xl`

### Why they are banned
- `rounded-none`: Magazine Grid uses soft rounded corners for a polished editorial feel
- `border-4`: Magazine Grid uses thin subtle borders for elegant separation
- `shadow-2xl`: Magazine Grid uses subtle shadows, relying on layout for visual hierarchy

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

---

## [REQUIRED]

### Every button must include
```
text-xs font-semibold uppercase tracking-wider
rounded
```

### Every card must include
```
rounded-lg
overflow-hidden
group
```

### Every input must include
```
bg-zinc-100
border-0
rounded-lg
focus:outline-none
focus:ring-2 focus:ring-red-500/30
```

---

## [COMPARE] Magazine Grid 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="text-xs font-semibold uppercase tracking-wider rounded bg-[#e63946] 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="rounded-lg overflow-hidden group p-4 md:p-6">
 <h3 class="font-bold tracking-tight text-lg md:text-xl">{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-zinc-100 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500/30" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Magazine Grid page skeletons

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

### Navigation
```html
<nav class="bg-white text-zinc-900 border border-zinc-200 px-4 md:px-6 lg:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
 <a href="/" class="font-bold tracking-tight text-lg md:text-xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-4 md:gap-6 font-sans text-xs">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#e63946] text-zinc-900 py-8 md:py-12 lg:py-16 px-4 md:px-6 lg:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-bold tracking-tight text-3xl md:text-4xl lg:text-5xl">
 {HEADLINE}
 </h1>
 <p class="font-sans text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="text-xs font-semibold uppercase tracking-wider rounded bg-[#e63946] text-white">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-white text-zinc-900 py-8 md:py-12 lg:py-16 px-4 md:px-6 lg:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-bold tracking-tight text-xl md:text-2xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
 <!-- Card template - repeat for each card -->
 <div class="rounded-lg overflow-hidden group p-4 md:p-6">
 <h3 class="font-bold tracking-tight text-lg md:text-xl">{CARD_TITLE}</h3>
 <p class="font-sans text-sm md:text-base text-zinc-500">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-zinc-100 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500/30" placeholder="{PLACEHOLDER}" />
```

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

---

## [CHECKLIST] Magazine Grid post-generation self check

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

### Token check
- [ ] Button includes: `text-xs font-semibold uppercase tracking-wider rounded`
- [ ] Card includes: `rounded-lg overflow-hidden group`
- [ ] Input includes: `bg-zinc-100 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500/30`

### Forbidden check
- [ ] Not using `rounded-none`
- [ ] Not using `border-4`
- [ ] Not using `border-8`
- [ ] Not using `shadow-2xl`
- [ ] Not using `font-black`

### Style rule check
- [ ] Use CSS Grid to create complex grids grid-template-areas
- [ ] Featured content uses larger grid areas col-span-2 row-span-2
- [ ] Maintain baseline alignment and consistent spacing
- [ ] Use different sized content blocks to create hierarchy
- [ ] Mobile switches to single column or simplified grid

### Style drift check
- [ ] Does not violate: Do not make all content blocks the same size
- [ ] Does not violate: Do not ignore mobile layout adaptation
- [ ] Does not violate: Do not overcrowd content without whitespace
- [ ] Does not violate: Do not use inconsistent category labels
- [ ] Does not violate: Do not ignore image cropping ratios

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

---

## [EXAMPLES] Example prompts

### 1. 

```
Create a news homepage with magazine grid:
1. 4-column grid on desktop, 2 on tablet, 1 on mobile
2. Featured story spanning 2x2 with image overlay
3. Regular articles in grid with thumbnail, category, title
4. Category tabs: All, Politics, Tech, Business, Sports
5. Breaking news banner at top
6. Load more button at bottom
7. Sidebar with trending stories (optional)
Clean, professional news design with red accent
```

### 2. 

```
Create a blog listing with magazine grid:
1. Featured post with large image and gradient overlay
2. Regular posts in varied sizes (some 2-col wide)
3. Each post: image, category tag, title, excerpt, author
4. Mix of horizontal and vertical card layouts
5. Filter by category dropdown
6. Infinite scroll loading
7. Reading time indicator
Modern editorial style with serif headlines
```

### 3. 

```
Create a content hub with magazine grid:
1. Mix of content types: articles, videos, podcasts
2. Video cards with play button overlay
3. Podcast cards with audio duration
4. Featured content section at top
5. "Editor's Picks" sidebar section
6. Newsletter signup card in grid
7. Trending topics tags
Multi-format content with clear type indicators
```

## Absolute Bans (Match and Refuse)

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

- make all content blocks the same size
- ignore mobile layout adaptation
- overcrowd content without whitespace
- use inconsistent category labels
- ignore image cropping ratios
- apply any displacement animations to body text paragraphs (reading stability first)
- use glow or shadow effects on title hover (should directly switch colors, clean and crisp)

## 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 make all content blocks the same size
- [ ] do not ignore mobile layout adaptation
- [ ] do not overcrowd content without whitespace
- [ ] do not use inconsistent category labels
- [ ] do not ignore image cropping ratios