LAMALVA
Style Guide
This page outlines the styles currents and standards for theLAMALVA website.
Colors
An overview of this site's brand colors.
Action
Action
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Primary
Primary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Secondary
Secondary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Accent
Accent
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Base
Base
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Shade
Shade
Ultra Light
Light
Medium
Dark
Ultra Dark
Action
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Primary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Secondary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Accent
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
Shade
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Success
Success
Success Light
Success Dark
Success Hover
Danger
Danger
Danger Light
Danger Dark
Danger Hover
Warning
Warning
Warning Light
Warning Dark
Warning Hover
info
Info
Info Light
Info Dark
Info Hover
Buttons
Solid and outline buttons són availables across all color sets including black and white.
BUTTONS ON LIGHT BACKGROUND
ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline
BUTTONS ON DARK BACKGROUND
ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline
Button scale
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--s
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl
Typography
Aquest és un aspecte de responsive typography sizes and weights for this site. Aquest és computed from a base size and mathematical scale.
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 3 Medium
Heading 3 Bold
H4 (--m)
Heading 4 Regular
Heading 4 Medium
Heading 4 Bold
H5 (--s)
Heading 5 Regular
Heading 5 Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Body Text
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
Examples
Heading 1 (H1)
This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, set de l'eiusmod tempor incididunt ut labore et dolor magna aliqua. Ut enim ad minim veniam, qui nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 2 (H2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, set de l'eiusmod tempor incididunt ut labore et dolor magna aliqua. Ut enim ad minim veniam, qui nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 3 (H3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, set de l'eiusmod tempor incididunt ut labore et dolor magna aliqua. Ut enim ad minim veniam, qui nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 4 (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, set de l'eiusmod tempor incididunt ut labore et dolor magna aliqua. Ut enim ad minim veniam, qui nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, set de l'eiusmod tempor incididunt ut labore et dolor magna aliqua. Ut enim ad minim veniam, qui nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 6 (H6)
Llorem ipsum dolor simet amet, consectetur adipiscing elit, set do eiusmod tempor incididunt ut labore et dolor magna aliqua Ut enim ad minim veniam, qui nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat.
Widths
There six values you can use to control element width.
Section Padding
Padding for sections és responsive i basat en multiplier de la core spacious system.
Spacing
Aquests són sis nivells de responsive spacing calculats de base size i de mathematical scale. Aquests efectes margin, padding, i gaps all match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Element Padding
Here are the six levels of spacing visualized as padding.
Card
Aquest és a card with XS padding. Its content is pretty close to the edges.
Card
Aquest és a card with S padding. It has a little bit tighter padding.
Card
Aquest és a card with M padding. It has standard breathing room.
Card
Aquest és a card with L padding. It has extra breathing room.
Card
Aquest és a card with XL padding. It has significat breathing room.
Card
Aquest és a card with XXL padding. Avoid using this in a confined space.
Shadows
Hi ha tres boxes shadows to choose from.
Box shadow M
Box shadow L
Box shadow XL
Vendre radius
There are six border radius values calculat from a base size and mathematical scale.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL