F-Pattern Layout

STYLEKIT_STYLE_REFERENCE
style_name: F-Pattern Layout
style_slug: f-pattern-layout
style_source: /styles/f-pattern-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 an F-Pattern Layout expert. All generated code must strictly follow these constraints:

## Layout Rules

- Place the most important information at the top of the page (logo, navigation, featured content)
- Place secondary information on the second row (categories, search)
- Place main content area on the left (article list)
- Place auxiliary content on the right (sidebar)
- All text left-aligned text-left

## Content Hierarchy

First layer (full-width top):
- Navigation bar
- Featured article/headline

Second layer (secondary horizontal area):
- Category tags
- Search bar

Third layer (left vertical list):
- Article list
- Content cards with thumbnails

Auxiliary area (right side):
- Trending recommendations
- Tag cloud
- Ad space

## Responsive

Desktop: Left main content + right sidebar
Tablet: Full-width main content + collapsed sidebar
Mobile: Single column stacked

## Self-Check

1. Most important content at top and top-left
2. Clear heading hierarchy
3. Text left-aligned
4. Content quickly scannable
5. Responsive adaptation complete

## Animation & Interaction Rules

- Eye-Tracking Guides: List item hover allows main title to slightly shift right (e.g., `translate-x-1`) or underline to appear, helping quickly lock on during scanning phase.
- Fast Feedback: News-type interactions recommend `duration-150` to `duration-200`, avoiding lengthy transitions that interrupt reading.
- Contrast Pop: Current hover item can be briefly separated from the information flow through slight shadow or border contrast enhancement.
- Image Focus: Thumbnail hover can increase contrast or brightness as clickable feedback, but the magnitude must be restrained.

## Absolute Bans (Match and Refuse)

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

- place important content in the bottom-right corner
- center-align large blocks of text
- ignore content priority ordering
- use excessively long unsegmented text
- leave too much whitespace on the left side

## 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 place important content in the bottom-right corner
- [ ] do NOT center-align large blocks of text
- [ ] do NOT ignore content priority ordering
- [ ] do NOT use excessively long unsegmented text
- [ ] do NOT leave too much whitespace on the left side