Foundations
Colors
A cor comunica hierarquia, estado e identidade. Toda interface da Effecti é construída a partir destas três escalas primitivas e dos tokens semânticos derivados delas.
Blue
Cor principal de identidade e interação. Usada em ações primárias, links, foco e séries de dados.
Blue 100
Blue 200
Blue 400
Blue 600
Blue 800
Blue 900
Neutral Dark
Escala neutra para textos, bordas, backgrounds, hierarquia de conteúdo e elementos desabilitados.
Neutral Dark 0
Neutral Dark 100
Neutral Dark 300
Neutral Dark 500
Neutral Dark 700
Neutral Dark 900
Neutral Blue
Escala estrutural para navegação, sidebar, superfícies, backgrounds escuros e áreas administrativas.
Neutral Blue 0
Neutral Blue 100
Neutral Blue 300
Neutral Blue 500
Neutral Blue 700
Neutral Blue 900
Semantic Colors
Cores auxiliares de feedback, mantidas fora da identidade principal. Use apenas para comunicar estado.
Success
Success Subtle
Warning
Warning Subtle
Error
Error Subtle
Info
Info Subtle
Semantic Tokens
Como as cores primitivas se traduzem em decisões de interface. Sempre consuma o token, nunca o valor bruto.
| Amostra | Token | Primitiva | Uso |
|---|---|---|---|
| Blue 400 | Ações primárias, links e foco | ||
| Blue 600 | Hover de elementos primários | ||
| Blue 800 | Estado pressionado | ||
| Neutral Dark 0 / Neutral Blue 900 | Fundo da aplicação | ||
| Neutral Dark 0 / Blue 900 | Cards, painéis e superfícies | ||
| Neutral Blue 100 | Bordas e divisores | ||
| Neutral Blue 700 | Texto principal | ||
| Neutral Blue 500 | Texto de apoio | ||
| Neutral Dark 300 | Conteúdo desabilitado | ||
| Neutral Blue 0 / Blue 900 | Sidebar e header | ||
| Blue 400 | Anel de foco visível |