Logo MKTN
menu

Guía de estilos

Resumen de estilos activos en Marketing Ninja

Colores

Detalle de todos los colores.
Colores y tonos
Transparencias
PRIMARIO
Primary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
SECUNDARIO
Secondary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
AcEnto
Accent
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
base
Base
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
tono
Shade
Ultra Light
Light
Medium
Dark
Ultra Dark
PRIMARIO
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
SECUNDARIO
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Active Campaign
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
BASE
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
TONO
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

Tipografía

Tipografía responsive con tamaños y pesos.
Headings
H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading  Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)
Heading 5 Regular
Heading  Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Body
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
Ejemplos

Heading 1 (H1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 6 (H6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Botones

Botones sólidos y perfilados.
escala de botones
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--xs
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl

Anchos

Anchos de contenidos responsive.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Relleno de secciones

Relleno para secciones responsive.
None
XS
S
M
L
XL
XXL

Espaciado

Espaciado de contenidos responsive.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Relleno de elementos

Relleno de elementos responsive.

Tarjeta XS

Quisque ac arcu quis mauris pellentesque tristique quis in tortor. Maecenas enim sapien, rutrum nec lorem scelerisque, consectetur tincidunt ex.

Tarjeta S

Quisque ac arcu quis mauris pellentesque tristique quis in tortor. Maecenas enim sapien, rutrum nec lorem scelerisque, consectetur tincidunt ex.

Tarjeta M

Quisque ac arcu quis mauris pellentesque tristique quis in tortor. Maecenas enim sapien, rutrum nec lorem scelerisque, consectetur tincidunt ex.

Tarjeta L

Quisque ac arcu quis mauris pellentesque tristique quis in tortor. Maecenas enim sapien, rutrum nec lorem scelerisque, consectetur tincidunt ex.

Tarjeta XL

Quisque ac arcu quis mauris pellentesque tristique quis in tortor. Maecenas enim sapien, rutrum nec lorem scelerisque, consectetur tincidunt ex.

Tarjeta XXL

Quisque ac arcu quis mauris pellentesque tristique quis in tortor. Maecenas enim sapien, rutrum nec lorem scelerisque, consectetur tincidunt ex.

Sombreado

Sombreado de objetos.
Box shadow M
Box shadow L
Box shadow XL

Radio de bordes

Radios para bordes.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL
cross-circle