Design Tokens & UI Specifications
The formal design architecture of Propuesta 2 v4.2 (Hybrid Duotone Neo-brutalism): color tokens, typographic scales, tactile elevation physics, and interface governance.
1. Foundational Architecture & Philosophy
Built on three core pillars: high-contrast neo-brutalist geometry, tactile physics for transactional clarity, and zero visual clutter.
Pure Geometry & Hard Borders
Sharp corners (0px radius) on structural cards with 2px solid dark ink borders (#1A1F26), contrasted with rounded pill badges for interactive touchpoints.
Hybrid Duotone Accents
Cyan neon (#4FD8E3) represents clarity, structure, and frontend craft. Magenta neon (#F01C86) signifies energy, creative direction, and AI workflow automation.
Icon & Emoji Governance
Strictly zero raw OS emojis. Pure vector iconography via Lucide with duotone fills and hard shadows. External targets use ExternalLink; internal routes use directional arrows.
2. Color Tokens & Surface Tints
Every hex code is calibrated for AA/AAA accessibility contrast against dark ink (#1A1F26) and pure white (#FFFFFF).
A. Core Brand Tokens
B. Surface Tint Tokens
3. Three-Tier Typography System
Strict hierarchy separating display editorial authority, programmatic precision, and human reading comfort.
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
Designing and directing end-to-end digital products with 15+ years of craft in UX/UI and transactional frontend engineering. This typeface provides high-readability humanist clarity for editorial longform and technical case studies.
Caveat
Weight 600/700 · Spontaneous Human Gestures
4. Elevation, Shadows & Tactile Physics
Physical, unblurred drop shadows simulating physical layers and tactile buttons. Hover interactions depress the element into the page.
5px 5px 0px #1A1F26 8px 8px 0px #1A1F26 6px 6px 0px #4FD8E3 6px 6px 0px #F01C86 5. Component Library & Interactive UI
Core interactive atoms and badges used across all pages of andreagonzalezotto.com.
A. Duotone Buttons (Interactive Tactile Press)
B. Eyebrows, Tags & Role Pills
C. Duotone Icon Badge System
6. Contrast & Pattern Text Shielding
Geometric backgrounds (dots, diagonal hatches, grids) can compete with typography. We apply the text halo shield (.text-halo-shadow) to guarantee effortless legibility.
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. Accessibility & Interaction Standards
High-visibility keyboard navigation, custom high-contrast selection, and semantic screen-reader tags.
Focus Visible Ring
Keyboard navigation with a high-contrast 3px solid magenta outline ring (:focus-visible).
High-Contrast Selection
Text selection uses custom high-contrast neon cyan background with dark ink text (::selection).
Icon & Emoji Governance
Strict ban on raw OS emojis. Normalized vector icons via Lucide and clear separation between external targets (<ExternalLink />) and internal routes (→).