Scandinavian Design

---
version: "alpha"
name: "Scandinavian Design"
description: "Sistema visual escandinavo com fundação preto e branco neutra, tipografia sans-serif contida e espaçamento generoso."
colors:
  primary: "#000000"
  secondary: "#FFFFFF"
typography:
  h1:
    fontFamily: Inter Variable
    fontSize: 2.5rem
    fontWeight: 600
  body-md:
    fontFamily: Inter Variable
    fontSize: 1.0625rem
    fontWeight: 400
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    color: "#FFFFFF"
    borderRadius: "8px"
    padding: "12px 24px"
---

## Overview

Scandinavian Design — sistema visual nórdico de contenção funcional: fundação preto e branco neutra construída com alpha-black sobre branco, uma única família sans-serif, hierarquia criada por opacidade e espaço em vez de peso ou cor, capítulos generosos e decoração mínima. A imagens de produto carregam a expressão; a interface ao redor permanece quieta.

- Density: 4/10 — Airy
- Variance: 3/10 — Structured
- Motion: 2/10 — Minimal

- **Style:** Calm, Monochrome, Spacious, Restrained
- **Keywords:** Scandinavian, Nordic, monochrome, alpha-black ladder, restrained sans-serif, generous whitespace, quiet UI
- **Era:** 2020s Modern
- **Light/Dark:** ✓ Light / ✓ Dark (inversão disciplinada)

## Colors

Escala de tinta neutra — hierarquia por opacidade, nunca por cinza tingido:

- **#FFFFFF** (#FFFFFF) — Canvas e superfície
- **#000000** (#000000) — Tinta primária (texto principal, ícones críticos)
- **rgb(0 0 0 / 64%)** — Tinta secundária (texto de apoio)
- **rgb(0 0 0 / 44–56%)** — Tinta terciária (metadados opcionais; elevar se houver leitura real)
- **rgb(0 0 0 / 10%)** — Bordas e separadores
- **rgb(0 0 0 / 5%)** — Hover; **rgb(0 0 0 / 9%)** — Pressed/selected
- **rgb(0 0 0 / 44%)** — Scrim sobre conteúdo

Regras: definir tinta com cores alfa (nunca `opacity` no contêiner); proibidos bege, creme e cinzas azulados/esverdeados; um único accent de marca é tolerado na ação primária; logo da marca permanece em cor cheia; marcas de terceiros vão para monocromático. Variante escura: canvas `#0A0A0A`, tinta primária branca, secundária `rgb(255 255 255 / 56%)`, terciária `36%` (50% acima de `#1A1A1A`), bordas `rgb(255 255 255 / 10–12%)`.

## Typography

Uma única família sans-serif. Padrão web: **Inter Variable** (se já licenciada, Scto Grotesk A dá caráter nórdico).

- **Display / Hero:** Inter Variable — weight 500–600, line-height 1.05–1.15, tracking levemente negativo. Evitar 700–900.
- **Body:** Inter Variable — 16–18px, weight 400, line-height 1.5–1.6, tracking neutro, medida 55–68 caracteres.
- **Labels / Controls:** weight 500, sentence case — nunca all-caps nem lowercase forçado.
- Máximo 3–4 estilos de texto por tela editorial (6 em telas densas); hierarquia por tamanho e whitespace, não por muitos pesos.

## Layout

- **Grid:** max-width ~1200px, margens 24px mobile / 40–64px desktop.
- **Spacing rhythm:** base 8px (ajustes de 4px). Transições entre capítulos: 96–144px desktop / 64–96px mobile.
- **Capítulos, não cards:** páginas longas como sequência de capítulos espaçosos com uma ideia cada — heading conciso, explicação curta, 3–4 resumos de features, uma visual dominante. Alternar fills `rgb(0 0 0 / 4%)` para ritmo.
- **Divisórias raras:** espaço antes de linha; ~1 regra por viewport; nunca dividir par imagem-legenda ou label-campo; linhas verticais de grid multi-coluna são mantidas.
- **Radii:** 6–12px, consistentes por tipo de componente; pills só como família distinta de tags/filtros.
- **Sem sombras** exceto quando elevação comunica comportamento (sombra neutra quase invisível).
- **Alinhamento à esquerda** por padrão (headings, labels, metadata, footer).

