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)

---

# Minimalist Flat Design System

> Ultra-minimal flat design with no shadows or gradients, creating hierarchy through color and whitespace. Ideal for portfolios, creative agencies, and art websites.

## Design Philosophy

Minimalist Flat style pursues the essence of design, removing all unnecessary decoration and letting content take center stage.

Core principles:
- Less is more: Every element must have a reason to exist
- Flat purity: Reject shadows, gradients, and other skeuomorphic effects
- Color speaks: Use color to distinguish layers rather than light and shadow
- Generous whitespace: Let the design breathe and highlight core content

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-black
Radius: rounded-none
```

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

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-90
Transition: transition-colors duration-200
Active: active:opacity-80
```

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

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

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

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

---

## [FORBIDDEN]

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

### Banned classes
- `shadow-sm`
- `shadow`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `bg-gradient-to-r`
- `bg-gradient-to-b`
- `bg-gradient-to-l`
- `bg-gradient-to-t`
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `bg-gray-50`
- `bg-gray-100`
- `bg-gray-200`
- `text-gray-300`
- `text-gray-400`
- `backdrop-blur`
- `backdrop-blur-lg`

### Banned patterns
- matches `^shadow-(?!none)`
- matches `^bg-gradient-`
- matches `^rounded-(?:sm|md|lg|xl|2xl|3xl)$`
- matches `^backdrop-blur`
- matches `^bg-gray-(?:[1-3])`

### Why they are banned
- `shadow-md`: Minimalist Flat uses zero shadows - flat design only
- `bg-gradient-to-r`: Minimalist Flat uses solid pure colors, no gradients
- `rounded-lg`: Minimalist Flat uses consistent corners: all rounded-none or all rounded-full
- `bg-gray-100`: Minimalist Flat uses pure black/white, not grays for backgrounds
- `backdrop-blur`: Minimalist Flat avoids glass/blur effects - pure flat surfaces only

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

---

## [REQUIRED]

### Every button must include
```
border-2 border-black
font-medium
hover:bg-black hover:text-white
transition-colors duration-200
```

### Every card must include
```
border-2 border-black
hover:bg-black hover:text-white
transition-colors duration-200
```

### Every input must include
```
border-0 border-b-2 border-black
bg-transparent
focus:outline-none
focus:border-[#ff3366]
transition-colors duration-200
```

---

## [COMPARE] Minimalist Flat 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="border-2 border-black font-medium hover:bg-black hover:text-white transition-colors duration-200 bg-black text-white border-2 border-black">
 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-black hover:bg-black hover:text-white transition-colors duration-200 p-6 md:p-8">
 <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="border-0 border-b-2 border-black bg-transparent focus:outline-none focus:border-[#ff3366] transition-colors duration-200" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Minimalist Flat 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-black border-2 border-black px-4 md:px-8 lg:px-16">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-6 md:gap-8">
 <a href="/" class="font-bold tracking-tight text-lg md:text-xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-6 md:gap-8 font-sans text-xs md:text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#ff3366] text-black py-16 md:py-24 lg:py-32 px-4 md:px-8 lg:px-16">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-bold tracking-tight text-4xl md:text-6xl lg:text-8xl">
 {HEADLINE}
 </h1>
 <p class="font-sans text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="border-2 border-black font-medium hover:bg-black hover:text-white transition-colors duration-200 bg-black text-white border-2 border-black">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-white text-black py-16 md:py-24 lg:py-32 px-4 md:px-8 lg:px-16">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-bold tracking-tight text-2xl md:text-3xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
 <!-- Card template - repeat for each card -->
 <div class="border-2 border-black hover:bg-black hover:text-white transition-colors duration-200 p-6 md:p-8">
 <h3 class="font-bold tracking-tight text-lg md:text-xl">{CARD_TITLE}</h3>
 <p class="font-sans text-sm md:text-base text-gray-500">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="border-0 border-b-2 border-black bg-transparent focus:outline-none focus:border-[#ff3366] transition-colors duration-200" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-black text-white py-16 md:py-24 lg:py-32 px-4 md:px-8 lg:px-16">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
 <div>
 <span class="font-bold 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-bold 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] Minimalist Flat post-generation self check

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

### Token check
- [ ] Button includes: `border-2 border-black font-medium hover:bg-black hover:text-white transition-colors duration-200`
- [ ] Card includes: `border-2 border-black hover:bg-black hover:text-white transition-colors duration-200`
- [ ] Input includes: `border-0 border-b-2 border-black bg-transparent focus:outline-none focus:border-[#ff3366] transition-colors duration-200`

### Forbidden check
- [ ] Not using `shadow-sm`
- [ ] Not using `shadow`
- [ ] Not using `shadow-md`
- [ ] Not using `shadow-lg`
- [ ] Not using `shadow-xl`
- [ ] Not using `shadow-2xl`
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-b`

### Style rule check
- [ ] Use solid color backgrounds bg-white, bg-black, bg-[accent]
- [ ] Borders use border-2 border-black or no border
- [ ] Keep border radius consistent: all rounded-none or all rounded-full
- [ ] Use high-contrast color schemes
- [ ] Generous whitespace space-y-12 md:space-y-24

### Style drift check
- [ ] Does not violate: Do not use any shadows shadow-*
- [ ] Does not violate: Do not use gradients bg-gradient-*
- [ ] Does not violate: Do not use colors with opacity below 0.5
- [ ] Does not violate: Do not mix different border-radius values
- [ ] Does not violate: Do not use gray text (unless intentional)

### 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 Minimalist Flat

---

## [EXAMPLES] Example prompts

### 1. Portfolio

```
Create a designer portfolio using Minimalist Flat style:
- Full-screen hero with name and title
- Grid of project cards with hover color inversion
- No shadows, no gradients
- Black and white with one accent color
- Large typography for headings
- Generous whitespace between sections
```

## 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)