Typeface
Cryptozy main typeface is DM Sans. It using from Google Font A tranquil and fresh geometric sans font family for clear text and headlines.
Heading
DM Sans
Medium
Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789
Name
Size
Line Height
Font Weight
Name
Heading 1
Size
64px
Line Height
110%
Font Weight
Medium
Name
Heading 2
Size
40px
Line Height
140%
Font Weight
Medium
Name
Heading 3
Size
32px
Line Height
135%
Font Weight
Medium
Name
Heading 4
Size
24px
Line Height
150%
Font Weight
Medium
Name
Heading 5
Size
20px
Line Height
140%
Font Weight
Medium
Name
Heading 6
Size
18px
Line Height
140%
Font Weight
Medium
Body
DM Sans
Medium
Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789
Name
Size
Line Height
Font Weight
Name
Paragraph XL
Size
20px
Line Height
160%
Font Weight
Medium
Name
Paragraph XL
Size
20px
Line Height
160%
Font Weight
Regular
Name
Paragraph L
Size
18px
Line Height
155%
Font Weight
Medium
Name
Paragraph L
Size
18px
Line Height
155%
Font Weight
Regular
Name
Paragraph R
Size
16px
Line Height
160%
Font Weight
Medium
Name
Paragraph R
Size
16px
Line Height
160%
Font Weight
Regular
Name
Paragraph S
Size
14px
Line Height
145%
Font Weight
Medium
Name
Paragraph S
Size
14px
Line Height
145%
Font Weight
Regular
Name
Paragraph XS
Size
12px
Line Height
135%
Font Weight
Medium
Name
Paragraph XS
Size
12px
Line Height
135%
Font Weight
Regular
Colors
Color distinguishes our brand and helps us create consistent experiences across products.
Brand Colors
Primary brand colors are used for elements that must reflect Coinbank’s brand. Each color has a darker and a lighter shade.
Primary
5235E8
Shades 400
D6D1FA
Shades 300
DEDAFB
Shades 200
E7E3FC
Shades 100
EFEDFD
Shades 50
F7F6FE
Secondary
DAF727
Shades 400
E3FD7F
Shades 300
F6FED8
Shades 200
F8FEE1
Shades 100
FAFEEB
Shades 50
FDFFF5
Neutral Color
The Neutral colors are used for greyscale elements that may applied to section, elements or text.
Black
0E0637
Neutral 900
131316
Neutral 800
2F2F37
Neutral 700
42424D
Neutral 600
545463
Neutral 500
717184
White
FFFFFF
Neutral 50
F9F9FA
Neutral 100
F4F4F6
Neutral 200
E3E3E8
Neutral 300
C8C8D0
Neutral 400
9C9CAB
State Color
The State colors are used for states. It can be used both on positive and negative feedback that may applied.
Success
11CF8B
Error
FB3766
Icons
Icons are visual representations of commands, devices, directories, or common actions.
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".
Forms
Default form field styles for all forms used on the site.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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 consectetur
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
Numered 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
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."
Grid
How the spacing roles relate to the hierarchy of user interface elements.
2 column grid
3 column grid
4 column grid
2 : 1 grid
1 : 2 grid
Spacing
How the spacing roles relate to the hierarchy of user interface elements.
4px
8px
12px
16px
24px
32px
40px
48px
56px
64px
72px
80px
88px
96px
104px
112px
120px
.png){kind=small}