Asymmetric Grid

STYLEKIT_STYLE_REFERENCE
style_name: Asymmetric Grid
style_slug: asymmetric-grid
style_source: /styles/asymmetric-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 an Asymmetric Grid layout expert. Generated code must follow:

## Layout Rules
- Use CSS Grid 12-column system, but column widths must be unequal
- Allow element overlap, use z-index to control layering
- Use -translate to create offset effects
- Maintain visual tension: large whitespace areas contrasting with dense regions

## Animation & Interaction Rules
- Spatial Tension: On hover, significantly raise z-index (z-50) and use scale-105, making elements "jump" to the foreground from the chaotic grid.
- Hard Popping: Use crisp ease-out with duration-200 to duration-300, paired with high-contrast hard shadows (shadow-[8px_8px_0px_color]).
- Parallax Content: Card internal titles, labels, and descriptions displace with different delays (delay-75, delay-100) and translate distances on hover, creating typographic offset.
- Physical Feedback: Active state resets translate and shadow to zero, simulating press-and-bounce-back.

## Forbidden
- Symmetric layouts with all equal column widths
- Rounded design (rounded-lg, rounded-xl)
- Soft shadows (shadow-sm, shadow-md)
- Transitions exceeding duration-300

---

# Asymmetric Grid Design System

> A layout approach that breaks traditional symmetric grids, creating dynamic and engaging page structures through irregular column widths, overlapping elements, and visual tension. Ideal for creative portfolios, art exhibitions, and brand showcases.

## Design Philosophy

Asymmetric Grid breaks the even distribution of traditional grids, creating visual tension through unequal column widths, element overlap, and whitespace contrast.

Core principles:
- Break symmetry: Intentionally use unequal column and row widths
- Visual tension: Create dynamism through size contrast and position offset
- Whitespace as content: Large whitespace areas contrast with dense regions
- Layer overlap: Allow elements to overlap each other for depth
- Spatial breakout: On interaction, elements "jump" to the foreground from the chaotic grid

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#0f0f0f]
Radius: rounded-none
```

### Shadow
```
sm: shadow-none
md: shadow-[4px_4px_0px_#0f0f0f]
lg: shadow-[8px_8px_0px_#ff3366]
hover: hover:shadow-[4px_4px_0px_#ff3366]
focus: focus:shadow-[4px_4px_0px_#00d4ff]
```

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

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

### Type scale
```
Hero: text-7xl md:text-9xl
H1: text-5xl md:text-7xl
H2: text-3xl md:text-5xl
H3: text-xl md:text-2xl
Body: text-base
Small: text-xs uppercase tracking-widest
```

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

### Color roles
```
Background primary: bg-white
Background secondary: bg-[#0f0f0f]
Background accent: bg-[#ff3366], bg-[#00d4ff], bg-[#ffcc00]
Text primary: text-[#0f0f0f]
Text secondary: text-white
Text muted: text-gray-500
Button primary: bg-[#0f0f0f] text-white
Button secondary: bg-white text-[#0f0f0f] border-2 border-[#0f0f0f]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-full`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`

### Banned patterns
- matches `^rounded-(?:lg|xl|2xl|full)`
- matches `^shadow-(?:sm|md|lg|xl)`

### Why they are banned
- `rounded-lg`: Asymmetric Grid uses sharp edges only
- `shadow-sm`: Asymmetric Grid uses offset shadows, not soft shadows

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

---

## [REQUIRED]

### Every button must include
```
font-bold
uppercase
tracking-widest
```

### Every card must include
```
border-2
border-[#0f0f0f]
```

### Every input must include
```
border-2
border-[#0f0f0f]
```

---

## [COMPARE] Asymmetric 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="font-bold uppercase tracking-widest bg-[#0f0f0f] 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="border-2 border-[#0f0f0f] p-6 md:p-10">
  <h3 class="font-bold tracking-tight text-xl md:text-2xl">{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="border-2 border-[#0f0f0f]" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Asymmetric 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-[#0f0f0f] border-2 border-[#0f0f0f] px-6 md:px-12">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-4">
    <a href="/" class="font-bold tracking-tight text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 font-sans text-xs uppercase tracking-widest">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#ff3366] text-[#0f0f0f] py-16 md:py-24 px-6 md:px-12">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-bold tracking-tight text-7xl md:text-9xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="font-bold uppercase tracking-widest bg-[#0f0f0f] text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-white text-[#0f0f0f] py-16 md:py-24 px-6 md:px-12">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-bold tracking-tight text-3xl md:text-5xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <!-- Card template - repeat for each card -->
      <div class="border-2 border-[#0f0f0f] p-6 md:p-10">
        <h3 class="font-bold tracking-tight text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-sans text-base text-gray-500">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="border-2 border-[#0f0f0f]" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#0f0f0f] text-white py-16 md:py-24 px-6 md:px-12">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-bold tracking-tight text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs uppercase tracking-widest">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-bold tracking-tight text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs uppercase tracking-widest">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

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

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

### Token check
- [ ] Button includes: `font-bold uppercase tracking-widest`
- [ ] Card includes: `border-2 border-[#0f0f0f]`
- [ ] Input includes: `border-2 border-[#0f0f0f]`

### Forbidden check
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-full`
- [ ] Not using `shadow-sm`
- [ ] Not using `shadow-md`
- [ ] Not using `shadow-lg`
- [ ] Not using `shadow-xl`

### Style rule check
- [ ] Use CSS Grid grid-template-columns to define unequal column widths
- [ ] Allow elements to span multiple columns and rows col-span-2 row-span-3
- [ ] Use -translate and z-index to create overlap effects
- [ ] Maintain sufficient whitespace contrasting with dense areas
- [ ] Use clearly differentiated font size hierarchy

### Style drift check
- [ ] Does not violate: No perfectly equal column widths
- [ ] Does not violate: No neatly aligned elements without variation
- [ ] Does not violate: No ignoring mobile responsive adjustments
- [ ] Does not violate: No excessive clutter that loses readability
- [ ] Does not violate: No elements all similar in size

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

## Absolute Bans (Match and Refuse)

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

- perfectly equal column widths
- neatly aligned elements without variation
- ignoring mobile responsive adjustments
- excessive clutter that loses readability
- elements all similar in size
- soft shadows (shadow-sm, shadow-md)
- overly long duration (not exceeding 300ms)

## 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
- [ ] no perfectly equal column widths
- [ ] no neatly aligned elements without variation
- [ ] no ignoring mobile responsive adjustments
- [ ] no excessive clutter that loses readability
- [ ] no elements all similar in size