Aligned by design

Design System Guidelines

Repositorio independiente para convertir la identidad Meridian en un sistema de producto: tokens DTCG/OpenPencil, componentes documentados, estados accesibles y patrones listos para Figma/Pencil.dev.

Versiónv0.1
Actualizado2026-06
PropietarioEquipo de marca
secciones8
3capas de tokens
8secciones auditables
26component examples
AAcontraste por estado
1.1

Arquitectura de tokens

Primitive → Semantic → Component core

La capa primitive trae valores del brand guide; semantic asigna intención por modo; component fija decisiones por UI. Esto permite que Figma, Pencil.dev y CSS consuman el mismo contrato.

01

Primitive

Color brand/neutral, tipografía, espacio, radio, shadow, motion, z-index.

color.primitive.brand.500
02

Semantic

Roles de interfaz: fondo, superficie, texto, borde, acción, foco, status.

color.semantic.action.primary.background.default
03

Component

Button, input, card, badge, modal y navegación con estados explícitos.

component.button.primary.background.hover
TokenLightDarkUso
background.default #FFFFFF #0E1116 Canvas base
surface.default #FFFFFF #181D25 Cards, modals, tables
text.primary #0E1116 #F7F9FC Lectura principal
action.primary.bg #2348E0 #4F6FEE CTA, focusable actions
focus.ring rgba(35,72,224,.28) rgba(126,153,246,.34) Teclado y accesibilidad
2.1

Secciones heredadas del brand guide

Validated and integrated core

El design system no copia el brand book completo: integra las secciones que gobiernan UI y handoff. Estrategia, voz, aplicaciones físicas y legal permanecen en el brand guide; color, tipografía, accesibilidad, dark mode, iconografía, grid, motion y data-viz viven aquí como reglas operativas.

3.4

Color palette

Escalas brand/neutral, pares AA y roles semánticos para light/dark.

3.5

Typography

Space Grotesk, Inter y Space Mono convertidas a tokens de texto y estilos.

3.6

Accessibility

Contraste, foco visible, ARIA y estados no dependientes sólo de color.

3.7

Dark mode

Re-mapeo por roles, sin inversión literal de assets ni swatches.

3.8

Iconography

Tabler-style outline, grid de 24 px, stroke 2 px y tamaños 16/20/24.

3.12

Grid & spacing

Escala 8pt, contenedores, gutters y breakpoints para producto.

3.13

Motion

Duración, easing, reduced motion y estados loading.

3.14

Data visualization

Series, leyendas y estados de tabla/reportes sin depender sólo de color.

3.1

Átomos

Color, type, space, shape, depth, icon core

Los átomos son las variables que Figma debe importar como primitives y que CSS consume como custom properties. Cada átomo muestra token path, valor visual, tipo DTCG y scope de uso.

Colorbrand, neutral, status Typefamilias y jerarquía Spaceescala 4-96 px Shaperadius + border Depthshadow + opacity Icon16, 20, 24 px

Color primitives

Brand cobalt

50100200300400500600700800900

Neutral scale

050100200300400500600700800900
success#1A8F5E warning#C77A11 danger#D03A3A info#2348E0

Type scale

Aa
Display72 / 1.08 · Space Grotesk Bold
Aa
Heading48, 34, 24 · Space Grotesk Bold
Aa
Body16 / 1.55 · Inter Regular
01
Mono12-14 · Space Mono

Spacing 8pt

14px
28px
312px
416px
524px
632px
748px
864px
996px

Gaps, padding, gutters y ritmos verticales salen de esta escala.

Radius + elevation

sm6md10lg16full
1cards2popover3modal

Icon atoms

16px 20px 24px

Grid 24 px, stroke 2 px, outline sin rellenos decorativos.

Border + opacity

default1px strong2px
disabled .45 overlay .68
4.1

Moléculas

Small reusable patterns core

Cada molécula documenta variantes, estados, ARIA y el token responsable de cada decisión visual. Los ejemplos usan `data-component` para que agentes puedan parsearlos.

Buttons

Field

Tabs

color.semantic.text.primary → color.primitive.neutral.900

Alerts

Tokens exportados para Figma y Pencil.dev.
5.1

Componentes

Product UI examples core

Los componentes están pensados para SaaS/admin: densos, escaneables, sin composición de marketing. Cada uno expone estructura y estados suficientes para implementación.

Approved

Release checklist

Generación, tokens, accesibilidad y handoff listos para publicar.

Token audit

TokenTipoModoEstado
action.primary.bgcomponent.button.primary.backgroundcolorlightdarkok
input.border.errorcomponent.input.border.errorcolorglobalok
motion.duration.fastduration.fastdurationglobalok
6.1

Layouts

Responsive product composition rec

Los layouts traducen la sección de grid/espaciado del brand guide a patrones de producto: navegación lateral, superficies de tabla, formularios y documentación.

sm640
Container
100% - 32
Grid
1 col
Uso
Mobile forms
md768
Container
720
Grid
6 col
Uso
Tablet docs
lg1024
Container
960
Grid
12 col
Uso
Dashboard
xl1200
Container
1200
Grid
12 col
Uso
Desktop workspace
7.1

Motion, z-index y estados

Interaction system rec

La guía de motion se vuelve tokens de duración/easing; z-index evita stacks arbitrarios; los estados garantizan que hover/focus/disabled/loading/error tengan definición visible y accesible.

Motion

fast 120ms · base 180ms · slow 280ms · easing standard cubic-bezier(.2,.8,.2,1).

Z-index

base 0sticky 100overlay 800modal 900toast 1000

State matrix

8.1

Exportación y handoff

Figma / Pencil.dev / code core

El contrato vive en design-tokens.json: formato DTCG, metadata Figma y extensiones OpenPencil. El build valida aliases, secciones y ejemplos `data-component`.

DTCG

$type, $value, alias y descripciones.

Figma

Collections, modes, scopes y code syntax para variables.

OpenPencil

Manifest de componentes, estados, ARIA y atributos para agentes.

{
  "component.button.primary.background.default": "{color.semantic.action.primary.background.default}",
  "component.button.primary.background.hover": "{color.semantic.action.primary.background.hover}",
  "component.button.primary.focus.ring": "{color.semantic.focus.ring}"
}
design-tokens.json npm run build
Copiado