Style Guide
v1.0
Complete visual reference for TUNL’s design system — colours, typography, spacing, and components.
01 — Colours
Color Palette
All token-based colors available in the project. Use token references, not raw hex values.
Brand Blue
Tunl Blue
#007BC4
Darker Blue
#006FB0
Darkest Blue
#00629D
Dark Blue
#022338
Light Blue
#B0D6ED
Extra Light Blue
#D9EBF6
Brand Red
Red
#ED6F6A
Dark Red
#D5645F
Light Red
#F9D2D1
Brand Green
Green
#C9D863
Dark Green
#B5C259
Light Green
#EEF3CF
Brand Yellow
Yellow
#F9DD8A
Dark Yellow
#E0C77C
Light Yellow
#FDF4DB
Brand Pink
Pink
#EAB0C8
Dark Pink
#D39EB4
Light Pink
#F8E7EE
Brand Sky Blue
Sky Blue
#9ABFF4
Dark Sky Blue
#8BACDC
Light Sky Blue
#E0EBFC
Neutrals
Black-900
#000000
Black-600
#2E2E2E
Black-300
#575757
Black-200
#666666
Black-90
#ADADAD
Black-40
#DEDEDE
Black-30
#EBEBEB
Black-20
#FFFCF5
Black-10
#FAFAFA
Surfaces
White
#FFFFFF
Light Cream
#FEFEF9
Cream
#FBFCED
02 — Typography
Type Scale
All styles use Host Grotesk. Presets define weight and color — sizes are applied per context.
Aa
Regular — 400
Aa
Semibold — 600
Aa
Bold — 700
Aa
Extra Bold — 800
H1 — Extra Bold
52px
Powerful international shipping
H1 — Bold
52px
Powerful international shipping
H1 — Semibold
52px
Powerful international shipping
H2 — Extra Bold
40px
Get started in minutes
H2 — Bold
40px
Get started in minutes
H2 — Semibold
40px
Get started in minutes
H3 — Extra Bold
30px
Connect your store, let TUNL handle the rest
H3 — Bold
30px
Connect your store, let TUNL handle the rest
H3 — Semibold
30px
Connect your store, let TUNL handle the rest
H4 — Extra Bold
22px
Real-time rates at checkout
H4 — Bold
22px
Real-time rates at checkout
H4 — Semibold
22px
Real-time rates at checkout
Body LG — Regular
18px
TUNL makes it easy to ship internationally with live rates, order sync, and one-click fulfilment from your Shopify store.
Body LG — Semibold
18px
TUNL makes it easy to ship internationally with live rates, order sync, and one-click fulfilment.
Body MD — Regular
15px
Your complete shipping solution for global commerce. Connect in minutes, ship worldwide.
Body MD — Light (white)
15px
Available on dark backgrounds — white text for contrast.
03 — Spacing
Spacing Scale
Consistent spacing values used for padding, gap, and margin throughout the product. Smaller values for inline/component spacing, larger values for section rhythm.
4px Icon gap, micro
8px Tight inline
10px Component gap
12px Dense list gap
16px Button padding, item gap
18px Form element gap
20px Phone body padding
22px Phone/tablet gaps
24px Card padding, section sub-gap
32px Card content gap
36px Tablet page gutter
40px Feature list gap
44px Section vertical padding
64px Desktop MD page gutter
88px Primary section gap
04 — Components
Component Reference
All interactive components available in the project. Use the component panel to insert them and set the appropriate variant.
Buttons / Primary
Buttons / Links
Breakpoints
Phone
≤ 809px
Canvas: 390px
Body: 20px
Tablet
810–1219px
Canvas: 810px
Body: 36px
Desktop MD
1220–1919px
Canvas: 1220px
Body: 64px
Desktop LG
≥ 1920px
Canvas: 1920px
Sections: maxWidth 1440