Whiteboard Flowchart
Estilo Whiteboard Flowchart: landing page com visual de quadro branco desenhado a mao, moldura metalica, sticky notes, sombras solidas e tipografia handwritten.
Uso: Processos e fluxogramas, Onboarding e tutoriais, Educacao e cursos, Startups criativas, Brainstorming e ideacao
Contexto Histórico
O estilo Whiteboard Flowchart nasce da convergencia entre sketchnoting, design thinking e a estetica lo-fi digital. Inspirado nos quadros brancos fisicos usados em sessoes de brainstorming e planejamento agil, traduz para a web a sensacao tatica de marcadores, post-its e setas desenhadas a mao. A era 2024-2026 viu um revival do handmade digital como contraponto ao polish excessivo de interfaces AI-generated, valorizando autenticidade e imperfeicao controlada.
Especificações Técnicas
Cores
Primárias
Secundárias
Efeitos
MOLDURA METALICA: Borda cinza com gradient multi-stop simulando frame de aluminio de whiteboard fisico, com box-shadow duplo para profundidade. | TEXTURA WHITEBOARD: Radial-gradients sobrepostos com opacidade baixa simulando reflexo e variacao tonal da superficie. | SOMBRAS HARD: box-shadow 3px 3px 0px sem nenhum blur — offset solido que simula papel colado sobre o quadro. | ROTACOES ORGANICAS: Cada card recebe rotacao aleatoria entre -1 e 1 grau, nunca repetindo angulo em adjacentes — caos controlado. | STICKY NOTES: Post-its com pseudo-element ::before simulando fita adesiva no topo. | RIBBONS: Faixas de titulo com fill pastel, borda preta solida e rotacao sutil. | CONECTORES SVG: Paths com curvas Bezier e pontas de seta triangulares, animacao draw-in com stroke-dasharray. | STEP BADGES: Circulos numerados com fill pastel e borda preta.
Light/Dark
✓ Full / ✗ None
Relacionados
Última sincronização: 01/04/2026