Design System

Marca

Logo completo. Uso principal sobre fundo escuro. Área de proteção mínima: altura do M em volta.

Símbolo M. Avatar, favicon, selo e assinatura de vídeo. A inclinação de 33° gera todo o grafismo.

Sobre o vermelho, o logo mantém o corpo preto. Tamanho mínimo digital: 96 px de largura.

Cor

Um acento só. O vermelho MA é para ação e destaque, nunca para blocos longos de texto. Neutros puxam levemente para o violeta do preto do logo.

Tipografia

Uma família só: Saira, variável em largura, peso e itálico. Títulos expandidos e inclinados, texto em largura normal. Os tamanhos se ajustam sozinhos entre celular e desktop.

Forma e grafismo

Tudo nasce do ângulo de 33° do símbolo M. Botões têm laterais inclinadas, cards têm um canto cortado, e faixas diagonais vermelhas marcam o hero e peças de campanha. Cantos arredondados só em mockups de aparelho.

Espaço e grid

Base de 4 px. Container de 1280 px com margens fluidas de 20 a 80 px. Seções com 72 a 136 px de respiro vertical.

Movimento

Movimento com intenção de câmera: entra rápido e assenta devagar. Curva padrão cubic-bezier(.2,.8,.2,1), durações de 160, 320 e 640 ms. Um momento forte por página (o 3D do hero); o resto é sutil. Quem pede menos movimento no sistema vê tudo parado.

Componentes

Botões

Primário vermelho: uma ação principal por tela. Claro: ação principal sobre fundo vermelho. Fantasma: ação secundária. Altura mínima 44 px.

Chips de confiança

• Há 10 anos formando profissionais
• Sede própria no Centro de Jundiaí

Card de formação

Ícone de programa

Tile tipográfico com o corte Arena, sem logotipos de terceiros: sigla em Saira itálico e a cor que o mercado associa ao programa (--app-fg e --app-bg). Serve em cards, tabelas de curso, redes e impressos.

Animações de segmento

Quatro cenas do ofício, uma por formação: .c-viz--studio (carro-chefe: barra de app, etapas, palco com o símbolo, camadas e timeline com nomes), .c-viz--trace (traçado de imagem do Illustrator: bitmap borrado, contorno azul desenhando, âncoras, preenchimento vermelho), .c-viz--edit (monitor do Premiere com lower third e legenda sobre timeline V2/V1/A1) e .c-viz--3d (viewport do Cinema 4D com o M extrudado passando de wireframe a render, por baldes). Rodam só quando entram na tela (data-inview) e param com prefers-reduced-motion. Ciclo padrão 8 s (--viz-dur, igual a DUR em main.js). Decorativas: sempre aria-hidden. Nos combos o viz tem proporção fixa 16:11 para os três cards ficarem iguais.

Carro-chefe e combos

.c-course.c-flag é o card-produto da formação anual: marca-d'água .c-flag__ghost, grade .c-flag__grid (texto à esquerda, viz à direita, alinhados pelo topo), título .c-flag__title em duas linhas (segunda em vermelho com sublinhado inclinado), pílulas .c-flag__meta e três módulos .c-mod (Programas, Práticas, Mercado) com numeração fantasma. Os combos vêm depois da chamada .s-combos__head: cada .c-combo tem viz em cima e .c-combo__body embaixo, com alturas mínimas iguais para título, texto e ferramentas, e o botão sempre no rodapé.

Baralho de cards

.c-deck + .c-deckinfo + .c-deckctrl (fx.js): cartas 7:10 com corte Arena e faixa vermelha a 33°. Três estados: pilha (carta do topo com brilho), leque no hover do mouse e grade no toque do celular. Arrastar a carta do topo troca a carta; setas, Enter e Esc funcionam no teclado. O painel abaixo troca título e descrição da carta ativa, com contador 01/06. No computador nada se mexe sozinho: o leque abre só com o mouse e a carta realça só sob o cursor. No celular uma mão mostra o gesto de arrastar uma vez. A sombra fica em um pseudo-elemento (box-shadow) e a face recortada em outro: nada de filtro nas cartas, para a animação não travar. Modelo: Creator Factory. Usado nos bônus; serve para coleções de 4 a 10 itens.

Carrossel de cards de programa

• Treinamento01 Ps Photoshop Tratamento de imagem, composição e artes para redes. Saber datas

.c-rail + .c-qcard (fx.js): cards 2:3 na cor do programa (--app-fg, --app-bg) com uma animação do ofício (.c-mo--ps, --ai, --pr, --ae, --c4d). A faixa desliza sozinha, para com o mouse, arrasta com inércia e tem botão de pausa; bordas com esmaecimento. Hover: o card sobe, a borda acende e um brilho atravessa. Modelo: Edição Mia. Com movimento reduzido vira fileira rolável.

Selo de seção e camada de acabamento

Turmas 2027

.c-badge: pílula com ponto aceso para abrir seções de destaque. A camada fx.css + fx.js soma: entrada ao rolar com escalonamento, títulos que sobem palavra por palavra, luz que segue o mouse nos cards, tilt 3D nos combos e no certificado, pilares em etapas com barra que corre, barra de leitura no topo, faíscas no fundo dos bônus e brilho que atravessa os botões. Tudo pausa fora da tela e respeita prefers-reduced-motion.

Pilar

Monitor de estúdio (vídeo)

.c-screen: moldura com barra REC, câmera e timecode (atualizado por fx.js), marcas de enquadramento, brilho de vidro, rodapé numerado e linha de progresso. No hover sobe e acende em vermelho; inclina 3D no desktop.

Foto com moldura (grade bento)

.c-frame em .s-studio__bento (3 colunas; .c-frame--xl ocupa 2x2). Número em etiqueta vermelha, legenda em cima do degradê, subtítulo que sobe no hover, zoom suave na foto.

Cartão de endereço (ordem do dia)

.c-slate: cartão escuro com faixa vermelha a 33° e palavra fantasma ao fundo. No celular a faixa vira linha superior.

Mídia com marca de troca

Campos de formulário

Pergunta frequente

Voz

Mentor de mercado: direto, inspirador e concreto. Falamos com quem quer criar, e com os pais com calma e fatos.

Regras

Tokens

Os valores vivem em css/tokens.css. Qualquer peça nova, digital ou impressa, usa estes nomes.