Whiteboard Flowchart
Whiteboard-style landing page with metallic aluminum frame border (gray gradient with dual box-shadow). Ideal for processos e fluxogramas, onboarding e tutoriais, educacao e cursos, startups criativas, brainstorming e ideacao. AI-ready template.
Use case: Processos e fluxogramas, Onboarding e tutoriais, Educacao e cursos, Startups criativas, Brainstorming e ideacao
Historical Context
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.
Technical Specs
Colors
Primary
Secondary
Effects
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
Related
Last synced: 4/1/2026