De Casa Mobila

Ghid de stil

Această pagină prezintă stilurile și standardele curente pentru site-ul web De Casa Mobila.

Culori

O prezentare generală a culorilor mărcii acestui site.

Action

Action

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Primary

Primary

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

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

Butoane

Butoanele solide și conturate sunt disponibile în toate seturile de culori, inclusiv alb-negru.

BUTOANELE DE PE FUNDAL LUMINOS

ActionAction OutlinePrimaryPrimary OutlineBaseBase Outline

BUTOANELE DE PE FUNDAL ÎNTUNECAT

ActionAction OutlinePrimaryPrimary OutlineWhiteWhite Outline
Scala butonului
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

Tipografie

Mai jos este o prezentare generală a dimensiunilor și greutăților tipografiei receptive pentru acest site. Acestea sunt calculate dintr-o dimensiune de bază și o scală matematică.
Titlurile
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
Textul corpului
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
Exemple

Heading 1 (H1)

Acesta este un text mare. 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.

Lăţimi

Există șase valori pe care le vom utiliza pentru a controla lățimea elementului. Sunt adaptive automat.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Margini de secțiune

Marginile pentru secțiuni sunt adaptive și se bazează pe un multiplicator al sistemului de spațiere a sistemului.
None
XS
S
M
L
XL
XXL

Spaţiere

Există șase niveluri de spațiere adaptivă calculate dintr-o dimensiune de bază și o scală matematică. Acest lucru asigură că marginea și golurile se potrivesc perfect.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Marginea elementelor

Aici sunt cele șase niveluri de spațiere vizualizate ca margine.

Card

Acesta este un card cu margine XS. Conținutul său este destul de aproape de margini.

Card

Acesta este un card cu margine S. Are o margine puțin mai strânsă.

Card

Acesta este un card cu margine M. Are o desparțire standard.

Card

Acesta este un card cu margine L. Are spațiu suplimentar de desfășurare.

Card

Acesta este un card cu margine XL. Are spațiu semnificativ de desfășurare.

Card

Acesta este un card cu margine XXL. Evitați să utilizați această spațiere într-un spațiu închis.

Umbre

Există trei umbre de casetă cu mai multe straturi din care să alegem.
Box shadow M
Box shadow L
Box shadow XL

Rotunjimea bordurii

Există șase valori ale rotunijimii bordurii calculate dintr-o dimensiune de bază și o scală matematică.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL