Seção 01 · Espectro

O espectro de experiências

Nem toda experiência precisa ser rápida. Nem toda precisa ser demorada. Existe um espectro - e o jeito que eu projeto o site muda dependendo de onde meu site tá nele.

Seção 01 · Analogias

Experiências são contextos

Seção 02 · Visão geral

Quais são os blocos de conteúdo

Todo site de experiência média precisa por volta de 6 blocos pra funcionar bem.

Seção 02 · Identidade, CTA, Conteúdo

Blocos 1, 2 e 3

Seção 02 · Prova Social, Navegação, Rodapé

Blocos 4, 5 e 6

Seção 03 · Definição

O que é consistência

Consistência é quando todas as páginas do site parecem ser do mesmo lugar. Mesmas cores, mesmas fontes, mesmo estilo.

Seção 03 · Tokens intro

CSS com variáveis

A consistência vem de definir uma vez só as regras visuais e aplicar em todas as páginas. CSS com variáveis faz isso.

:root {
  --cor-principal: #1a365d;
  --cor-fundo: #ffffff;
  --cor-texto: #333333;
  --fonte-titulo: 'Montserrat', sans-serif;
  --fonte-corpo: 'Open Sans', sans-serif;
}

Seção 04 · Definição

O que é o design.md

O design.md é um documento que guarda as decisões de design do site. Não é código - é um arquivo de texto que explica por que o site é de um jeito.

Tokens CSS são o prato servido: o que o navegador mostra. O design.md é a receita escrita: o documento que explica como e por quê.

Seção 04 · Conteúdo

O que vai dentro do design.md

Seção 04 · Referências

Materiais de referência

O design.md pode incluir materiais de referência - coisas que eu encontrei e quero usar como inspiração.

Seção 04 · Exemplo

Exemplo de design.md

# Design - Catálogo Artesanal

## Personalidade
Caseiro, acolhedor, honesto.

## Cores
- Primária: terracota #C67A4B
- Secundária: bege #F5F0EB
- Fundo: branco suave #FAFAF8
- Texto: marrom escuro #3D2B1F
- Destaque: verde escuro #2d6a4f

## Tipografia
- Títulos: Montserrat (bold)
- Corpo: Open Sans

## Espaçamento
Escala de 8: 8, 16, 24, 32, 48, 64

## Tom
Fala como um artesão conversando com o cliente na feira.

Seção 05 · Cores

As 5 cores com função

Todo site precisa de 5 cores com função definida. Não é escolher "gosto de azul" - é definir o papel de cada cor.

Seção 05 · Espaços

A escala de espaçamento

Espaçamento segue uma escala fixa: 8, 16, 24, 32, 48, 64. Cada número é múltiplo de 8.

Seção 05 · :root

Tokens no CSS

:root {
  /* === CORES === */
  --cor-primaria: #C67A4B;
  --cor-secundaria: #F5F0EB;
  --cor-fundo: #FAFAF8;
  --cor-texto: #3D2B1F;
  --cor-destaque: #2d6a4f;

  /* === TIPOGRAFIA === */
  --fonte-titulo: 'Montserrat', sans-serif;
  --fonte-corpo: 'Open Sans', sans-serif;

  /* === ESPAÇAMENTO === */
  --espaco-xs: 8px;
  --espaco-sm: 16px;
  --espaco-md: 24px;
  --espaco-lg: 32px;
  --espaco-xl: 48px;
  --espaco-2xl: 64px;
}

Seção 06 · Design Atômico

Como tudo se encaixa

Design Atômico organiza um design system em camadas - do mais simples ao mais complexo. Cada camada depende da anterior.

Seção 07 · Prompts

3 prompts pra criar o design system