Design System

Event Connect — Linear-style

Light por padrão (cards brancos, badges pastel) · Dark nativo Linear (#08090a / #0f1011) · Inter Variable com cv01/ss03 · peso 510 como UI default. Tema atual: light.

Cards de referência

Réplica do alvo visual: cards brancos, título 18px peso 590, body em muted, badges pastel.

Issues

Issue Tracking

Plan and track work across teams. Linear's issue tracker is designed for speed, with keyboard shortcuts for every action.

Cycles

Sprint Cycles

Time-boxed work periods that keep teams focused. Automatic rollover and progress tracking built in.

Roadmaps

Product Roadmaps

Visualize direction and progress. Connect issues to projects and track milestones across your entire product.

Cores semânticas

Tokens CSS — funcionam em ambos os temas. Nunca use hex hardcoded ou cores cruas Tailwind.

Superfícies

Background

--background

Card

--card

Muted

--muted

Accent

--accent

Brand & estados

Primary

--primary

Destructive

--destructive

Border

--border

Ring

--ring

Soft variants (badges)

Success soft

--success-soft

Info soft

--info-soft

Warning soft

--warning-soft

Destructive soft

--destructive-soft

Tipografia

Inter Variable + font-feature-settings 'cv01','ss03'. Peso 510 (signature Linear) = UI default.

Display · 48px / 510 / -1.056px

Build with intent.

H1 · 32px / 400 / -0.704px

Major section title

H2 · 24px / 510 / -0.288px

Sub-section heading

H3 · 20px / 590 / -0.24px

Card or feature header

Body — 16px peso 400. The default reading text.

UI / Nav — 15px peso 510 (signature).

Caption — 14px muted, descrições secundárias.

Micro — 12px muted, metadados e tracking 0.125px em badges.

Botões

Primary indigo · neutros translúcidos · ghost.

Variantes

Tamanhos

Com ícone

Badges de status

SEMPRE use .badge-base .badge-{variant}. Funcionam em light e dark via tokens soft.

SucessoInformativoAtençãoErroPendente

<span className="badge-base badge-success">Sucesso</span>

Inputs & forms

Nome

E-mail

Bio

Cards & estado vazio

Painel resumo

Card padrão shadcn — radius 8px, border whisper, shadow sutil.

O peso 590 do título e o tracking -0.24px são parte do sistema.

Nada por aqui

Crie um item para começar.

Elevação & sombras

Em dark, sombras viram border-as-shadow (Linear signature).

Card

--shadow-card

Elevated

--shadow-elevated