offplan.online
Brandbook v2 · 2026-05-06
Hybrid Calatrava direction
offplan.online · Brandbook v2

The frame for
architectural sales.

A hybrid system. Skeleton White carries the marketing voice — sculptural, Calatrava-inflected, white-on-bone. Warm Stone carries the product — receding, museum-label calm. Two registers, one wordmark, one set of tokens.

VERSIONv2.0 · 2026-05-06
SUPERSEDESv1.3 · 2026-05-01
DIRECTIONHybrid Calatrava
WORDMARKRib Fan (V5)
Foundation

Two modes, one system

v1 specified one register: warm stone, museum-label restraint. v2 keeps that verbatim for the product, and adds a second register — Skeleton White — for the marketing surface, where the brand needs to assert itself before the rendering ever appears.

Mode 01 · Marketing
Skeleton White
For landing pages, pitch decks, partner materials, anything where offplan.online speaks before the studio's renders do. Bone background #F6F5F2, espresso ribs #1A1816, axial symmetry, visible structural sketch lines.
Mode 02 · Product
Warm Stone
For Sales App and Admin Panel — the rendering is the hero, UI recedes. Inherits the entire Figma-confirmed token set from v1.1: stone scale, atmosphere gradient, glass overlays, gold accent, navy depth. Calatrava influence shows up as quiet rib motifs at section boundaries.
When to use which
SurfaceModeWhy
offplan.online landingSkeleton WhiteBrand must assert itself; no studio render present
Pitch deck for studiosSkeleton WhiteSame — speaking as offplan, not as a project
Buyer Sales AppWarm StoneStudio's render is hero; UI must recede
Operator Admin PanelWarm Stone v7 (atmosphere)Default empty state; works without uploaded photo
Embedded iframe widgetWarm Stone v5 (solid)Performance + browser compatibility
Studio's own white-labelWarm Stone, override tokensSystem holds; only :root values change
Brand · Wordmark

The Rib Fan

A fan of six structural ribs anchored at a single point, capped by a parabolic arc and a base line. Reads as architecture before it reads as a logo. The mark sits at x-height with the wordmark, never above or to the side.

offplan.online
Construction
ANCHOR BASELINE APEX
Ribs6 lines from anchor
Apex arcQuadratic Bézier · 55% opacity
Baseline1px hairline · full width
Stroke ratioMark height / 34
Mark / type ratioMark height = 0.95 × cap height
Mark / type gap0.32em
TypeHelvetica Neue 300 · -0.02em tracking
Domain (.online)Helvetica Neue 200 · 40% opacity
Minimum size16px (mark height) · digital · 14mm print
Clear space

Reserve half the mark height (½ M) on every side. Dashed lines below show the minimum exclusion zone — never bring text or graphics inside it.

offplan.online
In context
offplan.online
On surface · default
offplan.online
On dark · navy / charcoal
offplan.online
Over imagery · atmosphere
offplan.online
Header size · 24px
offplan.online
Minimum · 14px
Mark only · favicon, app icon
Don'ts
NeverStretch or compress the mark — preserve aspect ratio
NeverAdd stroke weight — ribs stay at 1.1 unit
NeverTilt or rotate — the mark is always horizontal
NeverApply gradient or shadow to the mark
NeverPlace over busy imagery without scrim or atmosphere overlay
NeverUse mark without baseline — the baseline is the ground
NeverRecolor with brand accents — only ink, white, or stone
Colour

The full palette

All v1 Figma-confirmed values carry through unchanged. v2 adds two new ink/bone values for Skeleton mode, and tightens the gradient stops on atmosphere with cleaner names.

Skeleton mode · new in v2
Bone
#F6F5F2 · --skel-bg
Marketing background · pale concrete
Espresso Ink
#1A1816 · --skel-rib
Ribs, headlines, mark — never pure black
Canvas
#FFFFFF · --skel-canvas
Floating elements over Bone
Ink Soft
rgba(26,24,22,0.18)
Visible rib structure · hairlines
Stone scale · v1 confirmed, unchanged
Stone 700
#7C7574
Buttons, borders, labels
Stone 500
#9A9594
Secondary labels
Stone 400
#C5C8CA
Active tabs
Stone 200
#E4E2DF
Dividers, hairlines
Text scale · Figma confirmed
Text 900
#323840 · ✓
Primary UI text
Text 700
#3D3B39
Body text
Text 500
#6A6865
Secondary text
Text 300
#A09E9C
Muted, placeholder
Accent + depth + status
Gold
#B8955A
Price · CTA · focus ring
Navy
#1E2E3E
Sidebar · toggles ON · depth
Sage
#6B8C6E
Status · Available
Charcoal
#3A3A3A
Status · Sold
Atmosphere — gradient with named stops

