Saltar al contenido

Guía de estilo

Colores

Color primario

Primary#7979ff

Colores secundarios

Secondary 100#f9f5eb
Secondary 200#ffd987
Secondary 300#ffc74e
Secondary 400#d0f3a2

Colores neutros

Neutral 100#ffffff
Neutral 200#f7f7ff
Neutral 300#ececff
Neutral 400#c6c6e0
Neutral 500#b4b9c9
Neutral 600#7b7ba0
Neutral 700#565687
Neutral 800#353564

Otros

Label#19213d

Tipografía

LINE Seed Sans · Títulos y texto
400700800

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Montserrat · Secundaria
400700800

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

EstiloTamañoInterlineadoPesos

Display 10

80 / 64 / 52 / 42px1.25em
NormalBoldExtra

Display 9

58 / 48 / 38 / 36px1.115em
NormalBoldExtra

Display 8

48 / 40 / 32 / 28px1.115em
NormalBoldExtra

Display 7

38 / 30 / 28px1.25em
NormalBoldExtra

Display 6

30 / 28 / 24px1.25em
NormalBoldExtra

Display 5

22px1.25em
NormalBoldExtra

Display 4

20px1.25em
NormalBoldExtra

Display 3

18px1.25em
NormalBoldExtra

Display 2

14px1.25em
NormalBoldExtra

Display 1

12px1.25em
NormalBoldExtra

Párrafo grande. Corte a tijera o máquina según la raza, con peinado final y retoque de la zona de los ojos.

20 / 16px1.5em
NormalBoldExtra

Párrafo. Corte a tijera o máquina según la raza, con peinado final y retoque de la zona de los ojos.

20px1.5em
NormalBoldExtra

Párrafo mediano. Corte a tijera o máquina según la raza, con peinado final y retoque de la zona de los ojos.

16px1.5em
NormalBoldExtra

Párrafo pequeño. Corte a tijera o máquina según la raza, con peinado final y retoque de la zona de los ojos.

14px1.5em
NormalBoldExtra

Sombras

Sombras neutras

Small
Regular
Medium
Large

Sombras primarias

Small
Regular
Medium
Large

Sombras secundarias

Small
Regular
Medium
Large

Sombras de componentes

Soft
Photo
Sidebar
Menu
Card

Botones

Botón primario

TextoIconoNúmero
Pequeño
1
Normal
1
TextoIconoNúmero
Pequeño
1
Normal
1

Botón secundario

TextoIconoNúmero
Pequeño
1
Normal
1
TextoIconoNúmero
Pequeño
1
Normal
1

Botón terciario

TextoIconoNúmero
Pequeño
1
Normal
1
TextoIconoNúmero
Pequeño
1
Normal
1

Enlaces

Enlaces

NormalBoldExtra
PequeñoNormal
EnlaceEnlace
EnlaceEnlace
EnlaceEnlace
PequeñoNormal
EnlaceEnlace
EnlaceEnlace
EnlaceEnlace
PequeñoNormal
EnlaceEnlace
EnlaceEnlace
EnlaceEnlace

Listas

Listas

IconoViñetaNúmero
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  1. Elemento de lista 1
  2. Elemento de lista 2
  3. Elemento de lista 3
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  1. Elemento de lista 1
  2. Elemento de lista 2
  3. Elemento de lista 3
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  1. Elemento de lista 1
  2. Elemento de lista 2
  3. Elemento de lista 3
IconoViñetaNúmero
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  1. Elemento de lista 1
  2. Elemento de lista 2
  3. Elemento de lista 3
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  1. Elemento de lista 1
  2. Elemento de lista 2
  3. Elemento de lista 3
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
  1. Elemento de lista 1
  2. Elemento de lista 2
  3. Elemento de lista 3

Iconos

Iconos en círculo

Redes sociales

FacebookInstagramTikTokX

Iconos de interfaz

lucide-react, trazo 2px

ArrowRightArrowLeftArrowUpRightChevronDownChevronLeftChevronRightCheckCircleCheckPlusXSearchMenu

Avatares

Avatares cuadrados

Normal
24px32px40px64px120px

Avatares circulares

Normal
24px32px40px64px120px

Campos

Campos de texto

PequeñoNormal

Área de texto

PequeñoNormal

Selector

PequeñoNormal

Casillas y opciones