Cubism

---
version: "alpha"
name: "Cubism"
description: "Sistema visual Cubism, traduzido do catálogo Claude Artisan para uso em produtos digitais. Fragmented, overlapping geometric planes viewed from multiple simultaneous perspectives; Muted earthy ground (ochre, umber, black) punctuated by bolder collage color (sienna, blue)"
colors:
  primary: "#b5451f"
  background: "#e8dcc3"
  surface: "#f2e9d8"
  text: "#1c1610"
  accent: "#2b4c6f"
  on-primary: "#FFFFFF"
  on-surface: "#000000"
  on-accent: "#FFFFFF"
typography:
  h1:
    fontFamily: "Georgia, Times New Roman, serif"
    fontSize: "4rem"
    fontWeight: "700"
    lineHeight: "1.05"
  body-md:
    fontFamily: "Arial, Helvetica Neue, sans-serif"
    fontSize: "1rem"
    fontWeight: "400"
    lineHeight: "1.6"
  label-caps:
    fontFamily: "Arial, Helvetica Neue, sans-serif"
    fontSize: "0.75rem"
    fontWeight: "600"
    letterSpacing: "0.06em"
rounded:
  sm: "0px"
  md: "2px"
  lg: "4px"
spacing:
  sm: "8px"
  md: "16px"
  lg: "32px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "16px"
  button-secondary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    rounded: "{rounded.md}"
    padding: "16px"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: "24px"
  page:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text}"
    padding: "16px"
---
## Overview

Sistema visual Cubism, traduzido do catálogo Claude Artisan para uso em produtos digitais. Fragmented, overlapping geometric planes viewed from multiple simultaneous perspectives; Muted earthy ground (ochre, umber, black) punctuated by bolder collage color (sienna, blue)

- **Categoria:** Movimentos históricos
- **Era:** 1907–1920s
- **Origem:** Paris, Pablo Picasso and Georges Braque, developing from analytic cubism's monochrome fracturing into synthetic cubism's collaged, multi-colored planes.
- **Exemplo:** Picasso's Three Musicians and Still Life with Chair Caning; Braque's papier collé compositions.
- **Base estrutural:** shell de aplicação com navegação e cartões

**Traços definidores:**
- Fragmented, overlapping geometric planes viewed from multiple simultaneous perspectives
- Muted earthy ground (ochre, umber, black) punctuated by bolder collage color (sienna, blue)
- Thin black contour lines separating each plane, planes overlapping at odd angles

## Colors

- **bg** — #e8dcc3
- **surface** — #f2e9d8
- **surface-2** — #d9c9a3
- **text** — #1c1610
- **text-muted** — #5c4f3a
- **primary** — #b5451f
- **accent** — #2b4c6f
- **ochre** — #c68a2e
- **ink** — #16130f

## Typography

- Display: Georgia, Times New Roman, serif
- Corpo: Arial, Helvetica Neue, sans-serif
- Mono: ui-monospace, monospace

## Layout

- shell de aplicação com navegação e cartões
- Use uma grade responsiva e preserve a hierarquia de conteúdo.
- Colapse colunas abaixo de 768px sem overflow horizontal.

## Elevation & Depth

- Fragmented, overlapping geometric planes viewed from multiple simultaneous perspectives; Muted earthy ground (ochre, umber, black) punctuated by bolder collage color (sienna, blue); Thin black contour lines separating each plane, planes overlapping at odd angles; sombras e elevação; transparência e blur

## Shapes

- Raios: 0px, 2px, 4px.

## Components

- Botões mantêm foco visível e estados hover/pressed previsíveis.
- Cartões usam a superfície e a escala de raios definidas nos tokens.
- Formulários exibem labels persistentes, erro textual e foco por teclado.

## Do's and Don'ts

- Faça: respeite os tokens e a composição estrutural indicada.
- Faça: mantenha contraste WCAG AA e `prefers-reduced-motion`.
- Evite: usar o estilo como decoração sem hierarquia funcional.

Atue como um Engenheiro Frontend Sênior e UI Designer Especialista.
Sua tarefa é codificar uma Landing Page completa na primeira tentativa.
- Tema da Landing Page: <INSIRA O TEMA>
- Seções a adicionar: <INSIRA AS SEÇÕES>

Gere o código final imediatamente seguindo estas definições:

## Estilo

- **Nome:** Cubism
- **Tipo:** claude-artisan/historical
- **Keywords:** Cubism, synthetic cubism, papier collé, faceted design, Fragmented, overlapping geometric planes viewed from multiple simultaneous perspectives, Muted earthy ground (ochre, umber, black) punctuated by bolder collage color (sienna, blue), Thin black contour lines separating each plane, planes overlapping at odd angles, historical
- **Era:** 1907–1920s
- **Light/Dark:** Fonte não declara modos; validar em light e dark antes de publicar

## Paleta de Cores

- **Primárias:** bg: #e8dcc3, surface: #f2e9d8, surface-2: #d9c9a3, text: #1c1610
- **Secundárias:** text-muted: #5c4f3a, primary: #b5451f, accent: #2b4c6f, ochre: #c68a2e, ink: #16130f

## Efeitos Visuais

Fragmented, overlapping geometric planes viewed from multiple simultaneous perspectives, Muted earthy ground (ochre, umber, black) punctuated by bolder collage color (sienna, blue), Thin black contour lines separating each plane, planes overlapping at odd angles, shadow, blur

## Direção Visual para IA

Cubism, Fragmented, overlapping geometric planes viewed from multiple simultaneous perspectives, Muted earthy ground (ochre, umber, black) punctuated by bolder collage color (sienna, blue), Thin black contour lines separating each plane, planes overlapping at odd angles, Picasso's Three Musicians and Still Life with Chair Caning; Braque's papier collé compositions.