Used as Admin v7 background, empty-state hero, and placeholder for any surface that hasn't received a building photo yet.

0%
SKY · #BBC8D6
22%
PLASTER · #D4CBBF
45%
STONE · #C8C1B6
100%
ANCHOR · #A8A29C
Typography

Type system

Helvetica Neue stays the workhorse — display + UI labels. Inter handles body copy and admin text. v2 adds JetBrains Mono for stamps, coordinates, build numbers, and any place metadata wants to feel slightly engineered.

DISPLAY 1Helvetica Neue 200
88 / 0.98 / -0.035em
Côte Résidence
DISPLAY 2Helvetica Neue 300
40 / 1.1 / -0.02em
A frame for architecture.
HEADINGHelvetica Neue 400
24 / 1.3 / -0.01em
Unit overview · Level 12
LABEL · UIHelvetica Neue 700
11.62 / 1.0 / 0.16em
Figma-exact
Floor Plates
BODYInter 400
15 / 1.6
3-bedroom apartment with panoramic sea views. High ceilings, open-plan living, premium fixtures throughout.
PRICEHelvetica Neue 400
28 / 1.0 / -0.01em
Gold
AED 4,200,000
MONO · NEW v2JetBrains Mono 500
12 / 1.4 / 0.08em
25°11′24″N · 55°16′28″E · LVL 12 · UNIT 1204
Components

Components in both modes

Every component carries through both registers. The component contract stays the same; only surface tokens swap. Below are the v1 components plus the new Calatrava motifs introduced in v2.

Buttons
Status indicators
Available Reserved Sold
Unit card with rib cap · new in v2

The rib cap is the single architectural motif allowed on product surfaces. A 7-rib parabolic stack at 35% opacity, spans the card width, sits above the title block. Use only on the primary unit card — not on every container.

1204
3 Bedroom · East View
Available
Floor
12
Area
142 m²
View
Sea
Handover
Q3 2026
AED 4,200,000
Parabolic divider · new in v2

Replaces flat hairline rules at major section breaks. Five rib arcs, 0.4 stroke, stepped opacity. Use on long-form pages — never on dense data tables.

Tokens · Motion

Motion · two registers

v1 specified premium-restraint motion: 120/200/280ms. v2 keeps that for product, and adds one new token — Wing — for marketing-only sculptural reveals (heroes, page transitions). Wing is slow on purpose. Use sparingly.

Micro
120ms · ease-out
Hover, opacity, color shifts
Page
200ms · ease-in-out
Filter results, view changes
Panel
280ms · ease-out
Sidebar, modal entry
Wing · NEW
720ms · ease-out
Marketing reveals only · sculptural
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in:  cubic-bezier(0.4, 0, 1, 1);
--duration-micro: 120ms;
--duration-page:  200ms;
--duration-panel: 280ms;
--duration-wing:  720ms; /* NEW v2 */
Tokens · CSS

Updated token set

Diff from v1: all original tokens preserved. New Skeleton mode tokens prefixed with --skel-*. New Wing motion token. New parabolic divider primitive. Drop-in compatible — nothing is renamed or removed.

