Color

Los colores salen de roles semánticos con su pareja de texto. Úsalos en vez de las escalas primitivas para que el contraste y la marca queden resueltos.

Toyota Yaris 2021

JTRX-12

Al día

Revisión técnica

Vence en 12 días

Multa TAG

Impaga
Mantención 10.000 km
$89.99020% dcto
  • primary
  • accent
  • foreground
  • card-filled
  • success
  • warning
  • error

Marca

Cada rol de color viene con su pareja de texto. Usa siempre el par completo para que el contraste quede resuelto.

Aa
primaryTexto: primary-foreground
indigo-600Acciones principales, links y selección. Es el color de la marca.
Aa
secondaryTexto: secondary-foreground
indigo-100Acciones de apoyo y fondos de selección suaves.
Aa
accentTexto: accent-foreground
volt-400Descuentos, promociones y momentos de marca. Con moderación.

Texto

Cuatro niveles de texto marcan la jerarquía sin cambiar de tamaño. foreground para lo principal y muted-foreground para el detalle.

Mantención 10.000 km

foregroundgray-950

Toyota Yaris · JTRX-12

muted-foregroundgray-600

Actualizado hace 2 horas

tertiary-foregroundgray-500

Sin horarios disponibles

disabled-foregroundgray-400

Superficies

Neutros cálidos de la escala Gray. Separan bloques sin agregar ruido visual.

background · whiteFondo de página.
background-subtle · gray-100Secciones y rieles neutros.
card · whiteCards y sheets sobre el fondo.
card-filled · gray-100Cards sin borde y paneles dentro de una card.
card-inset · gray-50Hover y bloques sutiles dentro de una card.
border · gray-200Bordes y separadores.

Estados

El sólido sirve para íconos e indicadores. Para badges y mensajes usa el fondo 100 con texto 700.

successsuccess-500
Pagado
success-100 y success-700Confirmaciones, pagos y documentos al día.
warningwarning-500
Vence en 12 días
warning-100 y warning-700Algo requiere atención pronto, pero no bloquea.
errorerror-500
Multa impaga
error-100 y error-700Errores y bloqueos. destructive usa error-600.

Paletas

Las escalas primitivas de las que salen los roles. Prefiere el rol semántico y recurre a la escala solo cuando ningún rol describe el caso.

Indigo

primary = 600

50
100
200
300
400
500
600
700
800
900
950

Gray

foreground = 950

50
100
200
300
400
500
600
700
800
900
950

Volt

accent = 400

50
100
200
300
400
500
600
700
800
900
950

Success

success = 500

50
100
200
300
400
500
600
700
800
900
950

Warning

warning = 500

50
100
200
300
400
500
600
700
800
900
950

Error

error = 500

50
100
200
300
400
500
600
700
800
900
950

Uso

Sí
Un solo color de acción por vista: primary para lo principal.
No
Mezclar primary, accent y estados en acciones que compiten.
Vence en 12 días
Sí
Estados con fondo suave y texto 700, siempre con una etiqueta.

20% de descuento

No
accent como color de texto sobre blanco. No tiene contraste suficiente.

Código

<button className='bg-primary text-primary-foreground hover:bg-primary-hover'>
  Agendar
</button>

<p className='body-sm text-muted-foreground'>Toyota Yaris · JTRX-12</p>

<span className='bg-success-100 text-success-700'>Pagado</span>