Pare de construir no escuro.

A marca da Facial Premium no digital: logo, assinatura e uso correto sobre fundo claro e escuro. Mantém leitura e contraste nos dois temas.

Copiar e Baixar entregam o SVG com as cores oficiais do tema ativo: texto branco no escuro, grafite #1D1D1B no claro, ícone sempre no gradiente oficial.

Paleta sóbria de empresa B2B: o roxo sai do gradiente do logo, o petróleo é o acento exclusivo do Premium e os neutros carregam a maior parte da tela. 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, petróleo e névoa como texto usam variantes escurecidas (acc-ink #00717F, mist-ink #4A5A63); como preenchimento, o petróleo vira #00717F com texto branco para o botão destacar do fundo claro (5.5:1). O tema escuro é o padrão do showcase; no GreatPages, fixe um tema por página.

Gradientes da marca em malhas e lineares, só com cores da paleta. Numa marca sóbria, o gradiente é fundo de seção ou de imagem, nunca decoração de texto pequeno. 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.

Onde o editor permitir ajuste por dispositivo, use a coluna Desktop no computador e a coluna Phone no celular. A coluna Tablet vale para o CSS personalizado (as classes fp- já usam clamp()). 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.

Use o ícone Phosphor no peso Thin, com a cor herdada do texto (currentColor). 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: os de sistema desenhados na grade 24 e os de domínio vindos do Phosphor Thin oficial. Para qualquer outro glifo, use a biblioteca oficial: 9.000+ ícones em 6 pesos, com SVG para copiar em phosphoricons.com.

Variantes e tamanhos com altura mínima de 44px e raio pill. O rótulo sempre diz a ação (Quero ser membro, 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, caminho 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 da área do membro: pedidos, marketplace e economia.

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.

Acessibilidade em 2 níveis: texto ≥ 4.5:1 e botão contra o fundo ≥ 3:1 (WCAG 1.4.11). No tema light, petróleo e névoa como texto usam as variantes -ink; como preenchimento mantêm o tom claro. 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 a rede escreve. Empresa para empresa: fala com o dono da clínica sobre custo, margem e operação, com número e condição na mesma frase, sem hipérbole nem pressão. 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.

A página da rede vive no GreatPages. Carregue silka.css e facial-premium-design-system.css no código personalizado do <head> da página e fixe um tema por página com <script>document.documentElement.dataset.theme='light'</script> (ou 'dark'). Nos blocos de HTML personalizado, use as classes fp-; nos elementos nativos do editor, aplique os valores desta tabela:

Página ao vivo: lp.facialacademy.com.br/rede-facial-premium. Fonte: Silka em todo texto; Poppins entra só como fallback quando a Silka não carrega.