✓ WCAG 2.2 AA · 5/5 PASS

Sistema de Diseño y Marca
para Documentos HTML

🏷️ Raíz SaaS 📅 2026-06-12 🎨 Estilo: Technical · TOC: Sticky Sidebar 🔤 Sora + Inter

La skill sistema-diseno-marca-html ejecuta un wizard de 10 preguntas que captura la identidad de marca, valida el contraste WCAG 2.2 AA y deriva automáticamente 12 CSS custom properties (--md-*) que todos los conversores de markdown a HTML consumen. Una sola configuración, documentación 100% en marca.

1 Paleta de Color

✓
Background
#1B4332
--md-bg
Surface
#235842
--md-surface
✓
Accent
#52B788
--md-accent
✓
Text
#F7F7F2
--md-text
Link
#60BC91
--md-link
Code BG
#20513C
--md-code-bg
Success
#10A85C
--md-success
Warn
#C87C10
--md-warn
Par de colores Ratio de contraste Requisito WCAG 2.2 AA Resultado
--md-text sobre --md-bg 10.31:1 Mínimo 4.5:1 (texto cuerpo) ✓ PASS
--md-accent sobre --md-bg 4.48:1 Mínimo 3:1 (elementos UI) ✓ PASS
--md-link sobre --md-bg 4.80:1 Mínimo 4.5:1 (links = texto) ✓ PASS
--md-success (indicador) derivado Verde HSL-ajustado al fondo ✓ PASS
--md-warn (indicador) derivado Ámbar HSL-ajustado al fondo ✓ PASS

2 12 CSS Custom Properties

Token Valor Propósito
--md-bg#1B4332Fondo del documento
--md-surface#235842Cards, callouts, blockquotes
--md-border#2C6E52Divisores, bordes de tabla
--md-text#F7F7F2Texto cuerpo
--md-text-mutedrgba(247,247,242,0.68)Captions, metadata, footers
--md-accent#52B788CTAs, headers de callout
--md-accent-softrgba(82,183,136,0.14)Fondos de acento, hover
--md-code-bg#20513CCódigo inline, bloques
--md-link#60BC91Hipervínculos
--md-link-hover#7CC8A4Estado hover de links
--md-success#10A85COK / aprobado / correcto
--md-warn#C87C10Advertencia / TODO

3 Tipografía en Uso

Informe de rendimiento — Parcela Norte Q2 2026

Análisis de producción por variedad de cereal

El rendimiento de la parcela Norte alcanzó 4.8 T/ha en trigo blando, superando la media provincial en un 12%. La toma de datos se realizó mediante el módulo de sensórica IoT de Raíz SaaS v2.4. Consulte el dashboard de parcelas para el detalle por cuartel.

Generado el 12 jun 2026 · Raíz SaaS · Versión del informe 1.0.3

Acceso rápido: SELECT avg_yield FROM parcelas WHERE id='NORTE-01'

Nota del sistema
La paleta fue derivada automáticamente desde #1B4332 (primary) y validada con brand_palette_validator.py. Todos los tokens cumplen WCAG 2.2 AA sin ajuste manual.
Advertencia de accesibilidad
No uses colores de acento directamente como fondo de texto largo. El token --md-accent-soft (14% opacidad) es el correcto para superficies de callout.
Python · brand_palette_validator.py stdlib only · no LLM calls
# Ejecutado durante el wizard de onboarding de Raíz SaaS from brand_palette_validator import validate result = validate( primary="#1B4332", accent="#52B788" ) # Resultado: verdict = "PASS" (5/5 checks) # Body text contrast: 10.31:1 ✓ # Accent UI contrast: 4.48:1 ✓ # Link contrast: 4.80:1 ✓ palette = result["derived_palette"] print(palette["--md-bg"]) # "#1B4332" print(palette["--md-accent"]) # "#52B788" print(palette["--md-link"]) # "#60BC91" (enforced 4.5:1)
✓ Configuración guardada ✓ WCAG 2.2 AA validado 12 tokens derivados Sora + Inter activos ⚠ Requiere Google Fonts CDN

4 Config Generada

Persistida en ~/.config/markdown-html/design-system.json · Leída automáticamente por md-document, md-review y md-slides.

{ "setup_completed_at": "2026-06-12T10:30:00", "default_output_dir": "./markdown-html-out/", "brand": { "primary": "#1B4332", // Verde bosque oscuro — identidad Raíz SaaS "accent": "#52B788" // Verde esmeralda — CTA + links }, "typography": { "heading_font": "Sora", "body_font": "Inter" }, "design_style": "technical", "code_theme": "dark", "toc": { "behavior": "sticky-sidebar" }, "company_name": "Raíz SaaS", "derived_palette": { "--md-bg": "#1B4332", "--md-surface": "#235842", "--md-border": "#2C6E52", "--md-text": "#F7F7F2", "--md-text-muted": "rgba(247,247,242,0.68)", "--md-accent": "#52B788", "--md-accent-soft": "rgba(82,183,136,0.14)", "--md-code-bg": "#20513C", "--md-link": "#60BC91", "--md-link-hover": "#7CC8A4", "--md-success": "#10A85C", "--md-warn": "#C87C10" } }
Skill: sistema-diseno-marca-html v1.0.0 · MIT CULTIVA IA · Branding & Diseño Generado 2026-06-12