Foundations · Terminal 400

/01

Surfaces

A section declares its material with data-surface; every semantic role rebinds inside it. Text roles are derived per surface (hue and chroma kept, lightness moved) until they pass on both the surface and its panel tone. Ratios below are computed, not claimed.

data-surface="paper" · light

Paper

#F2F0E9

Texto principal sobre paper. Texto secundário, ainda legível.

Um link de ação →

Continuar → Foco

Painel (surface-alt) · secundário

● Erro: campo obrigatório
● Atenção: verifique os dados
● Ativo
● Informação

surface-alt: #E3E1DA
fg: #151715 · 15.80:1
fg-muted: #62635E · 5.31:1
rule: #C5C4BE
rule-strong: #7F7E7A · 3.56:1
action: #1559A6 · 6.12:1
action-fill: #1559A6
action-fill-fg: #F2F0E9 · 6.12:1
focus: #151715 · 15.80:1
status-error: #BC2827 · 5.31:1
status-warn: #7D5E02 · 5.30:1
status-ok: #24563C · 7.45:1
status-info: #1559A6 · 6.12:1

data-surface="concrete" · light

Concrete

#B8B7B0

Texto principal sobre concrete. Texto secundário, ainda legível.

Um link de ação →

Continuar → Foco

Painel (surface-alt) · secundário

● Erro: campo obrigatório
● Atenção: verifique os dados
● Ativo
● Informação

surface-alt: #ADACA5
fg: #151715 · 8.96:1
fg-muted: #3E403B · 5.22:1
rule: #979791
rule-strong: #585954 · 3.51:1
action: #013E7E · 5.24:1
action-fill: #1559A6
action-fill-fg: #F2F0E9 · 6.12:1
focus: #151715 · 8.96:1
status-error: #84020C · 5.23:1
status-warn: #513C03 · 5.23:1
status-ok: #15482F · 5.22:1
status-info: #013E7E · 5.24:1

data-surface="graphite" · dark

Graphite

#252724

Texto principal sobre graphite. Texto secundário, ainda legível.

Um link de ação →

Continuar → Foco

Painel (surface-alt) · secundário

● Erro: campo obrigatório
● Atenção: verifique os dados
● Ativo
● Informação

surface-alt: #2F312E
fg: #F2F0E9 · 13.21:1
fg-muted: #979A93 · 5.28:1
rule: #454643
rule-strong: #7A7C77 · 3.57:1
action: #5A9CEE · 5.32:1
action-fill: #1559A6
action-fill-fg: #F2F0E9 · 6.12:1
focus: #F2BE32 · 8.74:1
status-error: #FE695E · 5.30:1
status-warn: #F2BE32 · 8.74:1
status-ok: #71A487 · 5.28:1
status-info: #5A9CEE · 5.32:1

data-surface="night" · dark

Night

#151715

Texto principal sobre night. Texto secundário, ainda legível.

Um link de ação →

Continuar → Foco

Painel (surface-alt) · secundário

● Erro: campo obrigatório
● Atenção: verifique os dados
● Ativo
● Informação

surface-alt: #20211F
fg: #F2F0E9 · 15.80:1
fg-muted: #878A83 · 5.14:1
rule: #363835
rule-strong: #6C6D69 · 3.46:1
action: #4A8BDC · 5.16:1
action-fill: #1559A6
action-fill-fg: #F2F0E9 · 6.12:1
focus: #F2BE32 · 10.46:1
status-error: #EB574E · 5.15:1
status-warn: #F2BE32 · 10.46:1
status-ok: #619477 · 5.16:1
status-info: #4A8BDC · 5.16:1

data-surface="botanical" · dark

Botanical

#24563C

Texto principal sobre botanical. Texto secundário, ainda legível.

Um link de ação →

Continuar → Foco

Painel (surface-alt) · secundário

● Erro: campo obrigatório
● Atenção: verifique os dados
● Ativo
● Informação

surface-alt: #315F45
fg: #F2F0E9 · 7.45:1
fg-muted: #CBCEC7 · 5.34:1
rule: #497058
rule-strong: #90B099 · 3.58:1
action: #FAC63D · 5.35:1
action-fill: #F2BE32
action-fill-fg: #151715 · 10.46:1
focus: #F2BE32 · 4.93:1
status-error: #FEBDB5 · 5.33:1
status-warn: #FAC63D · 5.35:1
status-ok: #A4D9B9 · 5.34:1
status-info: #ACD0FE · 5.34:1

data-surface="signal-yellow" · light

Signal yellow

#F2BE32

Texto principal sobre signal yellow. Texto secundário, ainda legível.

Um link de ação →

Continuar → Foco

Painel (surface-alt) · secundário

● Erro: campo obrigatório
● Atenção: verifique os dados
● Ativo
● Informação

surface-alt: #E3B333
fg: #151715 · 10.46:1
fg-muted: #484A44 · 5.21:1
rule: #C59D33
rule-strong: #7B5E05 · 3.54:1
action: #151715 · 10.46:1
action-fill: #151715
action-fill-fg: #F2BE32 · 10.46:1
focus: #151715 · 10.46:1
status-error: #97030F · 5.22:1
status-warn: #5C4602 · 5.23:1
status-ok: #205239 · 5.24:1
status-info: #024890 · 5.23:1

data-surface="signal-blue" · dark

Signal blue

#1559A6

Texto principal sobre signal blue. Texto secundário, ainda legível.

Um link de ação →

Continuar → Foco

Painel (surface-alt) · secundário

● Erro: campo obrigatório
● Atenção: verifique os dados
● Ativo
● Informação

