Style Guide
Color Styles
nandrian.ux
Abbey
rgba(84,87,93,1)
hsla(220,5,35,1)
#54575D
Black
rgba(0,0,0,1)
hsla(0,0,0,1)
#000000
Cornflower Blue 27%
rgba(120,92,255,0.27)
hsla(250,100,68,0.27)
#785CFF
Fog
rgba(211,202,255,1)
hsla(250,100,90,1)
#D3CAFF
French Gray 27%
rgba(200,199,206,0.27)
hsla(249,7,79,0.27)
#C8C7CE
Iron
rgba(234,234,235,1)
hsla(240,2,92,1)
#EAEAEB
Shark
rgba(38,39,41,1)
hsla(220,4,15,1)
#262729
Shark 14%
rgba(38,39,41,0.14)
hsla(220,4,15,0.14)
#262729
White
rgba(255,255,255,1)
hsla(0,0,100,1)
#FFFFFF
Wild Sand
rgba(246,246,246,1)
hsla(0,0,96,1)
#F6F6F6
Wild Sand 19%
rgba(246,246,246,0.19)
hsla(0,0,96,0.19)
#F6F6F6
Wild Sand 31.4%
rgba(246,246,246,0.31)
hsla(0,0,96,0.31)
#F6F6F6
Typography Styles
nandrian.ux/Semantic/Heading 1
Font
Plus Jakarta Sans
Weight
Medium
Size
70px
Line Height
77px
Letter Spacing
-2.80px
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Semantic/Heading 2
Font
Plus Jakarta Sans
Weight
SemiBold
Size
14px
Line Height
21px
Letter Spacing
2px
Text Decoration
None
Paragraph Spacing
0px
Case
Upper
The quick brown fox jumps over the lazy dog.
nandrian.ux/Semantic/Heading 3
Font
Plus Jakarta Sans
Weight
Medium
Size
14px
Line Height
20px
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Semantic/Heading 6
Font
Plus Jakarta Sans
Weight
Medium
Size
14px
Line Height
20px
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Semantic/Item
Font
Font Awesome 5 Free
Weight
Solid
Size
12px
Line Height
12px
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Semantic/Link
Font
Plus Jakarta Sans
Weight
SemiBold
Size
14px
Line Height
21px
Letter Spacing
0%
Text Decoration
Underline
Paragraph Spacing
0px
Case
Upper
The quick brown fox jumps over the lazy dog.
nandrian.ux/Semantic/Strong
Font
Plus Jakarta Sans
Weight
SemiBold
Size
26px
Line Height
29px
Letter Spacing
-1.04px
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Semantic/Superscript
Font
Plus Jakarta Sans
Weight
Bold
Size
30px
Line Height
45px
Letter Spacing
-2.40px
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Plus Jakarta Sans/Medium 28
Font
Plus Jakarta Sans
Weight
Medium
Size
28px
Line Height
39px
Letter Spacing
-0.84px
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Plus Jakarta Sans/Regular 16
Font
Plus Jakarta Sans
Weight
Regular
Size
16px
Line Height
24px
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Plus Jakarta Sans/Regular 18
Font
Plus Jakarta Sans
Weight
Regular
Size
18px
Line Height
29px
Letter Spacing
-0.36px
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Plus Jakarta Sans/SemiBold 60
Font
Plus Jakarta Sans
Weight
SemiBold
Size
60px
Line Height
90px
Letter Spacing
-2.40px
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Plus Jakarta Sans/Bold 18
Font
Plus Jakarta Sans
Weight
Bold
Size
18px
Line Height
29px
Letter Spacing
-0.36px
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
nandrian.ux/Plus Jakarta Sans/Medium 12 upper
Font
Plus Jakarta Sans
Weight
Medium
Size
12px
Line Height
18px
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Upper
The quick brown fox jumps over the lazy dog.
nandrian.ux/Plus Jakarta Sans/Medium 24
Font
Plus Jakarta Sans
Weight
Medium
Size
24px
Line Height
34px
Letter Spacing
-0.72px
Text Decoration
None
Paragraph Spacing
0px
Case
Original