## CSS Technical

```css
/* Cubism — design tokens */
/* 1907–1920s | Fragmented, overlapping multi-perspective planes, synthetic-cubism collage palette */
:root {
  /* color */
  --color-bg: #e8dcc3;
  --color-surface: #f2e9d8;
  --color-surface-2: #d9c9a3;
  --color-text: #1c1610;
  --color-text-muted: #5c4f3a;
  --color-primary: #b5451f;
  --color-accent: #2b4c6f;
  --color-ochre: #c68a2e;
  --color-ink: #16130f;
  /* radius */
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-pill: 999px;
  /* shadow */
  --shadow-facet: 3px 3px 0 var(--color-ink);
  --shadow-collage: 0 6px 18px rgba(22,19,15,0.28);
  /* blur */
  --blur-none: 0px;
  /* font */
  --font-sans: 'Arial', 'Helvetica Neue', sans-serif;
  --font-display: 'Georgia', 'Times New Roman', serif;
  --font-mono: ui-monospace, monospace;
  /* text */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  /* ease */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* extra: faceted plane wash + collage paper texture */
  --facet-gradient: linear-gradient(115deg, rgba(181,69,31,0.14) 0 32%, rgba(43,76,111,0.12) 32% 61%, rgba(198,138,46,0.16) 61% 100%);
  --collage-paper: repeating-linear-gradient(4deg, rgba(22,19,15,0.04) 0 2px, transparent 2px 6px);
  --bg-image: var(--collage-paper), var(--color-bg);
}

/* ============================================================
   Base component classes — Cubism
   Signature move: overlapping faceted planes with hard black
   contours, collaged rather than rendered, cut paper not soft shapes.
   ============================================================ */
body { margin: 0; color: var(--color-text); font-family: var(--font-sans); background: var(--bg-image); min-height: 100vh; }
.nav {
  display: flex; gap: var(--space-4); align-items: center;
  padding: var(--space-3) var(--space-6); background: var(--color-ink);
  color: var(--color-surface);
  border-bottom: 4px solid var(--color-ochre);
}
.nav a { color: var(--color-surface); }
.btn {
  font: 700 var(--text-base)/1 var(--font-sans); color: var(--color-text);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
  background: var(--color-surface-2); border: 2px solid var(--color-ink);
  box-shadow: var(--shadow-facet);
  cursor: pointer; transition: transform .15s var(--ease-standard), box-shadow .15s var(--ease-standard);
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--color-ink); }
.btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn--primary {
  background: var(--color-primary); color: var(--color-surface);
  border: 2px solid var(--color-ink);
}
.card {
  background: var(--color-surface); background-image: var(--facet-gradient);
  border-radius: var(--radius-md); padding: var(--space-6);
  border: 2px solid var(--color-ink); box-shadow: var(--shadow-collage);
}
.input {
  width: 100%; box-sizing: border-box; color: var(--color-text); font: var(--text-base) var(--font-sans);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-surface); border: 2px solid var(--color-ink);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-facet); }
.badge {
  display: inline-flex; align-items: center; gap: .4em; font-size: var(--text-xs); font-weight: 700;
  padding: .3em .8em; border-radius: var(--radius-sm);
  background: var(--color-ochre); border: 2px solid var(--color-ink); color: var(--color-ink);
  transform: skewX(-6deg);
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}


/* Especificação de referência: references/00-flagship-implementation-specs/cubism.md */
```

## Design System Variables

```css
--bg: #e8dcc3, --fg: #1c1610, --accent: #b5451f, --surface: #f2e9d8, --radius: 2px, --spacing: 16px, --font-display: Georgia, Times New Roman, serif, --font-body: Arial, Helvetica Neue, sans-serif
```

## Checklist de Implementação

- Contraste WCAG AA; foco visível; navegação por teclado; estados hover/pressed; responsividade; prefers-reduced-motion; Tailwind v4 via @theme.

## Regras de Execução

1. Siga fielmente o estilo visual determinado.
2. Use ícones SVG inline de alta qualidade (estilo Heroicons ou Lucide) — PROIBIDO usar emojis como ícones.
3. Adicione `cursor-pointer` e estados de `hover` suaves (transition-all) em todos os elementos interativos.
4. Estrutura Obrigatória da Página:
   - Navbar (Logo + Links + CTA)
   - Hero Section (Headline impactante + Subtitle + 2 botões + Elemento visual 3D/Abstrato via CSS)
   - Features (3 cards com ícones)
   - Testimonials (3 cards)
   - Pricing (3 tiers, destaque no central)
   - CTA Final
   - Footer completo com redes sociais, política de privacidade, termos de uso, contato e links SEO.
5. Todo o conteúdo textual deve ser em Português Brasileiro (PT-BR).
6. O visual deve ser CLARAMENTE distinto — não crie um design "padrão Bootstrap". Force o uso das variáveis de design system fornecidas.
7. Use tags `<style>` no head para classes personalizadas (especialmente para os efeitos complexos de backdrop-filter e animações) que o Tailwind via CDN não cobrir.
8. Responsividade Total: O layout deve se adaptar perfeitamente a Mobile, Tablet e Desktop (Stack vertical no mobile).
9. Inclua meta tags básicas de SEO, Viewport e Open Graph no `<head>`.
10. Footer deve conter: Copyright 2026, Links de navegação secundária e Ícones de redes sociais.
11. Assuma as decisões criativas necessárias para entregar o resultado completo e funcional agora.