Escala de grises — fase wireframe · Sistema atómico de componentes
--note #1455c8 · --note-bg #eaf1fb · --warn #b45309
| Token CSS | Tamaño | Line-height | Peso | Familia | Uso |
|---|---|---|---|---|---|
| .t-display | 48px | 1.05 | 800 | Inter | Hero principal, portada |
| .t-h1 | 40px | 1.1 | 800 | Inter | Título de página |
| .t-h2 | 32px | 1.15 | 700 | Inter | Títulos de sección |
| .t-h3 | 24px | 1.2 | 700 | Inter | Sub-secciones |
| .t-h4 | 20px | 1.25 | 600 | Inter | Bloques, cards feature |
| .t-h5 | 18px | 1.3 | 600 | Inter | Labels de componente |
| .t-body-l | 18px | 1.55 | 400 | Inter | Lead paragraph |
| .t-body | 16px | 1.5 | 400 | Inter | Cuerpo de texto |
| .t-body-s | 14px | 1.45 | 400 | Inter | Meta, caption, aide |
| .t-cap | 12px | 1.35 | 600 | Inter | Etiqueta uppercase |
| .t-mono | 12px | normal | 400 | IBM Plex Mono | Código, rutas, meta técnica |
| .t-eyebrow | 11px | 1.2 | 700 | Inter | Eyebrow de sección, mega nav |
--display = Inter · --body = Inter · --mono = IBM Plex Mono.muted → color: var(--ink-4) · .strong → font-weight: 700
.muted aplica color: var(--ink-4). Combinar con cualquier clase tipográfica. Ej: <p class="t-body-s muted">
.pill default: border var(--ink) · bg white.pill--solid bg: var(--ink) · color: white.pill--ghost border: var(--line) · color: var(--ink-3)
.pill--status-open bg: var(--ink) — convocatoria activa.pill--status-closed tachado — cerrada.pill--status-pending hatch diagonal — en revisión
.badge mono 10px · min-width 18px · bg var(--ink) · border-radius 9px.field flex-col gap-6px · .field__label 12px 600 · .field__hint 11px var(--ink-4) · .field--error .input border 2px var(--ink) · .field__error 11px bold
Los representantes guatemaltecos aseguraron su participación tras los clasificatorios regionales disputados en Panamá.
Nueve décadas de historia, de federaciones, de atletas que han llevado el nombre de Guatemala al mundo entero. Una historia de esfuerzo y dedicación.
.grid-12 también disponible para layouts de 12 columnas.grid grid-2 para magazine · grid grid-3 para cards · grid grid-4 para federaciones.
--container: 1248px.--s1:4px · --s2:8px · --s3:12px · --s4:16px · --s5:24px · --s6:32px · --s7:48px · --s8:64px · --s9:80px · --s10:96px
La Federación de Atletismo de Guatemala, fundada en 1952, es el organismo rector del atletismo federado en el territorio nacional, afiliada a World Athletics y al Comité Olímpico Guatemalteco.
| Componente | Default | Hover | Focus | Active / Seleccionado | Disabled | Error | Loading | Vacío |
|---|---|---|---|---|---|---|---|---|
| .btn | bg ink · color white | bg white · color ink | outline 2px ink | :active — scale 0.98 | [disabled] opacity 0.4 | n/a | .btn--loading pulse opacity | n/a |
| .btn--secondary | transparent · border ink | bg ink · color white | outline 2px ink | :active scale 0.98 | opacity 0.4 | n/a | n/a | n/a |
| .input | border ink-5 | border ink-3 | outline 2px ink | n/a | [disabled] opacity 0.5 | .field--error border 2px ink | n/a | placeholder color ink-5 |
| .select | border ink-5 | border ink-3 | outline 2px ink | n/a | [disabled] opacity 0.5 | mismo que .input error | n/a | n/a |
| .card | border line · bg white | border ink · translateY(-2px) shadow 4px 4px ink | outline 2px ink | n/a | n/a | n/a | .skeleton bg anim | .empty placeholder |
| .tabs a/.tabs button | color ink-4 · border-b transparent | color ink | outline 2px ink | .is-active color ink · border-b 2px ink | n/a | n/a | n/a | n/a |
| .pager a | border line · color ink-3 | border ink · color ink | outline 2px ink | .is-current bg ink · color white | n/a | n/a | n/a | n/a |
| .fed-card | border line · bg white | border ink · shadow · translateY(-2px) | outline 2px ink | n/a | n/a | n/a | .skeleton en logo | n/a |
| .event-card | border line | border ink | outline 2px ink | n/a | n/a | n/a | n/a | n/a |
No encontramos contenido con los filtros seleccionados. Intenta con términos diferentes o elimina los filtros activos.
| Atributo | Tipo | Descripción | Ejemplo |
|---|---|---|---|
data-annot |
string | Nombre/título de la anotación (requerido) | data-annot="Hero Principal" |
data-annot-desc |
string | Descripción detallada del componente | data-annot-desc="Slider con 3 posts destacados" |
data-annot-wp |
string | Referencia de template o WP_Query | data-annot-wp="WP_Query · posts_per_page=3 · sticky" |
data-annot-pos |
enum | Posición del pin numerado | top-right · top-left · bottom-right · bottom-left · mid-right · mid-left |
Nueve décadas de historia federativa y atletas que llevan a Guatemala al mundo.
.page-with-annots crea un grid de 2 columnas (contenido + panel) automáticamente..has-annot = position:relative (necesario para posicionar el pin)..block__element--modifier.wf- → componentes globales.t- → clases tipográficas.lab- → solo en design system.spec- → solo en design system