/* offplan.online — v2 additions only · 2026-05-06 */ :root { /* Skeleton White — marketing mode */ --skel-bg: #F6F5F2; /* bone */ --skel-canvas: #FFFFFF; /* canvas over bone */ --skel-rib: #1A1816; /* espresso ink */ --skel-rib-soft: rgba(26,24,22,0.18); --skel-rib-hair: rgba(26,24,22,0.08); --skel-shadow: 0 24px 60px -20px rgba(26,24,22,0.18); /* Atmosphere — explicit stops with names */ --atmo-sky: #BBC8D6; --atmo-plaster: #D4CBBF; --atmo-stone: #C8C1B6; --atmo-deep: #B8B0A8; --atmo-anchor: #A8A29C; /* Type — JetBrains Mono added */ --font-mono: 'JetBrains Mono', 'Courier New', monospace; --tracking-mega: 0.32em; /* hero eyebrows, mega tracking */ /* Motion — Wing for marketing reveals */ --duration-wing: 720ms; }
01 · Foundation

Mission & positioning

The single page that anchors every design decision. If a choice doesn't serve this, it doesn't ship — regardless of how good it looks in isolation.

offplan.online is a frame for architecture. We build the operating system real-estate developers use to sell projects that don't physically exist yet — so the rendering, the floor plate, the keystone moment of the building are what the buyer actually sees. Our UI is structural and quiet. The architecture is the work.

Primary · Buyer

The serious off-plan investor

Sees the Sales App on a developer's website. AED 2M-15M decisions made partly in 90 seconds. Wants confidence: real architecture, real units, real availability. Allergic to SaaS-y polish.

Operator · Studio

The boutique developer

Uses the Admin Panel daily. 5–50 projects, 50–500 units each. Needs speed, not delight. Doesn't want to learn a "platform" — wants their data in, their renders up, their team running.

Decision · Studio principal

The architect-owner

Reviews us in a pitch deck for 3 minutes. Decides if offplan.online is worthy of representing their work. This is who Skeleton White is for — everything else is downstream of winning this room.

offplan.online IS

  • A frame — the architecture is the content
  • Quiet, structural, axially composed
  • Built for transactions worth millions
  • Drawn from architecture, not from web design
  • Editorial in voice, museum-label in tone

offplan.online IS NOT

  • A property portal · we don't list "deals"
  • A consumer marketplace · no urgency banners
  • Generic SaaS · no gradient hero, no purple CTA
  • A startup · we don't talk about disruption
  • An MLS · we represent specific projects, not all of them
02 · Foundation

Design principles

Six trade-offs we've already made. Cite the principle by number when defending a decision in review.

P1
Architecture is the content
The render, the plan, the keystone view always wins. UI recedes, truncates, defers — never competes for attention.
Trade-off: we sacrifice density & flair for restraint.
P2
Structure is visible
Hairlines, ribs, axes, baselines — the load-bearing system is shown, not hidden. Drawing-like, not painted.
Trade-off: looks "unfinished" to people expecting drop shadows.
P3
Two registers, one system
Skeleton White asserts; Warm Stone recedes. Same tokens, same wordmark, same component contract — different mode at runtime.
Trade-off: two visual languages to maintain in sync.
P4
Restraint in motion
Premium products move slowly and rarely. Most things don't animate. What does animate is sculptural, not decorative.
Trade-off: feels less "alive" than competitor SaaS.
P5
Editorial copy
Sentences, not slogans. Specifics, not adjectives. We say "12th floor, east view, 142 m²" not "Stunning views from this premium residence".
Trade-off: harder to write — every word carries weight.
P6
Quiet status
Sage, gold, charcoal — never traffic-light bright. Status is information, not alarm. Reserved feels valuable, not panicked.
Trade-off: less immediate at-a-glance distinction.
03 · Visual

Iconography

Phosphor Thin · 1.25px stroke · 24px artboard. Outline only — never filled, never two-tone. Corner radius matches our component radius (2px). Icons align to optical center, not bounding box.

Core set · Phase 1.1
home
search
calendar
location
user
floorplan
menu
arrow
chevron
close
check
plus
grid
list
filter
project
Size scale & rules
16px · inline
20px · UI default
24px · nav, primary
32px · empty states
48px · feature, 1.0px
LibraryPhosphor Icons · Thin weight · phosphoricons.com
Stroke1.25px at 24px artboard. Scale stroke proportionally — 1.0px at 48px+.
StyleOutline only. No two-tone, no fills, no duotone, no color icons.
Caps & joinsRound caps, round joins — matches type letterforms.
ColorInherit currentColor. Never color icons with brand accents (gold/navy) — they're functional, not decorative.
Custom iconsAllowed only when Phosphor lacks a domain term (floorplan, keystone, plotsize). Match the family conventions exactly.
04 · Components

Forms

The Admin Panel is ~80% forms. The Sales App lead capture is forms. Settings, profile, KYC — all forms. The system below is comprehensive, not exemplary — every state needed to ship.

Field anatomy
Visible to buyers · 60 char max
Earliest realistic completion quarter
States
Enter a complete email address
Toggle, checkbox, radio
Density · comfortable vs compact
TokenComfortable (default)Compact (admin tables, dense lists)
--field-h44px32px
--field-pad-x14px10px
--field-font14px13px
--row-h56px40px
--gap16px10px

Apply via data-density="compact" on the parent. Buyers always see comfortable; admin power users opt into compact.

05 · Foundations

Accessibility

WCAG 2.2 AA is the floor. AAA where the contrast allows it without breaking the visual register. Audit run 2026-05-06 against the v2 token set.

Contrast audit · text on backgrounds
ForegroundBackgroundRatioNormal textLarge text
Text 900 Surface11.8:1AAA ✓AAA ✓
Text 700 Surface10.4:1AAA ✓AAA ✓
Text 500 Surface5.1:1AA ✓AAA ✓
Text 300 Surface2.6:1decorative onlydecorative only
Espresso Bone14.9:1AAA ✓AAA ✓
Gold Card3.3:1large onlyAA ✓
White Gold3.3:1large onlyAA ✓
White Navy13.6:1AAA ✓AAA ✓
Sage Sage tint4.6:1AA ✓AAA ✓

Rule: Text 300 is ornamental only — captions, watermarks, dividers. Never use it for any content the user must read. Gold-on-white is reserved for prices (large) and CTA buttons (large) — never small body text.

Focus rings

Gold 2px outline, 3px offset. Always visible — never :focus { outline: none }. Use :focus-visible to suppress on mouse-click but keep on keyboard.

Hit targets & spacing
Mobile (touch)Minimum 44 × 44 CSS px — Apple/Google guidance, WCAG 2.5.5
Desktop (mouse)Minimum 32 × 32 px
Adjacent targets8px minimum gap (compact) · 12px (default)
Tap target ≠ visual sizeHit area can extend beyond the painted button — use padding, not size
Beyond contrast
MotionRespect prefers-reduced-motion — disable Wing reveals, drop transitions to 0ms
Status colourAlways pair colour with text label or icon — colourblind users must see the same information
Form errorsNever colour-only — use icon + text + ARIA aria-invalid + aria-describedby
Heading orderStrict h1 → h2 → h3, no skips. Style with classes, not by jumping levels
Alt textRenders need real descriptions: "Côte Résidence — north elevation, dusk render". Decorative images: alt="".
LanguageSet html[lang] per page (en / ar / ru). Critical for screen readers.
RTLLayout flips for Arabic. Numerals stay LTR. Wordmark mark stays on the leading edge (right in RTL).
06 · Editorial

Voice & tone

Editorial. Specific. Quietly confident. We sound like a museum label or a serious architecture monograph, not a consumer real-estate app. Every word earns its place.

The four rules
1. Specifics over adjectives"142 m², 12th floor, east view" — not "spacious premium apartment with stunning views"
2. Verbs over nouns"Reserve" not "Make a reservation". "Save changes" not "Settings update".
3. Numbers in context"AED 4.2M · AED 29,500 / m²" — give the comparable, not just the headline.
4. Never say "stunning"Or "luxurious", "exclusive", "premium", "world-class", "iconic", "elegant".
Examples · UI copy
SAY
Reserve
DON'T
Make a Reservation Now!
SAY
No units match these filters.
DON'T
Oops! Looks like nothing's here 😔
SAY
3-bedroom · 142 m² · east view · level 12
DON'T
Stunning 3BR apartment with breathtaking views
SAY
Couldn't load floor plates. Reconnect or refresh.
DON'T
Something went wrong. Please try again.
SAY
Handover · Q3 2026
DON'T
Coming Soon!
SAY
Add render
DON'T
Upload an Image
Numerals, units, money
CurrencyAED 4,200,000 in tables · AED 4.2M in cards · always with the AED prefix, never bare numbers
Per-meterAED 29,500 / m² · m² always with the superscript
Area142 m² · no rounding to "approx" — use the GLA from the survey
Bedrooms3-bedroom in copy · 3BR only in dense lists with column headers
DatesQ3 2026 for handover · 2026-05-06 for stamps · 6 May 2026 for letters
Coordinates25°11′24″N · 55°16′28″E in JetBrains Mono
07 · Components

Empty, loading & error states

First impression of every screen before data lands. Empty > loading > error — design all three for every list, every chart, every table. No spinners. Skeleton loaders use the system: hairline shapes, slow pulse.

Empty

No projects yet

Add your first project to begin. Renders, plans, and units sync within minutes.

Loading · skeleton
Error

Couldn't load floor plates

The connection dropped. Reconnect or refresh — your changes are saved.

Rules
No spinnersSkeleton loaders only. They preview the layout the data will fill.
No "Oops"State the problem: "Couldn't save". Say what to do: "Reconnect".
Always offer next stepEmpty: primary action. Loading: nothing (it'll resolve). Error: retry.
Skeleton timingShow after 200ms — anything faster feels janky. Pulse 1.6s ease-in-out infinite.
Empty hierarchyIcon (48px) → headline → one-line desc → primary action. Never longer.
08 · Components

Data visualisation

The Admin Panel surfaces sales velocity, conversion, project mix, lead funnels. Charts live in our world: stone-toned, hairline axes, gold for the primary series, sequential desaturated supports. Never rainbow.

Sequential palette · 7 series
Series 1
#1E2E3E
Series 2
#3D5266
Series 3
#7C7574
Series 4
#B8955A
Series 5
#C8B690
Series 6
#A8A29C
Series 7
#D4CBBF

Always start with Series 1 (Navy) for the primary metric, Series 4 (Gold) for the comparator. Don't reach for Series 3 (Stone) until the chart has more than two lines.

Bar chart · sales by phase
120 80 40 0 PHASE 1 PHASE 2 PHASE 3 PHASE 4 PHASE 5 RESERVED SOLD
Chart conventions
AxesHairlines only · 1px Stone 200 · no axis line below x
GridlinesHorizontal only · 0.5px · max 4 visible
Labelsx-axis: UI label style (uppercase, tracked) · y-axis: JetBrains Mono numerals
LegendTop, left-aligned, label style · square swatch matching series colour
TooltipsEspresso background, white text, mono numerals (see Overlays section)
Sparklines2px stroke, gold, no fill · used in stat cards
Never3D, donut centre labels, gradients, rainbow palettes, shadow on bars
09 · Components

Tables

The Admin Panel's primary surface for unit lists, lead pipelines, transactions. Hairline rules, mono numerals, sticky header, hover row, sortable columns.

UnitTypeFloorAreaPriceStatusReserved by
12043 BR · East12142 m²AED 4,200,000Available
12052 BR · East1298 m²AED 2,950,000ReservedR. Al Maktoum
12062 BR · West1296 m²AED 2,880,000SoldK. Brennan
13013 BR · East13142 m²AED 4,280,000Available
13022 BR · East1398 m²AED 3,010,000Available
Rules
NumeralsJetBrains Mono · right-aligned with .num · easier scan
HeaderUI label style · sticky on scroll · subtle background
Row hoverSurface subtle (#F2F0ED) · 120ms ease-out
Selected rowGold-tinted left border (3px, --gold) · keep all other styling
Empty cellem-dash (—) in Text 300 · never blank
DensityDefault 14px row pad · compact 8px via data-density="compact"
Sort affordanceTiny chevron after column label · highlights gold when active
No zebra stripingHairlines do the row separation work
10 · Components

Tooltip · Toast · Modal

Three overlay patterns, one purpose each. Don't blur the lines. Tooltip = hover-only labels. Toast = transient feedback. Modal = decision required.

Reserve
Hold this unit for 24 hours
TOOLTIP
Unit 1204 reserved · Holds for 24 hours
TOAST

Discard changes?

You have unsaved edits to Unit 1204. Discarding will lose them.

MODAL
Specs
TooltipToastModal
TriggerHover / focusSystem action completeUser action required
DismissalMouse leave / blurAuto · 4sExplicit choice or Esc
BackgroundEspresso (#1A1816)White card · status-coloured left borderBackdrop blur 8px · 40% opacity
PositionAbove element · 6px arrowBottom-left · stack to 3Center · 480px max width
Motion120ms fade200ms slide-up + fade280ms scale 0.96→1 + fade
Trap focusNoNoYes · with Esc to close
11 · Tokens

Layout grid & breakpoints

12-column grid · 16px gutter · max content 1240px. Four breakpoints. Edge padding scales: 24px mobile → 48px desktop.

1
2
3
4
5
6
7
8
9
10
11
12
Mobile
0 – 639px
Edge padding 24px · stack everything · 4 cols effective
Tablet
640 – 1023px
Edge 32px · 8 cols · sales app sidebar collapses
Desktop
1024 – 1439px
Edge 48px · full 12 cols · admin sidebar visible
Wide
1440px+
Center max 1240px · gutters grow · render area wider
Asymmetric layouts

Marketing surfaces use 7+5 or 5+7 splits to break the symmetric centre — this is where Calatrava-influence shows. Product surfaces stay symmetric and centered for readability.

12 · Visual

Photography & renders

Studios provide their own renders — we don't shoot. But we control how they're presented: warm bias, eye-level, structural composition, golden-hour preference. These rules go into the studio onboarding kit.

Time of day

Golden hour, dusk, blue hour

Warm-bias light. Avoid harsh midday — kills the architectural shadow play. Dusk renders activate the building from inside (warm windows against cool sky).

Vantage

Eye-level or low-angle

Render from human height (1.6m) or slightly below. Aerial drone-style shots are prohibited as hero — they flatten the architecture into a site plan.

Composition

Axial · structural

Building centred, parallel to picture plane, with one structural detail (rib, oculus, cantilever) emphasised. Diagonal three-quarter "real estate" shots are forbidden.

Population

Quiet — never crowded

1–3 figures, motion-blurred, never looking at camera. People to give scale, not to perform "lifestyle". No families, no laughing groups, no glassware.

Sky

Realistic, with atmosphere

Sky must feel like the city's actual sky — humid Dubai haze, not a Caribbean cyan. Some atmosphere/dust adds gravity. Pure clear skies feel render-y.

Empty state fallback

Atmosphere gradient

If no render is available, show the atmosphere gradient (Sky → Plaster → Stone → Anchor) — never an "image missing" placeholder, never a stock photo.

Treatment
CropHonour the architect's intended aspect — never crop facade for our layout convenience
FilterNone. We display renders as the studio rendered them.
OverlayOnly the parabolic scrim at bottom 30% when text must sit on the image — Espresso 0% → 60% gradient
ResolutionHero: 2400px wide minimum · Card: 1200px · Thumbnail: 600px · always 2× retina
FormatWebP primary · JPEG fallback · AVIF where supported
Alt text"[Project] · [view] · [time of day]" — descriptive, not decorative
13 · Brand

Co-branding & lockups

offplan.online appears alongside studio logos in pitch decks, embedded widgets, partner pages. The lockup rules below preserve both marks.

offplan.online
[ STUDIO MARK ]
Rules
Orderoffplan.online sits LEFT in LTR · RIGHT in RTL · always on the leading edge
SeparatorHairline divider · 1px Stone 200 · 32px tall · 32px gap each side
Optical balanceMatch cap heights, not pixel heights — the studio mark may be slightly larger if its letterforms read smaller
NeverPlace "x" or "&" between marks · stack vertically · place inside the same bounding box
Pitch deck slide"Presented with [Studio]" — small caps label above lockup, lockup centred
Embedded widget"Powered by offplan.online" — bottom-right · Stone 500 · 11px · linkable
14 · Foundations

Internationalisation

English at launch · Arabic (UAE) Stage 2 · Russian Stage 3. Layout flips for Arabic; numerals stay Western LTR; the wordmark mirrors so the mark sits on the leading edge.

ConcernEN (LTR)AR (RTL)RU (LTR)
HTMLlang="en" dir="ltr"lang="ar" dir="rtl"lang="ru" dir="ltr"
TypeHelvetica Neue + Inter+ IBM Plex Sans Arabic 400/500Same — Cyrillic in Inter
Type scaleDefault+8% size · Arabic letterforms read smaller at parityDefault
TrackingDefaultReduce -0.005em on display sizes — Arabic doesn't tolerate as much trackingDefault
NumeralsWestern (1234)Western (1234) — finance norm in UAEWestern (1234)
CurrencyAED 4,200,0004,200,000 د.إ · symbol after, RTL flow4 200 000 AED
Date6 May 2026٦ مايو ٢٠٢٦ — long form6 мая 2026
WordmarkMark left of "offplan.online"Mark RIGHT of mirrored textMark left of "offplan.online"
LayoutSidebar leftSidebar right · all chevrons mirrorSidebar left
IconsDefaultMirror: arrow, chevron, back. Don't mirror: search, calendar, location, userDefault
15 · Process

Token versioning policy

Semver applied to design tokens. The brandbook is the source of truth; consumers (Sales App, Admin Panel, marketing site) pin a version and upgrade explicitly.

BumpTriggered byExamplesAction for consumers
MAJORRemoved token · renamed token · changed semantic meaningDrop --gold · rename --text-700 · invert --navyMigration required · breaking
MINORAdded token · added component · added modeAdd Skeleton White (this release) · add Wing motion · add JetBrains MonoDrop in · backward compatible
PATCHFixed value · clarified docs · fixed hexSage shifted +2% saturation · type spec correctedPull · no review needed
Lifecycle
StableDefault · safe to use · in design system library
ExperimentalMarked --exp-* prefix · subject to change without notice
DeprecatedStill works · marked @deprecated in source · remove next MAJOR
RemovedGone · MAJOR bump only
What white-label studios CAN override
Allowed--gold · --navy · the four atmosphere stops · type body family (with approval)
LockedWordmark (mark + type) · stone scale · text scale · motion durations · component contracts · WCAG ratios
16 · Modes

Dark mode · Night Stone

Third register. Use when evening renders are the hero (dusk facades, lit interiors), or when admin power users opt in via system preference. Inverts the warm-stone neutrals; gold and navy stay as accents but shift slightly cooler so they read at night.

CÔTE RÉSIDENCE · LEVEL 12 · DUSK

1204 · 3 Bedroom · East

Floor-to-ceiling glazing oriented to the marina. Handover Q3 2026. 142 m² gross.

AED 4,200,000
Dark token set
Night BG
#0E1620 · --dark-bg
Night Surface
#1A2433 · --dark-surface
Bone Text
#E6E1D9 · --dark-text-900
Stone Text
#9A9389 · --dark-text-500
Gold (cool)
#D4A876 · --dark-gold
Navy (lifted)
#7AA0C8 · --dark-navy
Sage (lifted)
#8FAD92 · --dark-sage
Hairline
#2A3548 · --dark-hairline
Activation
Auto@media (prefers-color-scheme: dark) · respects OS
Manual overrideUser toggle in admin settings · stored per-user
MarketingSection-level only · use for evening render heroes, never the whole page
Sales AppAuto-switch when uploaded render is detected as dusk/night (luminance < 0.35)
Status colorsSage/gold lift +12% lightness · charcoal becomes Stone Text
WordmarkMark + type both Bone Text — never gold
17 · Output

Print & PDF · CMYK

Brochures, A4 spec sheets, pitch deck handouts. CMYK conversions below (Coated FOGRA39 / sRGB v4). Use these — never let the print shop convert from screen hex.

Espresso Ink · #1A1816
CMYK
60 / 60 / 60 / 100
PANTONE
Black 7 C
Bone · #F6F5F2
CMYK
2 / 3 / 5 / 0
PANTONE
Warm Gray 1 C @ 30%
Gold · #B8955A
CMYK
25 / 40 / 70 / 5
PANTONE
872 C (metallic)
Navy · #1E2E3E
CMYK
85 / 70 / 45 / 50
PANTONE
5395 C
Sage · #6B8C6E
CMYK
55 / 25 / 60 / 15
PANTONE
5625 C
Stone 700 · #7C7574
CMYK
45 / 45 / 45 / 25
PANTONE
Warm Gray 9 C
Print spec
18 · Editorial

Microcopy library · EN

The actual strings. Drop-in copy for buttons, labels, errors, onboarding, transactional moments. Russian and Arabic columns left blank for the copywriter pass — the EN column is binding.

Buttons & CTAs
ContextENNotes
Primary purchaseReserve unitVerb + object · never just "Reserve"
Secondary actionRequest viewingActive, specific
Form saveSave changesAlways plural · always "changes"
Form submit · newAdd projectVerb matches the noun being created
Cancel destructiveKeep editingFrames the safe action positively
Confirm destructiveDiscardSingle word · honest
LoginContinueNot "Sign in" or "Log in" — feels less SaaS
LogoutSign outMatch the platform convention here
UploadAdd render"Add" not "Upload" · domain word
Filter clearClear filtersPlural · explicit object
Empty states
SurfaceHeadline + bodyAction
No projects yetNo projects yet
Add your first project to begin. Renders, plans, and units sync within minutes.
Add project
No units matchNo units match these filters
Loosen a filter or clear them all to see the full inventory.
Clear filters
No leads yetThe pipeline is quiet
Leads arrive when buyers request a viewing. Share the project link to start.
Copy link
No render uploadedReady for your render
Drop a JPG or PNG, 2400px wide minimum. The atmosphere placeholder shows until you do.
Add render
Errors
CauseMessageAction
Network · saveCouldn't save. Reconnect or refresh — your changes are local until reconnected.Retry
Network · loadCouldn't load floor plates. The connection dropped.Try again
Validation · emailEnter a complete email address.
Validation · pricePrice must be a positive number in AED.
Validation · areaArea is required — buyers compare by m² first.
Conflict · double-reserveUnit 1204 was reserved 2 minutes ago. Choose another, or contact the buyer.View nearby units
PermissionAsk a project admin to grant you access.Request access
Onboarding · admin
StepHeadlineBody
WelcomeLet's set up your first project.Three steps · about five minutes. Skip anything you'll fill in later.
Step 1 · basicsProject basicsName, location, handover quarter. The rest follows.
Step 2 · unitsAdd the unit mixBedrooms, area, floor, view. Bulk-paste from CSV if you have it.
Step 3 · visualRender & floor platesOne hero render and one plate per floor. We'll handle the rest.
DoneYou're live.Share the project link. Buyers see units, prices, and availability — automatically.
Transactional · buyer email triggers
TriggerSubject lineFirst line
Viewing requestedYour viewing request · Côte RésidenceThank you. The studio will reply within one business day.
Viewing confirmedCôte Résidence · viewing confirmed for {date}Address, time, and the lead architect's contact below.
Unit reservedUnit 1204 reserved · 24-hour holdYour reservation holds until {datetime}. Reservation ID: {id}.
Reservation expiring2 hours remaining · Unit 1204Confirm to keep this unit, or it returns to inventory.
KYC requestedIdentity verification · Côte RésidenceUAE law requires this for off-plan transactions. Five minutes, secure.
Handover scheduledHandover scheduled · {date}Final walkthrough, keys, and snag-list — all in one visit.
19 · Motion

Motion principles

Durations alone don't make motion considered. Six principles below decide what moves, how, and why. v1.1 specified the timings · this is the philosophy.

M1

Most things don't move

Rest is the default. Motion is reserved for state changes the user caused — never for ambient decoration. No "scroll-revealed" elements, no parallax, no pulsing.

M2

Physical, not bouncy

Use ease-out (cubic-bezier 0.16, 1, 0.3, 1) for entrances · ease-in for exits. Never spring overshoots — they read playful, we read serious.

M3

Direction encodes meaning

New things arrive from where they came: detail panels slide from right, modals scale from center, toasts rise from bottom. Direction is information.

M4

Sculptural reveals are earned

Wing duration (720ms) is for one moment per page maximum — typically the marketing hero rib animation. If everything is sculptural, nothing is.

M5

Hierarchy through stagger

When multiple elements enter, stagger by 30–50ms in reading order. Three items max — beyond that it feels like a slot machine.

M6

Reduced motion is real

Respect prefers-reduced-motion by setting all durations to 0ms — not by replacing animations with cross-fades. The user opted out of motion, period.

20 · Sensory

Haptics & sound

For mobile (iOS/Android) Sales App. Haptic feedback only — sound is off by default for premium feel. Map iOS HIG impact levels to our intent.

Selection
iOS · selectionChanged
Picker tick · floor changed · filter chip toggled. The lightest possible feedback — confirms input registered.
Light impact
iOS · impactOccurred(.light)
Button press · expand/collapse · drawer open. Confirms a discrete action happened.
Success notification
iOS · notificationOccurred(.success)
Reservation confirmed · unit added · KYC submitted. Once per major moment — never per save.
Rules
DefaultHaptics ON · sound OFF · respect system silent switch
Frequency capMaximum one haptic per 250ms — debounce rapid taps
Never hapticHover · scroll · text input · failed validation (visual + text only)
Error hapticUse .warning sparingly · only for blocking errors (double-reserve, KYC fail)
SoundOff by default. If enabled in admin (future): 24-bit AIFF, sub-200ms, no fade-out reverb
Watch (future)Crown-detents map to selection · tap sequences for notifications
21 · Patterns

Floor selector · the signature pattern

The single most important interaction in the Sales App. Buyers spend more time here than anywhere else. The parabolic rib visualises the building's structural axis · floors map to vertices along the arc.

L18 · Penthouse 2
L17 4
L16 4
L15 4
L14 4
L13 4
L12 3
L11 4
L10 · Sky lobby
L09 4
LEVEL 18 · PENTHOUSE

2 units remaining

142–280 m² · East & West · Q3 2026
PH-A
280 m²
AED 18.4M
PH-B
142 m²
AED 9.2M
Behavior
Hover · floorVertex grows to 4px gold · floor name in detail panel updates · 120ms ease-out
Click · floorVertex stays gold · detail panel slides in 200ms · selected floor item gets espresso bg
Drag · scrubbingContinuous floor change as the cursor moves vertically along the rib · selectionChanged haptic on each tick
Keyboard↑/↓ moves between floors · Home/End jumps to top/ground · Enter selects
Edge cases
Building has 50+ floorsRib stays the same height · vertex spacing tightens · floor names group every 5 (L20, L25, L30 visible · others on hover)
Sky lobby / mechanical floorVertex shown as hairline ring (no fill) · count shows "—" · not selectable
Single-floor property (villa)Pattern collapses to a horizontal axis · same vocabulary, rotated 90°
Irregular floor heightsVertex y-position scales to actual storey height — penthouse vertex visibly higher above L17
All units sold on a floorVertex Stone 400 · count "0" · still selectable for completeness, but no detail-panel CTA
MobileRib stays anchored on the right edge · detail panel stacks below · no scrubbing (tap only — too imprecise)
Versioning

What changed in v2

Drop-in upgrade. No tokens renamed. No components removed. Only additions and one new architectural motif applied judiciously.

2026-05-06v2.0
  • Added Skeleton White mode for marketing surfaces
  • Adopted V5 Rib Fan as official wordmark
  • Added --skel-* token family (bone, espresso, ink-soft)
  • Added JetBrains Mono for engineered metadata (coords, IDs, stamps)
  • Added Wing motion token (720ms) for marketing reveals
  • Restructured atmosphere as named gradient stops
  • Introduced rib-cap motif for primary unit cards
  • Introduced parabolic divider for major section breaks
  • Added --tracking-mega (0.32em) for hero eyebrows
2026-05-01v1.3
  • Figma-confirmed values audit · 8 screenshots, live CSS bundle
  • Glassmorphism token set · 4 named glass surfaces
  • Status palette · sage / gold / charcoal replacing traffic lights
2026-04-27v1.1
  • Stone scale + atmosphere palette established
  • Shadow opacity reduced 25% → 10%
  • i18n + RTL roadmap (Stage 2 · Arabic)
Appendix · Open items

What v2 still doesn't cover

Honest inventory of gaps. v2 closes the wordmark and mode questions. These remain for v2.1 / v3.

AreaStatusPriority
Iconography system (Phosphor Thin · 1.25px)Not specifiedHigh · v2.1
Photography & render guidelines (warm bias, golden hour)Not specifiedHigh · v2.1
Empty states & loading skeletonsNot specifiedMedium · v2.1
Data-viz palette (5–7 series for admin charts)Not specifiedMedium · v2.1
Dark / Night mode (evening renders)Not specifiedMedium · v3
Density modes (comfortable vs compact)Implicit onlyLow · v3
Voice & tone for microcopyNot specifiedMedium · v2.1
Print / PDF spec (CMYK + brochures)Not specifiedLow · v3
Token versioning policy (semver)Not specifiedMedium · v3
Accessibility: contrast audit, focus rings, hit targetsPartialHigh · v2.1