design system

Figma

Código y diseño, con una frontera explícita.

Las foundations v1 ya están sincronizadas en Figma; el contrato versionado del repositorio continúa gobernando nombres, valores y significado.

Abrir Figma ↗Ver skill de sincronización

Auditoría · 23 agosto 2026

Foundations cerradas; catorce componentes verificados.

Se verificaron cuatro colecciones, 116 variables, modos Dark/Light, ocho estilos tipográficos, cinco estilos de pintura, dos elevaciones y catorce componentes Core.

Foundations43 primitivos de color, 35 roles semánticos, 35 variables de dimensión y 3 familias tipográficas.
ComponentesCatorce contratos verificados; Badge and tag permanece implementado hasta cerrar su QA final.
Fuente contractualJSON versionado y CSS gobiernan; Figma representa el sistema y conserva bindings.

Semántica

El material tiene nombre; el producto consume intención.

terracotta y cream permanecen como primitivos. Las composiciones y componentes usan brand-primary, brand-secondary, action-primary y action-contrast.

Formas

Cuatro tratamientos canónicos: Primary y Secondary, cada uno en Filled y Outline. Las doce formas están enlazadas a roles de marca.

Títulos

Display 0 %, H1 +0,25 % y H2/H3 +0,5 %. El ajuste vive en estilos Figma y en los tokens portables.

Construcción

De foundations a patrones verificables.

  1. 01

    Variables

    Primitivos y semánticos separados; roles semánticos con modos Light y Dark.

  2. 02

    Fundamentos

    Color, tipografía, espacio, radios, bordes y motion documentados.

  3. 03

    Componentes

    Propiedades, estados, foco, disabled y bindings reales.

  4. 04

    Patrones

    Ejemplos editorial, producto y datos; no pantallas maestras rígidas.