Brand book

Visual Identity

Smart Products · شركة المنتجات الذكية

Everything needed to represent the brand consistently — logo, colours, typography, UI, and voice. ← Back to the site

Essence

Who we are

A technology studio that turns ideas into dependable web & mobile software for businesses. Our identity should feel modern, precise, and trustworthy — engineering craft with a human, approachable edge.

Modern

Clean, current, confident.

Precise

Considered detail; nothing sloppy.

Trustworthy

Clear, honest, dependable.

Approachable

Friendly, jargon-free.

Logo

The mark & lockup

The symbol is code braces { } wrapping the initial S — “we craft software.” Use the primary lockup where space allows; use the mark alone for avatars, app icons, and favicons.

SmartProductsشركة المنتجات الذكية

Primary lockup — on dark

SmartProductsشركة المنتجات الذكية

Primary lockup — on light

Clear space — keep padding ≥ the height of the “S” on all sides.

Mark sizes — minimum 24px. Works crisply as favicon & app icon.

Download

⬇ Mark (SVG) ⬇ Lockup (SVG) ⬇ Favicon (SVG)

Colour

Palette

Indigo → cyan is the signature gradient. Keep large surfaces dark and calm; reserve the gradient and accent for emphasis (logo, buttons, highlights).

Signature gradient — 135°, #4F46E5 → #06B6D4

Brand

Indigo · Primary

#4F46E5

Cyan · Secondary

#06B6D4

Sky · Accent

#22D3EE

Surfaces & text (dark UI)

Ink / BG

#0B1020

Surface

#141D3A

Text

#EAF0FF

Muted text

#A9B4D0

Light mode & semantic

Light BG

#F6F8FF

Success

#34D399

Warning

#FFBD2E

Error

#F87171

Typography

Type system

Sora for headlines (geometric, techy). Manrope for body & UI (clean, highly legible). IBM Plex Sans Arabic for Arabic — clean, modern, and legible.

Sora · Display / H1 · 800

Build what matters

Sora · Heading / H2 · 700

Web · Mobile · Cloud

Manrope · Body · 400/500

We design and ship reliable software that helps businesses grow — from first idea to launch and beyond.

Manrope · Labels / UI · 700

IBM Plex Sans Arabic · Arabic · 700

نبني المنتجات الرقمية التي تنقل أعمالك إلى الأمام

UI kit

Core elements

Buttons

Primary Secondary

Pills / tags

StartupsSMBsEnterprise

Shape & depth

Radius: 16px cards, 999px pills/buttons.
Borders: subtle, rgba(255,255,255,.09).
Gradient use: emphasis only — logo, primary buttons, key highlights.
Motif: code braces { } as a recurring accent.

Usage

Do & don't

Keep clear space around the logo.
Use the gradient in its fixed 135° direction.
Place the mark on dark, light, or the brand gradient.
Pair Sora + Manrope; IBM Plex Sans Arabic for Arabic.

Don't

Stretch, rotate, or squash the logo.
Recolour the mark or change the gradient hues.
Add drop shadows, outlines, or effects to the mark.
Place it on busy, low-contrast backgrounds.

✗ Stretched

✗ Recoloured

Voice

How we sound

Clear

Plain language. Explain, don't impress.

Confident

Direct and outcome-focused, never boastful.

Bilingual

English & Arabic treated with equal care.