Design system

Tokens, tipografia e componentes do Eikon Chat. Tema claro = Direção A; tema escuro = Direção C. Alterne o tema no topo para ver cada componente nos dois.

Logotipo

Eikon ManyChat Ink

área de proteção = ½ do símbolo

Claro — Direção A · Precisão

Base

--background

--panel

--card

--foreground

--subtle-foreground

--muted-foreground

--border

--input

Marca

--primary

--primary-hover

--accent

--accent-foreground

--link

--ring

--spotlight

--avatar

Semânticas

--success

--success-bg

--warning

--warning-bg

--danger

--danger-bg

--info

--info-bg

Gráficos

--chart-1

--chart-2

--chart-3

--chart-5

--chart-peak

Neutros (10 tons)

--n-50

--n-100

--n-200

--n-300

--n-400

--n-500

--n-600

--n-700

--n-800

--n-900

Escuro — Direção C · Preto e branco

Base

--background

--panel

--card

--foreground

--subtle-foreground

--muted-foreground

--border

--input

Marca

--primary

--primary-hover

--accent

--accent-foreground

--link

--ring

--spotlight

--avatar

Semânticas

--success

--success-bg

--warning

--warning-bg

--danger

--danger-bg

--info

--info-bg

Gráficos

--chart-1

--chart-2

--chart-3

--chart-5

--chart-peak

Neutros (10 tons)

--n-50

--n-100

--n-200

--n-300

--n-400

--n-500

--n-600

--n-700

--n-800

--n-900

Tipografia

DisplayComentário vira DM44/46 · título 800 (A) / 600 (C) · −4%

H1Comentário vira DM32/35 · −3,5%

H2Comentário vira DM22/27 · −2%

H3Comentário vira DM16/22 · 700 / 600

H4Comentário vira DM14/20 · 600

CorpoComentário vira DM14/22 · 400

LegendaComentário vira DM12/18 · 400

KPI2.41830/30 · 700 / 600 · tabular

Mono17:46 · /api/v1/campaigns13 · JetBrains Mono (A) / Geist Mono (C)

Espaço, raio e elevação

481216243248

Grade de 4px. Página: 32px de margem, máx. 1200px. Gutter 12–16px.

Raio base 10px (lg) · 14px cards (xl) · pílulas 999px.

e1e2e3brand

Gradiente e motion

Único gradiente da marca: a “linha de agulha”. Nada de gradiente em texto.

Hachura de 1px a 135° em estados vazios.

ease-out cubic-bezier(.22,1,.36,1) · 150 / 200 / 300 ms · contagem 1.300 ms

Avatares e status

ConectadaSaudávelFalhouLimite de envioPendenteDuplicadaProprietário

Botões — padrão, hover, foco, desabilitado, carregando

primary

secondary

destructive

ghost

inverse

Formulário

Nome da campanha

Com erro

Digite pelo menos uma palavra.

Desabilitado

Toggle

uma publicação ou reel específico

qualquer publicação ou reel

Dados, conversa e estados

DMs enviadas↑ 18%

CTR↑ 1,6 p.p.

Campinas

17:46

Boa! E qual é o teu estilo principal?

17:46

Nenhuma campanha ainda