Sooner
Brand Guidelines
v2.0 - March 2026
Website
joinsooner.com
Mission
Making homeownership accessible in Dubai
Tagline
Split your down payment. Own your home sooner.
For Agents (Markdown)
01 - Overview
Split your down payment.
Own your home sooner.
Sooner makes homeownership accessible in Dubai by covering upfront closing costs. We split the financial barrier so people can own their home - sooner.

What we do

We cover the upfront costs that stop people from buying. DLD fees, agency commission, mortgage processing - we pay them so you don't have to. You pay us back over time, after you've moved in.

Brand personality

Confident. Direct. Minimal. We don't explain - we show. We lead with numbers, not promises. Every word earns its place. Every pixel breathes.

03 - Color
Palette
Yellow is an accent, never a flood. Cream breathes. Dark anchors. White cleans. Restraint is the point.

Primary

Sooner Yellow
#E9FE0F
Soft Yellow
#E2F55C
Dark
#1C1B17
Cream
#F5F4F0
White
#FFFFFF

Secondary / UI

Grey Text
#6B6B6B
Subtle Border
#E5E4E0
Muted
#A5A4A0
Placeholder
#9B9B9B

Special tints

Yellow Tint 12%
rgba(233,254,15,0.12)
Yellow Tint 30%
rgba(233,254,15,0.3)
Yellow Highlight
rgba(233,254,15,0.55)
04 - Typography
Manrope
Our typeface is Manrope - a modern geometric sans-serif from Google Fonts. Clean, highly legible, and works across every context.
Hero / Display
59px - Weight 500 - Line 1.2
Own your home
Heading 2
47px - Weight 500 - Line 1.15
Split your down payment
Heading 3
24px - Weight 700 - Line 1.25
What's your property budget?
Body
16px - Weight 400 - Line 1.5
Sooner covers your upfront costs - DLD fees, agency commission, mortgage processing - so you can move in now and pay us back over time.
Section Label
11px - Weight 600 - Uppercase - Letter-spacing 0.1em
MORTGAGE PRE-APPROVAL
Small / Disclaimer
13px - Weight 400
Subject to eligibility. Terms apply. Sooner is not a bank or mortgage provider.
05 - Highlight
The yellow highlighter
Our signature. A yellow marker drawn through words - not under them. Two variants: static and animated sweep.
Split your down payment.
Own your home sooner.
You're eligible for AED 166,000 in support
Highlight sweep animation
An animated variant where the highlight sweeps in from left to right. Used on the initial question heading in forms. Click to replay.
What's your property budget?
/* Highlight sweep */
.highlight-sweep {
  background-image: linear-gradient(transparent 15%, #E9FE0F 15%, #E9FE0F 82%, transparent 82%);
  background-size: 0% 100%; background-repeat: no-repeat;
}
.highlight-sweep.animate { animation: highlightSweep 0.8s 0.2s ease forwards; }
@keyframes highlightSweep { to { background-size: 100% 100%; } }
06 - Components
Buttons & Inputs
Two button systems: rectangular (marketing) and pill (app). Yellow for primary actions. Arrow signals forward momentum.
Marketing buttons (rectangular)
App buttons (pill)
Used in the underwriting funnel and dashboard. Full-width, rounded, 700 weight.
Shimmer button
A subtle gradient sweep on the primary CTA to draw attention. Used sparingly - only on the single most important action on a screen. 3s loop.

/* Shimmer */
.btn-shimmer::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
Bordered input (marketing)
Bottom-border input (app)
Ghost placeholder, animated yellow focus line that expands from center. Used in all form steps and overlays.
AED
+971
.input-wrap { border-bottom: 2px solid #E5E4E0; }
.input-wrap::after {
  content: ''; position: absolute; bottom: -2px; left: 50%;
  width: 0; height: 2px; background: #1C1B17;
  transition: width 0.3s ease, left 0.3s ease;
}
.input-wrap:focus-within::after { width: 100%; left: 0; }
OTP input
4 digit boxes with auto-advance. Border turns yellow + subtle tint on fill.
.otp-box { width: 56px; height: 56px; border-radius: 12px; border: 2px solid #E5E4E0; }
.otp-box:focus { border-color: #1C1B17; }
.otp-box.filled { border-color: #E9FE0F; background: rgba(233,254,15,0.08); }
07 - Form Patterns
Underwriting funnel
The form patterns that power the Sooner application flow. Every interaction is designed to feel immediate, confident, and frictionless.
Choice cards
Single-select options with keyboard hint badges. Yellow fill on select with snap animation. Click to toggle.
1Yes, I have one in mind
2Not yet, still exploring
Area chips / multi-select
Pill-shaped multi-select with max selection (3). Yellow fill on select. Unselected chips fade when max reached. Click to toggle.
PRIME
Dubai Marina
Downtown Dubai
Business Bay
Palm Jumeirah
JLT
POPULAR
Dubai Hills
JVC
Meydan
Section labels
Small caps labels used to group form sections. 11px, uppercase, letter-spacing 0.1em, muted color.
MORTGAGE PRE-APPROVAL YOUR INCOME PROPERTY TYPE
Live calculator card
Appears below the property value input. Rows animate in with staggered delays. Total uses 800-weight with large font size.
Down payment (20%) AED 400,000
DLD fee (4%) AED 80,000
Agency commission (2%) AED 40,000
Mortgage processing AED 26,250
Total upfront AED 553,600
Progress bar (weighted)
Dark track with yellow fill and glowing dot at the leading edge. Fixed to top of form. Fill has pulse glow animation.
.progress-bar { height: 3px; background: #1C1B17; }
.progress-fill { background: #E9FE0F; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
.progress-fill::after { /* glowing dot */
  box-shadow: 0 0 8px #E9FE0F, 0 0 16px rgba(233,254,15,0.4);
}
Progressive disclosure (auto-advancing)
Fields reveal one at a time as the user completes each. Uses max-height transitions for smooth expansion. Keeps focus flowing naturally.
YOUR NAME
EMAIL
Type 3+ characters to reveal the next field
.progressive-section { max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease; }
.progressive-section.open { max-height: 800px; opacity: 1; }
08 - App Patterns
Dashboard & screens
The component library that powers the Sooner dashboard, payments, and account screens. Light theme only - cream background, white cards.
Balance card
Primary dashboard card showing the user's Sooner support amount. Badge indicates status (Pending/Verified/Activated). Includes progress bar and link.
Your Sooner support Pending activation
AED 166,000
towards your upfront costs
How is this calculated?
3 steps to activation 1/3 complete
Progress timeline (phase strip)
Horizontal 3-phase timeline. Done = yellow circle, Active = dark fill white text, Upcoming = grey. Connectors turn yellow when previous phase is done.
1
Apply
2
Verify
3
Activate
Steps-to-activation bar
Card showing completion progress with step count and optional time estimate. Yellow fill with smooth transition.
3 steps to activation ~5 min
Trust / commitment banners
Soft yellow tint background cards with checkmark icon. Used for zero-commitment messaging and reassurance. Place between key action areas.
Zero commitment to apply
Check your eligibility with no obligation
Repayments only start once you use your funds
No upfront fees, no hidden charges
Document upload cards
Text-only (no emojis). Yellow left border when uploaded. Locked state at 50% opacity. Upload button inverts on hover.
Emirates ID Front and back
Salary certificate From your employer
Bank statements Last 3 months
Floating CTA
Sticky bottom button with optional step count subtitle. Shadow for elevation. Used on dashboard when user has pending actions.
Toast notification
Light theme, slides down from top. White background, subtle border + shadow. Auto-dismisses after 3s. Click to demo.
Document uploaded successfully
Payment breakdown cards
Used in the payments overlay. Yellow left border when unlocked/ready. Pay button is yellow when active, grey when locked.
DLD fee (4%) Dubai Land Department registration
AED 80,000
Agency commission (2%) Broker / agency fee
AED 40,000
Calculator split cards
Side-by-side comparison of what Sooner pays vs what the buyer pays. Sooner card has yellow tint background.
Sooner pays
AED 153,600
Closing costs
You pay
AED 400,000
Down payment only
09 - Animation & Motion
Interactions that feel alive
Every animation serves a purpose: guide attention, confirm action, or build anticipation. Easing is always cubic-bezier for natural motion. No bounce, no playfulness - just confident precision.
Counter animation
Numbers count up with exponential ease-out. Supports prefix (AED) and suffix (/mo). Used in welcome screen, calculator overlay, and balance display. Click to replay.
AED 0
function animateCounter(start, end, duration, el, prefix, suffix) {
  const ease = t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
  function tick(now) {
    const t = Math.min((now - startTime) / duration, 1);
    el.textContent = pfx + fmt(Math.round(start + (end - start) * ease(t))) + sfx;
    if (t < 1) requestAnimationFrame(tick);
  }
}
Welcome animation sequence
Staggered reveal: logo fades in (0s), name text (0.5s), balance card slides up (1s), perks stagger in (1.5s+). Used post-OTP verification.
Sooner
Welcome, Sarah
Pending activation
AED 166,000
towards your upfront costs
Lowest mortgage rates from 15+ banks
200,000+ compatible properties
/* Staggered animation timing */
.welcome-logo { animation: fadeIn 0.5s ease forwards; }
.welcome-text { animation: fadeIn 0.5s ease 0.5s forwards; }
.welcome-balance { animation: slideUpFade 0.5s ease 1s forwards; }
.welcome-perk { transition: opacity 0.8s ease, transform 0.8s ease; /* stagger via JS */ }
Account overlay
Slides from right (navigation pattern). Shows avatar, name, personal details, and action buttons. Cancel opens mailto to support.
10 - Overlay Patterns
Two types of overlays
We use two distinct overlay patterns depending on the context. Both are full-screen, cream background, z-index 100 with 0.4s cubic-bezier transitions.

Modal overlay (slides UP)

Sooner
x
Complete your profile
Step 1 of 3

Used for: profile completion, focused tasks
Direction: translateY(100%)
Has: logo header, close button, progress bar

Navigation overlay (slides RIGHT)

←
Payments
Balance, breakdown cards, pay buttons...

Used for: account, payments, calculator
Direction: translateX(100%)
Has: back button, centered title, scrollable body

/* Both overlay types share these base styles */
.overlay { position: fixed; inset: 0; background: #F5F4F0; z-index: 100; }
.overlay { transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }

/* Modal: slides up */
.modal-overlay { transform: translateY(100%); }
.modal-overlay.open { transform: translateY(0); }

/* Navigation: slides right */
.nav-overlay { transform: translateX(100%); }
.nav-overlay.open { transform: translateX(0); }
11 - Voice & Tone
Confident, direct, punchy
Every word earns its place. No jargon, no fluff. Short sentences that land. We talk to smart adults who are about to make the biggest purchase of their lives.
Our voice

Split your down payment. Own your home sooner.

Up to AED 300,000 in upfront support.

Sooner pays AED 166K towards your upfront costs.

You bring the down payment. We handle the rest.

Not our voice

We provide comprehensive financial solutions for property acquisition.

Our innovative platform leverages technology to streamline the homebuying journey.

Take the first step towards your dream home today!

Unlock your homeownership potential with our tailored solutions.

The calculator breakdown
Lead with what they need. Break it into clean line items. Bold the total. This is our most-used pattern.

To buy this home today, you need:

Down payment (20%)AED 400,000
DLD fee (4%)AED 80,000
Agency commission (2%)AED 40,000
Mortgage processingAED 26,250
Total upfrontAED 553,600

Pattern rules

  • - Context line at top: what they're looking at
  • - Dot leaders between label and value
  • - Bold total at bottom, separated by solid rule
  • - Hierarchy through size, not decoration
  • - CTA that sells before the click
The gut-punch stat
Massive number first. Context second. The number should hit before the brain processes the words.
AED 166K
in upfront support - paid by Sooner
63%
less cash needed to move in
AED 2M
home - AED 553K upfront - you pay AED 400K

Formatting rules

  • - Currency: always AED - never "Dh" or symbols
  • - Numbers: use commas - AED 300,000
  • - Abbreviate large numbers in headlines - AED 166K
  • - Percentages: 20% not twenty percent
  • - No exclamation marks. Confidence doesn't shout.

Information hierarchy

  • 1. Gut punch number - the stat that stops the scroll
  • 2. Breakdown - the context that makes it real
  • 3. CTA - that sells before the click
  • This order is sacred. Never bury the number.
12 - Email Template
Transactional email
Dark header with logo, clean white body, yellow CTA button, cream footer. Every email should feel like the brand - minimal, confident, direct.

Email rules

  • - Header: dark (#1C1B17) background, white logo
  • - CTA: yellow (#E9FE0F) button, dark text, 8px radius
  • - Body: white background, dark text, 14-16px
  • - Footer: cream (#F5F4F0) background, muted text
  • - One CTA per email - sell the outcome
  • - Same voice rules: confident, direct, no fluff
13 - Rules
Do's and don'ts
When in doubt, choose restraint. Less is always more with Sooner.

Do

  • Keep it minimal and clean
  • Use generous whitespace
  • Let typography do the heavy lifting
  • Use yellow as an accent, not a background flood
  • Write in short, confident sentences
  • Lead with the number, explain second
  • Use "AED" for currency - always
  • Use commas in numbers: AED 300,000
  • Sell the outcome in your CTA
  • Use pill buttons (border-radius: 100px) in the app
  • Use cream (#F5F4F0) as app background
  • Use regular dashes (-) not em dashes

Don't

  • Add a period after "Sooner" in the logo
  • Use "Dh" instead of "AED"
  • Use drop shadows or gradients on cards
  • Use dark backgrounds on app screens
  • Use emojis in document/upload cards
  • Write in corporate jargon
  • Use ALL CAPS on buttons
  • Bury numbers in paragraphs
  • Use exclamation marks
  • Use em dashes anywhere
  • Use dark borders on selected states (use yellow)
  • Write CTAs that don't sell ("Submit", "Click here")
Document uploaded successfully