Kinetic Constructivism

STYLEKIT_STYLE_REFERENCE
style_name: Kinetic Constructivism
style_slug: kinetic-constructivism
style_source: /styles/kinetic-constructivism

# 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

# Kinetic Constructivism Design System

You are an expert frontend developer specializing in kinetic constructivism. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Kinetic Constructivism
- **Essence**: geometric primitives are machine parts; motion is the externalization of compositional relationships — the poster moves
- **Mood**: rational, forceful, industrial, propaganda-poster directional tension
- **Inspiration**: El Lissitzky, Alexander Rodchenko, Varvara Stepanova Soviet constructivist posters; Bauhaus geometry; the primitive-in-motion origins of motion graphics

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Rounded corners / shadows / gradients / glow / blur | Constructivism is knife-cut hard edges + flat fills; any softening kills the industrial feel |
| A fourth hue / low-sat pastels / muddied primaries | Only red, blue, yellow + ink + paper; color is a structural signal, not atmosphere |
| Illustration / photography / 3D skeuomorphism | Basic primitives are the protagonist; anything else steals the stage |
| Cutesy bouncy easing / loops over 1.2s | Breaks the mechanical rhythm; use expo-out entrances, linear or stepped loops |
| Every primitive moving at once | Keep a static scaffold; one dominant motion at a time |
| Animating top/left/width/height/margin | Layout thrash; only transform and opacity may animate |
| Missing prefers-reduced-motion fallback | Accessibility is non-negotiable |

## Required

### The Frame (paper, ink, three colors)
- Background #EFE9DC (bone paper), body #17130E (warm ink)
- Three accents: constructivist red #E0231B, ultramarine #1C4A87, chrome yellow #F4B301
- Flat fills, hard edges (rounded-none), key blocks get a 2px or 4px ink stroke

### Primitive Library (only these)
Disc, triangle, square, thick diagonal bar, arc / concentric ring. Assemble like machine parts; no other shapes.

### Diagonal Composition
Organize key compositions along -30deg or -45deg diagonals; headline type blocks may rotate -3deg to -6deg; color bands cut in along the diagonal. Orthogonal grids only for the stable scaffold.

### Mechanical Motion (signature)
```css
@keyframes kc-spin   { to { transform: rotate(360deg); } }          /* gear self-rotation, linear */
@keyframes kc-orbit  { to { transform: rotate(360deg); } }          /* parent rotates, child rides the rim */
@keyframes kc-pendulum { 0%,100%{transform:rotate(-24deg)} 50%{transform:rotate(24deg)} } /* pendulum, ease-in-out */
@keyframes kc-march  { to { transform: translateX(24px); } }        /* squares march, steps(3) */
@keyframes kc-sweep  { from{transform:translateX(-110%) skewX(-12deg)} to{transform:translateX(0) skewX(-12deg)} }
```
- Orbit: outer div runs kc-orbit (rotate 360deg linear), a child disc sits on the top rim -> a circle orbiting a circle
- Spin: a disc / radial burst runs kc-spin, linear, for a gear feel
- Pendulum: a triangle / thick bar with transform-origin:top center runs kc-pendulum, ease-in-out
- March: a row of squares runs kc-march, steps(3) alternate, for mechanical stepping
- Entrance: color/type blocks use expo-out (cubic-bezier(0.16,1,0.3,1), 0.6-0.9s)

### Easing
- Entrance: cubic-bezier(0.16,1,0.3,1) (expo-out, fast start slow settle)
- Rotation / orbit loops: linear (constant gear speed)
- Pendulum: ease-in-out
- Rebound (restrained): cubic-bezier(0.34,1.4,0.64,1); never an exaggerated >1.56 overshoot

### Typography
```html
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Archivo:wght@700;800;900&family=Space+Mono&display=swap" />
```
Headline stack: font-family: "Archivo", "Anton", "Helvetica Neue", ui-sans-serif, sans-serif; ultra-bold (800-900), uppercase, tracking-tight.
Labels / numbers: font-family: "Space Mono", ui-monospace, monospace; uppercase, letter-spacing 0.2-0.3em, tabular-nums.

