Style Guide
The Cryptor Design System
The type scale, colors, buttons and spacing behind every page. Every color and type value comes from a Framer style.
1. Typography
Inter, set in every text style. Headings use Heading/Heading 1–6; sizes change per breakpoint inside each style and are listed as Desktop / Laptop / Tablet / Phone (≥ 1440px / ≥ 1200px / ≥ 810px / < 810px).
Heading 1
H1
Heading/Heading 1
60 · 60 · 48 · 40 px
Medium 500 · Line Height 1.2em · −0.04em
Heading 2
H2
Heading/Heading 2
48 · 48 · 36 · 30 px
Medium 500 · Line Height 1.1em · −0.03em
Heading 3
H3
Heading/Heading 3
40 · 30 · 30 · 24 px
Bold 700 · Line Height 1.1em · −0.03em
Heading 4
H4
Heading/Heading 4
36 · 36 · 28 · 24 px
Medium 500 · Line Height 1.2em · −0.03em
Heading 5
H5
Heading/Heading 5
18 · 18 · 18 · 18 px
Bold 700 · Line Height 1.4em · −0.04em
Heading 6
H6
Heading/Heading 6
16 · 16 · 16 · 16 px
Semibold 600 · Line Height 1.4em · −0.02em
Card title
P
Body/Medium/Body 3XL
20 · 18 · 18 · 18 px
Medium 500 · Line Height 1.2em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Regular/Body 2XL
18 · 18 · 18 · 16 px
Regular 400 · Line Height 1.4em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Medium/Body 2XL
18 · 18 · 18 · 16 px
Medium 500 · Line Height 1.4em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Regular/Body XL
16 · 16 · 16 · 16 px
Regular 400 · Line Height 1.4em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Medium/Body XL
16 · 16 · 16 · 16 px
Medium 500 · Line Height 1.4em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Regular/Body LG
14 · 16 · 16 · 14 px
Regular 400 · Line Height 1.3em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Medium/Body LG
14 · 14 · 14 · 14 px
Medium 500 · Line Height 1.3em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Uppercase/Body LG
14 · 14 · 14 · 14 px · Uppercase
Semibold 600 · Line Height 1.3em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Regular/Body MD
12 · 12 · 12 · 12 px
Regular 400 · Line Height 1.3em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Medium/Body MD
12 · 12 · 12 · 12 px
Medium 500 · Line Height 1.3em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Uppercase/Body MD
12 · 12 · 12 · 12 px · Uppercase
Regular 400 · Line Height 1.3em · 0.1em
Trade, stake and track crypto in one place.
P
Body/Uppercase/Body MD V2
12 · 12 · 12 · 12 px · Uppercase
Medium 500 · Line Height 1.3em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Regular/Body SM
10 · 10 · 10 · 10 px
Regular 400 · Line Height 1.3em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Regular/Body XS
8 · 8 · 8 · 8 px
Regular 400 · Line Height 1.3em · −0.03em
Trade, stake and track crypto in one place.
P
Body/Medium/Body XS
8 · 8 · 8 · 8 px
Medium 500 · Line Height 1.3em · −0.03em
Inter Regular
400
Inter Medium
500
Inter Semibold
600
Inter Bold
700
Line Height 1.1em
Heading 2, Heading 3
Line Height 1.2em
Heading 1, 4 and Body 3XL
Line Height 1.3em
Body LG, MD, SM and XS
Line Height 1.4em
Heading 5, 6, Body XL, 2XL
Letter Spacing −0.04em
Heading 1, Heading 5
Letter Spacing −0.03em
Heading 2–4, all Body
Letter Spacing −0.02em
Heading 6
Letter Spacing 0.1em
Body/Uppercase/Body MD
2. Colors
Every color style in the Framer project. Transparent colors sit on a purple and dark split, so you can see how they look over both.
Core and brand
Black Primary
#020010
Black
#000000
White
#ffffff
Text Color
#d3d3d3
Brand
#6d3fea
Soft Purple
#a492ed
Soft Purple 12%
rgba(164, 146, 237, 0.12)
Status and coins
Error
#ff2244
Coin Fill/Yellow
#f7931a
Coin Fill/Green
#02ab7a
Coin Fill/Blue
#0061ff
Coin Fill/Orange
#ff5000
Coin Fill/Deep Purple
#aa15dd
Surfaces, borders and shades
Transparent
rgba(255, 255, 255, 0)
White Shades/White 1%
rgba(255, 255, 255, 0.01)
White Shades/White 5%
rgba(255, 255, 255, 0.05)
White Shades/White 10%
rgba(255, 255, 255, 0.1)
White Shades/White 15%
rgba(255, 255, 255, 0.15)
White Shades/White 20%
rgba(255, 255, 255, 0.2)
White Shades/White 25%
rgba(255, 255, 255, 0.25)
White Shades/White 30%
rgba(255, 255, 255, 0.3)
White Shades/White 50%
rgba(255, 255, 255, 0.5)
Black 15%
rgba(0, 0, 0, 0.15)
Black 25%
rgba(0, 0, 0, 0.25)
3. Buttons
The Button Primary component. Hover it: the label rolls up while the glow keeps circling the border.
Primary
Default call to action, used for links.
Tablet/Phone
Compact size for tablet and phone.
Error
Red state of the Submit Button.
Submit Button
CTA form button: Loading, Success, Error.
4. Captions
The Section Caption component sits above section titles. It has one variant: each instance sets its own width, and the left line can be switched off.
Sections · 350px
Services
FAQ · 300px
General FAQ
Left line off · 200px
Features
Page heroes · 337px
Crypto
5. Radius
Corner radii used across the Framer build. Framer has no radius styles, so each layer sets its own.
8px
Table rows, small icons
11px
Feature items, icon tiles
16px
Facts, tiles, integrations
20px
Plans, feature cards
30px
Card insides
50px
Outer cards
999px
Pills, chips, buttons
50%
Glows, avatars, dots
6. Spacing
The spacing scale used for padding and gaps in the Framer build. Values are set per layer; the layout values below change per breakpoint.
1px
Gradient borders
2px
Label stacks
4px
Pills, prices
6px
Chips, rows
8px
List items
10px
Text groups
12px
Chips, meta
16px
Grids, cells
18px
Table rows
20px
Card padding
24px
Section heads
30px
Gutter
40px
Large cards
48px
Brand block
60px
Section gap
80px
Wide sections
100px
Section
Layout
Desktop
Laptop
Tablet
Phone
30px
30px
20px
16px
100px
100px
60px
40px
60px
60px
40px
30px
1130px
1130px
810px
100%
100px
100px
52px
28px
215px
215px
160px
140px
120px
120px
80px
60px
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 189 184" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="gbPb4JY6k-177042060-linear-gradient" x1="-0.23" x2="1.22" y1="1.219748728431098" y2="-0.2098891568087543"><stop offset="0" stop-color="rgb(197, 156, 255)"/><stop offset="0.5158744951848401" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(197, 156, 255)"/></linearGradient><linearGradient id="LxgdyCqw1-177042060-linear-gradient" x1="-0.23" x2="1.22" y1="1.219748728431098" y2="-0.2098891568087543"><stop offset="0" stop-color="rgb(197, 156, 255)"/><stop offset="0.5158744951848401" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(197, 156, 255)"/></linearGradient><linearGradient id="E0DmtURCk-177042060-linear-gradient" x1="-0.45" x2="1.29" y1="-0.4499999999999998" y2="1.2899999999999998"><stop offset="0" stop-color="rgb(197, 156, 255)"/><stop offset="0.5252666459563011" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(197, 156, 255)"/></linearGradient><linearGradient id="wYbbNIM1D-177042060-linear-gradient" x1="-0.45" x2="1.29" y1="-0.4499999999999998" y2="1.2899999999999998"><stop offset="0" stop-color="rgb(197, 156, 255)"/><stop offset="0.5252666459563011" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(197, 156, 255)"/></linearGradient></defs><g d="M 88.502 0 L 29.5 29.5 L 0 88.501 L 59 59.001 L 88.502 0.001 Z M 88.5 177.001 L 147.501 147.501 L 177.002 88.5 L 118 118 Z M 0 88.5 L 29.504 147.504 L 88.502 177.001 L 59.004 118.003 Z M 88.5 0.001 L 117.997 59.011 L 177.001 88.502 L 147.498 29.51 L 88.5 0 Z" fill="transparent" height="177.00099999999998px" id="l5Wza5tc6" transform="translate(6 3)" width="177.00199999999995px"><path d="M 88.502 0 L 29.5 29.5 L 0 88.501 L 59 59.001 L 88.502 0.001 Z" fill="url(%23gbPb4JY6k-177042060-linear-gradient)" height="88.501px" id="gbPb4JY6k" width="88.50200000000001px"/><path d="M 0 88.501 L 59.001 59.001 L 88.502 0 L 29.5 29.5 Z" fill="url(%23LxgdyCqw1-177042060-linear-gradient)" height="88.50099999999998px" id="LxgdyCqw1" transform="translate(88.5 88.5)" width="88.50199999999995px"/><path d="M 0 0 L 29.504 59.004 L 88.502 88.501 L 59.004 29.503 Z" fill="url(%23E0DmtURCk-177042060-linear-gradient)" height="88.50099999999998px" id="E0DmtURCk" transform="translate(0 88.5)" width="88.50200000000001px"/><path d="M 0 0.001 L 29.497 59.011 L 88.501 88.502 L 58.998 29.51 L 0 0 Z" fill="url(%23wYbbNIM1D-177042060-linear-gradient)" height="88.502px" id="wYbbNIM1D" transform="translate(88.5 0)" width="88.50099999999998px"/></g></svg>)
Get Template