¿Qué hace drawn-notebook-ui?
name: drawn-notebook-ui description: > Un sistema de diseño completo y guía de implementación para reproducir la estética "Drawn Notebook" — un lenguaje visual editorial, artesanal y silencioso creado originalmente para el portafolio personal de Askar. Cubre cada token, componente, animación y patrón de interacción en detalle exhaustivo tanto para Flutter (Dart) como para web (HTML/CSS/JS), en modo claro y oscuro. Utiliza esta habilidad siempre que el usuario quiera construir, adaptar o extender este lenguaje visual específico en cualquier contexto.
Resumen
El Drawn Notebook no es una biblioteca de componentes. Es un lenguaje de diseño — una filosofía coherente a la que cada píxel, cada grosor de línea, cada ritmo de espaciado y cada curva de temporización de animación sirve. Su principio rector es que la interfaz debe sentirse como un cuaderno vivo: tinta dibujada sobre papel crema, pasajes que se revelan lentamente a medida que el lector se desplaza hacia abajo, hilos de navegación que atraviesan la página como un viaje físico. Nada es ruidoso. Nada es decorativo por sí mismo. La IU gana cada elemento visual anclándolo al significado.
Esta habilidad es una referencia precisa y completa. Al implementar esta IU, sigue cada sección en orden. No te saltes las definiciones de tokens — cada espaciado, color y valor de movimiento es estructural. No te saltes la sección de modo oscuro — ambos temas son ciudadanos de primera clase iguales y deben ser correctos simultáneamente en todo momento.
Sección 1 — Filosofía de Diseño
1.1 Principios Básicos
Confianza silenciosa, no minimalismo por el minimalismo. El diseño es sobrio, pero cada elemento que permanece tiene un propósito. El espacio en blanco no es pereza — es la página respirando. El ojo del usuario es guiado por la composición, el peso y el movimiento, no por la saturación de color o los adornos decorativos.
Estética dibujada a mano sin esqueumorfismo literal. La IU hace referencia a la artesanía del dibujo — grosores de línea finos, tipografía editorial serif, texturas de papel, ilustraciones SVG renderizadas como dibujos lineales — pero no pretende ser papel. Es una superficie digital que respeta la tactilidad de la artesanía analógica sin imitarla torpemente.
Cada sección es un capítulo. La página es un desplazamiento continuo, y cada sección se siente como pasar a una nueva página en un cuaderno. Los fondos de las secciones cambian sutilmente entre neutros cálidos. Un hilo dorado continuo (la línea de viaje SVG) los cose visualmente.
El movimiento es narración, no entretenimiento. Las animaciones revelan el contenido como una mano escribe palabras: apareciendo de abajo arriba, desvaneciéndose suavemente, trazando rutas SVG. Las duraciones son lentas para los estándares modernos (1.2s–2s para revelaciones). Esto es intencional. La velocidad implica ruido. La lentitud implica artesanía.
Evita los patrones de IA genéricos. Los siguientes patrones están explícitamente prohibidos: fondos degradados de héroe con transiciones de púrpura a rosa, cuadrículas de tarjetas con altura y radios de esquina idénticos, estados de hover que brillan con neón, esquinas redondeadas de gran tamaño (> 14px en la mayoría de los elementos), barras de habilidades con códigos de color y números de porcentaje, líneas de tiempo con viñetas y fechas en negrita, y cualquier uso de emoji como decoración.
Sección 2 — Tokens de Diseño
2.1 Paleta de Colores — Modo Claro (Cuaderno de Luz Diurna)
Cada color en el modo claro es un neutro cálido derivado del papel, la crema y la tinta natural. Hay una sola familia de acento: oro/terracota, que va desde un ámbar apagado hasta un ladrillo cálido.
/* Modo Claro (aplicado a :root) */
--cream: #F7F5F0; /* Fondo de página — superficie primaria */
--sage: #EEF3ED; /* Fondo de la sección "Acerca de" — el gris-verde más claro */
--parchment: #F1ECE3; /* Fondo de la sección "Experiencia + Currículum" */
--warm-white: #FAF8F5; /* Fondo de la sección "Habilidades" — la superficie más clara */
--linen: #F3EFE8; /* Fondo de la sección "Proyectos" */
--sage-tint: #EFF3EE; /* Fondo de la sección "Aprendizaje" */
--charcoal: #1A1A1A; /* Texto primario, trazos SVG, bordes */
--soft-black: #2C2C2C; /* Texto secundario, etiquetas fuertes */
--warm-grey: #8A8580; /* Etiquetas atenuadas, marcas de tiempo, subtítulos */
--light-grey: #C5BFB8; /* Indicador de desplazamiento, separadores decorativos */
--terracotta: #B87A5A; /* Estados hover, viñetas, puntos de ruta activos */
--indigo: #6B6EA0; /* Reservado — no se usa en patrones primarios */
--gold: #C4956A; /* Acento primario — línea de viaje, iconos de habilidad, chips */
--gold-dim: rgba(196, 149, 106, 0.3); /* Oro suave para sombras, bordes */
--blush: #F0EBE5; /* Fondos de chips/insignias en hover */
--sage-dark: #8B9E8B; /* Tinte del borde separador de sección */
2.2 Paleta de Colores — Modo Oscuro (Cuaderno Nocturno)
El modo oscuro no es una inversión simple. Los fondos pasan de cremas cálidos a negros cálidos profundos — una cualidad casi manchada de tinta. Los colores de acento se vuelven ligeramente más brillantes para mantener la legibilidad sobre fondos oscuros.
/* Modo Oscuro (aplicado a :root[data-theme="dark"]) */
--cream: #141210; /* Fondo de página — negro cálido profundo */
--sage: #171816; /* Fondo de la sección "Acerca de" */
--parchment: #1A1815; /* Fondo de "Experiencia + Currículum" */
--warm-white: #1E1B18; /* Fondo de la sección "Habilidades" */
--linen: #181614; /* Fondo de la sección "Proyectos" */
--sage-tint: #161815; /* Fondo de la sección "Aprendizaje" */
--charcoal: #EDE8E1; /* Texto primario — blanco apagado cálido */
--soft-black: #D8D2C8; /* Texto secundario */
--warm-grey: #9E978F; /* Etiquetas atenuadas */
--light-grey: #38342E; /* Separadores decorativos */
--terracotta: #D98A62; /* Acento hover — ligeramente más brillante que el modo claro */
--indigo: #8C8FB8;
--gold: #D4A373; /* Acento primario — ligeramente más cálido que el modo claro */
--gold-dim: rgba(212, 163, 115, 0.3);
--blush: #241E1A;
--sage-dark: #9EAF9E;
/* Tokens de superficie */
--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; /* Menor en oscuro para evitar falta de nitidez */
2.3 Paleta de Colores — Tokens de Superficie en Modo Claro
/* Tokens de superficie en 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 Cambio de Tema — Implementación sin Destello
La detección del tema debe ejecutarse sincrónicamente en el <head> antes de que la página se renderice, para evitar un destello del tema incorrecto (FOUT). Este es un requisito de implementación crítico:
<head>
<!-- DEBE ser el primer script en <head>, antes de cualquier enlace de hoja 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>
En Flutter/Dart, usa ThemeMode.system como valor predeterminado, con una anulación persistente a través de SharedPreferences. La clave es color-scheme, el valor es 'dark' o 'light'.
2.5 Tokens de Tipografía
--font-serif: 'Cormorant Garamond', 'Georgia', serif;
--font-sans: 'Inter', 'Helvetica Neue', sans-serif;
Cormorant Garamond es no negociable para la voz editorial de este diseño. Se carga en pesos 300, 400, 500, 600, con variantes en cursiva para 300 y 400. Se usa para todos los encabezados, títulos de sección, el nombre del héroe, chips, etiquetas de carril, mensajes de puntos de ruta y en cualquier lugar donde se necesite una cualidad "escrita". Nunca debe usarse con pesos superiores a 600 — esta no es una tipografía en negrita.
Inter es el compañero funcional. Se usa para subtítulos, etiquetas de habilidad, marcas de tiempo, subtítulos en mayúsculas y texto del cuerpo en contextos de información densa. Carga los pesos 300, 400, 500 únicamente.
/* Importación de 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 Espaciado
Todo el espaciado es fluido usando clamp(). No uses valores de píxel duros para el relleno de sección o las restricciones de ancho de contenido.
--section-pad: clamp(80px, 12vh, 160px); /* Relleno vertical para secciones principales */
--content-max: 800px; /* Columna de prosa estrecha */
--content-wide: 1100px; /* Diseño amplio para cuadrículas */
--side-pad: clamp(24px, 5vw, 80px); /* Márgenes de página horizontales */
2.7 Tokens de Animación
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Facilidad de salida general */
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave tipo Material */
--duration-slow: 1.2s; /* Animaciones de revelación */
--duration-med: 0.8s; /* Transiciones medias */
--duration-fast: 0.4s; /* Microinteracciones rápidas */
Sección 3 — Fundamentos Globales
3.1 Reset CSS y 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 Selección de Texto
El resaltado de selección es un lavado dorado suave — refleja la paleta de acento sin ser agresivo:
::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 Adaptación de Trazos SVG
Todos los SVG en línea usan trazos hexadecimales codificados (#1A1A1A, #2C2C2C) de la paleta de modo claro. Para adaptarlos al modo oscuro sin tocar el marcado SVG, usa una anulación de selector 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); }
Los acentos dorados (#C4956A) en los SVG NO se anulan intencionalmente. El acento dorado es un color de referencia fijo en ambos temas; en el modo oscuro, el token --gold se aclara a #D4A373, pero el dorado SVG en línea no necesita reasignación porque el contraste contra fondos oscuros sigue siendo aceptable.
3.4 Transición de Tema Suave
Aplica una transición coordinada a cada superficie que cambie entre temas. Esto evita saltos de color 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);
}
/* Siempre respeta la preferencia de movimiento del usuario */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; }
}
Sección 4 — Superposición de Grano de Papel
Se aplica una textura sutil de grano de papel como superposición fija de ventana completa. Se encuentra en z-index: 9999 — por encima de todo — pero pointer-events: none garantiza que nunca intercepte las interacciones.
.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);
}
/* En modo oscuro, la mezcla de pantalla revela el grano de forma más natural */
:root[data-theme="dark"] .grain-overlay {
mix-blend-mode: screen;
}
En Flutter: Reproduce esto usando un widget CustomPaint en la parte superior del árbol de widgets con un patrón de ruido basado en shader, o hornea el grano como un recurso PNG con aproximadamente un 3% de opacidad y usa BlendMode.screen en el modo oscuro.
Sección 5 — Conmutador de Tema (Conmutador Celestial)
El conmutador de tema es un pequeño botón tipo píldora posicionado fijo en la esquina superior derecha.
…