Vertical Whiteboard Timeline
Vertical whiteboard tutorial landing page with metallic aluminum frame border (gray gradient, dual box-shadow) and decorative Expo markers at the bottom. Ideal for tutoriais passo a passo, onboarding de produto, guias educativos, how-to pages, documentacao visual, landing pages long-form. AI-ready template.
Use case: Tutoriais passo a passo, Onboarding de produto, Guias educativos, How-to pages, Documentacao visual, Landing pages long-form
Historical Context
Variacao vertical do estilo Whiteboard Flowchart, inspirada em infograficos de tutorial desenhados a mao em quadros brancos fisicos. O layout timeline vertical com steps numerados a esquerda e conteudo a direita e um padrao classico de UX educativo, combinado aqui com a estetica handmade de marcadores, post-its e setas organicas. Ideal para conteudos sequenciais que precisam guiar o usuario de cima para baixo com clareza visual.
Technical Specs
Colors
Primary
Secondary
Effects
MOLDURA METALICA: Borda cinza gradient multi-stop simulando frame de aluminio de whiteboard fisico com box-shadow duplo. Na base, marcadores Expo e apagador como elementos decorativos (divs estilizados). | TIMELINE VERTICAL: Linha tracejada ou solida preta irregular descendo do lado esquerdo (30-40% largura), conectando circulos numerados de cada step. | CIRCULOS NUMERADOS: Circulos com borda preta grossa 2.5-3px, fill pastel (azul, verde, rosa alternando), numero grande em Permanent Marker. | SETAS CONECTORAS: SVG paths com stroke-linecap round, stroke-width 3-4px variavel, curvatura organica. Setas horizontais do circulo para a caixa de conteudo a direita. Setas verticais descendentes entre steps. | CAIXAS DE CONTEUDO: Retangulos com bordas pretas irregulares 2-3px, fundo branco ou amarelo pastel, hard shadow 4-6px offset sem blur. Screenshots internos com bordas grossas e cantos levemente amassados. | ICONES DOODLE: SVG stroke-only (laptop, pasta, engrenagem, play, megafone, cursor), contorno preto 2-3px, fill pastel opcional, tamanho 40-80px. | SOMBRAS HARD: box-shadow com blur ZERO, offset 4-6px, cor #333 opacity 0.3-0.5. | TEXTURA WHITEBOARD: Background noise sutil 5-8% opacity sobre fundo branco-gelo.
Light/Dark
✓ Full / ✗ None
Related
Last synced: 4/1/2026