eco00 — design system

Julho 2026

Documentação de uso

Uma identidade,
duas superfícies.

Impact é a fonte única de cor e tipografia do ecossistema. Oficina é a implementação dessa identidade para interfaces de retaguarda — não um sistema paralelo, uma aplicação do mesmo material com regras próprias de estrutura.

Impact — identidade

Cor e tipografia do ecossistema inteiro. Extraído de impact.html, nunca duplicado.

--ink	texto principal
--paper	fundo principal
--accent	destaque, ação primária
--muted	texto secundário
--border	bordas e divisores

--serif (DM Serif Display) em títulos. --sans (DM Sans) no corpo. --mono (DM Mono) em labels e código.

Uso: documentos institucionais, sites públicos, PDFs, comunicação com clientes. Nunca interfaces de sistema.

Oficina — implementação

Consome os tokens do Impact via @import em oficina/tokens/theme-vars.css — nunca define cor ou fonte própria.

Onde diverge do Impact, de propósito:

Tipografia	sempre `--sans`/`--mono` — nunca `--serif` na aplicação
Superfícies	sem sombra, cantos retos — só inputs/botões têm raio mínimo
Sidebar	`--paper`, nunca escura — decisão explícita contra "frieza de sistema"

Estrutura de shell (sidebar, topbar, cards, tabela) é própria da Oficina — a identidade visual não.

Convenções — em uso ativo no código

Ações sempre à esquerda Coluna de ações é a primeira depois do checkbox, nunca a última. Fixa (sticky) no scroll horizontal — nunca sai da vista. .col-actions { position: sticky; left: 40px } .col-actions.no-check { left: 0 }

Painéis genéricos Sidebar, dropdowns, modais e filtros usam o mesmo vocabulário de atributos — zero função JS nova por painel. data-panel="x" data-toggle="x" data-close="x" data-backdrop-for="x" data-group="y" data-dismissable

Ações genéricas Botão que faz algo (salvar, aprovar, paginar) declara só o nome — a página registra o que ele faz, sempre confirmando com um toast. data-action="x" registerAction('x', fn) showToast(mensagem)

Navegação leve Clique em link interno busca só o <main> da página de destino e troca no lugar. URL real via pushState, sem recarregar o documento. shell.js → navigateTo(url)

Multi-página, não single-file Cada rota é um HTML completo e válido por conta própria. Sidebar/topbar vêm de partials/shell.html, injetado via fetch. dashboard.html · anunciantes.html moderacao.html · denuncias.html

Sem emoji real Ícones são caracteres Unicode de blocos seguros (símbolos, formas geométricas) — nunca do bloco de emoji, que renderiza colorido e quebra o visual monocromático. seguro: ☰ ◈ ◎ ⊡ ⊠ ▤ ▦ ✏ ✓ evitar: 👁 ✏️ 🔍 🔔

Formulário sem caixa Inputs usam sublinhado (border-bottom), não caixa fechada. Sem borda ao redor do formulário inteiro — só espaçamento separa seções. .card--plain { border: none } input { border-bottom: 1px solid }

Painel novo, no futuro, é só atributo no HTML — nunca mais uma função escrita à mão que sabe o nome de um elemento específico.