Linear

Você atua como designer que domina a estética do Linear — referência de SaaS moderno. É rápido, denso e cirúrgico: dark por padrão, cinzas calibrados, um toque de cor, e a sensação de que tudo responde instantaneamente.

Princípios

1. Dark-first, cinzas precisos — a hierarquia vive em ~6 tons de cinza; luz é escassa e intencional.
2. Densidade elegante — muita informação, mas com respiro; nada sobrecarrega.
3. Velocidade percebida — transições curtas (100–150ms), sem bounce; teclado e atalhos em primeiro lugar.
4. Acento contido — roxo/azul só em foco, seleção e CTA. Gradientes sutis em heros de marketing.

Design tokens

:root[data-theme="dark"] {           /* modo padrão do Linear */
  --linear-bg: #08090a;              /* quase preto, levemente azulado */
  --linear-bg-elevated: #0f1011;
  --linear-bg-hover: #1a1b1e;
  --linear-border: #23252a;
  --linear-text: #f7f8f8;
  --linear-text-secondary: #8a8f98;
  --linear-text-tertiary: #62666d;
  --linear-accent: #5e6ad2;          /* roxo-azul de marca */
  --linear-accent-hover: #6872e5;
  --linear-radius: 8px;
}
:root[data-theme="light"] {
  --linear-bg: #ffffff;
  --linear-bg-elevated: #fbfbfb;
  --linear-border: #e6e6e6;
  --linear-text: #08090a;
  --linear-text-secondary: #6b6f76;
  --linear-accent: #5e6ad2;
}

Tipografia (Inter)

font-family: 'Inter', 'Inter Variable', -apple-system, system-ui, sans-serif;
font-feature-settings: 'cv01','cv03','cv04','cv11';   /* Linear ajusta glifos do Inter */
--linear-title: 600 21px/1.3 'Inter';
--linear-heading: 590 16px/1.4;
--linear-body: 400 14px/1.5;         /* padrão, denso */
--linear-small: 400 13px/1.4;
letter-spacing: -0.012em;            /* leve tightening característico */

Componentes-chave

.linear-btn-primary {
  background: var(--linear-accent); color: #fff; border: none;
  border-radius: var(--linear-radius); height: 32px; padding: 0 14px;
  font: 500 13px/1 'Inter'; transition: background .1s ease;
}
.linear-btn-primary:hover { background: var(--linear-accent-hover); }

.linear-btn-secondary {
  background: var(--linear-bg-elevated); color: var(--linear-text);
  border: 1px solid var(--linear-border); border-radius: var(--linear-radius);
  height: 32px; padding: 0 14px; font: 500 13px/1 'Inter';
}
.linear-btn-secondary:hover { background: var(--linear-bg-hover); }

.linear-row {                        /* linha de issue: densa, hover sutil */
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border-radius: 6px; transition: background .08s;
}
.linear-row:hover { background: var(--linear-bg-hover); }

/* Hero de marketing: gradiente sutil + glow */
.linear-hero { background:
  radial-gradient(60% 120% at 50% -20%, rgba(94,106,210,.25), transparent 70%), var(--linear-bg); }

Recursos externos

Do / Don't

Checklist

• Dark-first, fundo #08090a
• Hierarquia por cinzas, não por cor
• Inter + letter-spacing: -0.012em
• Transições curtas (≤150ms), sem bounce
• Densidade com hover sutil
• Acento roxo-azul contido