The Aethel Design System
The type scale, colors, buttons and spacing behind every page. Every value comes from a Webflow variable.
1. Typography
Inter, set through Font Family/Primary. Headings use the H1–H6 tag styles; sizes change per breakpoint through the Typography modes and are listed as Desktop / Tablet / Mobile (≥ 992px / ≤ 991px / ≤ 767px). Paragraphs and bold text take their size, line height, color and weight from the All Paragraphs and Bold Text tag styles.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Card title
Trade, stake and track crypto in one place.
Trade, stake and track crypto in one place.
Trade, stake and track crypto in one place.
Trade, stake and track crypto in one place.
Trade, stake and track crypto in one place.
Trade, stake and track crypto in one place.
Trade, stake and track crypto in one place.
Aa
Font Weight/Regular
400
Aa
Font Weight/Medium
500
Aa
Font Weight/Semibold
600
Aa
Font Weight/Bold
700
Line Height/Solid
1
Line Height/Tight
1.1 · 1.15 · 1.15
Line Height/Snug
1.2
Line Height/Normal
1.3
Line Height/Relaxed
1.4
Line Height/Loose
1.65
Letter Spacing/Tightest
−0.04em
Letter Spacing/Tight
−0.03em
Letter Spacing/Snug
−0.02em
Letter Spacing/Wide
0.1em
Letter Spacing/Widest
0.36em
Font Size/Display XL
300 · 220 · 120 px (404 digits)
Font Size/Subheading
24 · 20 · 18 px
Font Size/Title
22 · 20 · 18 px
Font Family/Primary
Inter, Arial, sans-serif
Font Family/Mono
ui-monospace, Menlo, Consolas, monospace
2. Colors
Every color variable in the Base collection. Transparent colors sit on a purple and dark split, so you can see how they look over both.
Core and brand
Color/Ink
#020010
Color/Black
#000000
Color/White
#ffffff
Color/Text
#d3d3d3
Color/Brand
#6d3fea
Color/Brand Soft
#a492ed
Color/Brand Tint
rgba(164, 146, 237, 0.12)
Color/Brand Line
rgba(164, 146, 237, 0.35)
Color/Glow
#7048ff
Color/Lilac
#9b76ff
Color/Lilac Pale
#d7c9ff
Color/Lilac Light
#b8a2f3
Color/Lilac Muted
#7e6bb2
Color/Navy
#231446
Color/Navy Glow
rgba(25, 20, 70, 0.21)
Color/Navy Clear
rgba(25, 20, 70, 0)
Color/Navy Glass
rgba(18, 12, 46, 0.8)
Status and coins
Color/Success
#92eec5
Color/Success Tint
rgba(90, 195, 133, 0.15)
Color/Success Line
#5a8e82
Color/Online
#00ce61
Color/Error
#ff2244
Color/Error Soft
#ff6b81
Color/Error Tint
rgba(255, 34, 68, 0.12)
Color/Error Line
rgba(255, 34, 68, 0.4)
Color/Star
#fdc913
Color/Coin Yellow
#f7931a
Color/Coin Green
#02ab7a
Color/Coin Blue
#0061ff
Color/Coin Orange
#ff5000
Color/Coin Purple
#aa15dd
Surfaces, borders and shades
Color/Transparent
rgba(255, 255, 255, 0)
Color/Surface Faint
rgba(255, 255, 255, 0.01)
Color/Surface Subtle
rgba(255, 255, 255, 0.05)
Color/Surface
rgba(255, 255, 255, 0.1)
Color/Surface Strong
rgba(255, 255, 255, 0.25)
Color/Border
rgba(255, 255, 255, 0.15)
Color/Border Strong
rgba(255, 255, 255, 0.2)
Color/Border Bright
rgba(255, 255, 255, 0.3)
Color/Highlight
rgba(255, 255, 255, 0.4)
Color/Text Muted
rgba(255, 255, 255, 0.5)
Color/Text Soft
rgba(255, 255, 255, 0.6)
Color/Shade Soft
rgba(0, 0, 0, 0.15)
Color/Shade
rgba(0, 0, 0, 0.25)
Color/Shade Medium
rgba(2, 0, 16, 0.35)
Color/Shade Strong
rgba(0, 0, 0, 0.65)
4. Captions
The Section Caption sits above section titles. It comes in four variants.
Center · 350px
Narrow · 300px
Left · 200px
Hero · 337px
5. Radius and borders
Corner radii and border widths from the Layout collection.
Radius/2XS
3px
Radius/XS
6px
Radius/Small
8px
Radius/Medium
11px
Radius/Card
16px
Radius/Large
20px
Radius/XL
30px
Radius/XXL
50px
Radius/Pill
999px
Radius/Round
50%
Border/Hairline
0.5px
Border/Thin
1px
Border/Medium
2px
Border/Thick
3px
Border/Heavy
5px
Border/Arc
100px
Border/Arc Compact
70px
6. Spacing
The spacing scale used for padding and gaps. The layout values below change per breakpoint through modes.
Spacing/Hairline
1px
Spacing/3XS
2px
Spacing/3XS Plus
3px
Spacing/2XS
4px
Spacing/XS
6px
Spacing/Small
8px
Spacing/Small Plus
10px
Spacing/Medium Small
12px
Spacing/Medium
16px
Spacing/Medium Plus
18px
Spacing/Medium Large
20px
Spacing/Large
24px
Spacing/Large Plus
30px
Spacing/XL
40px
Spacing/XL Plus
48px
Spacing/2XL
60px
Spacing/3XL
80px
Spacing/4XL
100px
Variable
Desktop
Tablet
Mobile
Spacing/Gutter
30px
20px
16px
Spacing/Section
100px
60px
40px
Spacing/Section Plus
150px
90px
60px
Spacing/Section XL
180px
120px
88px
Spacing/Section Gap
80px
60px
40px
Spacing/Container
1190px
1190px
1190px
Spacing/Logo Gap
100px
52px
28px
Spacing/Hero Top
215px
160px
140px
Spacing/Page Top
200px
170px
140px
Spacing/Page Gap
120px
80px
60px
Spacing/Panel Top
92px
92px
92px
Spacing/Button Text Start
89px
64px
64px
Spacing/Button Text End
27px
22px
22px