primary
#424945
secondary
#7f8581
accent
#fcc285
background
#f7fbf6
text
#424945
Newsreader for headings, DM Sans for body - tokens generated 2026-09-11
Campaigns
14 pages
Building & Construction Disputes
/building-construction
Debt Recovery Lawyers
/debt-recovery
Letter of Demand QLD
/letter-of-demand
Statutory Demands QLD
/statutory-demands
Bankruptcy + Insolvency
/bankruptcy-insolvency
Tax Debt Disputes
/tax-debt-disputes
Commercial Litigation
/commercial-litigation
Peace + Good Behaviour
/peace-good-behaviour
Civil + Personal Litigation
/civil-personal-litigation
Business Law Services
/business-law-services
Residential Building Contract Review
/residential-building-contract-review
Defamation Lawyers
/defamation
Blog Post Template
/blog-post
News & Articles
/news-articles
Brand colours
Generated scales, exact surfaces and alpha helpers
Olive
400
#9AA39E
500
#7F8581
700
#57605B
800
#424945
900
#333836
Gold
200
#F2D4B3
300
#FCC285
400
#F6AC5F
700
#CC6B05
800
#A85700
Sage
100
#E4E5E4
300
#BBC0BB
Champagne
100
#F2E8DA
300
#F1CA94
Surfaces and helpers
Mist/50
#F7FBF6
Cloud/100
#F2F3F5
White/50
#FFFFFF
Black/900
#19191A
Alpha/Olive 12%
rgba(66, 73, 69, 0.12)
Alpha/Olive 24%
rgba(66, 73, 69, 0.24)
Alpha/White 8%
rgba(255, 255, 255, 0.08)
Alpha/White 12%
rgba(255, 255, 255, 0.12)
Alpha/White 24%
rgba(255, 255, 255, 0.24)
Alpha/White 48%
rgba(255, 255, 255, 0.48)
Alpha/White 96%
rgba(255, 255, 255, 0.96)
Colour schemes
One mode per section colour. Values alias into the brand scales.
Mist
- Background/Background
- Background/Background Overlay
- Background/Foreground
- Border/Divider
- Border/Image Border
- Text/Heading
- Text/Default
- Text/Alternate
- Text/Accent
- Button/Primary/Default/Text
- Button/Primary/Default/Background
- Button/Primary/Default/Border
- Button/Primary/Hovered/Text
- Button/Primary/Hovered/Background
- Button/Primary/Hovered/Border
- Button/Secondary/Default/Text
- Button/Secondary/Default/Background
- Button/Secondary/Default/Border
- Button/Secondary/Hovered/Text
- Button/Secondary/Hovered/Background
- Button/Secondary/Hovered/Border
- Button/Slider Button/Default/Text
- Button/Slider Button/Default/Background
- Button/Slider Button/Default/Border
- Button/Slider Button/Hovered/Text
- Button/Slider Button/Hovered/Background
- Button/Slider Button/Hovered/Border
- Button/Form Button/Default/Text
- Button/Form Button/Default/Background
- Button/Form Button/Default/Border
- Button/Form Button/Hovered/Text
- Button/Form Button/Hovered/Background
- Button/Form Button/Hovered/Border
- Tags/Tag 1/Text
- Tags/Tag 1/Background
- Tags/Tag 1/Background Overlay
- Tags/Tag 2/Text
- Tags/Tag 2/Background
- Tags/Tag 2/Background Overlay
- Tags/Tag 3/Text
- Tags/Tag 3/Background
- Tags/Tag 3/Background Overlay
Olive
- Background/Background
- Background/Background Overlay
- Background/Foreground
- Border/Divider
- Border/Image Border
- Text/Heading
- Text/Default
- Text/Alternate
- Text/Accent
- Button/Primary/Default/Text
- Button/Primary/Default/Background
- Button/Primary/Default/Border
- Button/Primary/Hovered/Text
- Button/Primary/Hovered/Background
- Button/Primary/Hovered/Border
- Button/Secondary/Default/Text
- Button/Secondary/Default/Background
- Button/Secondary/Default/Border
- Button/Secondary/Hovered/Text
- Button/Secondary/Hovered/Background
- Button/Secondary/Hovered/Border
- Button/Slider Button/Default/Text
- Button/Slider Button/Default/Background
- Button/Slider Button/Default/Border
- Button/Slider Button/Hovered/Text
- Button/Slider Button/Hovered/Background
- Button/Slider Button/Hovered/Border
- Button/Form Button/Default/Text
- Button/Form Button/Default/Background
- Button/Form Button/Default/Border
- Button/Form Button/Hovered/Text
- Button/Form Button/Hovered/Background
- Button/Form Button/Hovered/Border
- Tags/Tag 1/Text
- Tags/Tag 1/Background
- Tags/Tag 1/Background Overlay
- Tags/Tag 2/Text
- Tags/Tag 2/Background
- Tags/Tag 2/Background Overlay
- Tags/Tag 3/Text
- Tags/Tag 3/Background
- Tags/Tag 3/Background Overlay
Gold
- Background/Background
- Background/Background Overlay
- Background/Foreground
- Border/Divider
- Border/Image Border
- Text/Heading
- Text/Default
- Text/Alternate
- Text/Accent
- Button/Primary/Default/Text
- Button/Primary/Default/Background
- Button/Primary/Default/Border
- Button/Primary/Hovered/Text
- Button/Primary/Hovered/Background
- Button/Primary/Hovered/Border
- Button/Secondary/Default/Text
- Button/Secondary/Default/Background
- Button/Secondary/Default/Border
- Button/Secondary/Hovered/Text
- Button/Secondary/Hovered/Background
- Button/Secondary/Hovered/Border
- Button/Slider Button/Default/Text
- Button/Slider Button/Default/Background
- Button/Slider Button/Default/Border
- Button/Slider Button/Hovered/Text
- Button/Slider Button/Hovered/Background
- Button/Slider Button/Hovered/Border
- Button/Form Button/Default/Text
- Button/Form Button/Default/Background
- Button/Form Button/Default/Border
- Button/Form Button/Hovered/Text
- Button/Form Button/Hovered/Background
- Button/Form Button/Hovered/Border
- Tags/Tag 1/Text
- Tags/Tag 1/Background
- Tags/Tag 1/Background Overlay
- Tags/Tag 2/Text
- Tags/Tag 2/Background
- Tags/Tag 2/Background Overlay
- Tags/Tag 3/Text
- Tags/Tag 3/Background
- Tags/Tag 3/Background Overlay
Champagne
- Background/Background
- Background/Background Overlay
- Background/Foreground
- Border/Divider
- Border/Image Border
- Text/Heading
- Text/Default
- Text/Alternate
- Text/Accent
- Button/Primary/Default/Text
- Button/Primary/Default/Background
- Button/Primary/Default/Border
- Button/Primary/Hovered/Text
- Button/Primary/Hovered/Background
- Button/Primary/Hovered/Border
- Button/Secondary/Default/Text
- Button/Secondary/Default/Background
- Button/Secondary/Default/Border
- Button/Secondary/Hovered/Text
- Button/Secondary/Hovered/Background
- Button/Secondary/Hovered/Border
- Button/Slider Button/Default/Text
- Button/Slider Button/Default/Background
- Button/Slider Button/Default/Border
- Button/Slider Button/Hovered/Text
- Button/Slider Button/Hovered/Background
- Button/Slider Button/Hovered/Border
- Button/Form Button/Default/Text
- Button/Form Button/Default/Background
- Button/Form Button/Default/Border
- Button/Form Button/Hovered/Text
- Button/Form Button/Hovered/Background
- Button/Form Button/Hovered/Border
- Tags/Tag 1/Text
- Tags/Tag 1/Background
- Tags/Tag 1/Background Overlay
- Tags/Tag 2/Text
- Tags/Tag 2/Background
- Tags/Tag 2/Background Overlay
- Tags/Tag 3/Text
- Tags/Tag 3/Background
- Tags/Tag 3/Background Overlay
Typography
Font size is the only bound variable. Line height and tracking live on the style.
Heading/Display
76 / 44px - 600 - 100%
The quick brown fox
Heading/Heading 1
56 / 36px - 600 - 105%
The quick brown fox
Heading/Heading 2
44 / 30px - 600 - 115%
The quick brown fox
Heading/Heading 3
34 / 26px - 600 - 120%
The quick brown fox
Heading/Heading 4
30 / 22px - 600 - 130%
The quick brown fox
Heading/Heading 5
28 / 20px - 600 - 130%
The quick brown fox
Heading/Heading 6
22 / 18px - 600 - 130%
The quick brown fox
Text/Eyebrow/Small
16 / 16px - 600 - 26px
The quick brown fox
Text/Medium/Regular
18 / 18px - 400 - 150%
The quick brown fox
Text/Small/Regular
16 / 16px - 400 - 150%
The quick brown fox
Text/Small/Semi-Bold
16 / 16px - 600 - 150%
The quick brown fox
Text/Small/Black
16 / 16px - 900 - 150%
The quick brown fox
Text/xSmall/Regular
14 / 14px - 400 - 150%
The quick brown fox
Text/xSmall/Semi-Bold
14 / 14px - 600 - 150%
The quick brown fox
Text/xSmall/Bold
14 / 14px - 700 - 150%
The quick brown fox
Text/xSmall/Black
14 / 14px - 900 - 150%
The quick brown fox
Text/xxSmall/Regular
12 / 12px - 400 - 150%
The quick brown fox
Spacing, radius and layout
Desktop (1440) and Mobile (393) modes
General
Gutter
40 / 20
Horizontal Padding
Horizontal Padding/Medium
80 / 24
Vertical Padding
Vertical Padding/Medium
112 / 48
Spacing
Spacing/xSmall
8 / 8
Spacing/Small
12 / 12
Spacing/Medium
16 / 16
Spacing/Large
24 / 20
Spacing/xLarge
32 / 24
Spacing/xxLarge
48 / 28
Spacing/Huge
64 / 32
Spacing/xHuge
96 / 48
Max-Width
Max-Width/Large
1312 / 393
Max-Width/Medium
968 / 393
Max-Width/Small
840 / 393
Radius
Radius/Small
8 / 8
Radius/Medium
12 / 12
Radius/Large
16 / 16
Button
Button/Primary/Mask Height
21 / 21
Button/Primary/Padding Left
24 / 24
Button/Primary/Padding Right
16 / 16
Button/Primary/Padding Top
16 / 16
Button/Primary/Padding Bottom
16 / 16
Assets
8 files in /clients/odysseylegal-com-au/assets
blog-featured-defamation.jpg
361 KB
hero-office.png
1.6 MB
lawyer-portrait.png
1.9 MB
logo-dark.png
27 KB
logo.avif
10 KB
related-pleading-imputations.png
1.8 MB
related-proceedings-worth-it.png
2.3 MB
related-qls-awards.png
1.6 MB