Identidad y tokens de color
La interfaz usa superficies claras, texto de alta legibilidad, azul de acción y estados semánticos separados.
canvasDefault
#FFFFFF
canvasSubtle
#F6F8FA
fgDefault
#1F2328
accent
#0969DA
success
#1A7F37
danger
#D1242F
Escala tipográfica
display · 48 / 700
Build together
heading 2 · 32 / 600
Ship with confidence
heading 3 · 24 / 600
A product section
body · 16 / 400
La escala mantiene lectura cómoda en contenido editorial y documentación técnica.
git status --short
Inventario de componentes
Global header
Identidad, navegación, búsqueda y acciones de cuenta.
defaultcompactfocus-visibleHero CTA
Heading, email signup y acciones primarias.
focusinvaliddisabledFeature section
Eyebrow, heading, body, enlace y visualización.
loadingreduced-motionStatus callout
Información, éxito, atención y riesgo sin depender solo del color.
infosuccessdangerResponsive behavior
| Rango | Comportamiento esperado |
|---|---|
| 320–543px | Header compacto, una columna, display 36px y CTAs apilados. |
| 544–767px | Grilla flexible; dos columnas cuando el contenido lo permite. |
| 768–1011px | Header regular y secciones de dos zonas. |
| 1012–1279px | Contenedor amplio con gutters regulares. |
| 1280px+ | Contenido limitado a 1280px; el viewport no estira la lectura. |
Procedencia y validación
El análisis combina observación del homepage público con referencias de layout, responsive y color de Primer. Los valores se deben revalidar si cambia el sitio, el tema, el locale o el estado de sesión.
✓ PASSED — contrato, tokens JSON, componentes, preview y metadata presentes.
Fuente: GitHub · Referencias: Primer layout, responsive y color.