Masonry Flow

STYLEKIT_STYLE_REFERENCE
style_name: Masonry Flow
style_slug: masonry-flow
style_source: /styles/masonry-flow

# 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 Masonry Flow layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make all cards the same height (defeats masonry purpose)
- Do NOT use inconsistent card widths
- Do NOT use inconsistent gaps
- Do NOT ignore image loading states
- Do NOT use too many columns on mobile

## Must Follow

- Use CSS columns: columns-2 md:columns-3 lg:columns-4
- Prevent break: break-inside-avoid on cards
- Consistent gap: gap-4 or column-gap equivalent
- Card widths: 100% of column
- Card heights: auto (content-driven)
- Responsive columns: reduce on smaller screens

## Layout Structure

Container:
- columns-1 sm:columns-2 lg:columns-3 xl:columns-4
- gap-4 (use column-gap and margin-bottom)

Card:
- break-inside-avoid
- mb-4 (margin bottom for spacing)
- rounded-xl overflow-hidden
- Full width within column

## Image Handling

- Always use aspect-ratio or height constraints
- Add loading="lazy" for performance
- Show placeholder during load
- Use object-cover for consistent fit

## Responsive

Mobile (< 640px): columns-1
Tablet (640px - 1024px): columns-2
Desktop (1024px+): columns-3 or columns-4

## Animation & Interaction Rules

- Confined Zoom: Image scaling must occur within overflow-hidden container, recommend group-hover:scale-105 + duration-700.
- Subtle Elevation: Hover displacement limited to -translate-y-1, using diffused shadow rather than hard borders to express focus.
- Overlay Reveal: Image overlay and action buttons use opacity + translate combination for gradual reveal, without changing card main dimensions.
- Action Snappiness: Top filter and category buttons use duration-200, ensuring fast switching feedback.

## Self-Check

After generating code, verify:
1. Cards have varying heights
2. Using break-inside-avoid
3. Consistent gaps
4. Images have aspect ratios
5. Responsive column count

---

# Masonry Flow Design System

> Pinterest-style masonry layout with variable-height cards, achieved through CSS columns or masonry grid for a naturally flowing visual effect. Ideal for image galleries, portfolios, and social media.

## Design Philosophy

Masonry Flow is a layout that mimics brickwork, where cards are arranged in columns with varying heights, creating a naturally flowing visual effect.

Core principles:
- Natural flow: Content height is determined by the content itself, no forced equal heights
- Space utilization: Maximize visible area usage, reduce wasted whitespace
- Visual rhythm: Irregular heights create an interesting visual cadence
- Infinite scroll: Naturally suited for load-more interaction patterns

---

## Token Dictionary (exact class mapping)

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

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

### Interaction
```
Hover translate: hover:-translate-y-1
Hover scale: hover:scale-[1.02]
Hover opacity: (none)
Transition: transition-all duration-300
Active: active:scale-95
```

### Typefaces
```
Heading: font-semibold 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
H2: text-xl md:text-2xl
H3: text-lg md:text-xl
Body: text-sm md:text-base
Small: text-xs md:text-sm
```

### Spacing
```
Section: py-8 md:py-12 lg:py-16
Container: px-4 md:px-6 lg:px-8
Card: p-4 md:p-5
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-zinc-50
Background secondary: bg-white
Background accent: bg-[#e94560], bg-[#16c79a], bg-[#ffd460], bg-[#7579e7]
Text primary: text-zinc-900
Text secondary: text-zinc-600
Text muted: text-zinc-400
Button primary: bg-zinc-900 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-2`
- `border-4`
- `border-8`
- `shadow-[`
- `font-black`

### Banned patterns
- matches `^border-[248]`
- matches `^shadow-\[`

### Why they are banned
- `rounded-none`: Masonry Flow uses rounded corners (rounded-xl) for soft card aesthetics
- `border-4`: Masonry Flow uses borderless or very subtle borders
- `font-black`: Masonry Flow uses semibold weight, not black

> 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
```
break-inside-avoid
rounded-xl
overflow-hidden
bg-white
```

### Every input must include
```
rounded-full
bg-zinc-100
border-0
focus:outline-none
focus:ring-2 focus:ring-zinc-900/10
transition-all
```

---

