O Design System da Facial Academy: tokens, tipografia Silka, componentes e acessibilidade prontos para você montar telas com consistência e parar de improvisar a cada tela nova. A decisão fica no token, não no achismo. Clique em qualquer cor, valor (hex/rgba) ou bloco de código para copiar.
A marca da Facial Academy no digital: logo, assinatura e uso correto sobre fundo claro e escuro. Mantém leitura e contraste nos dois temas.
Paleta institucional 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.
Abrir biblioteca Phosphorphosphoricons.comVariantes e tamanhos com altura mínima de 44px e raio pill. O rótulo sempre diz a ação (Salvar protocolo, 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.
| Estado | Sinal visual / regra |
|---|---|
| default | Repouso: token base. |
| hover | Mudança leve (cor/elevação); só em ponteiro. |
| focus-visible | Obrigatório: anel --focus (navegação por teclado). |
| active | Pressionado (translateY 1px / cor mais forte). |
| disabled | --opacity-disabled + cursor not-allowed + não focável. |
| loading | Indicador + bloqueia interação; mantém a largura. |
| error | Borda/texto --danger + mensagem + aria-invalid. |
| success | Borda/texto --success + confirmação. |
| selected | Estado persistente (aba/opção ativa). |
| read-only | Fundo --card2, sem borda de edição, copiável. |
Alertas, notificações e status nos quatro tons. Sempre ícone e texto juntos: a cor não comunica sozinha.
Crie a primeira aula da sua trilha de Harmonização Facial.
Essa ação não tem volta. O protocolo sai da sua trilha e não dá para recuperar.
Organização e navegação: abas, acordeão, avatares, trilha de navegação, paginação e variantes de cartão.
aria-selected + navegação por setas do teclado.Superfície com borda e raio padrão.
Elevação ao passar o mouse.
Imagem/gradiente no topo.
Miniatura + texto.
Componentes de aplicação: tabela de dados, paleta de comandos, seletor de data e navegação. Conteúdo de exemplo do domínio de Harmonização Facial.
| Estado | ||||
|---|---|---|---|---|
| Toxina: princípios e diluição | Toxina | 42 min | Publicada | |
| Preenchimento labial seguro | Lábios | 38 min | Rascunho | |
| Anatomia do terço médio | Anatomia | 51 min | Publicada | |
| Rinomodelação: zonas de risco | Rinomodelação | 29 min | Em revisão | |
| Manejo de intercorrência vascular | Intercorrências | 47 min | Publicada |
Selecione uma trilha para ver as aulas e o progresso dos alunos.
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.
| Contexto | Externo | Padding | Interno |
|---|---|---|---|
| Cartão grande | 24 | 16 | 8 |
| Cartão médio | 16 | 8 | 8 |
| Cartão pequeno / campo | 12 | 8 | 4 |
| Tile compacto | 8 | 8 | 0 · reto |
| Pill / botão | full | não se aplica | exceção |
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.
| Camada | Exemplo | Papel |
|---|---|---|
| primitive | #hex · 16px | Valor cru, sem contexto. |
| semantic | --accent · --space-4 | Intenção / uso. |
| component | --btn-bg | Aplicação no componente. |
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> sem href.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