Mission control foundation
O Design System do Ritmus comeca nas foundations, nao nos componentes.
Esta superficie prova o metodo da Fase 01: foundations como infraestrutura visual, tema dark/light real no runtime e handoff explicito para as fases seguintes.
Escopo fechado da Fase 01: cor, tipografia, spacing, radius, motion e temas nativos com tokens semanticos e uso consultavel.
01
Cor
02
Tipografia
03
Temas
Overview
Contexto e papel da fase
A Fase 01 fecha o chao do sistema. Ela nao implementa iconografia nem biblioteca de atomos; ela prepara essas camadas para nascerem sem improviso.
Escopo aprovado
Foundations precisam ser suficientemente concretas para reduzir improviso de implementacao e suficientemente semanticas para sustentar evolucao.
Fora de escopo nesta fase
Essas camadas entram depois. Foundations nao deve antecipar decisao de fase seguinte para compensar falta de base.
Principles
Princípios que guiam decisão
Os princípios abaixo reduzem ambiguidade e funcionam como critério de desenho, revisão e implementação das foundations.
Clareza antes de efeito
A leitura precisa vencer qualquer recurso visual.
Refinamento antes de exibicao
O Ritmus impressiona por acabamento, nao por truque.
Inteligencia antes de decoracao
Estados, feedback e resposta importam mais que ornamentacao.
Minimalismo funcional
Reduzir ruido sem amputar capacidade.
Consistencia antes de liberdade
A repeticao correta vale mais que variacao sem criterio.
Movimento com intencao
Microanimacao so existe para orientar foco, estado e continuidade.
Anti-padrões que invalidam a fase
Foundations
Fundamentos visuais aprovados
A materialização abaixo cobre as seis camadas obrigatórias da SPEC com taxonomia visível, tokens semânticos e runtime funcional para dark/light.
Foundation scope
Direcao cromatica Olive Smoke, tipografia Satoshi, escala fechada de spacing, radius controlado, motion contido e paridade entre dark e light mode.
Cor
Taxonomia semântica antes de paleta solta
dark
bg.canvas
#0f1110
bg.subtle
#131714
bg.surface
#171b18
bg.elevated
#1e2420
text.primary
#f2f4ef
text.secondary
#b5beb4
text.tertiary
#8b958c
text.inverse
#111411
border.default
#2c342f
border.strong
#435048
accent.primary
#b7c7ab
accent.soft
#232c25
accent.contrast
#eef2ea
status.success
#6fb28a
status.warning
#c8a86b
status.error
#c77c7c
status.info
#7faecc
light
bg.canvas
#f3f5ef
bg.subtle
#ebefe7
bg.surface
#ffffff
bg.elevated
#e2e7de
text.primary
#151915
text.secondary
#4f5d54
text.tertiary
#728076
text.inverse
#f8faf6
border.default
#d2d9cf
border.strong
#afb9b0
accent.primary
#6b7e63
accent.soft
#dfe7d9
accent.contrast
#f7faf5
status.success
#46795d
status.warning
#936f33
status.error
#9a4f4f
status.info
#466f95
Famílias funcionais
Roles obrigatórios
Tipografia
Satoshi
display.l
hero e chamadas de alto destaque
60px
64px
700
display.m
aberturas e blocos de destaque
48px
52px
700
heading.l
titulos de secao principais
36px
42px
700
heading.m
titulos de cards e areas importantes
28px
34px
700
heading.s
subsecoes e agrupamentos
22px
28px
600
body.l
texto principal com mais presenca
18px
30px
500
body.m
texto base do sistema
16px
26px
500
body.s
apoio e texto secundario
14px
22px
500
label.l
rotulos de interface com mais relevancia
14px
20px
600
label.m
metadata e controles densos
12px
18px
600
label.s
legendas e marcacoes compactas
11px
16px
600
Spacing
- • 4 e 8: micro espacos internos e densidade fina
- • 12 e 16: separacao padrao entre elementos relacionados
- • 24 e 32: grupos e blocos medios
- • 40, 48 e 64: respiracao entre secoes e areas macro
Radius
radius.xs
detalhes minimos e badges
radius.s
controles pequenos e inputs
radius.m
cards e superficies padrao
radius.l
containers de maior presenca
Motion
motion.fast
120ms
feedback imediato
motion.standard
180ms
transicao padrao
motion.slow
240ms
continuidade controlada
Permitido
- • hover sutil
- • feedback curto de clique
- • transicao limpa entre estados
- • expansao e recolhimento controlados
Bloqueado
- • spring exagerada
- • overshoot chamativo
- • animacao ornamental
- • delay longo para parecer sofisticado
Temas nativos
A fase 01 agora usa tema dark/light real no runtime via um controle explícito de tema. Os previews abaixo continuam como comparacao estatica de superficie.
dark
Mesmo sistema, contraste e profundidade ajustados por tema.
light
Mesmo sistema, contraste e profundidade ajustados por tema.
Paridade obrigatória
- • mesma taxonomia de tokens
- • mesma hierarquia tipografica
- • mesma escala de spacing
- • mesma logica de radius
- • mesma estrutura de motion
Pode variar por tema
- • valores cromaticos
- • intensidade de contraste
- • percepcao de profundidade
- • uso de overlays e elevacao
Applied Examples
Exemplos aplicados de foundations
A regra importante precisa ganhar corpo visual. Os blocos abaixo testam hierarquia, contraste, spacing, radius e presença de tema sem antecipar componente de fase futura.
Composição alinhada
Primary focus
System Health
Hierarquia clara, respiro, contraste e leitura imediata.
Tasks
Apoio secundário sem competir com o foco.
Sessions
Continuidade visual e mesmo vocabulário formal.
Comparação
Desalinhado
Cards demais, estilos demais, blur demais e foco nenhum.
Alinhado
Poucos focos, hierarquia forte, acabamento premium e comportamento contido.
Next-phase handoff
Como as próximas fases devem consumir esta base
Depois da Fase 01, os próximos DotContexts não reexplicam a identidade do Ritmus. Eles consomem esta base como foundation operacional aprovada.
Fase 02 — Iconografia
Entrar so depois de foundations estaveis, com deck-base governado e sem abrir biblioteca paralela.
Fase 03 — Atoms v1
Consumir foundations e iconografia aprovadas, sem compensar lacuna estrutural no componente.
Fase 04 — Future Layers
Promover moleculas, organismos e assets apenas quando houver recorrencia real e criterio de entrada claro.