## [COMPARE] Masonry Flow 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-zinc-900 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="break-inside-avoid rounded-xl overflow-hidden bg-white p-4 md:p-5">
 <h3 class="font-semibold 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="rounded-full bg-zinc-100 border-0 focus:outline-none focus:ring-2 focus:ring-zinc-900/10 transition-all" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Masonry Flow page skeletons

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

### Navigation
```html
<nav class="bg-zinc-50 text-zinc-900 border-0 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-semibold tracking-tight text-lg md:text-xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-4 md:gap-6 font-sans text-xs md:text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#e94560] 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-semibold 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="rounded-lg font-medium text-sm transition-colors bg-zinc-900 text-white">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-zinc-50 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-semibold 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="break-inside-avoid rounded-xl overflow-hidden bg-white p-4 md:p-5">
 <h3 class="font-semibold tracking-tight text-lg md:text-xl">{CARD_TITLE}</h3>
 <p class="font-sans text-sm md:text-base text-zinc-400">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="rounded-full bg-zinc-100 border-0 focus:outline-none focus:ring-2 focus:ring-zinc-900/10 transition-all" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white 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-semibold tracking-tight text-lg md:text-xl">{LOGO_TEXT}</span>
 <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-semibold tracking-tight text-lg md:text-xl">{COLUMN_TITLE}</h4>
 <ul class="font-sans text-xs md:text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Masonry Flow 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: `break-inside-avoid rounded-xl overflow-hidden bg-white`
- [ ] Input includes: `rounded-full bg-zinc-100 border-0 focus:outline-none focus:ring-2 focus:ring-zinc-900/10 transition-all`

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

### Style rule check
- [ ] Use CSS columns for simple masonry columns-2 md:columns-3 lg:columns-4
- [ ] Or use CSS Grid masonry (requires browser support) grid-rows-[masonry]
- [ ] Cards add break-inside-avoid to prevent content breaking
- [ ] Uniform card widths, height adapts to content
- [ ] Maintain consistent column gaps gap-4 or gap-6

### Style drift check
- [ ] Does not violate: Do not force all cards to equal height (loses masonry character)
- [ ] Does not violate: Do not use inconsistent card widths
- [ ] Does not violate: Do not use inconsistent spacing
- [ ] Does not violate: Do not ignore image loading states
- [ ] Does not violate: Do not use too many columns on small screens

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

---

## [EXAMPLES] Example prompts

### 1. 

Pinterest 

```
Create a Pinterest-style photo gallery with masonry layout:
1. Use CSS columns for masonry: columns-2 md:columns-3 lg:columns-4
2. Cards with varying heights (aspect-[3/4], aspect-square, aspect-[4/5])
3. Each card: rounded-xl, overflow-hidden, shadow on hover
4. Image with lazy loading and hover scale effect
5. Optional overlay with title on hover
6. Filter tabs at top (All, Photos, Videos, etc.)
7. Load more button at bottom
All cards use break-inside-avoid, consistent gap-4
```

### 2. 

```
Create a designer portfolio with masonry flow:
1. Masonry grid with columns-1 md:columns-2 lg:columns-3
2. Project cards with different aspect ratios
3. Each card shows: project image, title, category tag
4. Hover effect: reveal project description
5. Mix of image cards and text-only cards
6. Category filter navigation
7. Smooth scroll to load more projects
Cards use break-inside-avoid, rounded-2xl, elegant shadows
```

### 3. 

```
Create a social media feed with masonry layout:
1. Masonry columns: columns-1 sm:columns-2 lg:columns-3
2. Mixed content cards: text posts, images, quotes, links
3. Each card has: avatar, username, timestamp, content, reactions
4. Image posts have varying aspect ratios
5. Text posts auto-height based on content
6. Hover to show action buttons (like, comment, share)
7. Infinite scroll loading indicator
Use break-inside-avoid, rounded-xl cards, subtle shadows
```

## Absolute Bans (Match and Refuse)

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

- force all cards to equal height (loses masonry character)
- use inconsistent card widths
- use inconsistent spacing
- ignore image loading states
- use too many columns on small screens
- let image zoom break the overflow-hidden container (Confined Zoom must maintain boundaries)
- use harsh dark borders as hover feedback on cards (use shadows and displacement instead)
- let hover displacement exceed -translate-y-1 (excessive lift breaks masonry flow visual continuity)

## 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 force all cards to equal height (loses masonry character)
- [ ] do not use inconsistent card widths
- [ ] do not use inconsistent spacing
- [ ] do not ignore image loading states
- [ ] do not use too many columns on small screens