Colors
0
#FFFFFF
10
#F9FAFB
20
#E5E7EB
30
#D1D5DB
90
#B6BCC6
40
#6B7280
50
#4B5563
60
#374151
Phantom Sans
Bold
SemiBold
Medium
Regular
Aa
Heading - Desktop
Twin Variety custom type
TV
104px
100%
HEADING
Heading 1
Inter/ SemiBold
104px
100%
Heading 1
Heading 2
Inter/ SemiBold
72px
100%
Heading 2
Heading 3
Inter/ SemiBold
64px
100%
Heading 3
Heading 4
Inter/ SemiBold
56px
100%
Heading 4
Heading 5
Inter/ SemiBold
40px
100%
Heading 5
Heading 6
Inter/ SemiBold
32px
100%
Heading 6
Heading - Mobile
Heading 1
Inter/ Bold
64px
100%
Heading 1
Heading 2
Inter/ SemiBold
56px
100%
Heading 2
Heading 3
Inter/ SemiBold
48px
100%
Heading 3
Heading 4
Inter/ SemiBold
40px
100%
Heading 4
Heading 5
Inter/ SemiBold
32px
100%
Heading 5
Heading 6
Inter/ SemiBold
28px
100%
Heading 6
Body
Body Extra-Large Bold
Inter/ Bold
28px
28
The quick brown fox
Body Extra-Large Medium
Inter/ Medium
28px
28
The quick brown fox
Body Extra-Large Regular
Inter/ Regular
28px
28
The quick brown fox
Body Large Bold
Inter/ Bold
22px
26
The quick brown fox
Body Large Medium
Inter/ Medium
22px
26
The quick brown fox
Body Large Regular
Inter/ Regular
22px
26
The quick brown fox
Body Large Bold
Inter/ Bold
18px
26
The quick brown fox
Body Large Medium
Inter/ Medium
18px
26
The quick brown fox
Body Large Regular
Inter/ Regular
18px
26
The quick brown fox
Body Semi-Large Bold
Inter/ Bold
16px
24
The quick brown fox
Body Semi-Large Medium
Inter/ Medium
16px
24
The quick brown fox
Body Semi-Large Regular
Inter/ Regular
16px
24
The quick brown fox
Body Small Bold
Inter/ Bold
14px
22
The quick brown fox
Body Small Medium
Inter/ Medium
14px
22
The quick brown fox
Body Small Regular
Inter/ Regular
14px
22
The quick brown fox
Caption Bold
Inter/ Bold
12px
20
The quick brown fox
Caption Medium
Inter/ Medium
12px
20
The quick brown fox
Caption Regular
Inter/ Regular
12px
20
The quick brown fox
Icons
Symbols serve as graphical portrayals of instructions, gadgets, folders, or typical activities. We utilize cost-free commercial style from Phosphor Icon.
How to use?
We're using embedded SVG code for the icon.
Please update the SVG default color to "currentColor" so that the color of the icon will follow the current text color.
Please update the dimensions to 100% so that the icon can fill the parent size.
Add our custom class "SVG Icon" to the embedded code.
Additionally, please add a subclass for the size of the icon, such as "16x16" or "32x32".
Buttons
Button used in this website as a CTA, with various style variations
CTA Button
View all works
Selection Button
Form Fields
Default form field styles for all forms used on the site.
Text Field
Name*
Text Area
Email*
Grid
How the spacing roles relate to the hierarchy of user interface elements.
2 column grid
3 column grid
4 column grid
2 : 1 column grid
1 : 2 column grid
Spacing
How the spacing roles relate to the hierarchy of user interface elements.
4px
8px
12px
16px
24px
48px
56px
Rich Text
Our rich text capabilities allow you to easily format and style text, embed images and videos, and even add custom code.
Text Bold
Lorem ipsum dolor sit amet consectur
Text Italic
Lorem ipsum dolor sit amet consectetur
Bullet List
Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Senectus et netus et malesuada fames ac turpis egestas
Numbered List
Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Senectus et netus et malesuada fames ac turpis egestas
Figure Image & Caption
Caption here
Blockquote
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."