Presets curados

Empieza con una dirección, no con un lienzo vacío

Cada tema es una configuración completa y editable: color, gráficos, radio, tipografía, ritmo e iconos. El mismo id viaja por la web, CLI, MCP y VS Code.

Crear el mío Catálogo JSON

Claro

Señal

Actividad semanal

+18%

Oscuro

Señal

Actividad semanal

+18%

Foundation

El punto de partida monocromo y equilibrado para productos, prototipos y nuevos proyectos.

productoneutroequilibrado

Base: neutral
Acento: base
Radio: default
Iconos: Lucide

Legibilidad clara

1 nota de contraste

oscuro · destructive-foreground / destructive· WCAG 2.77 · APCA -56.3

Abrir en el estudio

bmV1dHJhbHxiYXNlfGRlZmF1bHR8ZGVmYXVsdHxpbnRlcnxpbnRlcnxtb25vfGRlZmF1bHR8ZGVmYXVsdHxkZWZhdWx0fGRlZmF1bHR8bHVjaWRl

Claro

Señal

Actividad semanal

+18%

Oscuro

Señal

Actividad semanal

+18%

Cobalt Workspace

Un workspace azul nítido, con neutros slate y titulares geométricos para productos SaaS enfocados.

saasworkspaceazul

Base: slate
Acento: blue
Radio: lg
Iconos: Lucide

Legibilidad clara

3 notas de contraste

oscuro · primary-foreground / primary· WCAG 3.60 · APCA -66.7
oscuro · destructive-foreground / destructive· WCAG 2.76 · APCA -56.1
oscuro · sidebar-primary-foreground / sidebar-primary· WCAG 3.60 · APCA -66.7

Abrir en el estudio

c2xhdGV8Ymx1ZXxibHVlfGxnfGludGVyfGdyb3Rlc2t8bW9ub3xkZWZhdWx0fGRlZmF1bHR8ZGVmYXVsdHxkZWZhdWx0fGx1Y2lkZQ

Claro

Señal

Actividad semanal

+18%

Oscuro

Señal

Actividad semanal

+18%

Verdant Operations

Tipografía operativa compacta, acentos verdes de datos e iconos Tabler para herramientas de control.

operacionesdatosverde

Base: zinc
Acento: green
Radio: md
Iconos: Tabler

Legibilidad clara

5 notas de contraste

claro · primary-foreground / primary· WCAG 4.17 · APCA -71.7
claro · sidebar-primary-foreground / sidebar-primary· WCAG 4.17 · APCA -71.7
oscuro · primary-foreground / primary· WCAG 8.03 · APCA 56.1
oscuro · destructive-foreground / destructive· WCAG 2.77 · APCA -56.3
oscuro · sidebar-primary-foreground / sidebar-primary· WCAG 8.03 · APCA 56.1

Abrir en el estudio

emluY3xncmVlbnxncmVlbnxtZHxpbnRlcnxpbnRlcnxtb25vfHJlbGF4ZWR8c218cmVsYXhlZHxkZWZhdWx0fHRhYmxlcg

Claro

Señal

Actividad semanal

+18%

Oscuro

Señal

Actividad semanal

+18%

Editorial Rose

Ritmo de lectura con serif, neutros stone cálidos y acentos rose contenidos.

editorialcontenidoserif

Base: stone
Acento: rose
Radio: sm
Iconos: Phosphor

Legibilidad clara

5 notas de contraste

claro · primary-foreground / primary· WCAG 4.50 · APCA -72.6
claro · sidebar-primary-foreground / sidebar-primary· WCAG 4.50 · APCA -72.6
oscuro · primary-foreground / primary· WCAG 3.60 · APCA -65.0
oscuro · destructive-foreground / destructive· WCAG 2.77 · APCA -56.3
oscuro · sidebar-primary-foreground / sidebar-primary· WCAG 3.60 · APCA -65.0

Abrir en el estudio

