Tokens de Diseño & Especificaciones UI
La arquitectura formal de diseño de la Propuesta 2 v4.2 (Neo-brutalismo Duotono Híbrido): tokens de color, escalas tipográficas, física de elevación táctil y gobernanza de interfaz.
1. Arquitectura Fundacional & Filosofía
Construido sobre tres pilares fundamentales: geometría neo-brutalista de alto contraste, física táctil para claridad transaccional y cero saturación visual.
Geometría Pura & Bordes Duros
Esquinas vivas (radio 0px) en tarjetas estructurales con bordes de 2px en tinta oscura (#1A1F26), contrastadas con badges redondeados en puntos táctiles.
Acentos Duotono Híbridos
Cian neón (#4FD8E3) representa claridad, estructura y frontend. Magenta neón (#F01C86) simboliza energía, dirección creativa y automatización de flujos de IA.
Gobernanza de Íconos & Emojis
Estrictamente cero emojis crudos de sistema. Iconografía puramente vectorial vía Lucide con rellenos duotono y sombras duras. Enlaces externos usan ExternalLink; rutas internas usan flechas direccionales.
2. Tokens de Color & Tintes de Superficie
Cada código hexadecimal está calibrado para contraste accesible AA/AAA frente a tinta oscura (#1A1F26) y blanco puro (#FFFFFF).
A. Colores Principales de Marca
B. Tintes de Superficie & Fondos de Sección
3. Sistema Tipográfico de Tres Niveles
Jerarquía estricta que separa la autoridad editorial, la precisión programática y el confort de lectura humana.
Bricolage Grotesque
Weight 800 · Letter-spacing -0.02em · Line-height 1.15
Space Mono
Weight 400/700 · Monospaced · Tracking 0.08em
const STACK = ["Astro", "React", "TypeScript", "TailwindCSS-Free", "Lucide"];
Plus Jakarta Sans
Weight 400/500/600 · Line-height 1.65 · Humanist Geometric
Diseño y dirijo productos digitales end-to-end con más de 15 años de oficio en UX/UI e ingeniería frontend transaccional. Esta tipografía aporta una lectura orgánica, fluida y descansada para contenidos editoriales y descripciones técnicas de alta densidad.
Caveat
Weight 600/700 · Spontaneous Human Gestures
4. Elevación, Sombras & Física Táctil
Sombras duras sin desenfoque simulando capas físicas y botones táctiles. El estado hover presiona el elemento hacia la superficie.
5px 5px 0px #1A1F26 8px 8px 0px #1A1F26 6px 6px 0px #4FD8E3 6px 6px 0px #F01C86 5. Catálogo de Componentes & UI Interactiva
Átomos interactivos y badges utilizados a lo largo de todas las páginas de andreagonzalezotto.com.
A. Botones Duotono (Pruébalos al hacer Hover o Click)
B. Badges, Eyebrows & Píldoras de Rol
C. Sistema de Badges Duotono (.card-duotone-badge)
6. Contraste & Blindaje de Texto
Los fondos geométricos (puntos, tramas diagonales, cuadrículas) pueden competir con la tipografía. Aplicamos el escudo halo (.text-halo-shadow) para garantizar legibilidad óptima.
Craft Humano + Escala IA: Los puntos del fondo compiten con el ojo del lector.
Craft Humano + Escala IA: El halo aísla las letras en su color de fondo nativo.
7. Estándares de Accesibilidad & Interacción
Navegación por teclado de alta visibilidad, selección personalizada de alto contraste y etiquetas semánticas para lectores de pantalla.
Focus Visible Ring
Navegación por teclado garantizada con un anillo magenta de 3px con desplazamiento de 3px (:focus-visible).
High-Contrast Selection
El resaltado al seleccionar texto utiliza cian neón puro con tinta oscura (::selection).
Icon & Emoji Governance
Prohibición estricta de emojis crudos del sistema operativo. Íconos vectoriales normalizados con Lucide y diferenciación entre enlaces externos (<ExternalLink />) e internos (→).