Esta página muestra cómo funciona el design system de este sitio: una spec en Markdown por componente, el componente construido a partir de ella y las verificaciones que mantienen a ambos en sincronía. Para quien desarrolla, muestra a partir de qué construir: cada valor es un token y el build falla si un componente usa uno fijo. Para quien diseña, muestra el razonamiento detrás de las decisiones, como por qué cada rol de texto tiene un solo tamaño y cada espacio es múltiplo de 8px.
Spec
design-system/components/button.md
# Button
## Props
| Prop | Values |
| --- | --- |
| `href` | string |
| `type` | `submit`, `button` |
| `variant` | `primary` (default), `secondary`, `ghost` |
| `external` | boolean |
| `download` | boolean |
| `size` | `default`, `large` |
## Tokens
`--cmp-button-*` (height, padding-x, radius, font-weight, primary and secondary colors), `--sys-motion-*`.Componente
Verificación
Tema: oscuroclaroTokens usados: 21 de 21Valores fijos en el código: 0Texto de cuerpo sobre la página: 15.9:117.5:1
Calculado a partir del CSS del Button en cada build. El build falla si no es 0.
Las primitivas detrás de los tokens: neutro para el tema oscuro, papel para el tema claro y el acento violeta.
Spec de tokensdesign-system/tokens.md
El contraste se mide contra el fondo de la página.
Cada rol es un conjunto de tokens: familia, tamaño, interlineado, peso y rastreo. Los títulos display y de sección son fluidos: se escalan entre dos tamaños según el ancho de la ventana. Todo lo demás es fijo, así que el texto de cuerpo respeta el tamaño de fuente del navegador de quien lee.
--sys-type-display-size--sys-type-display-leading--sys-type-display-weight--sys-type-display-tracking--sys-font-sans--sys-type-title-size--sys-type-title-leading--sys-type-title-weight--sys-type-title-tracking--sys-font-sans--sys-type-heading-size--sys-type-heading-leading--sys-type-heading-weight--sys-type-heading-tracking--sys-font-sans--sys-type-lede-size--sys-type-lede-leading--sys-type-body-weight--sys-font-sans--sys-type-body-size--sys-type-body-leading--sys-type-body-weight--sys-font-sans--sys-type-small-size--sys-type-small-leading--sys-type-body-weight--sys-font-sans--sys-type-caption-size--sys-type-caption-leading--sys-type-body-weight--sys-font-sans--sys-type-stat-size--sys-type-stat-leading--sys-type-label-weight--sys-font-monoUn paso mide 8px, escrito en rem. Medio paso (4px) se reserva para pares muy juntos, como un ícono y su etiqueta. Los componentes nunca usan un paso directamente: usan los nombres semánticos de la última columna.
| Paso | rem | px | Escala | Se usa como |
|---|---|---|---|---|
space.half | 0.25rem | 4px | space.hairline-gap | |
space.1 | 0.5rem | 8px | space.stack-xs | |
space.2 | 1rem | 16px | space.gutterspace.stack-sm | |
space.3 | 1.5rem | 24px | space.stack-mdsize.swatch | |
space.4 | 2rem | 32px | space.gutterspace.stack-lg | |
space.5 | 2.5rem | 40px | size.control-heightsize.mark-height | |
space.6 | 3rem | 48px | space.sectionspace.stack-xlsize.logo-heightsize.chip-heightsize.control-height-large | |
space.7 | 3.5rem | 56px | space.section | |
space.8 | 4rem | 64px | size.header-height | |
space.10 | 5rem | 80px | Ningún token semántico lo referencia | |
space.12 | 6rem | 96px | size.scroll-offset | |
space.16 | 8rem | 128px | Ningún token semántico lo referencia |