Build it by
talking.
talking.
✦ Made on actual.
✦ Brand & Sound Guidelines
Tell your idea,
see your site go live
The visual & sonic identity of actual. — the Arabic-first platform that builds your website by chat.
scroll for the guide ↓
01
The Essence
الجوهرactual. is an Arabic-first platform that lets any small-business owner in the region build their website or back-office by simply talking — in their own dialect, with no code and no technical knowledge. Every part of the identity reflects that promise: warm, confident, and intelligent — but a friend, never technical.
Principle 01
Never freeze the owner
We never start with a blank prompt. We guide by business type — restaurant, salon, shop — so they feel in motion from the first moment.
Principle 02
Zero visible errors
The owner never sees an "error". Everything is translated into an outcome: "I added your orders section", not a stack trace.
Principle 03
Professional from output one
The very first result must be publish-ready — tidy, warm, and a true representation of the real business.
«شو بدك نبني اليوم؟»
"What do you want to build today?" — the brand opens with a question, never a blank prompt.
02
Logo & Spark
الشعارThe ✦ spark is the heart of the identity — a warm orange stroke on a warm near-black plate. It works as the app icon, as the brand's asterisk in text, and as a light that glows inside the product.
Full lockup on dark — the primary mode
actual.
On light — inside the websites it builds
Clear space · half the spark height on every side
Forms · plate · open stroke · AI sparkle
Minimum icon size · 24px
Misuse
actual.
Don't skew or distorta c t u a l
Don't track out the wordmark03
Color System
الألوانA warm "night" interface: near-black surfaces lit by a single signature color — the orange spark. Text is warm off-white, never pure white. A mint green marks live/active status only.
Spark — primary
Ink — night surfaces
Status & semantics
Signature gradients
--grad-spark
--grad-ember
--grad-twotone
--grad-night
04
Typography
الطباعةTajawal carries all Arabic — UI and display — in an authentic MENA voice. Space Grotesk sets the Latin wordmark "actual.". JetBrains Mono handles domains and code.
أبجد
Tajawal
Arabic · UI + display
ا ب ت ث ج ح ٠١٢٣٤٥
Aa
Space Grotesk
Latin · wordmark + display
actual. ABG 0123
{}
JetBrains Mono
Domains · code · tokens
actual.business
شو بدك نبني اليوم؟
Your site is live ✦
Describe your business in your own words and we build it and update it in front of you, in real time — without writing a single line of code.
https://labaristalab.com
05
Voice & Tone
الصوت واللهجةThe product speaks spoken Levantine/Jordanian dialect (عامية) — never formal MSA. It addresses the owner informally and refers to itself in the first person ("I prepared for you…"). Warm, confident, and never technical.
✓ How we speak
شو بدك نبني اليوم؟ "What do you want to build today?" — a spoken question
تمام! جهّزت لك صفحة المطعم ✦ First person, warm, outcome-led
ضفت لك قسم الطلبات عبر واتساب A result the owner understands
موقعك صار حيّ — مبروك! Celebrate the moment, simply
✕ How we don't
ماذا تودّ أن تنشئ اليوم؟ Stiff MSA — not how people talk
تم إنشاء المكوّن (Build #204) Jargon and build numbers
Error 500: فشل الاتصال بالخادم Raw errors — the owner never sees these
تم نشر الموقع على الـ deployment No "deploy", "API", "React"
Tone of voice
Translate to an outcome — never say it technical
Instead of
We say (EN)
Deploy
Your site is live
Component
Section / page
Loading…
One sec, getting it ready…
Failed
Small bump — I rolled it back
06
Sonic Identity
الصوتThe spark has a sound the way it has a shape. Warm, bright, never harsh — it rises and blooms. These aren't effects; they're a sonic identity, each cue mirroring a product moment. Click to listen.
The Signature · The Spark
A warm body that rises a perfect fifth, two bright bell notes, and a high shimmer that settles. The brand's audio logo — at launch, at build-complete, at "it's live".
↑ click the ✦
Warm, not harsh
A lowpass shaves the brittle top — like warm off-white, nothing metallic or cold.
Rises & blooms
Every cue climbs and glows — the audible echo of the spark catching light.
Calm & sparing
Short, rare, and respectful of silence. Only one percussive sound; the rest are tones.
07
Product UI
مبادئ الواجهةRTL by default. Dark cards with hairline borders and deep black shadows, and one primary action per view — a warm spark gradient with dark ink text, never white-on-orange.
Live design-system components
One primary action
Warm spark gradient + dark ink text. Hover deepens to ember and adds glow.
Warm radii
Buttons 14px, cards 20px, containers 28px. Everything soft and generous.
Calm motion
Fades and small lifts, 120–360ms. Exactly one looping animation: the build spinner.
Visible focus
A 4px warm-orange ring around the focused field — clear and on-brand.
The conversation — the assistant speaks from the spark side
08
Imagery & Iconography
الرمزIcons are stroke-style, 2px, round caps — the same feel as the spark. The spark is the only symbol. Business-type emoji appear only inside onboarding tiles.
The 8-ray spark — glows inside the productThe AI sparkle — the "generate" indicatorThe stroke icon set
Business-type emoji — onboarding tiles only
🍽️
✂️
🛍️
☕
🩺
🔧
09
Applications
التطبيقاتThe identity at work — app icon, social profile, story, and the "Made on actual." badge.
App icon
Social profile
Story · 9:16
The badge — embedded at the foot of every built site
✦ Made on actual.
✦ Made on actual.
Badge + business-type tiles
Tell your idea, see your site live
actual. — Brand & Sound Guidelines · v1.0 · Internal