flows.md · documentação

Temas#

Um tema é escolhido, nunca escrito em CSS: cores, fontes, cantos e botões, cada um um valor de uma lista. O flows.md confere o contraste no claro e no escuro e recusa a cor que não dá para ler, dizendo qual tom funciona.

Para não começar do zero, escolha um tema abaixo. Ele entra na sua página como valores na cerca theme, e a partir daí a página é sua: mude o destaque, a fonte ou o que quiser. Mudar um tema aqui não muda a página de ninguém.

No editor: abra Layout e escolha em Theme…. O menu, os links de título e o logo da página ficam como estavam.
Por um agente: peça o visual; o MCP aplica o tema e ajusta os valores.
À mão: copie a cerca de um tema para o topo da página.

Um tema na página de cima vale para as páginas de dentro. Veja na vitrine sites inteiros com um tema só.

calmo

Calmo

Lavanda clara, títulos grossos e botões pílula. Para lançar um app ou produto.

The theme fence

```theme
background: #fbfaff
foreground: #16142b
muted: #55536e
accent: #3b30e6
surface: #efedff
border: #dcd9f5
font_body: dm-sans
font_heading: bricolage-grotesque
heading_weight: 800
heading_tracking: -0.04
dark: auto
radius: 18
button_style: filled
button_shape: pill
```

noite

Noite

Preto, texto claro e um lilás de destaque. Para ferramentas de desenvolvedor e SaaS.

The theme fence

```theme
background: #0a0a0b
foreground: #ededee
muted: #a1a1a8
accent: #9aa0ff
surface: #141417
border: #26262b
font_body: geist
font_heading: geist
heading_weight: 700
heading_tracking: -0.045
dark: dark
radius: 14
button_style: filled
button_shape: rounded
```

serifa

Serifa

Títulos serifados, verde discreto, claro e escuro. Para portfólio e escrita.

The theme fence

```theme
background: #f6f7f5
foreground: #17201c
muted: #4d5a54
accent: #1f6f5c
surface: #eaeee9
border: #d5dcd6
dark_background: #0f1412
dark_foreground: #e3e9e5
dark_muted: #9aa8a1
dark_accent: #6fd3b5
dark_surface: #18201d
dark_border: #2a3531
font_body: manrope
font_heading: instrument-serif
heading_weight: 400
heading_tracking: -0.02
heading_scale: 1.15
dark: auto
radius: 12
button_style: outline
button_shape: pill
```

grafico

Gráfico

Tipografia grande, cantos retos e um vermelho. Para estúdio, agência e marca.

The theme fence

```theme
background: #f3f2ee
foreground: #111111
muted: #4a4a47
accent: #e03e2d
surface: #e6e4de
border: #d2cfc7
dark_background: #111111
dark_foreground: #f0efeb
dark_muted: #a9a8a3
dark_accent: #ff6a55
dark_surface: #1c1c1b
dark_border: #33332f
font_body: work-sans
font_heading: space-grotesk
heading_weight: 700
heading_tracking: -0.05
heading_scale: 1.35
dark: auto
radius: 0
button_style: filled
button_shape: square
```

quente

Quente

Creme, rosa forte e cantos redondos. Para criadores, receitas e link na bio.

The theme fence

```theme
background: #fff8f3
foreground: #221a16
muted: #5e524b
accent: #c2255c
surface: #ffffff
border: #f0e2d8
dark_background: #17120f
dark_foreground: #f4ebe5
dark_muted: #b3a59c
dark_accent: #ff7aa8
dark_surface: #221b17
dark_border: #3a2f29
font_body: plus-jakarta-sans
font_heading: plus-jakarta-sans
heading_weight: 800
heading_tracking: -0.03
dark: auto
radius: 24
button_style: soft
button_shape: pill
```

palco

Palco

Roxo escuro, laranja e títulos em caixa alta. Para eventos e lançamentos.

The theme fence

```theme
background: #120a24
foreground: #f3eefc
muted: #b9add3
accent: #ff8a4c
surface: #1d1336
border: #34285a
font_body: outfit
font_heading: sora
heading_weight: 800
heading_tracking: -0.04
heading_transform: uppercase
dark: dark
radius: 20
button_style: filled
button_shape: pill
```

papel

Papel

Branco, texto serifado de leitura e azul de link. Para blog, newsletter e documentação.

The theme fence

```theme
background: #ffffff
foreground: #1f2328
muted: #57606a
accent: #0b57d0
surface: #f6f8fa
border: #d8dee4
dark_background: #0d1117
dark_foreground: #e6edf3
dark_muted: #9da7b1
dark_accent: #79b8ff
dark_surface: #161b22
dark_border: #30363d
font_body: newsreader
font_heading: inter
heading_weight: 700
font_size: 19
measure: 68
dark: auto
radius: 8
button_style: filled
button_shape: rounded
```

terminal

Terminal

Fundo grafite, verde de terminal e tudo em mono. Para notas técnicas e projetos pessoais.

The theme fence

```theme
background: #0e1111
foreground: #d6e2dc
muted: #8fa39a
accent: #4ade80
surface: #161b1a
border: #26302d
font_body: jetbrains-mono
font_heading: jetbrains-mono
heading_weight: 700
heading_tracking: -0.02
font_size: 15
dark: dark
radius: 6
button_style: outline
button_shape: square
```

Componentes · Padrões · Referência