Swiss Poster

STYLEKIT_STYLE_REFERENCE
style_name: Swiss Poster
style_slug: swiss-poster
style_source: /styles/swiss-poster

# 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 Swiss Poster design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Decorative, script, or monospace fonts
- Rounded corners larger than rounded-sm (use rounded-none)
- Any shadows (shadow-sm, shadow-md, shadow-lg, etc.) - Swiss Poster has NO shadows
- Gradients of any kind
- Dashed borders (border-dashed) - use border-solid only
- Element spacing/gaps (gap-4, gap-6) - use gap-0 with border dividers
- Backdrop blur or glass effects
- Decorative elements or embellishments

## Must Follow

- Black and white as primary palette: #000000, #ffffff
- Accent color blocks: red #ff0000, blue #0057b8, yellow #ffcc00
- Extra bold sans-serif: font-sans font-black
- All uppercase: uppercase tracking-widest
- Sharp edges: rounded-none everywhere
- 12-column grid alignment: grid-cols-12 with asymmetric splits
- Borders as dividers: border-2 border-[#000000]
- Zero gaps: gap-0, elements butt against each other
- Extreme type scale contrast (160px heading vs 10px label)
- Non-symmetric layouts (3/9, 8/4 column splits)

## Color Palette

Primary:
- Black: #000000 (text, borders, backgrounds)
- White: #ffffff (backgrounds)
- Red: #ff0000 (color blocks, hover states)
- Blue: #0057b8 (color blocks)
- Yellow: #ffcc00 (color blocks)

## Special Elements

- 12-column grid system with visible structural lines
- Asymmetric column splits (not 6/6 - use 3/9, 8/4, etc.)
- Color block backgrounds (full sections in red/blue/yellow)
- Visible grid column markers
- Extreme font size contrasts (160px vs 10px)
- Edge-to-edge button groups (gap-0, border-l-0)
- Vertical text using writing-mode: vertical-lr
- Section borders as visual separators instead of spacing

## Animation & Interaction Rules

- Absolute Objectivity: Zero `translate`, `scale`, or `shadow` changes on any interactive element. Swiss Poster communicates through color and typography alone -- motion is visual noise that undermines the grid's authority.
- Snap Transitions: All state changes use `transition-none` -- color flips are instantaneous, like ink stamped onto paper in a single press. Never use `duration-100` or any timed transition.
- Color Block Invasion: Hover replaces the entire background with solid black `hover:bg-[#000000]` and text inverts to `hover:text-[#ffffff] transition-none`. The color block takes over completely -- no partial fills, no gradients.
- Typographic Highlighting: The year/category label activates to `group-hover:text-[#ff0000] transition-none` on hover -- the red typographic accent fires like a stamp imprint, the only color note in a black-and-white composition.

---

# Swiss Poster Design System

> Bold typography, grid alignment, primary color blocks, and experimental layouts. Rooted in the Swiss International Style poster design tradition, building information delivery through oversized type and strong visual hierarchy. Differs from swiss-style by focusing more on poster-level experimental large-scale typography.

## Design Philosophy

Swiss Poster style originates from the poster tradition of the Swiss International Style design movement, pursuing the ultimate in typographic expressiveness.

Core principles:
- Oversized typography: Using extreme font sizes to create visual impact (160px headings vs 10px labels)
- 12-column grid system: All content strictly aligned to grid-cols-12, using asymmetric column splits
- Primary color blocks: Black and white as primary, with red, blue, and yellow as large-area color block accents
- Border separation: Using border-2 border-[#000000] to divide regions, not shadows or spacing
- Zero spacing: gap-0 keeps element edges flush, using border lines as visual separators
- No decoration: No rounded corners, shadows, gradients, or blur -- only solid colors and lines

---

## Token Dictionary (exact class mapping)

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

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

### Interaction
```
Hover translate: hover:-translate-y-0.5
Hover scale: (none)
Hover opacity: (none)
Transition: transition-all duration-100 ease-out
Active: active:scale-[0.98]
```

### Typefaces
```
Heading: font-sans font-black uppercase tracking-tighter
Body: font-sans
Mono: font-mono
```

### Type scale
```
Hero: text-6xl md:text-[10rem] lg:text-[12rem]
H1: text-5xl md:text-7xl lg:text-8xl
H2: text-3xl md:text-5xl lg:text-6xl
H3: text-xl md:text-2xl lg:text-3xl
Body: text-sm md:text-base
Small: text-xs md:text-sm
```

### Spacing
```
Section: py-0
Container: px-0
Card: p-6 md:p-8
Gap sm: gap-0
Gap md: gap-0
Gap lg: gap-0
```

### Color roles
```
Background primary: bg-[#ffffff]
Background secondary: bg-[#f5f5f5]
Background accent: bg-[#ff0000], bg-[#0057b8], bg-[#ffcc00]
Text primary: text-[#000000]
Text secondary: text-[#000000]/70
Text muted: text-[#000000]/30
Button primary: bg-[#000000] text-[#ffffff]
Button secondary: bg-[#ff0000] text-[#ffffff]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-md`
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-full`
- `bg-gradient-to-r`
- `bg-gradient-to-b`
- `bg-gradient-to-br`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `backdrop-blur`
- `backdrop-blur-sm`
- `font-serif`
- `font-mono`
- `border-dashed`
- `gap-4`
- `gap-6`
- `gap-8`

### Banned patterns
- matches `^rounded-(?:md|lg|xl|2xl|full)$`
- matches `^bg-gradient-`
- matches `^shadow-(?:sm|md|lg|xl|2xl)$`
- matches `^backdrop-blur`
- matches `^font-serif$`
- matches `^font-mono$`

### Why they are banned
- `rounded-lg`: Swiss Poster uses sharp edges only (rounded-none) - geometric precision
- `bg-gradient-to-r`: Swiss Poster uses flat solid color blocks only, no gradients
- `shadow-md`: Swiss Poster does not use shadows at all - relies on borders and color blocks for hierarchy
- `backdrop-blur`: Swiss Poster is clean and opaque, no blur or glass effects
- `font-serif`: Swiss Poster uses sans-serif only (Helvetica/Akzidenz-Grotesk tradition)
- `font-mono`: Swiss Poster uses sans-serif only - monospace breaks the typographic tradition
- `border-dashed`: Swiss Poster uses solid borders only - dashed lines break the clean grid aesthetic
- `gap-4`: Swiss Poster uses gap-0 - elements butt against each other with borders as separators

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

---

## [REQUIRED]

### Every button must include
```
rounded-none
font-sans font-black uppercase tracking-widest
border-2 border-[#000000]
transition-all duration-100 ease-out
```

### Every card must include
```
rounded-none
bg-[#ffffff]
border-2 border-[#000000]
```

### Every input must include
```
rounded-none
border-0 border-b-2 border-[#000000]
bg-transparent
font-sans font-bold
focus:outline-none
```

---

## [COMPARE] Swiss Poster 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-none font-sans font-black uppercase tracking-widest border-2 border-[#000000] transition-all duration-100 ease-out bg-[#000000] text-[#ffffff]">
 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="rounded-none bg-[#ffffff] border-2 border-[#000000] p-6 md:p-8">
 <h3 class="font-sans font-black uppercase tracking-tighter text-xl md:text-2xl lg:text-3xl">{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-none border-0 border-b-2 border-[#000000] bg-transparent font-sans font-bold focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Swiss Poster page skeletons

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

### Navigation
```html
<nav class="bg-[#ffffff] text-[#000000] border-2 border-[#000000] px-0">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-0">
 <a href="/" class="font-sans font-black uppercase tracking-tighter text-xl md:text-2xl lg:text-3xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-0 font-sans text-xs md:text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#ff0000] text-[#000000] py-0 px-0">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-sans font-black uppercase tracking-tighter text-6xl md:text-[10rem] lg:text-[12rem]">
 {HEADLINE}
 </h1>
 <p class="font-sans text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-none font-sans font-black uppercase tracking-widest border-2 border-[#000000] transition-all duration-100 ease-out bg-[#000000] text-[#ffffff]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#ffffff] text-[#000000] py-0 px-0">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-sans font-black uppercase tracking-tighter text-3xl md:text-5xl lg:text-6xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-0">
 <!-- Card template - repeat for each card -->
 <div class="rounded-none bg-[#ffffff] border-2 border-[#000000] p-6 md:p-8">
 <h3 class="font-sans font-black uppercase tracking-tighter text-xl md:text-2xl lg:text-3xl">{CARD_TITLE}</h3>
 <p class="font-sans text-sm md:text-base text-[#000000]/30">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="rounded-none border-0 border-b-2 border-[#000000] bg-transparent font-sans font-bold focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#f5f5f5] text-[#000000]/70 py-0 px-0">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
 <div>
 <span class="font-sans font-black uppercase tracking-tighter text-xl md:text-2xl lg:text-3xl">{LOGO_TEXT}</span>
 <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-sans font-black uppercase tracking-tighter text-xl md:text-2xl lg:text-3xl">{COLUMN_TITLE}</h4>
 <ul class="font-sans text-xs md:text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Swiss Poster post-generation self check

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

### Token check
- [ ] Button includes: `rounded-none font-sans font-black uppercase tracking-widest border-2 border-[#000000] transition-all duration-100 ease-out`
- [ ] Card includes: `rounded-none bg-[#ffffff] border-2 border-[#000000]`
- [ ] Input includes: `rounded-none border-0 border-b-2 border-[#000000] bg-transparent font-sans font-bold focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-md`
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-full`
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-b`
- [ ] Not using `bg-gradient-to-br`

### Style rule check
- [ ] Use oversized bold sans-serif type (font-sans font-black)
- [ ] Strictly follow 12-column grid alignment (grid-cols-12)
- [ ] Use black and white as primary colors
- [ ] Use primary colors (red #ff0000, blue #0057b8, yellow #ffcc00) as color block accents
- [ ] Keep sharp edges (rounded-none)

### Style drift check
- [ ] Does not violate: Do not use decorative, script, or monospace fonts
- [ ] Does not violate: Do not use rounded corners larger than rounded-sm
- [ ] Does not violate: Do not use any shadows (shadow-sm and above)
- [ ] Does not violate: Do not use gradients
- [ ] Does not violate: Do not use dashed borders (border-dashed)

### 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 Swiss Poster

---

## [EXAMPLES] Example prompts

### 1. 

12

```
Use Swiss Poster style to create a landing page:
1. Background: white with visible 12-column structural grid
2. Title: extremely large (160px) black sans-serif, uppercase, tight tracking
3. Layout: asymmetric grid-cols-12 splits (8/4, 3/9), never symmetric
4. Cards: border-only, no shadows, color block hover states
5. Buttons: edge-to-edge gap-0, joined with border-l-0
6. Color blocks: large red/blue/yellow sections as accents
7. Section dividers: border-2 border-[#000000], no spacing
8. Overall bold, grid-based, mathematical typographic poster aesthetic
```

## Absolute Bans (Match and Refuse)

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

- use decorative, script, or monospace fonts
- use rounded corners larger than rounded-sm
- use any shadows (shadow-sm and above)
- use gradients
- use dashed borders (border-dashed)
- use element spacing (gap-4, etc.) -- use gap-0 + borders
- use any `translate`, `scale`, or `rotate` animations (Absolute Objectivity -- Swiss Poster communicates through color and typography, not motion)
- use `active:scale-[0.98]` or any scale (posters do not shrink when touched)

## 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 decorative, script, or monospace fonts
- [ ] do not use rounded corners larger than rounded-sm
- [ ] do not use any shadows (shadow-sm and above)
- [ ] do not use gradients
- [ ] do not use dashed borders (border-dashed)