Style Guide
Style Guide
Suha Personal Website
Color Styles
Note
You can change colors in the Shared Colors found in the property panel on the right side of the canvas. When you update a shared color, it will update everywhere on your canvas.
Colors
Primary
rgba(76,157,176,1)
hsla(191,40,49,1)
#4C9DB0
Secondary
rgba(243,250,248,1)
hsla(163,41,97,1)
#F3FAF8
Dark P
rgba(13,38,36,1)
hsla(175,49,10,1)
#0D2624
Light P
rgba(214,241,234,1)
hsla(164,49,89,1)
#D6F1EA
Off White
rgba(234,232,233,1)
hsla(330,5,91,1)
#EAE8E9
Strok Dark
rgba(13,38,36,0.50)
hsla(175,49,10,0.50)
#0D2624
Gary
rgba(107,114,128,1)
hsla(220,9,46,1)
#6B7280
Selected Designs
rgba(47,245,47,1)
hsla(120,91,57,1)
#2FF52F
تدرج الوان
950
900
800
700 🔒
600
500
400
300
200
100
50
Typography Styles
Note
Any edits of the Text Styles will apply to all reflective elements across the site.
Type@7
Font
Inter
Weight
Bold Italic
Size
7px
Line Height
120%
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
Type@5
Font
Inter
Weight
Bold Italic
Size
5px
Line Height
120%
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
Type@12
Font
Inter
Weight
Regular
Size
12px
Line Height
150%
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
Type@19
Font
Inter
Weight
Bold Italic
Size
19px
Line Height
120%
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
Type@31
Font
Inter
Weight
Bold Italic
Size
31px
Line Height
120%
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
Type@51
Font
Inter
Weight
Bold Italic
Size
51px
Line Height
100%
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
Type@82
Font
Inter
Weight
Bold Italic
Size
82px
Line Height
120%
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
Type@133
Font
Inter
Weight
Bold Italic
Size
133px
Line Height
120%
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
Type@215
Font
Inter
Weight
Bold Italic
Size
215px
Line Height
120%
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
Button
Font
Inter
Weight
Extra Bold
Size
19px
Line Height
Automatic
Letter Spacing
0%
Text Decoration
None
Paragraph Spacing
0px
Case
Original
The quick brown fox jumps over the lazy dog.
Textuer
text style free coustom
Name
0
px
0.5
1
1.5
2
2.5
3
3.5
4
5
6
7
8
9
10
11
12
14
16
20
24
28
32
36
40
44
48
52
56
60
64
72
80
96
Size
0px
1px
0.125rem
0.25rem
0.375rem
0.5rem
0.625rem
0.75rem
0.875rem
1rem
1.25rem
1.5rem
1.75rem
2rem
2.25rem
2.5rem
2.75rem
3rem
3.5rem
4rem
5rem
6rem
7rem
8rem
9rem
10rem
11rem
12rem
13rem
14rem
15rem
16rem
18rem
20rem
24rem
Pixels
0px
1px
2px
4px
6px
8px
10px
12px
14px
16px
20px
24px
28px
32px
36px
40px
44px
48px
56px
64px
80px
96px
112px
128px
144px
160px
176px
192px
208px
224px
240px
256px
288px
320px
384px
Spacing between sections
Spacing between sections
larg
medium
small
X-small
144
128
80
40
Spacing
Spacing inside the design
Merging
Desktop 80
40
40
40
20
20
20
16
16
Auto
Auto
16
120
Tablet 60
Mobile 20
Padding
between
between
Spacing
SHADOWS
Note
You can copy one of the Shadow properties by right-clicking on one of the cards, selecting Copy Style, and then pasting it onto a chosen Frame or a Stack.