Pare de construir no escuro.

A marca do Expert em Lábios 2026 no digital: o logo escrito em duas versões oficiais, uma para fundo escuro e uma para fundo claro. Mantém leitura e contraste nos dois temas.

Paleta extraída do gradiente do 26 e seus derivados em tokens de tema, claro e escuro. O componente consome token, nunca cor fixa.

Verde, âmbar e vermelho saem da paleta institucional de propósito: são funcionais (sucesso, atenção, erro). No tema light usam variantes escurecidas para manter AA. Acompanhe sempre de ícone + texto, nunca cor sozinha.

No tema light, dourado e rosa como texto usam variantes escurecidas (gold-ink #7A5A0E, rose #B04A5E); como preenchimento mantêm a cor institucional (#FFE4A4, #FFB1BD). O site usa o tema escuro por padrão.

Gradientes da marca em malhas e lineares. Sem cônico, sem blob, sem halo.

Silka em escala responsiva por ponto de quebra. Corpo com no mínimo 16px no mobile para evitar o zoom no iOS.

No Framer, cada Text Style aceita override por breakpoint. Defina o valor no Desktop e ajuste em Tablet e Phone. Valores recomendados (px):

As amostras acima já usam clamp(): redimensione a janela para ver a escala fluida entre Phone e Desktop. Corpo mínimo de 16px no celular evita o zoom automático do iOS.

Biblioteca Phosphor, peso Thin, traço de 1pt, herdando a cor por currentColor. O ícone nunca substitui o rótulo.

Conjunto de sistema desenhado na grade 24. Clique em qualquer ícone para copiar o SVG. Para o catálogo completo, use o link da Phosphor no fim da seção.

No Framer: insira o ícone Phosphor, defina Weight = Thin e a cor como Color Style (texto/accent). Em botões, o ícone alinha à baseline do texto com gap de 8 px; alvo de toque mínimo de 44 px mesmo quando o glifo é menor.

Os ícones acima são um recorte de sistema desenhado na grade 24. Para qualquer outro glifo, use a biblioteca oficial: 9.000+ ícones em 6 pesos, todos disponíveis nativamente no Framer.

Variantes e tamanhos com altura mínima de 44px e raio pill. O rótulo sempre diz a ação (Salvar caso, não Enviar).

Os mesmos estados se aplicam a todo componente interativo (botão, campo, link, alternador, aba…). Consistência de interação = DS maduro.

Alertas, notificações e status nos quatro tons. Sempre ícone e texto juntos: a cor não comunica sozinha.

Organização e navegação: abas, acordeão, avatares, trilha de navegação, paginação e variantes de cartão.

Componentes de aplicação: tabela de dados, paleta de comandos, seletor de data e navegação. Conteúdo de exemplo do domínio do curso.

Contraste WCAG AA, foco visível, alvo de toque de 44px e respeito a movimento reduzido. A mensagem de erro diz o que houve e como resolver.

No tema light, dourado e rosa como texto usam as variantes -ink (escurecidas) para garantir AA; como preenchimento mantêm a cor institucional. Mantenha foco visível (outline) nos interativos e alvos de toque ≥ 44px.

Cores, tipografia, espaçamento e raio: a base que todo componente consome via token.

Papéis mapeados na escala de sombra: Elevado = elev-1 · Sobreposição = elev-3 · Modal = elev-4. Use o papel (`--elev-raised/overlay/modal`), não o número. Sombras usam camadas pretas no dark e matiz da marca no light.

Elemento arredondado dentro de outro: os cantos devem ser concêntricos (mesmo centro de arco). Regra: raio interno = raio externo − padding, para o espaçamento ficar uniforme inclusive nos cantos.

Padding ≥ raio → interno vira 0 (reto). Borda/stroke inverte: externo = interno + largura da borda. Aninhamento profundo: subtraia o padding de cada nível. Pill é exceção (não recalcula). Com corner smoothing (squircle iOS) a fórmula vira aproximação: iguale o smoothing em pai e filho.

Consistência por token, paridade entre claro e escuro, acessibilidade por padrão. Decida uma vez, reaplique em todo lugar.

Tokens fluem em primitive → semantic/intent → component. Regra de ouro: o token semântico nunca sugere valor (--btn-bg, não --azul-500); o de componente referencia o semântico, nunca o primitivo direto. É o que torna theming e rebrand triviais.

Anime com propósito (feedback, orientação, continuidade), nunca decorativo. Durações nos tokens (--motion-fast .15 · --motion .2 · --motion-slow .4), curva --ease. Respeite prefers-reduced-motion (já no reset). Não anime: deslocamento de layout nem texto de leitura.

SemVer (MAJOR.MINOR.PATCH) + CHANGELOG.md + política de depreciação. Contribuição: regra das 3 equipes (só vira padrão o que serve 3+ usos) + revisão antes de virar componente. Ver CONTRIBUTING.md no pacote.

A camada de copy do sistema: como o produto escreve. Builder para builder, técnica, direta e anti-improviso, sem hipérbole nem happy talk. Guia completo no pacote (voz-e-tom.md) e os termos de cada marca em glossario-marca.md.

Cada marca só fala do próprio domínio. Os termos específicos ficam em glossario-marca.md (um por marca) e nunca cruzam para outro design system. Na dúvida, erre para o neutro (corpo de texto, preenchimento de cor, token, cartão), nunca para o domínio de outra marca.

Valores legíveis por máquina para tema, espaçamento, raio, elevação e movimento. O componente lê o token, não o valor solto.

No Framer, crie cada cor como um Color Style com um valor de Claro e um de Escuro. O site publicado segue a aparência do sistema do visitante automaticamente (prefers-color-scheme); dá pra adicionar um toggle e lembrar a escolha do visitante. Atalho no canvas: Ctrl+Cmd+N. Valores por estilo:

Refs Framer: Modo claro e escuro no Framer · Academy: modo claro e escuro