Referência viva
Sistema de design
Direcção «Observatório»: um painel de instrumentos sobre o dinheiro. Archivo expandido para manchetes, Space Grotesk para a interface, Source Serif para a voz editorial, Space Mono para os números. Vermilhão-sinal é o que sai, verde é o que fica — e o torrado marca sempre a fonte. Escuro por omissão: o instrumento é a cara do produto; o tema claro é o documento.
Marca — «o cêntimo»
O C do wordmark é o sinal de cêntimo — ¢ — cortado por uma haste verde. A marca promete o que o site faz: seguir cada euro ao cêntimo, do salário à bomba. Verde é sempre o que é teu.
Cor — semântica primeiro, dados depois
Três cores com significado fixo — vermelhão é o que sai, verde é o que fica contigo, torrado marca a fonte. Os dados vivem fora delas: uma rampa azul-aço para famílias ordinais e uma rampa neutra de «data ink» para contexto. Os swatches são ao vivo — mudam com o tema (botão no topo).
floor
#f4f3ec / #0d0b08 — nível 0, fundo
panel
#fbfaf6 / #1a1611 — nível 1, conteúdo
raised
#fdfcf9 / #251f18 — nível 2, resultado
overlay
#ffffff / #342e20 — nível 3, sobreposição
ink
#1b1811 / #f2ecdd — tinta
ink2
#57534a / #aba28c — secundário
muted
#6f6a58 / #8f8878 — meta (AA nos dois temas)
line
#e0dcc9 / #2c271e — hairline
line2
#b7b19d / #57503c — regra, borda de campo
accent
#b93a17 / #ff6133 — vermilhão-sinal, o que sai
accent-ink
#8f2a10 / #a03012 — corte mais fundo
keep
#1f6b4d / #63d6a4 — o que é teu
mark
#a07c17 / #f0c468 — torrado, fonte e foco
warn
#a3720a / #f0c468 — aviso
up
#b03016 / #ff6133 — sobe (mau em preços)
down
#1f6b4d / #63d6a4 — desce (bom em preços)
papel-sai
#f0d5c6 — papel avermelhado, o troço arrancado (fixo nos dois temas)
papel-sai-tinta
#7a2a10 — a tinta desse papel (6,9:1)
papel-fica
#dcead4 — papel esverdeado, o que é teu (fixo)
papel-fica-tinta
#1d4f31 — a tinta desse papel (7,6:1)
- Verde só para «o teu dinheiro» — nunca decoração nem fundo genérico.
- Torrado só como marcador funcional: fonte, citação, anel de foco.
- Vermilhão-sinal para tudo o que sai do bolso — legível nos dois temas.
- Escuro por omissão — o instrumento é a cara; o claro é o documento.
Rampa sequencial — duas opções, escolha do dono
As Euribor reais (1M→12M, últimos 24 meses, mesma escala) desenhadas pelas duas rampas candidatas. A decisão fica registada em NOTAS-NOITE — os rácios AA e a leitura em daltonismo estão lá medidos.
A — azul-aço (actual)
Único matiz fora da identidade quente. No claro, os degraus 3–4 caem abaixo de 3:1 no painel.
B — âmbar escurecido (proposta)
Da família do torrado — a mesma tinta da evidência. Os 4 degraus passam 3:1 nos dois temas; colide em matiz com o mark (fonte/foco).
Euribor por prazo, escalões de IRS, anos do IRS Jovem — famílias ordenadas. Os degraus separam-se por luminância: a ordem lê-se em deuteranopia e protanopia porque não depende do matiz.
Data ink — contexto que recua
Séries de contexto (média histórica, referência) recuam pela rampa neutra — ink → ink2 → muted → line2. Sem matiz, sem leitura falsa.
Proibido — o sistema também é o que recusa
Cores semânticas como cor de série — «sai»/«fica» não são legendas de dados.
Paleta categórica em série ordinal — três matizes sem relação para uma família ordenada (o que as Euribor eram antes).
Gradiente decorativo — cor que não codifica dados.
Regra do verde verificada a cada revisão: color-keep só aparece onde o dinheiro fica contigo — «Fica contigo» na barra do euro, poupança líquida, dedução ao IRS. O preço de uma casa não é verde: sai do teu bolso para o vendedor.
Superfícies — escala de elevação
Quatro níveis, um instrumento. No claro a elevação é sombra subtil e a superfície recua; no escuro é luz — luminância crescente na rampa e um fio de 1px na aresta superior. Troca o tema para ver as duas mecânicas.
0 — floor
fundo da página · a grelha vive só aqui
1 — panel
bloco de conteúdo · sem textura
2 — raised
resultado de simulador · o que o instrumento devolve
- Textura só no nível 0: papel milimetrado no claro; no escuro a mesma malha em fósforo esbatido — ecrã de registo, não papel.
- panel, raised e overlay nunca têm textura — a leitura manda.
- O fio de luz de 1px na aresta superior só existe no escuro; no claro é a sombra subtil que eleva.
- overlay não leva texto muted — só ink/ink2. Meta e fontes vivem nos níveis baixos.
- O grão é global — o vidro do instrumento; cobre todos os níveis por igual.
- .blueprint (pontos) não é um nível: é a textura de uma zona de medição, atrás de diagramas.
Ritmo — três degraus de respiro
O ar entre blocos é medido, não sentido. Três degraus nomeados — figura, secção, capítulo — aplicados como margin-block para colapsarem como margens de texto. O pé de página fecha sempre com o degrau de capítulo. À escala: 2 · 4 · 6 rem.
entre figuras e instrumentos duma secção — .stack-fig
entre secções duma página — .stack-sec
capítulos da home e o pé de página — .stack-cap
Larguras — três molduras, sem excepções
Texturas, três papéis: a malha milimetrada vive só no nível 0; o grão fino é o vidro do instrumento — global, igual nos dois temas; .blueprint é textura duma zona de medição, atrás de diagramas. Nenhuma fica em cima de texto corrido.
Tipografia
Display — Archivo expandido (wdth 125)
Para onde vai o teu dinheiro.
Interface — Space Grotesk · .body-copy
O corpo da interface e das páginas. Neutro, técnico, sem ser genérico — o par natural do Space Mono dos números.
Rótulos — .kicker, mono maiúsculo
.kicker · 0.6875rem / 0.14em
.kicker-sm · 0.65rem / 0.16em
.kicker-xs · 0.6rem / 0.14em
A cor por defeito é muted; contextos com outra cor sobrepõem com text-* (acento, tinta, aviso). O talão tem escala própria (talao-*) — é um documento, não chrome do site.
Editorial — Source Serif 4 (só ledes)
Entre o que a empresa paga e o que tu recebes há três cortes: Segurança Social, IRS e a TSU que nunca vês no recibo.
Dados — Space Mono, tabular
1 234 567,89 € · ▲ 12,5 %
Números — três registos
A escala de números tem três registos com papéis diferentes. O herói é a resposta do instrumento — um por painel de resultado. Unidade e sinal são membros da mesma linha de base, compostos em tinta secundária — nunca notas de rodapé.
Herói — .num-hero · Archivo expandido, dígitos tabulares
1 234,56€/mês
1 234,56€
412 345,67€
O sinal herda a cor semântica (keep/up) e sobe ao óptico; a unidade fica em ink2. Valores sem teto usam .num-hero-compact. No talão o herói fala a língua do artefacto — double-strike de impressora térmica, não Archivo.
Leitura — .num-read · Space Mono ~1.4rem
4 320,00 €
23,0 %
+1 024,00 €
Denso — .num-dense · tabelas e séries
2026-01 · 2,516 % 2026-02 · 2,489 % 2026-03 · 2,441 %
- tabular-nums é obrigatório em qualquer registo — medido na Archivo real: «11111.11» e «88888.88» têm a mesma largura; sem tnum dançam.
- Um herói por painel de resultado — a resposta do instrumento. Os apoios ficam em leitura.
- «—» é um estado, não um erro — renderiza-se no mesmo registo do número que falhou.
Botões e campos
.field é o único campo de formulário — chapa de nível 1 com recess (cavidade), borda line2, foco pelo anel torrado global. Todos os simuladores usam esta classe.
Raio — zero, porque isto é uma régua
Um instrumento de medida tem arestas. border-radius é 0 em todo o chrome — campos, botões, painéis, tabelas. A única excepção é o carimbo (2px): é tinta de borracha, um objecto físico — a excepção prova a regra. Pílulas e cartões macios são linguagem de app de consumo; aqui mede-se dinheiro.
✓ o campo é uma cavidade — arestas rectas, recess interno, foco pelo anel torrado
✗ proibido — a pílula arredondada promete um toque que o instrumento não dá
Movimento — a gramática
Três tipos de movimento: o que explica (a transformação dos dados à vista — a fita a rasgar, a série a desenhar-se), o que responde (hover, foco, o gráfico ao cursor — a sensação de instrumento) e o que decora — na lista negra, não existe. Uma duração é um significado, não um gosto:
120ms
--dur-micro
resposta ao toque
320ms
--dur-curta
mudança de estado
600ms
--dur-media
transformação explicada
1200ms
--dur-longa
sequência orquestrada
--ease-entra
o que chega — arranca rápido, pousa devagar
--ease-sai
o que parte — sai depressa
--ease-rasgo
o acto físico — elástica contida, só o rasgo
--ease-lin
só movimento contínuo (ticker); nunca em transições
Um escalonamento entre irmãos — --stagger (90ms) em cascatas, barras, sparks e odómetro. Nunca anima: números que a pessoa precisa de ler já; conteúdo acima da dobra ao carregar. Com prefers-reduced-motion o estado final é imediato — corta-se tudo, e um teste e2e percorre todas as rotas a verificar que nada anima. Ao vivo — o número desliza do valor anterior:
920,00€/mês
- O número nunca salta nem reparte de zero: TweenNum interpola do valor anterior; Odometer roda só os dígitos que mudam.
- Sem movimento decorativo: se não explica uma transformação, não se move.
Os dois papéis — porquê o talão não muda de cor
Dois artefactos físicos vivem dentro do instrumento: o recibo de vencimento em /salario — o euro que entra — e o talão de compras em /impostos — o euro que sai. Um talão de papel não muda de cor quando apagas a luz: por isso --talao-paper é fixo nos dois temas, e no escuro o contraste até os favorece — lêem-se como objectos colados no painel. Têm typesetting próprio (escala talao-*, impressora térmica) e o carimbo SIMULAÇÃO porque são objetos gerados, não documentos reais.
- Papel quente fixo (#f7f1e1) — não é um nível da escala de superfícies.
- Picotado em cima e em baixo, código de barras, fibra — a linguagem do objecto real.
- São os únicos artefactos que rodam (−0,4°) — o papel está pousado, não colado ao ecrã.
Papel fixo
#f7f1e1 nos dois temas
A barra do euro — assinatura
| Fica contigo | 16 419,69 € | 63,2 % |
| IRS | 2270,31 € | 8,7 % |
| SS do trabalhador | 2310,00 € | 8,9 % |
| TSU da empresa | 4987,50 € | 19,2 % |
Verde só para o que fica contigo; tudo o que sai vive na família vermilhão/tinta.
Selo de evidência
Fonte: Eurostat · série até dez 2025 · recolhido 16 set 2026
Fonte: Lei n.º 73-A/2025 · vigente 2026
Fonte: IGCP — ficha técnica CA Série F · divergência entre fontes, ambas mostradas
Matéria — papel, rasgo, perfuração
A linguagem material do site é o talão: papel, linhas impressas, fibra, perfurações, rasgos, carimbos. O dinheiro viaja como fita de papel e o que sai é arrancado. Três regras: o rasgo nunca é regular (passo e amplitude variam, e há fibras); a perfuração é um buraco — vê-se o fundo, não um ponto pintado; cada pedaço cai com a sua sombra.
O rasgo — determinista por semente
A mesma semente dá o mesmo rasgo — o mesmo salário rasga igual entre renders. A 400 %:
A perfuração — um buraco, não um ponto
Os furos são máscara: o torrado atravessa-os. Espaçamento regular de máquina — ao contrário do rasgo, feito à mão.
A queda — cada pedaço com a sua sombra
Direção e desfoque derivam do ângulo e da altura de queda — não há sombra uniforme. Filtros só em estático; o que anima usa transform e opacity.
- O rasgo sai de arestaRasgada(comprimento, {semente, grosseria}) — PRNG próprio, nunca Math.random.
- A superfície é camadas: base, tom, fibra, espessura — pattern+gradiente, nunca filtros na tinta.
- O furo é máscara (o fundo vê-se) + sombra interna mínima no bordo.
- A sombra é por peça: sombraPeca({ângulo, altura}).
- Filtros só em elementos estáticos; animações em transform/opacity apenas.
Componentes
Exemplo
920 €
salário mínimo 2026
Variação
▲ 2,3 %
preço a subir
Variação
▼ 1,5 %
preço a descer
Poupança
▲ 1,8 %
taxa a subir é bom
Fonte: Eurostat, IHPC mensal · série até ago 2026 · recolhido 17 set 2026
Gráficos — interrogar, um equivalente
Todo o gráfico e diagrama se interroga da mesma maneira: ponteiro, toque ou teclado — e responde num readout fixo (.chart-readout) por cima, nunca num tooltip flutuante que tapa os dados. A régua .chart-scrub dá o caminho de teclado: setas percorrem ponto a ponto, Home/End vão aos extremos, Escape limpa. O ponto activo ganha marca torrada e o resto recua; o readout é a única fonte — sem anúncios duplicados. Vê-lo a funcionar na barra do euro acima.
- O elemento visual leva aria-hidden — seja <svg>, cascata ou barra proporcional.
- O equivalente textual é um irmão <table>: .sr-only quando é só para leitores de ecrã (FitaTalao, Cascata, LineChart), visível quando já faz parte do desenho (EuroBar).
- Nunca role="img" com aria-label E equivalente ao mesmo tempo — o leitor de ecrã anuncia a mesma informação duas vezes.
- O próximo gráfico nasce assim.
Proibido — os defeitos que já aconteceram
✗ borda serrilhada a fingir papel
Zig-zag regular = decoração, não matéria. O papel rasga num trajecto determinista e irregular (materia.ts).
✓ rasgo determinista + sombra própria
A peça de papel tem face, fibra, espessura e sombra que a acompanha — vê a fita em /salario a 400%.
✗ nome de série pintado com a cor da rampa
<text fill="var(--seq-2)">Euribor 12M</text>
Cor de rampa em texto falha AA nos dois temas (1.8–3.6:1 medido). A cor vai no traço/tick; o nome fica em tinta.
✓ tick com a cor da série, nome em tinta
A legibilidade nunca depende da rampa — a cor é redundância, não o único canal.
✗ duração inventada fora da gramática
animation: x 420ms ease — 420ms não significa nada na gramática. Toda a duração é um dos quatro tokens; toda a curva é um dos quatro easings.
✓ duração = significado
--dur-media var(--ease-lin) — a chaveta que mede a base tributável: transformação explicada, linear porque é medição.
- Sem "Fig. N" onde nada remete para a figura — a legenda identifica, o número decorava.
- Sem aliases --color-seq-* em SVG inline: @theme inline só emite a var quando há utilidade — em fill/stroke usa-se --seq-* directo.
- Sem tinta de tema sobre papel fixo — o papel tem a sua tinta (--talao-ink, papel-sai-tinta, papel-fica-tinta).
- Sem número herói vazio à espera de JS — o SSR traz o valor final.