c3RvbmV8cm9zZXxyb3NlfHNtfHNlcmlmfHNlcmlmfG1vbm98bmFycm93fGxnfHJlbGF4ZWR8cmVsYXhlZHxwaG9zcGhvcg

Claro

Señal

Actividad semanal

+18%

Oscuro

Señal

Actividad semanal

+18%

Violet Studio

Acciones violet expresivas, geometría generosa y tipografía display para productos creativos.

creativoestudioviolet

Base: neutral
Acento: violet
Radio: xl
Iconos: Phosphor

Legibilidad clara

3 notas de contraste

oscuro · primary-foreground / primary· WCAG 4.22 · APCA -71.9
oscuro · destructive-foreground / destructive· WCAG 2.77 · APCA -56.3
oscuro · sidebar-primary-foreground / sidebar-primary· WCAG 4.22 · APCA -71.9

Abrir en el estudio

bmV1dHJhbHx2aW9sZXR8dmlvbGV0fHhsfGludGVyfGdyb3Rlc2t8bW9ub3xkZWZhdWx0fGxnfGRlZmF1bHR8cmVsYXhlZHxwaG9zcGhvcg

Claro

Señal

Actividad semanal

+18%

Oscuro

Señal

Actividad semanal

+18%

Ember Commerce

Acciones orange cálidas y superficies stone para tiendas, catálogos y flujos de checkout.

comerciocálidoorange

Base: stone
Acento: orange
Radio: lg
Iconos: Hugeicons

Legibilidad clara

5 notas de contraste

claro · primary-foreground / primary· WCAG 3.44 · APCA -64.2
claro · sidebar-primary-foreground / sidebar-primary· WCAG 3.44 · APCA -64.2
oscuro · primary-foreground / primary· WCAG 6.84 · APCA 49.6
oscuro · destructive-foreground / destructive· WCAG 2.77 · APCA -56.3
oscuro · sidebar-primary-foreground / sidebar-primary· WCAG 6.84 · APCA 49.6

Abrir en el estudio

c3RvbmV8b3JhbmdlfG9yYW5nZXxsZ3xpbnRlcnxpbnRlcnxtb25vfGRlZmF1bHR8ZGVmYXVsdHxkZWZhdWx0fGRlZmF1bHR8aHVnZWljb25z

Claro

Señal

Actividad semanal

+18%

Oscuro

Señal

Actividad semanal

+18%

Monochrome Console

Cuadrado, compacto y centrado en monospace para terminales, diagnósticos y superficies técnicas densas.

desarrolloconsoladenso

Base: zinc
Acento: base
Radio: none
Iconos: Tabler

Legibilidad clara

1 nota de contraste

oscuro · destructive-foreground / destructive· WCAG 2.77 · APCA -56.3

Abrir en el estudio

emluY3xiYXNlfGdyZWVufG5vbmV8bW9ub3xtb25vfG1vbm98bmFycm93fHNtfGRlZmF1bHR8dGlnaHR8dGFibGVy

Claro

Señal

Actividad semanal

+18%

Oscuro

Señal

Actividad semanal

+18%

Calm Documentation

Un sistema de lectura gray espacioso, con chrome discreto y gráficos blue para documentación técnica.

documentaciónlecturacalma

Base: gray
Acento: base
Radio: md
Iconos: Lucide

Legibilidad clara

1 nota de contraste

oscuro · destructive-foreground / destructive· WCAG 2.77 · APCA -56.3

Abrir en el estudio

Z3JheXxiYXNlfGJsdWV8bWR8aW50ZXJ8Z3JvdGVza3xtb25vfHJlbGF4ZWR8ZGVmYXVsdHxyZWxheGVkfHJlbGF4ZWR8bHVjaWRl

Un id, todas las superficies

Personaliza el preset en Create, aplícalo con CLI, entrégalo a un agente por MCP o expórtalo a Figma, CSS, iOS y Android sin traducir valores a mano.

Ver tokens multiplataforma

Auditoría honesta por defecto

Los presets son puntos de partida editoriales, no certificaciones. Mostramos cada aviso medido para que puedas revisarlo en contexto.