Paletas
Preview de layer, text, brand y progress.
LAYER
Fondos / superficies
layer-50
Sample
bg-layer-50
layer-100
Sample
bg-layer-100
layer-200
Sample
bg-layer-200
layer-300
Sample
bg-layer-300
layer-400
Sample
bg-layer-400
layer-500
Sample
bg-layer-500
layer-600
Sample
bg-layer-600
layer-700
Sample
bg-layer-700
layer-800
Sample
bg-layer-800
layer-900
Sample
bg-layer-900
layer-950
Sample
bg-layer-950
Card (layer-800)
Contenido normal
Meta / detalles
Section (layer-900)
Sección grande
Hover (layer-700)
Simulación hover
TEXT
Jerarquía tipográfica
Título (text-50)
Subtítulo (text-200)
Párrafo normal (text-300). Este debería ser tu texto por defecto.
Meta / helper (text-400).
Placeholder / apagado (text-500).
text-50Aa
Texto
Subtexto
text-100Aa
Texto
Subtexto
text-200Aa
Texto
Subtexto
text-300Aa
Texto
Subtexto
text-400Aa
Texto
Subtexto
text-500Aa
Texto
Subtexto
text-600Aa
Texto
Subtexto
text-700Aa
Texto
Subtexto
text-800Aa
Texto
Subtexto
text-900Aa
Texto
Subtexto
text-950Aa
Texto
Subtexto
BRAND
Acciones / links / focus
brand-50
Sample
bg-brand-50
brand-100
Sample
bg-brand-100
brand-200
Sample
bg-brand-200
brand-300
Sample
bg-brand-300
brand-400
Sample
bg-brand-400
brand-500
Sample
bg-brand-500
brand-600
Sample
bg-brand-600
brand-700
Sample
bg-brand-700
brand-800
Sample
bg-brand-800
brand-900
Sample
bg-brand-900
brand-950
Sample
bg-brand-950
PROGRESS
Progreso / OK
progress-50
Sample
bg-progress-50
progress-100
Sample
bg-progress-100
progress-200
Sample
bg-progress-200
progress-300
Sample
bg-progress-300
progress-400
Sample
bg-progress-400
progress-500
Sample
bg-progress-500
progress-600
Sample
bg-progress-600
progress-700
Sample
bg-progress-700
progress-800
Sample
bg-progress-800
progress-900
Sample
bg-progress-900
progress-950
Sample
bg-progress-950
Barras
Progreso20%
Progreso55%
Progreso85%
Estados
OK
Código válido.
Error
Algo salió mal.