Starting date
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
April 2024
This design system represents the design rules used on this website.
This page includes the following items:
Content width / Typography / Colors / Iconography / Buttons / Video elements
Content width
Section padding top 48px
Max width: 1600px
Body max width
Max width: 1600px
Current
Body width = Viewport Width x 0.6
Current
Min width: 1000px
Body min width
Min width: 1000px
Section padding bottom 48px
typography
Aa
Base Neue
9 font weights available
Heading 1
-
Heading 1
Font: Base Neue
Size:
60px
Line height:
72px
Thickness:
Black
Italic:
No
Heading 2
-
Heading 2
Font: Base Neue
Size:
48px
Line height:
64px
Thickness:
Bold
Italic:
No
Heading 3
-
Heading 3
Font: Base Neue
Size:
40px
Line height:
48px
Thickness:
Medium
Italic:
No
Subtitle 1
-
Subtitle 1
Font: Base Neue
Size:
28px
Line height:
40px
Thickness:
Black
Italic:
No
Subtitle 2
-
Subtitle 2
Font: Base Neue
Size:
18px
Line height:
28px
Thickness:
Bold
Italic:
No
Subtitle 2
-
Subtitle 2
Font: Base Neue
Size:
18px
Line height:
28px
Thickness:
Bold
Italic:
Yes
Body 1 (SemiBold)
-
Body 1 (SemiBold)
Font: Base Neue
Size:
18px
Line height:
28px
Thickness:
Semi Bold
Italic:
No
Body 1 (Regular)
-
Body 1 (Regular)
Font: Base Neue
Size:
18px
Line height:
28px
Thickness:
Regular
Italic:
No
Aa
Inter
9 font weights available
Main text (Semi Bold)
-
Main text (Semi Bold)
Font: Inter
Size:
16px
Line height:
24px
Thickness:
Semi Bold
Italic:
No
Main text (Regular)
-
Main text (Regular)
Font: Inter
Size:
16px
Line height:
24px
Thickness:
Regular
Italic:
No
Colors
Primary
900
800
700
600
Primary - 500
400
300
200
100
Neutral
900
800
700
600
500
400
300
200
100
Black
White
Transparency
100%
80%
64%
56%
40%
24%
16%
8%
4%
Iconography
Extra Small - mobile only
12px
Small
16px
Medium
24px
Large
32px
Extra large
40px
Buttons
Small
Height: 36px
Hover me!
Default
Hover
Click
Selected
Disable
Hover me!
Default
Hover
Click
Selected
Disable
Medium
Height: 40px
Hover me!
Default
Hover
Click
Selected
Disable
Hover me!
Default
Hover
Click
Selected
Disable
Large
Height: 48px
Hover me!
Default
Hover
Click
Selected
Disable
Hover me!
Default
Hover
Click
Selected
Disable
Video elements
End.
other projects
Already knew what you want?
let start working together
Casually respond within 1-2 days (even the weekend, I take no day off)
Tung Nguyen Viet
Product Designer
About me