Brand Book · v01
The system behind
the floating staircase.
The visual language of CAworks — colour, type, logo and voice — drawn from The Cantilever Collection and set down here for the website and every brand touchpoint.
01 — Brand essence
Engineering, made to float.
CAworks designs, engineers and installs bespoke floating (cantilever) staircases. The brand should always feel like what the product is: precise, structural, quietly confident — engineering you can stand on, finished to a luxury standard.
Spend boldness in one place — a single dramatic staircase image or one strong line — and keep everything around it disciplined and spare. The brand is never busy.
Positioning
The UAE's only dedicated cantilever staircase specialists. Surveyed, engineered and installed in-house, across Dubai & the GCC.
Voice & tone
- Spare and engineering-forward. Short, declarative sentences.
- Concrete over clever — specifics (2 mm, hundreds installed, 1:1 CAD) beat adjectives.
- Confident, never boastful. Imply superiority through focus, not superlatives.
- Sentence case in copy; UPPERCASE tracked only for labels.
02 — Logo
The bracket mark.
The [CAworks] bracket wordmark is the primary mark. The brackets are part of the logo and must never be removed or substituted.
- Big on the homepage hero and the footer / contact area.
- Small in the top corner of interior pages, on the lighter side of the layout.
- Clearspace: keep free space around the mark equal to at least the bracket height on all sides.
- Colour: ink (#1F1B15) on light backgrounds. Reverse to paper (#ECE6DB) only on dark imagery.
- Don't: stretch, recolour to non-brand hues, add effects, or place the ink mark on a busy/dark photo without the reversed version.
A transparent PNG ships in the catalogue bundle (img/logo.png). Ask for an SVG for crisp web/retina use at any size.
03 — Colour
Bone, ink & oak.
A warm, material palette: a paper-bone ground, near-black ink for text, and a single oak accent that does all the highlighting. Oak is used sparingly — rules, seams, links, eyebrows — never as a fill.
Hairline dividers: rgba(31,27,21,.15) (--line). Deep stone #cfc8bb (--mat) is only a surround behind pages, not a content colour.
04 — Typography
Archivo & IBM Plex Mono.
Display & body
Archivo
Light 300 — headlines
Regular 400 — body & lede
Medium 500 — eyebrows, spec values
Semibold 600 — wordmark weight
Grotesque sans. Headlines set in Light with tight negative tracking; everything structural built from it.
Utility / labels
IBM Plex
Mono
Regular 400 — labels, captions
Medium 500 — emphasis labels
Monospace, always UPPERCASE with wide tracking (.16–.30em). Signals the engineering register. Never used for body copy.
Type scale
Display H1Archivo 300
~64–90px · lh .95
track −.022em
Floating Staircases
Section H2Archivo 300
~42–52px · lh 1.05
track −.018em
Straight Floating Staircases
Title H3Archivo 300
~30–34px
track −.017em
Private Residence
EyebrowArchivo 500 · 11px
track .30em · caps
oak-deep
Project 01 · Straight Floating
LedeArchivo 400 · 14.5–16px
lh 1.65 · ink-soft
Steel concealed within the wall. Oak suspended in mid-air.
BodyArchivo 400 · 12.5–14px
lh 1.6 · ink-soft
A single straight flight, treads carried clear of the wall and washed from beneath with a continuous line of warm LED.
Label / captionIBM Plex Mono 400
8–10px · track .22em
caps · steel
The Cantilever Collection
Frameless glass, standoff-fixed
Both families are free on Google Fonts — see the implementation block at the foot of this guide.
05 — Signature elements
The details that repeat.
Oak seam
A 1–2px vertical oak line (oak @ ~50% opacity) divides image panels and separates image from type. The brand's most recognisable device.
Oak rule
A short 54–58px × 2px oak bar sits under headlines to open a block. One per view — restraint.
Eyebrow + title
Section 02
Floating · Bottom Pyramid
Every block opens with an eyebrow label, then an Archivo-light title — structure that encodes the content, not decoration.
Spec grid
Type
Floating · cantilever
Balustrade
Frameless glass
A 2×2 label/value grid presents technical detail cleanly. Keys in mono caps (steel), values in Archivo medium (ink).
Imagery
- Real installation photography, full-bleed, object-fit: cover. Let one strong staircase image carry the page.
- House grade: a subtle lift only (≈ +4% contrast, −3% saturation, +5% sharpness). Warm, calm, true to material.
- Exclude clashing colour casts. Keep interiors warm/neutral to sit on the bone ground.
- On-image captions: Plex 8px caps, light text, bottom-left, soft shadow.
Layout principles
- Generous margins and quiet space — roughly a 6% edge frame; never crowd the type.
- Split compositions: image on one side, type on the other, divided by the oak seam.
- No repeating template back-to-back; vary composition, mirror-flip to pair related items.
- 16:9 landscape for the catalogue; the tokens and proportions carry straight into responsive web sections.
06 — Messaging
Lines that sell the work.
Drawn from the catalogue and ad work. Pair one headline with a supporting line and a single CTA. Keep claims true — reserve "hundreds" for 300+, otherwise use "over 100".
Positioning
- The UAE's only dedicated cantilever staircase specialists.
- Specialist floating staircase contractors.
- Dubai's floating stair experts.
Track record
- Over 100 floating staircases installed.
- Floating staircases mastered over hundreds of installations.
End-to-end
- Designed, engineered and installed by us.
- From 3D survey to final tread: one team, fully managed.
- Your cantilever staircase, designed by the people who engineer it.
Precision
- Surveyed by experts. No costly mistakes.
- 3D scanning accurate to 2 mm.
- Measured to within 2 mm.
Engineering
- CNC-cut for perfect accuracy.
- Modelled and tested before production.
- Load-tested for stability.
Bespoke
- Any shape. Any complexity.
- Hardwood or marble treads. Any handrail.
- Steel concealed in the wall. Oak suspended in mid-air.
Book a survey →Start your commission →Design yours with us →DM us your space →caworks.co
07 — Web implementation
Hand this to your developer.
Drop these tokens into the site's stylesheet and pull both families from Google Fonts. Everything above derives from them.
/* 1 · Fonts (in <head>) */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
/* 2 · Design tokens */
:root{
--paper:#ECE6DB; --ink:#1F1B15; --ink-soft:#5A5247;
--steel:#8E897E; --oak:#A97C46; --oak-deep:#8A6234;
--line:rgba(31,27,21,.15);
--font-display:"Archivo",sans-serif; /* 300 headings, 400 body, 500 labels */
--font-mono:"IBM Plex Mono",monospace; /* caps + wide tracking only */
}
body{background:var(--paper);color:var(--ink);font-family:var(--font-display);line-height:1.6}
/* 3 · Core type roles */
h1{font-weight:300;letter-spacing:-.022em;line-height:.95}
h2{font-weight:300;letter-spacing:-.018em}
.eyebrow{font-weight:500;font-size:11px;letter-spacing:.30em;
text-transform:uppercase;color:var(--oak-deep)}
.label{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
text-transform:uppercase;color:var(--steel)}
/* 4 · Accent details */
.rule{width:58px;height:2px;background:var(--oak)} /* under headlines */
.seam{width:1px;background:var(--oak);opacity:.5} /* divides panels */
a{color:var(--ink);text-decoration:none;
border-bottom:1px solid rgba(169,124,70,.55)} /* oak underline links */
img{object-fit:cover} /* full-bleed photography */
- Hero: one full-bleed staircase image + Archivo-light headline + oak rule + one CTA. Quiet, not busy.
- Accent discipline: oak is for rules, seams, link underlines and eyebrows only — never large fills. An outline button in oak suits the brand.
- Links: ink text with a subtle oak underline (as in this guide and the catalogue contact page). Sample: caworks.co
Brand Book · Dubai & GCC · caworks.co