Guía de convenciones
Convenciones de trabajo
Convenciones e información para programar
Convenciones e información para programar
Convenciones e información para programar
{{< include “compiled/convenciones.md” >}}
Manual de estilo visual
Mantra de diseño
- HTML plano siempre que se pueda; cero JS salvo utilidad explícita (p.ej., Copiar Todos).
- Todo tiene índice, sitemap y breadcrumbs simples.
- Exponer estado: footer con hora CLT, versión y “PROD”.
- Explícito > Implícito. Nombres y rutas previsibles.
- Ligero, auditable, sin dependencias innecesarias.
Tokens mínimos (CSS común)
:root{--fg:#111;--muted:#666;--bg:#fff;--line:#e6e6e6;--accent:#0a58ca}
html{color-scheme:light dark}
body{font-family:system-ui; color:var(--fg); background:var(--bg); line-height:1.55}
a{color:var(--accent)}Tokens y componentes reutilizables
Filosofía
- Flat: sin sombras ni radios, bordes visibles.
- Denso: información compacta, tipografía legible (IBM Plex Sans), mono para comandos (JetBrains Mono).
- Color funcional: green/blue/amber/red para estado (OK/INFO/WARN/ERROR).
- Performance = diseño: HTML/CSS/JS mínimos, sin toolchains pesados.
Tokens (CSS variables)
| Token | Valor | Uso |
|---|---|---|
--bg |
#f6f7f8 |
Fondo app |
--paper |
#ffffff |
Superficies |
--ink |
#0f1113 |
Texto principal |
--muted |
#4b5563 |
Texto secundario |
--line |
#d5dbe3 |
Líneas suaves |
--line-strong |
#a9b3c2 |
Líneas fuertes |
--c-green |
#0b7e59 |
OK |
--c-blue |
#3763e0 |
Info/enlaces |
--c-amber |
#d97706 |
Warn |
--c-red |
#c0352b |
Error |
Componentes
- Pills:
.pill .pill--ok .pill--err - Dots de estado:
.dot.ok .dot.err - Tabla densa: bordes en
th, td, encabezado con zebra controlada y sticky si es necesario. - Routebar (breadcrumbs): bloque prominente con dominio y ruta.
Tipografía y prosa
- UI: IBM Plex Sans; Código: JetBrains Mono; Artículos largos: opcional serif (Literata/Source Serif) si el caso lo amerita.
- Ancho de lectura recomendado: ~68ch; interlínea 1.62.
A11y / SEO / Rendimiento
- Contraste AA, foco visible,
prefers-reduced-motionrespetado. <title>y<meta description>específicos.- CSS ≤40KB gz; JS crítico ≤50KB gz.