Viridis · Design System · v1.0
Viridis
O sistema visual da Assoma. Uma serifa editorial encontra a interface neutra do portal, o verde Esmeralda atua como acento e os números permanecem em mono.
01 · Fundamentos
Cores
Puxadas do tokens.css do projeto. Decisão: um verde só — o Esmeralda serve à marca/ação e ao score alto. O que separa ação de score é a forma (botão vs. pílula), não a cor; a escala continua com âmbar (médio) e vermelho (baixo).
02 · Fundamentos
Tipografia
Duas vozes + uma técnica: Newsreader dá o tom editorial nos títulos, Manrope carrega o corpo e toda a UI, e DM Mono é só para números — scores, valores, datas.
Títulos e números-manchete. Pesos 400–600. Nunca em texto corrido de UI.
Corpo, rótulos, botões, tabelas. Pesos 400–700.
Score, valores, datas, código. Pesos 400/500.
03 · Fundamentos
Espaço, raio & elevação
Escala de espaçamento em base 4. Raios do tokens.css: controle 8 · painel 12 · card 16 · pílula ∞.
Cards em repouso
Feed, elementos em destaque
Modais, popovers
04 · Componentes
Componentes
Os blocos que a landing e o portal reutilizam. Estados temáticos (hover, foco, desabilitado) já embutidos.
Descreva sua empresa
CNAE, região, faixa de valor e o que você vende. Uma vez só.
Monitoramos os editais
Acompanhamos os editais em tempo real, o dia todo.
Cruzamos os dados
Comparamos cada edital com o seu perfil e histórico.
A barra e a pílula usam a escala de score; o score alto reaproveita o verde da marca. A diferença entre ação e score vem da forma — botão vs. pílula — e do número em mono, não de uma cor separada.
- 20 pregões no feed / mês
- 1 perfil de empresa
- Score explicável completo
| Score | Órgão | Objeto | Valor | Encerra | Situação |
|---|---|---|---|---|---|
| 92 | Prefeitura de Joinville · SC | Gestão documental da rede municipal | R$ 180.000 | 28/06 | Aberto |
| 87 | Governo do Estado · PR | Sistema web de atendimento Pregão eletrônico | R$ 320.000 | 14/07 | Aberto |
| 74 | TRT 12ª Região · SC | Plataforma de BI e relatórios | R$ 95.000 | 22/07 | Em análise |
| 41 | Ministério da Saúde · DF | Fornecimento de equipamentos médicos | R$ 1.2M | 30/07 | Baixa relev. |
Cabeçalho em surface-2, fios finos entre linhas, score como pílula colorida, números em mono, situação como tag — tudo estilizável no theme.css do painel Filament.
05 · Princípios
Decisões de design
O "porquê" por trás dos tokens — o que mantém landing e portal coerentes.
Um verde só
Ação e score alto compartilham o Esmeralda; o que separa é a forma — botão vs. pílula — e a escala (médio âmbar, baixo vermelho). Menos cores, mais coesão.
Uma serifa, uma sans, um mono
Newsreader dá personalidade nos títulos; Manrope faz o trabalho pesado da UI; DM Mono só nos números.
Cor como acento, não enchimento
Grandes áreas ficam neutras. O verde aparece em ações, links e detalhes — estrutura vem do espaço em branco e de fios finos.
Dados legíveis primeiro
Score, valor e prazo em mono, tabulados, com peso — decisão rápida sem esforço de leitura.
Descoberta, não busca
A linguagem e a hierarquia reforçam que a Assoma entrega decisões, não uma lista para filtrar.
Um só sistema
Landing e portal Filament consomem os mesmos tokens — mesma marca da primeira visita ao uso diário.