Style guide

Style guide

Every token, class and pattern used on this site, on one page. Built on Finsweet Client-First V2. Change a variable here and the whole site follows.

How to reuse this clonable

  1. Colours. Open Variables. Change only the Base Color primitives (Brand and Neutral). The semantic tokens (Background, Text, Border, Button, Link) alias them, so every class updates.
  2. Fonts. Replace the two Font Family variables. Then set the Body and H1–H6 tag styles to match (Site settings → Custom code carries the same values for the published site).
  3. Photos. Every image is a Webflow asset. Replace the asset, keep the alt text pattern, and check the Licenses page.
  4. Content. Menu items and Journal posts are CMS collections. Nav and Footer are components: edit once.
  5. Structure. Every page is page-wrapper › main-wrapper › section_[id] › padding-global › container-[size] › padding-section-[size]. Keep it.

Colour

Primitives first, semantic tokens second. Classes only ever bind to the semantic layer.

Brand/moss
#3E5A44
Brand/moss-deep
#2C4032
Brand/moss-soft
#DCE4D6
Brand/clay
#B9704D
Neutral/cream
#F5F1E8
Neutral/cream-deep
#EBE4D5
Neutral/ink
#1F2420
Neutral/ink-soft
#5D635B
background-color-primary
background-color-secondary
background-color-tertiary
background-color-alternate
background-color-brand

Type

Fraunces for headings (weight 400, optical size auto). Instrument Sans for everything else. Headings carry no class by default; heading-style-h1 to h6 exist for SEO-forced mismatches only.

Heading one. Slow coffee in a fast city.

Heading two. A warehouse in Al Quoz.

Heading three. Roasted here, on Tuesdays.

Heading four. Alserkal Avenue

Heading five. Address
Heading six. Hours

Body. A coffee house and small bakery in Dubai. We roast on Tuesdays, bake before dawn, and keep the chairs comfortable enough that you forget to leave. Links look like this.

text-size-large. Prices in AED and include VAT.

text-size-medium. Prices in AED and include VAT.

text-size-small. Prices in AED and include VAT.

text-size-tiny. Prices in AED and include VAT.

text-style-eyebrow · Alserkal Avenue

text-style-quote. Boring to watch and impossible to fake.

text-color-secondary. Used for supporting copy.

Buttons

buttonbutton is-secondarybutton is-text →
button is-alternate

Structure and spacing

Project decisions, recorded once so nobody drifts.

  • container-small 40rem · container-medium 56rem · container-large 80rem
  • padding-global 2.5rem → 2rem (tablet) → 1.25rem (mobile)
  • padding-section-small 3rem · medium 5rem · large 7.5rem (tablet 2.5 / 4 / 5.5, mobile 2 / 3 / 4)
  • Spacing scale: 0 · tiny 0.125 · xxsmall 0.25 · xsmall 0.5 · small 1 · medium 2 · large 3 · xlarge 4 · xxlarge 5 · huge 6 · xhuge 8 · xxhuge 12 · custom1 1.5 · custom2 2.5 · custom3 3.5 (rem)
  • Radius 0.25rem everywhere. Borders 1px, Border/primary.
  • Folders: nav_ footer_ home-* menu-* story-* visit-* journal-card_ post_ location_ menu-item_ section-header_ page-header_ form_

Motion

Add data-reveal to any element for a 0.7s fade and 1rem rise when it enters the viewport. Add data-reveal-group to a parent to stagger its children by 80ms. Everything is disabled under prefers-reduced-motion and when JavaScript is off. The nav gains a background after 24px of scroll. That's the whole motion system.

Forms

form_label
form_input
form_message-success
form_message-error