{"schemaVersion":1,"id":"https://lucioduran.com/es/decisions/single-accent-color-system","url":"https://lucioduran.com/es/decisions/single-accent-color-system","title":"Single Accent Color System over Category-Based Palette","description":"The original design assigned unique neon colors to each technology category and content type, 12 distinct hues mapped to categories like Frontend, Backend, DevO","language":"en","datePublished":null,"dateModified":null,"contentFormat":"text/markdown","content":"ADR-004accepted20 de diciembre de 2025\n\n# Single Accent Color System over Category-Based Palette\n\n## Contexto\n\nThe original design assigned unique neon colors to each technology category and content type, 12 distinct hues mapped to categories like Frontend, Backend, DevOps, AI, and Design. While visually distinctive, this approach created several compounding problems. The color assignments were arbitrary and carried no semantic meaning (why is DevOps purple and Frontend green?). The palette required a Colorizer utility component that added conditional rendering logic to every list item. Dark mode amplification made neon colors visually aggressive, reducing readability. Most critically, the multi-color approach communicated 'playful developer portfolio' rather than 'senior technology leader', a fundamental misalignment between visual language and professional positioning.\n\n## Decisión\n\nReplace the entire category-based color palette with a single accent color (#0070f3, Vercel Blue) applied uniformly across all interactive and emphasis elements. The design system now operates on an achromatic foundation, grayscale values for all structural elements (backgrounds, borders, text hierarchy) with the accent color reserved exclusively for actionable elements: links, CTAs, status indicators, and icon highlights. The Colorizer component was removed entirely. All theme tokens reference semantic names (primary, primaryHover) rather than categorical ones.\n\n## Consecuencias\n\nPositive: Eliminated the Colorizer component and ~200 lines of conditional color logic across 15+ components. Reduced the theme object from 36 color tokens to 24. Visual hierarchy is now communicated through typography weight, size, and spacing rather than color differentiation, a more sophisticated and scalable pattern. The site reads as a serious technical document rather than a colorful dashboard. Dark mode consistency improved dramatically: one accent color calibrated once for both modes versus 12 neon values requiring individual dark-mode tuning. Negative: Category differentiation in technology lists relies entirely on grouping headers and spatial layout rather than color coding. Users scanning quickly cannot use color as a secondary information channel. This is an intentional trade-off: the target audience (technical hiring managers, VPs of Engineering) values clarity and restraint over visual novelty.\n\n## Incertidumbre Calibrada\n\n## Predicciones al Momento de la Decisión\n\nPredicted the achromatic system would communicate 'senior technical leader' rather than 'creative developer.' Expected the loss of color-coded categories to be offset by improved visual hierarchy through typography and spacing. Assumed the single accent color would simplify dark mode maintenance from calibrating 12 hues down to calibrating 1. Predicted a net reduction in code complexity, estimated 150-200 lines removed.\n\n## Resultados Medidos\n\nThe professional positioning prediction was validated through direct feedback: two technical recruiters independently described the site as 'clean' and 'serious', adjectives never used about the neon version. Dark mode maintenance dropped from a persistent source of visual bugs (neon green on dark grey was always wrong) to a non-issue. The code reduction was exactly as predicted: ~200 lines removed, Colorizer component eliminated entirely. The unexpected outcome: the achromatic design forced improvements to typography and spacing that made the entire site more readable, not just more professional. The category scanning speed concern has not surfaced as user feedback.\n\n## Incógnitas al Momento de la Decisión\n\nUnknown at decision time: whether removing color as a category signal would measurably impact navigation speed. User testing was not conducted, the decision was made on design principles rather than data. Also unknown: whether a single accent color would feel 'too Vercel' given the explicit use of #0070f3. In practice, the association is subtle and reinforces rather than distracts from the technical positioning.\n\n## Clasificación de Reversibilidad\n\nPuerta de Ida y Vuelta\n\nRe-introducing category colors would require: re-creating the Colorizer component (or equivalent), adding 12 new color tokens to both theme objects, and updating 15+ components to consume categorical colors. The theme architecture supports arbitrary token addition. Estimated reversal: 4-6 hours. However, the design intent would need to be reconsidered, reversal is technically trivial but strategically undesirable.\n\n## Contra-Argumento Más Fuerte\n\nThe strongest counter-argument is information density: color-coded categories provide an additional visual channel that aids scanning in technology lists with 70+ items. A user looking for 'all AI-related technologies' could scan by color in the old system; now they must read category headers. Additionally, the neon palette made the site visually memorable, in a sea of minimalist portfolios, the colorful version stood out. The counter-counter: standing out through color novelty is a junior designer strategy; standing out through content quality and typography is a senior one.\n\n## Contexto Técnico\n\nStack\n\n- styled-components\n- ThemeProvider\n- CSS Custom Properties\n\nColor Tokens Before\n\n36\n\nColor Tokens After\n\n24\n\nRemoved Components\n\nColorizer\n\nLines Removed\n\n~200\n\nRestricciones\n\n- Must work in both dark and light mode\n- Single accent for all interactive elements\n\n## Decisiones Relacionadas\n\n- [ADR-003accepted\n\n styled-components over Tailwind CSS]()\n- [ADR-009accepted\n\n Geist Font Family as Design System Foundation]()\n\n[Volver a Decisiones]()","headings":[{"level":1,"text":"Single Accent Color System over Category-Based Palette","url":"https://lucioduran.com/es/decisions/single-accent-color-system#title"},{"level":2,"text":"Contexto","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-context"},{"level":2,"text":"Decisión","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-decision"},{"level":2,"text":"Consecuencias","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-consequences"},{"level":2,"text":"Incertidumbre Calibrada","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-uncertainty"},{"level":2,"text":"Predicciones al Momento de la Decisión","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-predictions"},{"level":2,"text":"Resultados Medidos","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-outcomes"},{"level":2,"text":"Incógnitas al Momento de la Decisión","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-unknowns"},{"level":2,"text":"Clasificación de Reversibilidad","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-reversibility"},{"level":2,"text":"Contra-Argumento Más Fuerte","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-counterArgument"},{"level":2,"text":"Contexto Técnico","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-techContext"},{"level":2,"text":"Decisiones Relacionadas","url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-relatedDecisions"}],"sections":[{"heading":"Single Accent Color System over Category-Based Palette","level":1,"url":"https://lucioduran.com/es/decisions/single-accent-color-system","content":"ADR-004accepted20 de diciembre de 2025"},{"heading":"Single Accent Color System over Category-Based Palette","level":1,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#title","content":""},{"heading":"Contexto","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-context","content":"The original design assigned unique neon colors to each technology category and content type, 12 distinct hues mapped to categories like Frontend, Backend, DevOps, AI, and Design. While visually distinctive, this approach created several compounding problems. The color assignments were arbitrary and carried no semantic meaning (why is DevOps purple and Frontend green?). The palette required a Colorizer utility component that added conditional rendering logic to every list item. Dark mode amplification made neon colors visually aggressive, reducing readability. Most critically, the multi-color approach communicated 'playful developer portfolio' rather than 'senior technology leader', a fundamental misalignment between visual language and professional positioning."},{"heading":"Decisión","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-decision","content":"Replace the entire category-based color palette with a single accent color (#0070f3, Vercel Blue) applied uniformly across all interactive and emphasis elements. The design system now operates on an achromatic foundation, grayscale values for all structural elements (backgrounds, borders, text hierarchy) with the accent color reserved exclusively for actionable elements: links, CTAs, status indicators, and icon highlights. The Colorizer component was removed entirely. All theme tokens reference semantic names (primary, primaryHover) rather than categorical ones."},{"heading":"Consecuencias","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-consequences","content":"Positive: Eliminated the Colorizer component and ~200 lines of conditional color logic across 15+ components. Reduced the theme object from 36 color tokens to 24. Visual hierarchy is now communicated through typography weight, size, and spacing rather than color differentiation, a more sophisticated and scalable pattern. The site reads as a serious technical document rather than a colorful dashboard. Dark mode consistency improved dramatically: one accent color calibrated once for both modes versus 12 neon values requiring individual dark-mode tuning. Negative: Category differentiation in technology lists relies entirely on grouping headers and spatial layout rather than color coding. Users scanning quickly cannot use color as a secondary information channel. This is an intentional trade-off: the target audience (technical hiring managers, VPs of Engineering) values clarity and restraint over visual novelty."},{"heading":"Incertidumbre Calibrada","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-uncertainty","content":""},{"heading":"Predicciones al Momento de la Decisión","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-predictions","content":"Predicted the achromatic system would communicate 'senior technical leader' rather than 'creative developer.' Expected the loss of color-coded categories to be offset by improved visual hierarchy through typography and spacing. Assumed the single accent color would simplify dark mode maintenance from calibrating 12 hues down to calibrating 1. Predicted a net reduction in code complexity, estimated 150-200 lines removed."},{"heading":"Resultados Medidos","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-outcomes","content":"The professional positioning prediction was validated through direct feedback: two technical recruiters independently described the site as 'clean' and 'serious', adjectives never used about the neon version. Dark mode maintenance dropped from a persistent source of visual bugs (neon green on dark grey was always wrong) to a non-issue. The code reduction was exactly as predicted: ~200 lines removed, Colorizer component eliminated entirely. The unexpected outcome: the achromatic design forced improvements to typography and spacing that made the entire site more readable, not just more professional. The category scanning speed concern has not surfaced as user feedback."},{"heading":"Incógnitas al Momento de la Decisión","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-unknowns","content":"Unknown at decision time: whether removing color as a category signal would measurably impact navigation speed. User testing was not conducted, the decision was made on design principles rather than data. Also unknown: whether a single accent color would feel 'too Vercel' given the explicit use of #0070f3. In practice, the association is subtle and reinforces rather than distracts from the technical positioning."},{"heading":"Clasificación de Reversibilidad","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-reversibility","content":"Puerta de Ida y Vuelta\n\nRe-introducing category colors would require: re-creating the Colorizer component (or equivalent), adding 12 new color tokens to both theme objects, and updating 15+ components to consume categorical colors. The theme architecture supports arbitrary token addition. Estimated reversal: 4-6 hours. However, the design intent would need to be reconsidered, reversal is technically trivial but strategically undesirable."},{"heading":"Contra-Argumento Más Fuerte","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-counterArgument","content":"The strongest counter-argument is information density: color-coded categories provide an additional visual channel that aids scanning in technology lists with 70+ items. A user looking for 'all AI-related technologies' could scan by color in the old system; now they must read category headers. Additionally, the neon palette made the site visually memorable, in a sea of minimalist portfolios, the colorful version stood out. The counter-counter: standing out through color novelty is a junior designer strategy; standing out through content quality and typography is a senior one."},{"heading":"Contexto Técnico","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-techContext","content":"Stack\n\n- styled-components\n- ThemeProvider\n- CSS Custom Properties\n\nColor Tokens Before\n\n36\n\nColor Tokens After\n\n24\n\nRemoved Components\n\nColorizer\n\nLines Removed\n\n~200\n\nRestricciones\n\n- Must work in both dark and light mode\n- Single accent for all interactive elements"},{"heading":"Decisiones Relacionadas","level":2,"url":"https://lucioduran.com/es/decisions/single-accent-color-system#decisionDetail-relatedDecisions","content":"- [ADR-003accepted\n\n styled-components over Tailwind CSS]()\n- [ADR-009accepted\n\n Geist Font Family as Design System Foundation]()\n\n[Volver a Decisiones]()"}],"links":[{"text":"ADR-003acceptedstyled-components over Tailwind CSS","url":"https://lucioduran.com/es/decisions/styled-components-over-tailwind"},{"text":"ADR-009acceptedGeist Font Family as Design System Foundation","url":"https://lucioduran.com/es/decisions/geist-font-system"},{"text":"Volver a Decisiones","url":"https://lucioduran.com/es/decisions"}],"structuredData":[{"@context":"https://schema.org/","@graph":[{"@type":"TechArticle","url":"https://lucioduran.com/es/decisions/single-accent-color-system","name":"ADR-004: Single Accent Color System over Category-Based Palette","headline":"Single Accent Color System over Category-Based Palette","datePublished":"2025-12-20","author":{"@id":"https://lucioduran.com/#person"},"isPartOf":{"@id":"https://lucioduran.com/#website"},"inLanguage":"en","about":"Software Architecture Decision Record","proficiencyLevel":"Expert","dependencies":"styled-components, ThemeProvider, CSS Custom Properties"},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https://lucioduran.com/"},{"@type":"ListItem","position":2,"name":"Decisiones de Arquitectura","item":"https://lucioduran.com/es/decisions"},{"@type":"ListItem","position":3,"name":"Single Accent Color System over Category-Based Palette"}]}]}],"contentHash":"3831e47828a3894200ab0b7cf08520d10bdb57e10ec98d6368218a9b1fcbee83","provenance":{"method":"Deterministic serialization of the server-rendered main element","source":"https://lucioduran.com/es/decisions/single-accent-color-system","hashAlgorithm":"sha256","hashScope":"JSON document fields before contentHash and provenance","sourceHTMLBytes":36851,"contentBytes":5801}}