Reference
Style guide
Everything below is read from the site's own stylesheet as this page loads. Change a token in base.css and it changes here — the two cannot drift apart.
Colour
--mc-bg
#0A0A0A
--mc-surface
#111111
--mc-card
#161616
--mc-accent
#F5A623
--mc-text
#FFFFFF
--mc-text-muted
#C4C4C4
--mc-text-faint
#9E9E9E
--mc-line
#262626
--mc-accent-hover
#FFB840
--mc-on-accent
#0A0A0A
--mc-select-bg
#F5A623
--mc-tap-highlight
rgba(245, 166, 35, 0.24)
Type
--mc-font-display |
'Syne', 'Cairo', system-ui, sans-serif |
|---|---|
--mc-font-body |
'Inter', 'Cairo', system-ui, sans-serif |
--mc-font-arabic |
'Cairo', system-ui, sans-serif |
--mc-font-heading-sm |
var(--mc-font-body) |
--mc-weight-body |
400 |
--mc-weight-medium |
500 |
--mc-weight-bold |
700 |
--mc-weight-black |
800 |
--mc-step-0 |
1rem |
--mc-step-1 |
clamp(1.125rem, 0.5vw + 1rem, 1.375rem) |
--mc-step-2 |
clamp(1.375rem, 1vw + 1.1rem, 1.875rem) |
--mc-step-3 |
clamp(1.75rem, 2vw + 1.2rem, 2.75rem) |
--mc-step-4 |
clamp(2.25rem, 4vw + 1.2rem, 4rem) |
--mc-leading-tight |
1.2 |
--mc-leading-body |
1.7 |
Spacing
--mc-space-xs |
0.5rem |
|---|---|
--mc-space-sm |
1rem |
--mc-space-md |
1.5rem |
--mc-space-lg |
2.5rem |
--mc-space-xl |
clamp(3rem, 6vw, 6rem) |
Other
--mc-radius |
12px |
|---|---|
--mc-radius-pill |
999px |
--mc-container |
1200px |
Headings
Hero linein gold
Section heading second half
Card title
Body copy. The measure here is deliberately narrow — long lines are the single most common way a dark site becomes hard to read.
Buttons
Icons
target
compass
chart
bag
camera
globe
bolt
calendar
people
email
whatsapp
phone
instagram
facebook
linkedin