Minimalist Flat

STYLEKIT_STYLE_REFERENCE
style_name: Minimalist Flat
style_slug: minimalist-flat
style_source: /styles/minimalist-flat

# 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

# Minimalist Flat Design System

You are an expert frontend developer specializing in ultra-minimal flat design. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Minimalist Flat / Pure Flat Design
- **Category**: Minimal, Modern
- **Essence**: Content is king — zero decoration, maximum clarity, pure function
- **Mood**: Clean, confident, artistic, editorial
- **Inspiration**: Dieter Rams, Swiss design, art galleries, high-fashion editorials

---

## Core Visual Principles

### 1. Color Purity (CRITICAL)
```
ONLY PURE COLORS ALLOWED:
- bg-white, bg-black
- bg-[#ff3366] (or one chosen accent)
- text-black, text-white

NO transparency, NO grays (except intentional muted text)
```

### 2. Shadow Policy
```
ABSOLUTELY FORBIDDEN:
- shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl
- ANY box-shadow whatsoever

This is a zero-shadow design system.
```

### 3. Gradient Policy
```
ABSOLUTELY FORBIDDEN:
- bg-gradient-*, from-*, via-*, to-*

Pure flat colors only.
```

### 4. Border Radius Consistency
```
CHOOSE ONE and apply consistently:
OPTION A: rounded-none (sharp, editorial)
OPTION B: rounded-full (for circular elements only)

NEVER mix rounded values in the same design.
```

### 5. Border System
```
DEFAULT: border-2 border-black
Establishes structure without shadows
```

---

## Interaction Specifications

### Hover (High-Contrast Inversion)
| Element | Default | Hover |
|---------|---------|-------|
| Button (filled) | bg-black text-white | hover:bg-white hover:text-black |
| Button (outlined) | bg-white text-black | hover:bg-black hover:text-white |
| Card | bg-white border-black | hover:bg-black hover:text-white |
| Link | text-black | hover:text-[accent] |

### Active State
```
active:bg-gray-200 (light variant)
active:bg-gray-100 (dark variant)
Brief flash feedback only
```

### Focus State
```
focus:outline-none focus:border-[accent]
OR
focus:bg-black focus:text-white
```

---

## Animation Rules

### Interaction Physics
- **Strict 2D Flatness**: NO translate, NO scale, NO shadow Z-axis feedback. All interactions stay within the 2D plane.
- **High-Contrast Inversion**: Hover uses foreground/background color swap. Clean, binary feedback.
- **Instant Sharpness**: Use `transition-none` or `duration-75`. NO soft fades, NO ease-in-out.
- **Border Dynamics**: Focus/hover establishes hierarchy through border thickness or underline changes, NOT shadows.

### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Color inversion | 0ms (instant) | transition-none |
| Border change | 75ms | ease-out |
| Focus ring | 150-200ms | ease-out |

---

## Color Palette

### Core Colors
| Token | Value | Usage |
|-------|-------|-------|
| Primary | #000000 (black) | Text, borders, filled buttons |
| Background | #ffffff (white) | Page background, cards |
| Accent | #ff3366 (or chosen) | CTAs, highlights, hover states |

### Text Hierarchy
| Level | Classes |
|-------|---------|
| H1 | text-black text-5xl md:text-7xl font-bold tracking-tight |
| H2 | text-black text-3xl md:text-5xl font-bold |
| H3 | text-black text-xl md:text-2xl font-black |
| Body | text-black text-base leading-relaxed |
| Muted | text-gray-500 text-sm |
| Label | text-xs uppercase tracking-widest |

---

## Typography

| Element | Classes |
|---------|---------|
| Headlines | font-bold tracking-tight leading-tight |
| Body | Regular weight, leading-relaxed |
| Labels | text-xs font-bold uppercase tracking-widest |
| Links | underline-offset-4 hover:text-[accent] |

---

## Whitespace Philosophy

```
GENEROUS SPACING IS MANDATORY:
- Section gaps: space-y-12 md:space-y-24
- Card padding: p-8 md:p-12
- Between elements: gap-6 md:gap-8
- Page margins: px-6 md:px-12

"When in doubt, add more whitespace."
```

---

## Component Templates

### Button (Filled)
```jsx
<button className="px-8 py-4 bg-black text-white font-bold 
  border-2 border-black 
  hover:bg-white hover:text-black 
  active:bg-gray-200 
  transition-none">
  Get Started
</button>
```

### Button (Outlined)
```jsx
<button className="px-8 py-4 bg-white text-black font-bold 
  border-2 border-black 
  hover:bg-black hover:text-white 
  active:bg-gray-100 
  transition-none">
  Learn More
</button>
```

### Card (Bordered)
```jsx
<div className="group border-2 border-black p-8 
  hover:bg-black hover:text-white 
  transition-none cursor-pointer">
  <span className="text-xs font-bold uppercase tracking-widest 
    text-gray-500 group-hover:text-gray-300">Category</span>
  <h3 className="text-3xl font-black mt-2 mb-4">Title</h3>
  <p className="leading-relaxed">Description text.</p>
</div>
```

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| ANY shadow-* | Shadows create depth, violates flat principle |
| ANY gradient | Gradients add dimension, violates flat principle |
| opacity < 0.5 | Low opacity weakens contrast |
| Mixed border-radius | Breaks visual consistency |
| Gray text (unintentional) | Reduces clarity |
| Pattern backgrounds | Adds unnecessary visual noise |
| translate on hover | Creates Z-axis illusion |
| scale on hover | Creates Z-axis illusion |
| Soft transitions (300ms+) | Delays instant feedback |

---

## Responsive Guidelines

### Spacing Scale
```
Mobile: space-y-8, p-6, gap-4
Desktop (md:): space-y-16, p-12, gap-8
Large (lg:): space-y-24, p-16, gap-12
```

### Typography Scale
```
Mobile: text-3xl, text-base
Desktop (md:): text-5xl, text-lg
```

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] NO shadows anywhere (zero shadow-* classes)
- [ ] NO gradients anywhere (zero bg-gradient-* classes)
- [ ] Colors are pure (no transparency except intentional text muting)
- [ ] Border-radius is consistent (all sharp OR all circular)
- [ ] Whitespace is generous (space-y-12+ between sections)
- [ ] Hover uses color inversion (bg swap, not translate/scale)
- [ ] Transitions are instant or very short (transition-none or duration-75)
- [ ] High contrast maintained (black/white + one accent)

## Absolute Bans (Match and Refuse)

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

- use any shadows shadow-*
- use gradients bg-gradient-*
- use colors with opacity below 0.5
- mix different border-radius values
- use gray text (unless intentional)
- use pattern backgrounds

## 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 use any shadows shadow-*
- [ ] do not use gradients bg-gradient-*
- [ ] do not use colors with opacity below 0.5
- [ ] do not mix different border-radius values
- [ ] do not use gray text (unless intentional)