Fundações do Design
A referência completa de tokens do design system Reis IA. Cada cor, tipografia, valor de espaçamento e propriedade visual é definida aqui como custom property CSS.
Accent Blue
A cor de acento primária. Usada para CTAs, ícones de marca e ênfase. Máximo 2 elementos azuis por viewport.
Core Palette
A marca é construída em preto e branco com azul como única cor de acento.
Accent Opacity Ladder
12-step graduated opacity scale for composable blue accent usage across backgrounds, borders, shadows, and fills.
Profundidade é comunicada através de 5 níveis de valores de background. Cada nível é um passo mais próximo do observador. Elevação vem da claridade do background, não da escuridão da sombra.
Seções alternam entre Surface-0 e Surface-1. Hero sempre começa em Surface-0. Nunca pule mais de um nível de superfície entre seções adjacentes.
Hierarquia de texto é alcançada através de opacidade do branco, não através de diferentes valores hex de cinza. Isso cria unidade visual e garante que o texto harmonize com qualquer nível de background.
Bordas usam branco em opacidades variadas, garantindo que harmonizem com qualquer nível de superfície. Uma variante de acento adiciona ênfase azul a elementos destaque.
Inter Variable
Single font family with continuous weight adjustment (100-900). All sizes use clamp() for fluid scaling between mobile (375px) and desktop (1280px).
Typography Rules
- Letter-spacing tightens as size increases: Display (-0.03em) to Label (+0.05em)
- Line-height loosens as size decreases: Display (1.05) to Body (1.65)
- Weight: 700 for Display/H1, 600 for H2-H5/labels, 500 for captions, 400 for body
text-wrap: balanceon all headings,text-wrap: prettyon body textfont-variant-numeric: tabular-numson all metric/stat displays- No uppercase except Label token (badges, section labels)
- Maximum body text width: 680px (65-75 characters per line)
Fluid spacing tokens using clamp() for seamless scaling between mobile and desktop. 8 tokens cover all needs from micro-interactions to hero-level breathing room.
Container Widths
1280px 1200px 800px 680px 900px Sombras são usadas com parcimônia. Em backgrounds escuros, elevação é comunicada através de camadas de superfície, não sombras. Sombras são reservadas apenas para elementos flutuantes.
Cores de sinal para validação de formulários, indicadores de status e feedback do usuário. Estas são as únicas cores não-azul e não-branco no sistema.