## Effects

- Transições quietas < 300ms; `ease-out` em entradas, `ease-in-out` em movimento on-screen, `ease` em cor/hover.
- Sem animação de entrada a partir de `scale(0)`; usar `scale(0.95–0.98)` + opacidade.
- Respeitar `prefers-reduced-motion`; hover-motion apenas com `(hover: hover) and (pointer: fine)`.
- Proibidos: gradientes decorativos, texturas, glows, sombras grandes, emoji como iconografia.

## Anti-patterns (escalation triggers)

- Cinzas tingidos quentes/frios no lugar de alpha-black neutro
- Serifas display ou sistemas serif/sans misturados
- All-caps ou CSS `text-transform: uppercase`
- Emoji como ícones de interface
- Divisórias separando elemento de sua própria legenda/metadata
- Cards uniformes sem elemento dominante
- Pills em controles retangulares comuns; raios/alturas/paddings inconsistentes entre CTAs equivalentes
- Cor removida de estados semânticos (erro, sucesso, foco, selecionado)

## Use Case

Landing pages editoriais, sites de produto SaaS, portfólios, documentações, dashboards calmos e qualquer superfície onde compreensão e calma valem mais que expressividade cromática.

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:** Scandinavian Design
- **Tipo:** Calm, Monochrome, Spacious, Restrained
- **Keywords:** scandinavian, nordic, monochrome, alpha-black, opacity-ladder, inter, calm, spacious, restrained, quiet-ui, minimal
- **Era:** 2020s Modern
- **Light/Dark:** ✓ Light / ○ Inverted

## Paleta de Cores

- **Primárias:** #FFFFFF (Canvas), #000000 (Ink primário), rgb(0 0 0 / 64%) (Ink secundário)
- **Secundárias:** rgb(0 0 0 / 44%) (Terciário), rgb(0 0 0 / 10%) (Border), rgb(0 0 0 / 5%) (Hover fill)

## Efeitos Visuais

Transições quietas (<300ms, ease-out), sem sombras decorativas, sem gradientes, hover fill rgb(0 0 0 / 5%), pressed rgb(0 0 0 / 9%)

## Direção Visual para IA

Design a calm Scandinavian interface with a neutral black-and-white foundation. Use Inter Variable only (weights 400-600, never 700-900), build hierarchy with an alpha-black opacity ladder over white (primary #000000, secondary rgb(0 0 0 / 64%), borders rgb(0 0 0 / 10%)), an 8px spacing rhythm with generous chapter gaps (96-144px), left-aligned text, sentence case everywhere, radii 6-12px, no gradients, no decorative shadows, no all-caps, one filled primary action per chapter, quiet sub-300ms motion.

## CSS Technical

```css
font-family: 'Inter Variable', sans-serif; background: #FFFFFF; color: #000000; supporting text rgb(0 0 0 / 64%); border: 1px solid rgb(0 0 0 / 10%); border-radius: 6-12px; spacing scale 8px; section padding clamp(4rem, 8vw, 9rem); line-height 1.5-1.6; measure 55-68ch; font-weight 400-600; letter-spacing -0.01em on display sizes; transitions < 300ms ease-out; box-shadow none unless elevation communicates
```

## Design System Variables

```css
--bg: #FFFFFF, --fg: #000000, --accent: #000000, --radius: 8px, --spacing: 2rem, --font-display: 'Inter', --font-body: 'Inter'
```

## Checklist de Implementação

- ☐ Escala alpha-black aplicada ☐ Família sans-serif única ☐ Sem all-caps/lowercase forçado ☐ Ritmo 8px e capítulos generosos ☐ Radii 6-12px consistentes ☐ Sem gradientes/sombras decorativas ☐ Estados semânticos preservados ☐ Contraste AA verificado

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