01
Carbón, no negro
El lienzo oscuro es cálido y sobrio. Las superficies ganan nivel con valor y borde fino, no con glassmorphism ni sombras protagonistas.
devsigner / design system
Diseñar con criterio.
Una base pública para comunicar, construir interfaces densas y evolucionar productos sin convertir la identidad de marca en una plantilla rígida.
Principios
Una fuente de verdad práctica, no una galería de pantallas.
El sistema conserva una voz reconocible —carbón cálido, crema editorial, terracota limitado y geometría contenida— y deja que cada producto resuelva su propia semántica, densidad y flujo.
Se documentan decisiones repetibles antes que componentes exhaustivos: el propósito, el contexto de uso, los límites y la implementación mínima con HTML y CSS. Un patrón se formaliza solo cuando su semántica ha demostrado ser estable.
01 — Fundamentos
Lo canónico define el material, no cada pantalla.
La identidad se expresa con una paleta cálida, contraste editorial y formas mínimas. La composición, el producto y los estados se deciden en contexto.
02
Contraste editorial
Crema para lectura y titulares de presencia. La información que se escanea con rapidez puede cambiar a una sans o mono legible.
03
Energía limitada
Terracota para una acción prioritaria, una selección o una pieza compositiva. Nunca se interpreta como éxito, error o dato de mercado.
01.1 — Color
Marca estable; significado funcional independiente.
Los primitivos describen color. Los roles semánticos describen qué hace ese color en una interfaz. Los componentes consumen roles, nunca hexadecimales.
- Canvas
--ds-color-charcoal#1B1B1B - Surface
--ds-color-surface#242424 - Cream
--ds-color-cream#F9E9CB - Terracotta
--ds-color-terracotta#AF232B
01.2 — Tipografía
Una voz para leer; herramientas para operar.
La tipografía no necesita ser idéntica en un ensayo, un selector de mercado y una tabla. El rol determina la familia, la medida y el ritmo.
| Contexto | Token | Criterio |
|---|---|---|
| Comunicación y lectura | --ds-font-editorial | Titulares, manifiestos, portfolio y prosa de medida controlada; Merriweather refuerza la voz editorial. |
| Controles y navegación | --ds-font-ui | Acciones, filtros, formularios y metadatos cortos; prioriza reconocimiento y legibilidad en tamaños pequeños. |
| Datos y código | --ds-font-mono | Valores tabulares, precios, timestamps, snippets y código; usa columnas alineadas y no encoge cifras críticas. |
01.3 — Distribución de texto
Una columna para argumentar; varias para comparar.
El título siempre abre la sección en su propia fila. La distribución del cuerpo responde a la tarea de lectura, no a una plantilla de dos columnas.
Lectura continua
Usa una sola columna para fundamentos, explicaciones, decisiones y contenido que se comprende en secuencia. Limita la medida y permite que la tipografía editorial marque un ritmo de lectura cómodo.
Lectura comparativa
Usa dos columnas de cuerpo cuando dos ideas independientes se pueden escanear o comparar. La jerarquía no se divide: el título continúa arriba, antes de ambas.
En móvil vuelve a una columna. No uses esta composición para texto largo dependiente de un orden estricto ni para sustituir una tabla de datos.
01.3 — Ritmo y forma
Escala, bordes y elevación sostienen la composición.
El espacio negativo forma parte de la identidad. Un borde fino y un cambio sutil de superficie bastan para organizar la mayoría de grupos.
| Familia | Tokens | Uso |
|---|---|---|
| Color | --ds-color-* | Materiales de marca y estados funcionales base. |
| Tipografía | --ds-font-* | Editorial para comunicar; UI y mono para escanear, controlar y leer datos. |
| Tracking | --ds-tracking-* | Display 0 %, H1 +0.25 %, H2/H3 +0.5 %; títulos abiertos sin perder densidad editorial. |
| Espacio | --ds-space-0…9 | Ritmo compartido de 4 px a 112 px; no márgenes arbitrarios. |
| Forma | --ds-radius-* | Radio moderado: 0, 0.55, 1 y 1.5 rem; píldora solo para tags. |
| Elevación | --ds-shadow-* | Profundidad discreta, reservada para overlays o jerarquía real. |
| Motion | --ds-duration-* | 120, 180 y 280 ms con una curva funcional y sin espectáculo. |
Gramática geométrica
Círculo, cuadrado de radio sutil y triángulo son recursos expresivos, no iconos forzados. Úsalos en una composición con mucho espacio negativo, una forma dominante y hasta dos de apoyo. Las conexiones se dibujan con líneas cálidas y finas; no con neón, ruido o redes densas.
01.4 — Motion
La transición confirma un cambio; no lo explica.
Las duraciones son cortas, la curva es funcional y el estado final siempre queda completo sin animación. La interacción jamás depende de movimiento continuo.
120
Rápido
Feedback de control, borde o color. Usa --ds-duration-fast.
180
Estándar
Estados de botón y navegación. Usa --ds-duration-standard.
280
Lento
Entrada discreta de un overlay. Usa --ds-duration-slow solo si aporta orientación.
02 — Tokens semánticos
Una capa para adoptar el sistema sin acoplarse a valores crudos.
La taxonomía permite que cada proyecto extienda componentes y datos sin reinterpretar la marca. Conserva los primitivos, mapea los roles y añade tokens de componente solo cuando se estabilicen.
| Rol | Tokens | Aplicación |
|---|---|---|
| Canvas y superficies | --ds-canvas, --ds-surface, --ds-surface-muted | Estructuran el nivel de una zona; no convierten toda sección en tarjeta. |
| Texto y borde | --ds-text, --ds-text-muted, --ds-border-* | Separan lectura principal, apoyo y estructura. |
| Marca | --ds-brand-primary / --ds-brand-secondary | Los productos consumen roles agnósticos; terracota y crema permanecen en la capa primitiva. |
| Acciones | --ds-action-primary-* / --ds-action-contrast-* / --ds-action-secondary-* | Primary prioriza; contrast ofrece alta legibilidad; secondary conserva una alternativa neutra. |
| Foco y selección | --ds-focus, --ds-selection, --ds-surface-selected | Deben permanecer identificables sin depender de hover. |
| Estados funcionales | --ds-status-success|danger|warning|info | Pertenecen al contexto de producto y conservan significado propio. |
Consumo CSS
.notice {
background: var(--ds-surface-muted);
border: 1px solid var(--ds-border);
color: var(--ds-text);
}
.notice[data-state='warning'] {
border-color: var(--ds-status-warning);
background: var(--ds-status-warning-soft);
}03 — Patrones base
Decisiones que se reutilizan sin adelantar un catálogo completo.
Estos son fundamentos de composición. Cada producto puede convertirlos en componentes propios cuando tenga necesidades, anatomía y estados demostrados.
Contenido y navegación
Landmarks claros, un único h1, navegación como enlace real y etiquetas compactas para metadatos breves. La lectura editorial mantiene una medida de 60–75 caracteres.
Artículo / 6 min
Una jerarquía que explica primero y adorna después.Superficies y acciones
El canvas organiza; una superficie agrupa. Usa un borde para separar niveles. Terracota prioriza una acción de marca; crema funciona como acción de alto contraste sobre el canvas sin convertir el acento en un relleno omnipresente.
Metadatos y filtros
Los chips son filtros o clasificación secundaria, no botones de marca. Evita rellenarlos de terracota si el estado seleccionado ya puede indicarse con superficie y borde.
FundamentosAccesibleDocumentación
Datos densos
En tablas y mercados, tipografía mono, alineación numérica y separadores finos. Ganancia y pérdida usan estados funcionales, nunca el terracota de marca.
| Activo | Último | 24 h |
|---|---|---|
| BTC–USD | 67,532 | +2.41% |
| ETH–USD | 3,742 | −0.86% |
04 — Accesibilidad y responsive
El sistema debe seguir funcionando cuando cambia el contexto.
- Contraste y significadoEl texto y los controles alcanzan contraste suficiente sobre su superficie real. Los estados se expresan con texto, icono o estructura además de color.
- Foco y tecladoTodo control nativo conserva un foco crema visible con offset. El orden de tabulación coincide con la lectura y no depende de hover.
- Responsive desde el contenidoLas columnas colapsan antes de comprimir la lectura; los objetivos táctiles rondan o superan 44 px y no aparece scroll horizontal.
- Reduced motion
prefers-reduced-motionelimina transiciones y scroll suave. La información y las acciones permanecen completas sin animación.