Drawn Notebook UI (Caderno Desenhado)
Visão Geral
O Drawn Notebook não é uma biblioteca de componentes. É uma linguagem de design — uma filosofia coerente à qual cada pixel, cada peso de traço, cada ritmo de espaçamento e cada curva de temporização de animação serve. Seu princípio fundamental é que a interface pareça um caderno vivo: tinta desenhada em papel creme, passagens reveladas lentamente conforme o leitor rola a página, fios narrativos que atravessam a página como uma jornada física. Nada é barulhento. Nada é decorativo por si só. A UI conquista cada elemento visual ao ancorá-lo ao significado.
Este skill é uma referência precisa e abrangente. Ao implementar esta UI, siga cada seção em ordem. Não pule as definições de tokens — cada espaçamento, cor e valor de movimento é estrutural. Não pule a seção de modo escuro — ambos os temas são cidadãos de primeira classe iguais e devem estar simultaneamente corretos em todos os momentos.
Seção 1 — Filosofia de Design
1.1 Princípios Fundamentais
Confiança silenciosa, não minimalismo por si só. O design é enxuto, mas cada elemento que permanece tem um propósito. O espaço em branco não é preguiça — é a página respirando. O olho do usuário é guiado pela composição, peso e movimento, não por saturação de cor ou floreios decorativos.
Estética desenhada à mão sem esqueumorfismo literal. A UI faz referência ao artesanato do desenho — traços finos, tipo serifado editorial, texturas de grão de papel, ilustrações SVG renderizadas como desenhos de linha — mas não finge ser papel. É uma superfície digital que respeita a tatilidade do artesanato analógico sem imitá-lo desajeitadamente.
Cada seção é um capítulo. A página é uma rolagem contínua, e cada seção parece virar uma nova página em um caderno. Os fundos das seções mudam sutilmente entre neutros quentes. Um fio dourado contínuo (a linha da jornada SVG) os costura visualmente.
Movimento é narração, não entretenimento. As animações revelam o conteúdo como uma mão escreve palavras — aparecendo de baixo para cima, desaparecendo suavemente, traçando caminhos SVG. As durações são lentas para os padrões modernos (1,2s–2s para revelações). Isso é intencional. Velocidade implica ruído. Lentidão implica artesanato.
Evite padrões de IA genérica. Os seguintes padrões são explicitamente proibidos: fundos de herói gradiente com transições roxo-para-rosa, grades de cartões com altura idêntica e raios de canto idênticos, estados de hover que brilham neon, cantos arredondados superdimensionados (> 14px na maioria dos elementos), barras de habilidade codificadas por cor com números percentuais, linha do tempo com marcadores e datas em negrito, e qualquer uso de emoji como decoração.
Seção 2 — Tokens de Design
2.1 Paleta de Cores — Modo Claro (Caderno Diurno)
Cada cor no modo claro é um neutro quente derivado de papel, creme e tinta natural. Há uma única família de destaque: dourado/terracota, variando de um âmbar suave a um tijolo quente.
/* Modo Claro (aplicado a :root) */
--cream: #F7F5F0; /* Fundo da página — superfície primária */
--sage: #EEF3ED; /* Fundo da seção Sobre — o verde-cinza mais claro */
--parchment: #F1ECE3; /* Fundo da seção Experiência + Currículo */
--warm-white: #FAF8F5; /* Fundo da seção Habilidades — a superfície mais clara */
--linen: #F3EFE8; /* Fundo da seção Projetos */
--sage-tint: #EFF3EE; /* Fundo da seção Aprendizado */
--charcoal: #1A1A1A; /* Texto primário, traços SVG, bordas */
--soft-black: #2C2C2C; /* Texto secundário, rótulos fortes */
--warm-grey: #8A8580; /* Rótulos atenuados, carimbos de data/hora, legendas */
--light-grey: #C5BFB8; /* Prompt de rolagem, separadores decorativos */
--terracotta: #B87A5A; /* Estados de hover, marcadores, waypoints ativos */
--indigo: #6B6EA0; /* Reservado — não usado em padrões primários */
--gold: #C4956A; /* Destaque primário — linha da jornada, ícones de habilidade, chips */
--gold-dim: rgba(196, 149, 106, 0.3); /* Dourado suave para sombras, bordas */
--blush: #F0EBE5; /* Fundos de chip/badge em hover */
--sage-dark: #8B9E8B; /* Tom de borda de separação de seção */
2.2 Paleta de Cores — Modo Escuro (Caderno Noturno)
O modo escuro não é uma simples inversão. Os fundos mudam de cremes quentes para pretos quentes profundos — uma qualidade quase manchada de tinta. As cores de destaque clareiam ligeiramente para manter a legibilidade em superfícies escuras.
/* Modo Escuro (aplicado a :root[data-theme="dark"]) */
--cream: #141210; /* Fundo da página — preto quente profundo */
--sage: #171816; /* Fundo da seção Sobre */
--parchment: #1A1815; /* Fundo da seção Experiência + Currículo */
--warm-white: #1E1B18; /* Fundo da seção Habilidades */
--linen: #181614; /* Fundo da seção Projetos */
--sage-tint: #161815; /* Fundo da seção Aprendizado */
--charcoal: #EDE8E1; /* Texto primário — branco quente sujo */
--soft-black: #D8D2C8; /* Texto secundário */
--warm-grey: #9E978F; /* Rótulos atenuados */
--light-grey: #38342E; /* Separadores decorativos */
--terracotta: #D98A62; /* Destaque de hover — ligeiramente mais brilhante que o modo claro */
--indigo: #8C8FB8;
--gold: #D4A373; /* Destaque primário — ligeiramente mais quente que o modo claro */
--gold-dim: rgba(212, 163, 115, 0.3);
--blush: #241E1A;
--sage-dark: #9EAF9E;
/* Tokens de superfície */
--card-glass: rgba(30, 27, 24, 0.72);
--card-glass-hover: rgba(42, 38, 34, 0.95);
--card-item-bg: rgba(24, 21, 19, 0.78);
--card-item-hover: rgba(38, 34, 30, 0.96);
--card-border: rgba(212, 163, 115, 0.22);
--card-border-hover: rgba(212, 163, 115, 0.48);
--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
--card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.45);
--card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
--card-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.08);
--badge-bg: rgba(24, 21, 19, 0.88);
--grain-opacity: 0.022; /* Menos no escuro para evitar turvação */
2.3 Paleta de Cores — Tokens de Superfície do Modo Claro
/* Tokens de superfície do Modo Claro */
--card-glass: rgba(255, 255, 255, 0.65);
--card-glass-hover: #ffffff;
--card-item-bg: rgba(247, 245, 240, 0.8);
--card-item-hover: rgba(255, 255, 255, 0.98);
--card-border: rgba(196, 149, 106, 0.22);
--card-border-hover: rgba(196, 149, 106, 0.45);
--card-shadow: 0 4px 16px rgba(26, 26, 26, 0.04);
--card-shadow-hover: 0 6px 20px rgba(196, 149, 106, 0.12);
--card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
--card-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.95);
--badge-bg: rgba(247, 245, 240, 0.82);
--grain-opacity: 0.035;
2.4 Alternância de Tema — Implementação Sem Flash
A detecção de tema deve ser executada sincronamente no <head> antes da página renderizar, para evitar um flash do tema errado (FOUT). Este é um requisito crítico de implementação:
<head>
<!-- DEVE ser o primeiro script em <head>, antes de qualquer link de folha de estilo -->
<script>
(function () {
try {
var stored = localStorage.getItem('color-scheme');
var prefersDark = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
var theme = (stored === 'dark' || (!stored && prefersDark)) ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', theme);
var meta = document.querySelector('meta[name="color-scheme"]');
if (meta && (stored === 'dark' || stored === 'light')) meta.content = stored;
var themeColor = document.querySelector('meta[name="theme-color"]');
if (themeColor) themeColor.content = theme === 'dark' ? '#141210' : '#F8F4F0';
} catch (e) {}
})();
</script>
</head>
Em Flutter/Dart, use ThemeMode.system como padrão, com uma substituição persistida via SharedPreferences. A chave é color-scheme, o valor é 'dark' ou 'light'.
2.5 Tokens de Tipografia
--font-serif: 'Cormorant Garamond', 'Georgia', serif;
--font-sans: 'Inter', 'Helvetica Neue', sans-serif;
Cormorant Garamond é inegociável para a voz editorial deste design. É carregado nos pesos 300, 400, 500, 600, com variantes itálicas para 300 e 400. É usado para todos os títulos, títulos de seção, nome do herói, chips, rótulos de trilhos, mensagens de waypoint e em qualquer lugar onde uma qualidade "escrita" seja necessária. Nunca deve ser usado em pesos acima de 600 — esta não é uma tipografia em negrito.
Inter é o complemento funcional. É usado para legendas, tags de habilidade, carimbos de data/hora, kickers em maiúsculas e texto corporal em contextos de informação densa. Carregue apenas os pesos 300, 400, 500.
/* Importação do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap');
2.6 Tokens de Espaçamento
Todo o espaçamento é fluido usando clamp(). Não use valores de pixel fixos para preenchimento de seção ou restrições de largura de conteúdo.
--section-pad: clamp(80px, 12vh, 160px); /* Preenchimento vertical para seções principais */
--content-max: 800px; /* Coluna de prosa estreita */
--content-wide: 1100px; /* Layout largo para grades */
--side-pad: clamp(24px, 5vw, 80px); /* Margens horizontais da página */
2.7 Tokens de Animação
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Ease-out geral */
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Suave semelhante ao Material */
--duration-slow: 1.2s; /* Animações de revelação */
--duration-med: 0.8s; /* Transições médias */
--duration-fast: 0.4s; /* Microinterações rápidas */
Seção 3 — Fundamentos Globais
3.1 Redefinição CSS e Base
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: var(--cream);
color: var(--charcoal);
font-family: var(--font-sans);
font-weight: 300;
line-height: 1.7;
overflow-x: hidden;
position: relative;
}
3.2 Seleção de Texto
O destaque de seleção é uma lavagem dourada suave — reflete a paleta de destaque sem ser agressivo:
::selection {
background: rgba(196, 149, 106, 0.2);
color: var(--charcoal);
}
::-moz-selection {
background: rgba(196, 149, 106, 0.2);
color: var(--charcoal);
}
3.3 Adaptação de Traço SVG
Todos os SVGs inline usam traços hexadecimais fixos (#1A1A1A, #2C2C2C) da paleta do modo claro. Para adaptá-los ao modo escuro sem tocar na marcação SVG, use uma substituição de seletor de atributo CSS:
svg [stroke="#1A1A1A"], svg [stroke="#1a1a1a"] { stroke: var(--charcoal); }
svg [fill="#1A1A1A"], svg [fill="#1a1a1a"] { fill: var(--charcoal); }
svg [stroke="#2C2C2C"], svg [stroke="#2c2c2c"] { stroke: var(--soft-black); }
svg [fill="#2C2C2C"], svg [fill="#2c2c2c"] { fill: var(--soft-black); }
svg text[fill="#1A1A1A"] { fill: var(--charcoal); }
svg text[fill="#8A8580"] { fill: var(--warm-grey); }
Os acentos dourados (#C4956A) nos SVGs NÃO são intencionalmente substituídos. O acento dourado é uma cor de referência fixa em ambos os temas; no modo escuro o token --gold clareia para #D4A373, mas o dourado inline do SVG não precisa de remapeamento porque o contraste contra fundos escuros ainda é aceitável.
3.4 Transição Suave de Tema
Aplique uma transição coordenada a cada superfície que muda entre temas. Isso evita saltos de cor bruscos:
body, section,
.about, .experience, .resume-section, .skills, .projects, .learning, .closing,
.exp-card, .exp-item, .skill-cell, .compact-card, .compact-card__icon,
.about__point, .about__visual-card, .about__chip, .closing__link,
.journey-waypoint__message, .rail-node__label, .resume-modal__panel,
.resume-modal__header {
transition:
background-color 0.35s var(--ease-out),
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out);
}
/* Sempre respeite a preferência de movimento do usuário */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; }
}
Seção 4 — Sobreposição de Grão de Papel
Uma textura sutil de grão de papel é aplicada como uma sobreposição fixa em toda a viewport. Ela fica em z-index: 9999 — acima de tudo — mas pointer-events: none garante que nunca intercepte interações.
.grain-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: var(--grain-opacity, 0.035);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
transform: translateZ(0);
will-change: transform;
transition: opacity 0.35s var(--ease-out);
}
/* No modo escuro, a mesclagem de tela revela o grão mais naturalmente */
:root[data-theme="dark"] .grain-overlay {
mix-blend-mode: screen;
}
Em Flutter: Reproduza isso usando um widget CustomPaint no topo da árvore de widgets com um padrão de ruído baseado em shader, ou asse o grão como um recurso PNG com ~3% de opacidade e use BlendMode.screen no modo escuro.
Seção 5 — Alternador de Tema (Interruptor Celestial)
O alternador de tema é um pequeno botão em forma de pílula posicionado fixamente no canto superior direito.