Cubism

STYLEKIT_STYLE_REFERENCE
style_name: Cubism
style_slug: cubism
style_source: /styles/cubism

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

## Absolutely Forbidden

- Large rounded corners rounded-2xl, rounded-full
- Soft gradients or blur effects
- Neon or fluorescent colors
- Fully symmetrical centered traditional layouts
- Organic curves or circular shapes
- Thin hairline borders border (must be border-2 or thicker)

## Must Follow

- Earth-tone palette: #5c4033 (burnt sienna), #e8dcc8 (canvas)
- Borders use border-2 paired with rounded-sm
- Hard shadows shadow-[Npx_Npx_0px_color]
- font-bold uppercase tracking-widest to emphasize geometric feel
- Create fragmented visuals through skew, rotate, clip-path
- Overlapping elements and asymmetric layouts

## Animation & Interaction Rules

- Motion must be short and crisp: transition duration kept at 100-200ms, prefer combined transitions of transform, box-shadow, and border-color
- Hover feedback primarily uses geometric displacement: 1-2px shift + shadow offset + slight angular disturbance (1-3deg)
- Active state must have a "stamp" feel: 3-4px displacement with shadow significantly shrinking or removed
- No spring bounce, floating loops, slow fade-in/out, or large-scale animations
- One-time light-band/slice sweep effects are allowed but must not steal focus or introduce blur softening

## Color Palette

Primary:
- Sienna: #5c4033
- Canvas: #e8dcc8
- Khaki: #8b7355
- Steel blue: #3d5c6e
- Terracotta: #9b3d25

## Special Elements

- Geometric fragment decorations (clip-path, skew, rotate)
- Hard-edge shadows (no blur)
- Asymmetric compositions
- Bold uppercase letter typography

---

# Cubism Design System

> The Cubism movement of Picasso and Braque, featuring geometric fragmented compositions, multi-perspective overlays, angular shapes, and subdued earth-tone palettes.

## Design Philosophy

Cubism is one of the most revolutionary art movements of the 20th century, pioneered by Picasso and Braque around 1907. It completely broke with the single-point perspective tradition since the Renaissance, redefining visual expression through geometric fragments and multi-perspective overlays.

Core concepts:
- Geometric fragmentation: Decomposing objects into basic geometric shapes -- triangles, rectangles, irregular polygons
- Multi-perspective overlay: Presenting multiple angles of an object in the same composition, breaking the limitation of a single viewpoint
- Earth-tone palette: Subdued browns, ochres, and steel blues, originating from the restrained color use of the Analytical Cubism period
- Angular tension: Creating visual tension through sharp edges and asymmetric compositions

In digital design, Cubism style is suitable for art galleries, creative agencies, cultural events, and high-end brands. It conveys intellectualism, avant-garde thinking, and a spirit of challenging tradition.

