Design System

Manual de Estilos

Guía visual y de componentes de la marca Sagicc.

Colores

La paleta de colores define la identidad visual de Sagicc.

Primarios

--primary
--primary-hover
--primary-focus
--primary-light

Secundarios

--secondary
--secondary-hover
--secondary-10

Estado

Success
Warning
Error
Info

Tipografía

Uso de fuentes y jerarquías textuales.

Headings

H1 Heading - Poppins Bold

H2 Heading - Poppins Bold

H3 Heading - Poppins SemiBold

H4 Heading - Poppins SemiBold

H5 Heading - Poppins SemiBold
H6 Heading - Poppins Medium
Body text

Nunito Sans es nuestra fuente principal para el cuerpo de texto. Ofrece una lectura clara y moderna tanto en dispositivos móviles como en escritorio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id arcu sed lacus eleifend convallis.

Este es un fragmento de texto secundario utilizando var(--text-secondary).

Este es un texto pequeño para leyendas o notas al pie.

Font Sizes
text-xs Sagicc AI
text-sm Sagicc AI
text-base Sagicc AI
text-lg Sagicc AI
text-xl Sagicc AI
text-2xl Sagicc AI
text-3xl Sagicc AI
text-4xl Sagicc AI
text-5xl Sagicc AI

Botones

Acciones principales y secundarias.

Primary
Secondary
Subtle
Disabled

Formularios

Elementos de entrada de datos.

Tokens de Diseño

Radios y Sombras que dan profundidad a la interfaz.

Radios de Borde

radius-sm
radius
radius-md
radius-lg
radius-pill

Sombras

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl