DSATHL · CodexDesign System Analysis · interno

Preview navegable · 02 agosto 2026

Un catálogo con
humano en el loop.

Análisis del marketplace público: identidad, tokens, catálogo, instalación, preview embebido y contrato de validación.

Abrir DESIGN.mdVer tokens JSON

Fuente: marketplace público · análisis del propio producto

validation-report.json
STATUS   PASSED
ERRORS   0
WARNINGS 3 documented
TOKENS   38 parsed
SURFACES 4 primary
SOURCE   local HTML/CSS

Exhibit A

Identidad visual

La interfaz se comporta como un archivo curado: tinta para el contexto, lima para actuar, naranja para señalar y crema para dar aire.

01

Curaduría

Las tarjetas blancas, el borde fino y el grid adaptable presentan recursos como piezas seleccionadas.

↗

Acción humana

La instalación y la apertura en Codex son explícitas; la aprobación permanece del lado de la persona.

DS

Documentación

Preview, Markdown, JSON y reporte se muestran como capas relacionadas del mismo contrato.

Exhibit B

Color tokens

Muestras derivadas del CSS del marketplace. El preview usa una estética neutral de documentación y no añade tokens fuera del contrato.

#17211Dink
#D7F36Alime
#FF704Eorange
#F5F5EFcream
#FFFFFFpaper
#65736Dmuted
#DCE2D9line
#B7C4BDsoftText

Exhibit C

Typography scale

Inter / system sans · Georgia accent · 16px / 1.5
Hazlo claro. Hazlo trazable.

Los títulos grandes construyen carácter; la metadata pequeña permite comparar recursos sin ruido.

DISPLAY 56px / HEADING 40px / CARD 23px / SMALL 12px

Exhibit D

Component inventory

Muestras abstractas de los componentes observados, con estados y separación de responsabilidades.

01 · Search input
Buscar por nombre o capacidad… ⌕
44px · pill · borde line
02 · Resource card
DS
Design System AnalysisTokens · Components · ValidationPaper · 25px padding · hover lift 4px
03 · CTA states
Abrir en CodexGitHub ↗
Default · hover · focus · copied
04 · Install panel
Solicitud para Codexprompt → review → approve
Lime surface · dark code card · manual fallback

Exhibit E

Responsive behavior

El marketplace conserva la prioridad de búsqueda, catálogo y acción mientras reduce navegación y columnas en mobile.

1120pxcontenedor editorial máximo
700pxbreakpoint mobile observado
1 colhero, instalación y footer apilados
44pxtarget recomendado para controles

Exhibit F

Validation contract

✓ PASSED · SourceHTML, CSS, modal, previews y app.js trazables.
✓ PASSED · TokensReferencias duras válidas y derivadas del DESIGN.md.
✓ PASSED · ResponsiveDesktop, mobile y cambios de composición documentados.
! WARNING · Focus runtimeLa matriz completa de teclado requiere una pasada interactiva.
! WARNING · Codex protocolcodex://new depende de Codex Desktop instalado.
PASSEDEl análisis estático pasó; las advertencias quedan documentadas.