When designing, focus on the layering and interweaving of geometric elements, suggesting depth through planes at different angles rather than using traditional perspective or shadows. Colors are restrained but compositions are bold -- this is the core paradox and charm of Cubism.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#5c4033]
Radius: rounded-sm
```

### Shadow
```
sm: shadow-[3px_3px_0px_#5c4033]
md: shadow-[6px_6px_0px_#5c4033]
lg: shadow-[8px_8px_0px_#5c4033]
hover: hover:shadow-[3px_3px_0px_#8b7355]
focus: focus:shadow-[3px_3px_0px_#9b3d25]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:translate-x-[2px] hover:translate-y-[2px]
Hover opacity: (none)
Transition: transition-all duration-150
Active: active:translate-x-[4px] active:translate-y-[4px] active:shadow-none
```

### Typefaces
```
Heading: font-bold uppercase tracking-widest
Body: font-sans text-[#5c4033]/80
Mono: font-mono text-sm
```

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

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

### Color roles
```
Background primary: bg-[#e8dcc8]
Background secondary: bg-[#ddd0b8]
Background accent: bg-[#5c4033], bg-[#3d5c6e], bg-[#9b3d25]
Text primary: text-[#5c4033]
Text secondary: text-[#8b7355]
Text muted: text-[#5c4033]/50
Button primary: bg-[#5c4033] text-[#e8dcc8] border-2 border-[#8b7355]
Button secondary: bg-[#e8dcc8] text-[#5c4033] border-2 border-[#5c4033]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `rounded-xl`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `bg-gradient-to-r`
- `bg-gradient-to-br`
- `text-[#ff00ff]`
- `text-[#00ffff]`
- `blur-sm`
- `blur-md`
- `blur-lg`
- `backdrop-blur`

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

### Why they are banned
- `rounded-2xl`: Cubism uses sharp angles and minimal rounding (rounded-sm only)
- `rounded-full`: Cubism rejects organic curves; use angular shapes
- `shadow-md`: Cubism uses hard-edge shadows (shadow-[Npx_Npx_0px_color]), not soft shadows
- `bg-gradient-to-r`: Cubism uses flat, opaque color planes without gradients
- `blur-sm`: Cubism uses crisp, hard edges; blur effects are forbidden

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

---

## [REQUIRED]

### Every button must include
```
rounded-sm
font-bold uppercase tracking-widest
border-2
shadow-[4px_4px_0px_#8b7355]
transition-all duration-150
```

### Every card must include
```
bg-[#e8dcc8]
border-2 border-[#5c4033]
rounded-sm
shadow-[6px_6px_0px_#5c4033]
```

### Every input must include
```
bg-[#e8dcc8]
border-2 border-[#5c4033]/40
rounded-sm
text-[#5c4033]
focus:border-[#9b3d25]
focus:outline-none
```

---

## [COMPARE] Cubism 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-sm font-bold uppercase tracking-widest border-2 shadow-[4px_4px_0px_#8b7355] transition-all duration-150 bg-[#5c4033] text-[#e8dcc8] border-2 border-[#8b7355]">
  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-[#e8dcc8] border-2 border-[#5c4033] rounded-sm shadow-[6px_6px_0px_#5c4033] p-5 md:p-6">
  <h3 class="font-bold uppercase tracking-widest 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="bg-[#e8dcc8] border-2 border-[#5c4033]/40 rounded-sm text-[#5c4033] focus:border-[#9b3d25] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Cubism page skeletons

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

### Navigation
```html
<nav class="bg-[#e8dcc8] text-[#5c4033] border-2 border-[#5c4033] px-6 md:px-12 lg:px-16">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
    <a href="/" class="font-bold uppercase tracking-widest text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-6 font-sans text-[#5c4033]/80 text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#5c4033] text-[#5c4033] py-12 md:py-20 lg:py-28 px-6 md:px-12 lg:px-16">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-bold uppercase tracking-widest text-5xl md:text-7xl lg:text-8xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-[#5c4033]/80 text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-sm font-bold uppercase tracking-widest border-2 shadow-[4px_4px_0px_#8b7355] transition-all duration-150 bg-[#5c4033] text-[#e8dcc8] border-2 border-[#8b7355]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#e8dcc8] text-[#5c4033] py-12 md:py-20 lg:py-28 px-6 md:px-12 lg:px-16">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-bold uppercase tracking-widest text-2xl md:text-3xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
      <!-- Card template - repeat for each card -->
      <div class="bg-[#e8dcc8] border-2 border-[#5c4033] rounded-sm shadow-[6px_6px_0px_#5c4033] p-5 md:p-6">
        <h3 class="font-bold uppercase tracking-widest text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-sans text-[#5c4033]/80 text-sm md:text-base text-[#5c4033]/50">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-[#e8dcc8] border-2 border-[#5c4033]/40 rounded-sm text-[#5c4033] focus:border-[#9b3d25] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#ddd0b8] text-[#8b7355] py-12 md:py-20 lg:py-28 px-6 md:px-12 lg:px-16">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10">
      <div>
        <span class="font-bold uppercase tracking-widest text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-sans text-[#5c4033]/80 text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-bold uppercase tracking-widest text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-[#5c4033]/80 text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Cubism post-generation self check

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

### Token check
- [ ] Button includes: `rounded-sm font-bold uppercase tracking-widest border-2 shadow-[4px_4px_0px_#8b7355] transition-all duration-150`
- [ ] Card includes: `bg-[#e8dcc8] border-2 border-[#5c4033] rounded-sm shadow-[6px_6px_0px_#5c4033]`
- [ ] Input includes: `bg-[#e8dcc8] border-2 border-[#5c4033]/40 rounded-sm text-[#5c4033] focus:border-[#9b3d25] focus:outline-none`

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

### Style rule check
- [ ] Use angular geometric shapes with skew and rotate transforms
- [ ] Use earth-tone palette #5c4033 and #e8dcc8 as primary colors
- [ ] Use thick line borders border-2 paired with dark border colors
- [ ] Use small rounded corners rounded or rounded-sm to maintain angularity
- [ ] Cards and containers use asymmetric layouts and tilted angles

### Style drift check
- [ ] Does not violate: Do not use large rounded corners rounded-2xl, rounded-full
- [ ] Does not violate: Do not use soft gradients or blur effects
- [ ] Does not violate: Do not use neon or fluorescent colors
- [ ] Does not violate: Do not use symmetrical centered traditional layouts
- [ ] Does not violate: Do not use circular or organic curved shapes

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

## Absolute Bans (Match and Refuse)

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

- use large rounded corners rounded-2xl, rounded-full
- use soft gradients or blur effects
- use neon or fluorescent colors
- use symmetrical centered traditional layouts
- use circular or organic curved shapes
- use thin hairline borders border
- use overly soft shadows
- use spring bounce, floating loops, or large-scale animations (e.g., hover:scale-110)

## 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 large rounded corners rounded-2xl, rounded-full
- [ ] do not use soft gradients or blur effects
- [ ] do not use neon or fluorescent colors
- [ ] do not use symmetrical centered traditional layouts
- [ ] do not use circular or organic curved shapes