surface-alt: #2662AB
fg: #F2F0E9 · 6.12:1
fg-muted: #DDE0D9 · 5.23:1
rule: #4275B4
rule-strong: #92BCF0 · 3.54:1
action: #F2F0E9 · 6.12:1
action-fill: #F2F0E9
action-fill-fg: #1559A6 · 6.12:1
focus: #F2BE32 · 4.05:1
status-error: #FED6D0 · 5.23:1
status-warn: #FFDB87 · 5.22:1
status-ok: #B6EBCB · 5.22:1
status-info: #CAE1FF · 5.22:1

data-surface="signal-red" · dark

Signal red

#B21B1E

Texto principal sobre signal red. Texto secundário, ainda legível.

Um link de ação →

Continuar → Foco

Painel (surface-alt) · secundário

● Erro: campo obrigatório
● Atenção: verifique os dados
● Ativo
● Informação

surface-alt: #B8302C
fg: #F2F0E9 · 6.00:1
fg-muted: #E0E3DC · 5.28:1
rule: #C24D44
rule-strong: #FFA297 · 3.54:1
action: #F2F0E9 · 6.00:1
action-fill: #F2F0E9
action-fill-fg: #B21B1E · 6.00:1
focus: #F2F0E9 · 6.00:1
status-error: #FED9D4 · 5.24:1
status-warn: #FFDE93 · 5.25:1
status-ok: #B8EECD · 5.26:1
status-info: #CFE4FE · 5.27:1

/02

Palette

The brief's primitives, verbatim. Components never use them directly — they go through surface roles, which carry the contrast guarantees.

paper

#F2F0E9

oklch 95% 0.010 94
concrete

#B8B7B0

oklch 78% 0.010 100
graphite

#252724

oklch 27% 0.006 135
ink

#151715

oklch 20% 0.005 145
gray

#777973

oklch 57% 0.009 122
botanical

#24563C

oklch 41% 0.070 158
moss

#777E60

oklch 58% 0.045 118
signal-yellow

#F2BE32

oklch 83% 0.156 87
transit-blue

#1559A6

oklch 47% 0.140 255
signal-red

#C93632

oklch 56% 0.185 27

/03

Type

Three voices (ADR-0014). Bricolage Grotesque for display: the one face with personality, at 87.5% width with its optical display cut. IBM Plex Sans for text, labels and signage, condensed to 85% on plates. IBM Plex Mono for indices and metadata. Sizes are fluid between 360 and 1440px viewports. Display leading is 1.0 so Portuguese accents and cedillas never collide.

display-xl

60→232px · 1 · 800 · wdth 87.5%

One per page at most: the architectural hero line.

Ações públicas
display-l

44→144px · 1 · 800 · wdth 87.5%

Section-defining headlines.

Estação São João
display-m

34→88px · 1 · 800 · wdth 87.5%

Project titles in editorial compositions.

Vigília — Saída
heading-1

28→44px · 1.05 · 650

Page and article headings.

Concreto, sinalização e verde

Concrete, signage and green
heading-2

22→30px · 1.15 · 600

Subsections.

Como funciona

How it works
heading-3

18→21px · 1.25 · 600

Minor headings, list titles.

Notas de campo

Field notes
body-l

18→21px · 1.55 · 400

Ledes and introductions.

Cada artefato é uma estação: um mecanismo, uma explicação e anotações de campo.

Every artifact is a station: a mechanism, an explanation and field notes.
body-m

16→17px · 1.6 · 400

Running text. Measure 60–72ch.

O corpo de uma aranha procedural é um agente de direção: busca e chegada, com força e velocidade limitadas. Cada perna é uma cadeia de cinemática inversa.

A procedural spider's body is a steering agent: seek plus arrival, with capped force and speed. Each leg is an inverse-kinematics chain.
body-s

14→15px · 1.5 · 400

Captions, secondary descriptions.

Foto: Arte Fora do Museu, CC BY 2.0.

Photo: Arte Fora do Museu, CC BY 2.0.
sign

20→30px · 1.1 · 600 · wdth 85%

Wayfinding plates: destinations, directions, next station.

← Saída · Próxima estação: Quatro Cantos

← Exit · Next station: Quatro Cantos
label

12→13px · 1.3 · 600

Section labels, navigation, button text.

Projetos · Sobre · Contato

Projects · About · Contact
mono-m

13→14px · 1.45 · 400

Technical annotations, metadata values.

interaction study / 2026 / vue + typescript
mono-s

11→12px · 1.35 · 500

Indices (/01), coordinates, dates, tags.

/01 · 23°33′S 46°38′W · 2026-10-10

/04

Space

A 4px base with deliberate jumps at the top end: 128, 192 and 256 are for the voids between architectural rooms, not for padding.

space-2
space-4
space-8
space-12
space-16
space-24
space-32
space-48
space-64
space-96
space-128
space-192
space-256

/05

Grid

4 columns below 600px, 8 up to 1024px, 12 beyond. Margin 16→96px, gutter 16→ 32px. Named lines let a block bleed to the viewport edge while text stays on the content columns. Press Shift+G or add ?grid to overlay it on any page.

.ds-bleed — bleed-start / bleed-end

010203040506070809101112

span 4 · offset 0 span 7 · offset 5

/06

Structure & motion

Boundaries come from rules and tone, not boxes. No shadows, no elevation, no rounded cards. One easing curve, no overshoot; every duration drops to zero under reduced motion.

Rules

rule-hairline · 1px

rule-structural · 2px

rule-route · 6px

Radius

none · input 2px · round (markers)

Focus

2px ring · 3px offset · ink or yellow per surface

Motion

instant 120ms
quick 240ms
base 480ms
slow 800ms

Hover: arrow advances

cubic-bezier(0.2, 0, 0, 1)