Estilo Studio

Sistemas CSS para tus webs, apps y presentaciones

Biblioteca de estilos

Todavía no guardaste estilos. Guardá el actual para reutilizarlo en otros proyectos.

Mi estilo

Diseñá una vez, usalo en todos lados

Así se ve tu sistema aplicado a componentes reales: tipografía, color, espaciado, bordes y sombras.

Badge

Tarjeta

Superficie con radio, borde y sombra del sistema.

● Éxito● Error

Formulario

Campos que heredan color y tipografía.

Título grande · .txt-titulo-grande · 68px (móvil 45px)El veloz murciélago hindú
Título sección · .txt-titulo-seccion · 41.5px (móvil 27px)El veloz murciélago hindú
Subtítulo · .txt-subtitulo · 20pxEl veloz murciélago hindú
Texto · .txt-texto · 16pxEl veloz murciélago hindú
Textito · .txt-textito · 14pxEl veloz murciélago hindú
Etiqueta · .txt-etiqueta · 11pxEl veloz murciélago hindú
4
8
12
16
24
32
48
64
:root {
  --color-background: #0f1115;
  --color-foreground: #f4f2ee;
  --color-card: #171a20;
  --color-muted: #9aa1ad;
  --color-primary: #e8623c;
  --color-primary-foreground: #140a06;
  --color-accent: #4ad3b0;
  --color-border: #2a2f38;
  --color-destructive: #e5484d;
  --color-success: #46a758;
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-detail: "JetBrains Mono", ui-monospace, monospace;
  --text-titulo-grande: clamp(2.813rem, 2.25rem + 2.5vw, 4.5rem);
  --text-titulo-seccion: clamp(1.688rem, 1.333rem + 1.574vw, 2.75rem);
  --text-subtitulo: 1.25rem;
  --text-texto: 1rem;
  --text-textito: 0.875rem;
  --text-etiqueta: 0.688rem;
  --space-0_5: 4px;
  --space-1: 8px;
  --space-1_5: 12px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --radius: 12px;
  --border-width: 1px;
  --shadow-1: 0 10px 24px rgba(0,0,0,0.175);
  --shadow-2: 0 20px 48px rgba(0,0,0,0.262);
  --shadow-3: 0 30px 72px rgba(0,0,0,0.35);
}

.txt-titulo-grande {
  font-family: var(--font-heading);
  font-size: var(--text-titulo-grande);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -2px;

}

.txt-titulo-seccion {
  font-family: var(--font-heading);
  font-size: var(--text-titulo-seccion);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1px;

}

.txt-subtitulo {
  font-family: var(--font-body);
  font-size: var(--text-subtitulo);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0px;

}

.txt-texto {
  font-family: var(--font-body);
  font-size: var(--text-texto);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0px;

}

.txt-textito {
  font-family: var(--font-body);
  font-size: var(--text-textito);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0px;

}

.txt-etiqueta {
  font-family: var(--font-detail);
  font-size: var(--text-etiqueta);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 3px;
  text-transform: uppercase;

}