Design System
Manifesto SF v2
Protótipos das telas do Figma implementados em código. Cada página traduz composições do manifesto visual em HTML + Tailwind.
V1
Home Reimaginada
Releitura da página inicial com os padrões do manifesto visual.
V2 · Motion
Home Motion
Motion design editorial: reveals, contadores e vídeo.
V3 · GSAP · Vídeo
Home V3
Scroll cinematográfico com GSAP ScrollTrigger e vídeo scrub.
Marcas do Grupo
Páginas individuais de cada marca com hero, números e destaques.
Alura
A maior escola online de educação tech do país. Bracket hero com logo + números e destaques.
FIAP
A melhor faculdade tech do Brasil. B&W hero com texto gigante, triptych e destaques.
PM3
Escola de produto digital. Split pixelator/magenta, números e cards de destaque.
StartSe
Plataforma global para executivos. Tipografia grande com strip de foto e cards.
Manifesto Visual
Composições do manifesto traduzidas em código.
Errando / Tentando
Tela 91
Triptych: VR student flanked by display serif on black, with orange accent blocks.
existir
Telas 01-03
Hero bracket motif on orange, full-bleed sunset photo, and large spaced-letter overlay.
Aprender
Telas 04-05, 94
Grid mosaic of color blocks, pixelator art, and photos with serif typography.
aprende de um jeito
Telas 61, 73
Large Flecha typography on placa-mae with pixelator strip and Tecnologia split-screen.
É um idioma. Uma lente.
Telas 87-88
Pixelator alongside statement typography on magenta and white backgrounds.
Educação
Telas 97, 68, 64, 54
Full-bleed B&W photography with massive text overlay, portraits, and color block grids.
Pixelator
Telas 21, 65, 89-90, 95-96
Galeria do grafismo pixelator: close-ups, texturas e composições com blocos de cor.
Retratos
Telas 74, 84, 85
Retratos fotográficos e composições com pixelator e blocos de cor.
Conexão
Telas 67, 93
Fotografia de pessoas aprendendo e se conectando juntas.
Design System
Referência
Paleta de cores, tipografia, tokens e snippets de código do design system.