### Rhythm
- One dominant motion per viewport; the rest holds a static scaffold
- Entrances 0.6-0.9s; hover feedback 0.3-0.4s; loops 3-12s (bigger wheels turn slower)

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
  .kc-spin, .kc-orbit, .kc-pendulum, .kc-march { animation: none !important; }
}
```
Every loop settles into its constructivist end-state; the frame stays a complete poster.

### animejs Recipe (optional, project ships animejs@4)
```js
import { animate, stagger } from "animejs";
animate(".kc-square", {
  translateX: [0, 24],
  ease: "steps(3)",
  loop: true,
  alternate: true,
  duration: 900,
  delay: stagger(120),
});
```

## Self-Verification Checklist

- [ ] Paper ground, ink type, only red/blue/yellow
- [ ] Only circle/triangle/square/diagonal/arc, hard edges, zero radius, flat fills
- [ ] Key composition on the diagonal, headline blocks rotated
- [ ] Primitives genuinely move mechanically (orbit/spin/pendulum/march), not static mockups
- [ ] Only transform / opacity animate
- [ ] One dominant motion per viewport
- [ ] prefers-reduced-motion fallback settling on the constructivist end-state

---

# Kinetic Constructivism Design System

> Constructivism set in motion. On bone-white paper, solid geometric primitives — discs, triangles, squares and thick diagonal bars in red, blue and yellow — are not placed but engineered to move along axes: discs orbit, triangles swing like pendulums, blocks march to a beat. The kinematics descend from El Lissitzky and Rodchenko posters; the rhythm comes from the machine itself.

## Design Philosophy

The kinetic-constructivist creed: geometry is not static ornament — it is a machine. Constructivism treats the canvas as engineering: the diagonal is a vector of force, the circle is an axis of rotation, the triangle is a wedge in motion. When those primitives actually move, the poster becomes the machine: every disc orbits, every diagonal drives forward.

Core principles:
- Primitives are parts: only the most basic geometry (circle, triangle, square, thick bar, arc), assembled like machine components; no illustration, no photography
- Motion is structure: animation is not garnish but the externalization of compositional relationships — discs orbit and spin, triangles swing, squares march to a beat, diagonal blocks sweep in
- Three colors, one ink, one paper: constructivist red #E0231B, ultramarine blue #1C4A87, chrome yellow #F4B301, on warm ink #17130E and bone paper #EFE9DC — never a fourth hue
- The diagonal is the main axis: organize key compositions along -30deg / -45deg diagonals for tension and direction; orthogonal layout is reserved for the stable scaffold
- Hard edges, zero radius: every edge is a knife-cut straight line, flat solid fills, no gradients, no shadows, no glow
- Mechanical easing: entrances use expo-out (fast start, slow settle), loops use linear or stepped gear motion, rebounds use restrained back — never a cutesy bounce

Design principles:
- Performance line: animate transform / opacity only; all geometric motion via transform (translate / rotate / scale), never triggering reflow
- Accessibility line: under prefers-reduced-motion every loop settles into its constructivist end-state; the frame remains a complete constructivist poster with zero information loss
- Rhythm line: only one group of primitives leads the motion per viewport while the rest holds a static scaffold, avoiding the cheap look of everything moving at once
- Typography: ultra-bold uppercase sans-serif headlines + tabular numeric labels; the type blocks are themselves part of the composition and may rotate along the diagonal

---

## Token Dictionary (exact class mapping)

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

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: hover:shadow-none
focus: focus:shadow-[0_0_0_3px_#E0231B]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:text-[#E0231B]
Transition: transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]
Active: active:scale-[0.98]
```

### Typefaces
```
Heading: font-extrabold uppercase text-[#17130E] tracking-tight leading-[0.9]
Body: text-[#17130E]/80
Mono: font-mono uppercase tracking-[0.25em] text-[#17130E]/60 tabular-nums
```

### Type scale
```
Hero: text-[clamp(3rem,11vw,9rem)]
H1: text-5xl md:text-7xl
H2: text-3xl md:text-5xl
H3: text-2xl md:text-3xl
Body: text-sm md:text-base
Small: text-[11px]
```

### Spacing
```
Section: py-20 md:py-28
Container: px-6 md:px-10
Card: p-6
Gap sm: gap-3
Gap md: gap-6
Gap lg: gap-10
```

### Color roles
```
Background primary: bg-[#EFE9DC]
Background secondary: bg-[#17130E]
Background accent: bg-[#E0231B], bg-[#1C4A87], bg-[#F4B301]
Text primary: text-[#17130E]
Text secondary: text-[#17130E]/70
Text muted: text-[#17130E]/50
Button primary: bg-[#E0231B] text-[#EFE9DC]
Button secondary: bg-transparent text-[#17130E] border-2 border-[#17130E]
```

---

