Ir para o conteúdo

Design System: Cores

#6DC2DD · #6DA0DE

Escalas Tonais

Primária (Cyan)

50#F0F7F9
100#DDEEF3
200#BADDE8
300#90CCE0
400#6AC1DC
500#38ACD1
600#2C8CAA
700#256D83
800#1D4E5E
900#133039

Secundária (Blue)

50#F0F4F9
100#DDE7F3
200#BACFE8
300#8FB4E0
400#699EDD
500#377DD2
600#2B65AB
700#244F84
800#1C3A5E
900#13243A

Tokens Semânticos: Dark

background#133039
surface#1B3B46
surfaceRaised#213855
border#256D83
textPrimary#F0F7F9
textSecondary#BACFE8
textDisabled#256D83
accent#8FB4E0
accentHover#BACFE8
stateSuccess#6AC1DC
stateError#699EDD

Gradientes

Soft

Vibrant

Deep

WCAG 2.1: Dark

CombinaçãoContrasteNível
Text-Primary / Background12.84:1AAA
Text-Primary / Surface11.01:1AAA
Text-Secondary / Background8.73:1AAA
Accent / Background6.47:1AA
BG text / Accent (botão)6.47:1AA

Componentes

A: Card de Artigo

📝

Como estruturar tokens de cor para seu Design System

12 Mar 2026 · 8 min de leitura

Ler artigo →

B: Código Inline + Bloco

Use o hook useEffect para efeitos colaterais.

jsx
const [count, setCount] = useState(0);

useEffect(() => {
  document.title = `Contagem: ${count}`;
}, [count]);

Regra 60-30-10

60% Background
30% Surface
10%