ALIF Design System
Site Config
Single source of truth for the ALIF site. Every colour, type step, space, radius and border below is a Webflow Variable — never type a raw value into a style. Font sizes switch automatically at Tablet (991px) and Mobile (767px) via the Typography collection's modes; container gutters and section rhythm switch via the Layout collection, carried by the page-wrapper class on the Body of every page.
Colour
Collection: Colors — each swatch name is also its CSS variable, e.g. primary-500 = var(--primary-500)
Brand ramp
primary-50
primary-100
primary-200
primary-300
primary-400
primary-500 · brand
primary-600 · brand-strong
primary-700
primary-800
primary-900
primary-950
Neutral ramp & base
white · bg-page
neutral-50 · bg-surface
neutral-100
neutral-200 · border-subtle
neutral-300 · border-default
neutral-400
neutral-500 · text-muted
neutral-600 · text-secondary
neutral-700
neutral-800 · border-strong
neutral-850 · text-primary
neutral-900
neutral-950 · bg-inverse
black
cream · bg-surface-alt
ink-muted
green · success
Semantic aliases — prefer these in components
--brand
primary-500 — all primary buttons, accents, the heading dot
--brand-strong
primary-600 — pressed / active brand states
--brand-soft
primary-50 — tinted backgrounds
--bg-page
white — default page background
--bg-surface
neutral-50 — raised panels, this page
--bg-surface-alt
cream — warm section backgrounds (case studies)
--bg-inverse
neutral-950 — dark sections, hero, results
--text-primary
neutral-850 — body copy and headings on light
--text-secondary
neutral-600 — section descriptions
--text-muted
neutral-500 — meta, captions, tags
--text-inverse
white — copy on dark sections
--border-subtle
neutral-200 — dividers, card outlines
--border-default
neutral-300 — tag and input borders
--border-strong
neutral-800 — active chip outline
--border-on-dark
white-a22 — outlines on dark sections
--success
green — positive states, availability dot
Alpha overlays
On light — black-a10 · black-a16 · black-a22 · black-a40 · black-a55 · black-a60 · black-a70 · black-a78 · black-a88 · black-a90. The number is the opacity percentage: black-a55 = rgba(0,0,0,.55).
On dark — white-a04 · white-a12 · white-a14 · white-a16 · white-a22 · white-a24 · white-a45 · white-a70 · white-a72 · white-a86. Plus transparent for explicit no-fill.
Use these for scrims, glass panels and borders over imagery — never a flat neutral with opacity on the element itself.
Typography
Collection: typography — sizes carry Desktop / Tablet / Mobile modes. Resize the browser and these specimens resize themselves; no breakpoint override needed on the class.
Families
--font-heading-family
Clash Display — Medium 500. All headings, numerals and pull quotes. Always uppercase except quotes.
--font-body-family
Satoshi — Regular 400 / Medium 500 / Bold 700. Body copy, labels, buttons, navigation.
Scale — class · desktop / tablet / mobile
.heading-display · 140 / 96 / 66
Alif
.heading-1 · 86 / 64 / 44
Brands that mean something
.heading-2 · 66 / 52 / 40
Built to be remembered
.heading-3 · 44 at every breakpoint
Section titles live here
.heading-4 · 32 / 28 / 24
Service and card titles
.heading-5 · 26 / 24 / 22
Sub headings and captions
.numeral · 52 / 44 / 36
+212%
.quote · 36 / 30 / 26
“They understood the business before they touched the brand.”
.body-lg · 18
Lead paragraphs and intro copy sit at this size, with leading-body for comfortable reading.
.body-md · 16 / 16 / 15
The default body size for descriptions, card copy and list items across the site.
.body-sm · 14
Secondary copy, meta lines, form help text and table cells.
.eyebrow · 12 · tracking-eyebrow
What we do
.label-caps · 12 · tracking-label
Sector
.micro · 10 · tracking-micro
Legal and footnotes
Supporting tokens
Weights
weight-regular 400 · weight-medium 500 · weight-bold 700
Line height
leading-display .86 · leading-h1 .9 · leading-h2 .92 · leading-none 1 · leading-heading 1.05 · leading-snug 1.1 · leading-title 1.2 · leading-body 1.4 · leading-relaxed 1.5 · leading-loose 1.75
Letter spacing
All in em so tracking scales with the size: tracking-display -.042 · tracking-h1 -.035 · tracking-h3 -.03 · tracking-tight -.02 · tracking-none 0 · tracking-wide .03 · tracking-wider .04 · tracking-button .1 · tracking-nav .13 · tracking-micro .14 · tracking-eyebrow .2 · tracking-label .22
Also available
text-display-sm 66 · text-h2 48 · text-h3-sm 30 · text-2xl 24 · text-xl 20 · text-lg 18 · text-base 16 · text-sm 14 · text-xs 12 · text-micro 10 · text-quote-lg 40 · text-statement 32 · text-numeral-lg 110 · text-numeral-sm 42
Space, layout, radius & borders
Collections: Spacing (static primitive scale) · Layout (responsive) · Radius · Border
Spacing scale — same value at every breakpoint
space-3xs · 4px
space-2xs · 8px
space-xs · 12px
space-sm · 16px
space-md · 24px
space-lg · 32px
space-xl · 40px
space-2xl · 60px
space-3xl · 80px
space-4xl · 100px
space-5xl · 120px
space-6xl · 200px
Layout tokens — desktop / tablet / mobile
container-gutter
80 / 40 / 16 — left and right padding on .container
section-padding-y
100 / 60 / 60 — vertical rhythm on .section
section-heading-gap
60 / 40 / 40 — gap between a section heading and its content
grid-gutter
24 / 24 / 16 — column and row gap in card grids
navbar-height
84 / 84 / 72 — offset for anchors and hero padding
container-max
1512 — the Figma desktop frame width; the site currently runs full-bleed
How it switches
The Layout collection's Tablet and Mobile modes are applied to the .page-wrapper class at the Tablet and Mobile breakpoints. Put .page-wrapper on the outermost div of every page — without it, layout tokens stay at their desktop values.
Radius
rounded-none · 0
rounded-xs · 4
rounded-sm · 8
rounded-md · 12
rounded-lg · 16
rounded-tag · 20
rounded-xl · 24
rounded-card · 32
rounded-image · 60
rounded-full · 999
Border widths
border-width-none · 0
Explicitly remove a border in a modifier class
border-width-thin · 1
The default — every card, tag, chip, input and divider on the site
border-width-medium · 2
Focus rings and selected states
border-width-thick · 4
Heavy rules and decorative underlines
Components
Live instances. Drop these from the Components panel and set the props in the settings pane — do not copy-paste markup between pages.
Buttons
Buttons on dark
Elements
Cards
Article title
A short standfirst for the article.
Industry
What we do for this sector, in one line.
Layout blocks
Section title
A short supporting line under the section title.
All services
Brand strategy
A question a client actually asks
The answer, in plain language.
Working conventions
Read this before touching a page — it is what keeps two people out of each other's way.
01 · No raw values
Every colour, font size, weight, line height, letter spacing, space, radius and border width comes from a Variable. If a value you need is missing, add it to the right collection and document it here — do not type a number into a style.
02 · Class naming
Page sections use a page prefix plus BEM: hp- for the homepage, wp- for projects, cs- for case studies, sc- for this config page. Shared utilities have no prefix: section, container, btn, tag, chip, heading-1 to heading-5, body-lg to body-sm, eyebrow, label-caps, micro, quote, numeral. Modifiers are combo classes: --dark, --active, is-*.
03 · Responsive
Do not add a breakpoint override for a font size or a container gutter. The Typography collection switches modes automatically at Tablet and Mobile; the Layout collection switches through the page-wrapper class. Only add a breakpoint override when the layout itself changes — columns collapsing, direction flipping, an element hiding.
04 · Every new page
Outermost div gets the page-wrapper class. Insert the Navbar and Footer components rather than duplicating a page. Copy the navbar head style block and the alifnav script from an existing page — they are per-page, not global.
05 · Repeating content
There is no CMS on this site by choice. Repeating items are static markup built from the card components above, with props set per instance. Keep every item in a list structurally identical so it stays easy to duplicate.
06 · Motion
GSAP and ScrollTrigger, in registered scripts — not Webflow Interactions. Reveal targets carry a data-reveal attribute.
07 · Never hardcode a size
Media boxes use aspect-ratio, never a fixed height. Heroes use min-height 100svh.
08 · Staying out of each other's way
One person per page at a time. Changing a shared class or a variable affects every page — say so before you do it. New work belongs in a new prefixed class, not in an edit to an existing shared one.