## [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-3xl`
- `rounded-full`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `bg-gradient-to-r`
- `bg-gradient-to-br`
- `bg-gradient-to-b`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`
- `blur-sm`
- `blur-md`
- `blur-lg`
- `drop-shadow-lg`

### Banned patterns
- matches `^rounded-(md|lg|xl|2xl|3xl|full)$`
- matches `^shadow-(md|lg|xl|2xl)$`
- matches `^bg-gradient-`
- matches `^blur-`
- matches `^drop-shadow-`

### Why they are banned
- `rounded-lg`: Constructivism is knife-cut hard edges; use rounded-none
- `rounded-full`: Discs are drawn as full circles by intent, not via softened UI corners; structural edges stay square
- `shadow-lg`: Flat poster printing has no drop shadows; depth comes from color-block layering
- `bg-gradient-to-r`: Flat solid fills only; gradients dilute the constructivist color signal
- `from-indigo-600`: Only red/blue/yellow + ink + paper; no AI-cliche gradient hues
- `blur-md`: No blur or glow; every edge is sharp
- `drop-shadow-lg`: No soft shadows; the composition is flat and printed
- `ease-linear`: Linear easing is lifeless for entrances; use expo-out cubic-bezier(0.16,1,0.3,1) (linear is allowed only for constant-speed gear/orbit loops)

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

---

## [REQUIRED]

### Every button must include
```
uppercase font-extrabold tracking-[0.12em] text-sm
border-2 border-[#17130E]
rounded-none
transition-colors duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]
active:scale-[0.98]
```

### Every card must include
```
bg-[#EFE9DC]
border-2 border-[#17130E]
rounded-none
```

### Every input must include
```
bg-transparent
border-2 border-[#17130E]
rounded-none
text-[#17130E] placeholder-[#17130E]/30
focus:outline-none
```

---

## [COMPARE] Kinetic Constructivism 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="uppercase font-extrabold tracking-[0.12em] text-sm border-2 border-[#17130E] rounded-none transition-colors duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] active:scale-[0.98] bg-[#E0231B] text-[#EFE9DC]">
 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="bg-[#EFE9DC] border-2 border-[#17130E] rounded-none p-6">
 <h3 class="font-extrabold uppercase text-[#17130E] tracking-tight leading-[0.9] text-2xl md: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="bg-transparent border-2 border-[#17130E] rounded-none text-[#17130E] placeholder-[#17130E]/30 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Kinetic Constructivism page skeletons

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

### Navigation
```html
<nav class="bg-[#EFE9DC] text-[#17130E] border-2 border-[#17130E] px-6 md:px-10">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
 <a href="/" class="font-extrabold uppercase text-[#17130E] tracking-tight leading-[0.9] text-2xl md:text-3xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-6 text-[#17130E]/80 text-[11px]">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#E0231B] text-[#17130E] py-20 md:py-28 px-6 md:px-10">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-extrabold uppercase text-[#17130E] tracking-tight leading-[0.9] text-[clamp(3rem,11vw,9rem)]">
 {HEADLINE}
 </h1>
 <p class="text-[#17130E]/80 text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="uppercase font-extrabold tracking-[0.12em] text-sm border-2 border-[#17130E] rounded-none transition-colors duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] active:scale-[0.98] bg-[#E0231B] text-[#EFE9DC]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#EFE9DC] text-[#17130E] py-20 md:py-28 px-6 md:px-10">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-extrabold uppercase text-[#17130E] tracking-tight leading-[0.9] text-3xl md:text-5xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Card template - repeat for each card -->
 <div class="bg-[#EFE9DC] border-2 border-[#17130E] rounded-none p-6">
 <h3 class="font-extrabold uppercase text-[#17130E] tracking-tight leading-[0.9] text-2xl md:text-3xl">{CARD_TITLE}</h3>
 <p class="text-[#17130E]/80 text-sm md:text-base text-[#17130E]/50">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-transparent border-2 border-[#17130E] rounded-none text-[#17130E] placeholder-[#17130E]/30 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#17130E] text-[#17130E]/70 py-20 md:py-28 px-6 md:px-10">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
 <div>
 <span class="font-extrabold uppercase text-[#17130E] tracking-tight leading-[0.9] text-2xl md:text-3xl">{LOGO_TEXT}</span>
 <p class="text-[#17130E]/80 text-[11px]">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-extrabold uppercase text-[#17130E] tracking-tight leading-[0.9] text-2xl md:text-3xl">{COLUMN_TITLE}</h4>
 <ul class="text-[#17130E]/80 text-[11px]">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Kinetic Constructivism post-generation self check

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

### Token check
- [ ] Button includes: `uppercase font-extrabold tracking-[0.12em] text-sm border-2 border-[#17130E] rounded-none transition-colors duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] active:scale-[0.98]`
- [ ] Card includes: `bg-[#EFE9DC] border-2 border-[#17130E] rounded-none`
- [ ] Input includes: `bg-transparent border-2 border-[#17130E] rounded-none text-[#17130E] placeholder-[#17130E]/30 focus:outline-none`

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

### Style rule check
- [ ] Set the page on bone paper #EFE9DC with warm ink #17130E for a printed-poster feel
- [ ] Use only three accents — constructivist red #E0231B, ultramarine #1C4A87, chrome yellow #F4B301 — never a fourth
- [ ] Use only basic primitives: circle, triangle, square, thick diagonal bar, arc — flat fills, hard edges, zero radius
- [ ] Organize key compositions along -30deg / -45deg diagonals with rotated type blocks and color bands for directional tension
- [ ] Make primitives genuinely move mechanically: discs orbit/spin, triangles swing, squares march, diagonal blocks sweep

### Style drift check
- [ ] Does not violate: Never use rounded corners, shadows (md+), gradients, glow or blur — constructivism is knife-cut hard edges and flat color
- [ ] Does not violate: Never introduce a fourth hue, never use low-saturation pastels, never muddy the primaries
- [ ] Does not violate: Never let illustration, photography or 3D skeuomorphism steal the stage from geometry — primitives are the protagonist
- [ ] Does not violate: Never use cutesy bouncy easing or dragging loops over 1.2s
- [ ] Does not violate: Never let every primitive move at once (keep a static scaffold; one dominant motion at a time)

### 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 Kinetic Constructivism

---

## [EXAMPLES] Example prompts

### 1. 

```
Create a kinetic constructivism landing page with:
1. Frame: #EFE9DC bone paper, #17130E ink, three accents #E0231B / #1C4A87 / #F4B301 only
2. Load Archivo (wght 700-900) + Space Mono from fonts.loli.net
3. Hero on a diagonal: an orbiting red disc (parent div rotate 360deg 12s linear, child disc on the rim), a blue triangle swinging like a pendulum (transform-origin top center, rotate -24deg..24deg ease-in-out), a rotated headline block with one word on a yellow slab tilted -3deg
4. A row of squares marching with steps(3) between sections
5. Numbered feature cards: thick ink border, top color rule, a corner disc that spins on hover
6. Diagonal sweep entrances for color panels (translateX -110% skewX -12deg -> 0)
7. All motion via transform/opacity only; expo-out cubic-bezier(0.16,1,0.3,1) entrances; linear loops; prefers-reduced-motion settles everything on the constructivist end-state
```

### 2. 

```
Create a constructivist portfolio hero with:
1. Bone paper #EFE9DC, ink #17130E, red/blue/yellow accents only, flat fills, hard edges
2. A large concentric-ring arc in the corner slowly spinning (kc-spin 18s linear)
3. Project rows as huge uppercase Archivo headlines; on hover a red diagonal bar sweeps across (translateX -110% skewX -12deg -> 0) and a mono index number in Space Mono slides in
4. A pendulum triangle pinned to the top-right, swinging ease-in-out
5. Section labels in tabular-nums Space Mono, uppercase, tracked 0.25em
6. Everything transform/opacity only; one dominant motion per viewport; full prefers-reduced-motion fallback
```

## Absolute Bans (Match and Refuse)

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

- use rounded corners, shadows (md+), gradients, glow or blur — constructivism is knife-cut hard edges and flat color
- introduce a fourth hue, never use low-saturation pastels, never muddy the primaries
- let illustration, photography or 3D skeuomorphism steal the stage from geometry — primitives are the protagonist
- use cutesy bouncy easing or dragging loops over 1.2s
- let every primitive move at once (keep a static scaffold; one dominant motion at a time)
- animate top/left/width/height (layout thrash) — geometric motion uses transform only
- skip the prefers-reduced-motion fallback

## 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
- [ ] never use rounded corners, shadows (md+), gradients, glow or blur — constructivism is knife-cut hard edges and flat color
- [ ] never introduce a fourth hue, never use low-saturation pastels, never muddy the primaries
- [ ] never let illustration, photography or 3D skeuomorphism steal the stage from geometry — primitives are the protagonist
- [ ] never use cutesy bouncy easing or dragging loops over 1.2s
- [ ] never let every primitive move at once (keep a static scaffold; one dominant motion at a time)