System · Componentes
Once componentes, una sola voz
Cada pieza demuestra el sistema con sus tokens reales. La regla transversal: hairlines que separan sin encerrar, radios chicos, bronce solo como función, y el dato siempre en mono sobre papel.
Botón
- Primario
- Tinta sobre papel, invertido: fondo Tinta / texto Papel (15.12:1)
- Secundario
- borde Perla, texto Tinta, fondo transparente
- Hover
- opacity 0.85, --duration-fast + --ease-out-quart
- Prohibido
- relleno bronce con texto de cuerpo (falla AA); gradientes; sombras
Link
El protocolo se explica en el sistema de color y en el tono de voz.
- Color
- Bronce-texto (--color-accent, 5.39:1 AA) — nunca el bronce display en cuerpo
- Subrayado
- 1px, offset 3px — el link se reconoce sin depender del color
- Hover
- opacity 0.7, --duration-fast
Eyebrow / micro-label
Phase 5 · Design System
- Clase
- .eyebrow — sans 12px, UPPERCASE, tracking 0.16em, peso 500
- Color
- Tinta-eyebrow sobre papel (5.10:1 AA); sobre grafito: Bruma-quieta; sobre Panel: Bruma-quieta-panel
- Uso
- con moderación — es firma, no relleno
Data-field (plano de evidencia)
magnesio bisglicinato · 200 mg · lote NÓV·0426 · verificado NSF
- Clase
- .data-field — mono, 14px, tracking 0.02em, tabular-nums, Tinta
- Regla
- el dato NUNCA en color; el tick de estado en bronce display, micro-dosificado
- Motion
- el bloque APARECE: --duration-instant + --ease-proof; visible desde el primer paint
- Frontera
- lote/dosis/verificador = prueba (al frente) · conteo de sachets = plomería (no se comunica)
Method card (dossier) — con la firma compositiva F·P·L
Foundation
12 activos · base diaria completa
lote NÓV·0426 · verificado NSF
Performance
+ creatina 5g · + beta-alanina 3.2g
lote NÓV·0426 · verificado NSF
Longevity
+ omega-3 2g · + glicina 3g
lote NÓV·0426 · verificado NSF
- Superficie
- Nácar sobre papel, borde Perla, radio 4px
- Jerarquía
- nombre del tier (sans 500) + línea de composición (mono) — la ÚNICA variable entre tiers
- F·P·L
- cero color de tier, cero side-stripe, cero acabado propio (decision-log #44, Posición B)
- Evidencia
- el data-field vive en el primer plano de lectura de la card, no enterrado
Tabla dossier
| Activo | Dosis | Forma | Verificación |
|---|---|---|---|
| Magnesio | 200 mg | bisglicinato | NSF · COA 0426 |
| Vitamina D3 | 2000 UI | colecalciferol | USP · COA 0426 |
| Omega-3 | 2 g | EPA/DHA 3:2 | IFOS · COA 0426 |
- Header
- sans 12px uppercase, tracking micro, Tinta-eyebrow
- Filas
- border-bottom Perla 1px — separan, no encierran
- Dato numérico
- mono con tabular-nums, alineado en columna
- Prohibido
- side-stripe de color, zebra striping, filas coloreadas por tier
Badge de estado
verificado por tercerosen curso
- Verificado
- tick bronce display + texto mono en Tinta — el tick marca estado, no colorea el dato
- Neutro
- borde Perla, texto Tinta-sub
- Prohibido
- sello inflado, escudo, badge saturado, muro de certificaciones
Input
- Campo
- fondo Papel, borde Perla, radio 4px, texto Tinta
- Focus
- outline 2px bronce-texto, offset 2px (:focus-visible global)
- Label
- eyebrow arriba del campo; nunca placeholder-como-label
Divisor / hairline
Una sección termina aquí.
Y la siguiente respira antes de empezar.
- Valor
- 1px Perla — separa, no encierra
- Ritmo
- agrupaciones tight, separaciones generosas (base 4)
- Prohibido
- cards anidadas, todo-en-cards, bordes gruesos
Colofón (chrome de tapa)
Última actualización: 7 de julio de 2026commit bb27bd9 · repo
- Campo
- Grafito — el chrome del sitio es tapa, nunca superficie de trabajo
- Texto
- Bruma-sub (AAA); links Bruma con subrayado
- Regla
- el mundo grafito no tiene acento — el bronce jamás aparece aquí
Breadcrumb / índice de fase
- Registro
- mono 11px, separador ·, actual en Tinta, ancestros en bronce-texto
- Uso
- navegación curada de Phase 6 — el sitio se recorre como un libro, no como un árbol