Aquatech Instal
Ghid de Stilizare
Această pagină conține ghidul de stilizare pentru site-ul web Aquatech Instal.
Culori
O prezentare a culorilor acestui site web.
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
Butoane
Butoanele solide și cu contur sunt disponibile în toate seturile de culori, inclusiv în alb și negru.
Tipografie
Mai jos este o prezentare generală a dimensiunilor și greutăților tipografice responsive pentru acest site. Acestea sunt calculate pornind de la o dimensiune de bază și o scară matematică.
Titluri
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
Texte
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)
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 puteți utiliza pentru a controla lățimea elementului. Acestea răspund automat.
Umplutură Secțiuni
Umplutura pentru secțiuni este sensibilă și se bazează pe un multiplicator al sistemului de spațiere a miezurilor.
Spațiere
Există șase niveluri de spațiere receptivă calculate pe baza unei dimensiuni de bază și a unei scale matematice. Acest lucru asigură că marja, umplutura și spațiile se potrivesc perfect.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Umplutură Elemente
Iată cele șase niveluri de spațiere vizualizate sub formă de umplutură.
Card
Acesta este un card cu umplutură XS. Conținutul său este destul de aproape de margini.
Card
Acesta este un card cu umplutură S. Are o umplutură puțin mai strânsă.
Card
Acesta este un card cu umplutură M. Are spațiu liber standard.
Card
Acesta este un card cu umplutură L. Are spațiu liber suplimentar.
Card
Acesta este un card cu umplutură XL. Are un spațiu liber semnificativ.
Card
Acesta este un card cu umplutură XXL. Evitați să o folosiți într-un spațiu restrâns.
Umbre
Aveți posibilitatea de a alege dintre trei umbre de cutie multistrat.
Box shadow M
Box shadow L
Box shadow XL
Raza marginii
Există șase valori ale razei marginii calculate pe baza unei dimensiuni de bază și a unei scale matematice.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL