Design that works everywhere.

Brand direction

Vondera is the all-in-one commerce OS for Egypt & MENA. Not just a tool to build a store — one platform to launch, run, deliver and grow any business.

Philosophy

Every merchant deserves enterprise-grade tools — in their language, at their market's price. We remove complexity and hand the merchant full power from a single place: from the first product to thousands of orders.

Personality

Design principles

Tone of voice

Core messages

• Master message: “Your entire business runs on Vondera.”
• Value: One platform to launch, run, deliver and grow your store.
• Empowerment: “Your next store should not start from a blank page.”
• Speed: “Start in minutes, no code.”

Say / Don't say

Audience & position

AI as part of the brand

AI (the Smart Studio, VPal) is a tool that speeds the merchant up — it doesn't replace them. We present it as an “assistant” that suggests and automates, framed honestly, without claiming “magic.” Every AI output passes human review before publishing under the brand.

Logo system

Built on the “sail / triangle” with the circle — a symbol of launch and motion. Available as a full lockup, an icon, and a 3D clay version for celebratory moments.

Primary lockup

Default use on light backgrounds.

Icon (mark)

Avatars, favicons, small spaces.

3D clay version

Hero, social, celebratory moments.

Light version

Dark backgrounds and dark imagery.

Monochrome

Single-color print, fax, engraving.

Over images

Use the white version over sufficient overlay.

Clear space & minimum size

Clear space

Keep empty space equal to at least the icon's height (1×) on every side.

24px icon

120px lockup

Minimum size

Icon: 24px digital / 8mm print. Full lockup: 120px / 30mm.

Do / Don't

Favicon / app icon / avatar

Favicon

App icon

Avatar

Color system

Violet leads the brand. Pink, yellow and green are supporting colors that add joy and variety. Click any color to copy the value.

Primary

Supporting

Neutrals — text, background, border

States

Full scales

Product / section colors

Accessibility

Design tokens (CSS)

--vd-violet: #5900FF; --vd-violet-600: #4600CC; --vd-pink: #FF1F6C; --vd-yellow: #FFD900; --vd-green: #1F8A5B; --vd-blue: #2E6BD6; --vd-ink: #140B1E; --vd-muted: #655A72; --vd-paper: #FCFBFE; --vd-line: #EDE6F6; --vd-success:#1F8A5B; --vd-warning: #E0A100; --vd-error: #E01E63; --vd-info: #2E6BD6;

Typography

Saudia is the single brand typeface — supporting Arabic & Latin in Regular / Medium / SemiBold. We use no other font.

Type scale

Arabic / Latin rules

Layout & grid

A 4px base unit, a 12-column grid, and width-capped containers for comfortable reading. All spacing is a multiple of 4.

Spacing scale (4px base)

The grid (12 columns)

Containers & breakpoints

Safe areas per channel

Visual language

Generous rounded corners, soft violet shadows, 3D clay objects, and cheerful filled/emoji icons.

Radius

Shadows

Shadows are always a faint violet rgba(60,18,90,·) — never grey or black.

Icons & objects

Do / Don't

UI components

The live component library. All rounded, with violet shadows and clear states (hover / focus / disabled).

Buttons

Primary for the single main action per screen. Secondary/ghost for supporting actions. Never place two primary buttons side by side.

Brand loader

The one spinner used everywhere — page loads, language switch, in-button building. Star petals in violet, core in pink + yellow. Never restyle it; drop in this SVG.

<svg class="vd-load" viewBox="0 0 480 480"><!-- 4 violet petals + pink + yellow core --></svg>
<style>@keyframes vd-spin{to{rotate:360deg}}.vd-load{width:56px;overflow:visible;animation:vd-spin 3.2s linear infinite}</style>

Glass button — “Create store”

The signature primary action. Frosted glass over a soft cast shadow with an animated light edge. Reserved for the single hero action (create store / start free) — not for regular buttons.

<div class="glass-btn-wrap">
  <div class="glass-btn-shadow"></div>
  <button class="glass-btn" type="button">
    <span>✦ Create my store</span>
  </button>
</div>
<!-- needs .glass-btn* CSS + @property --angle-1/2 -->

Inputs

Badges

Alerts

Cards

Tabs / empty states

Rules per component

Product patterns

The recurring page templates inside the product — all RTL-first, with clear empty, error and success states.

Marketing system

Ready rules and sizes for every channel. The constant: one strong sentence + a clear logo + one hero color + breathing room.

Outdoor & indoor

Outdoor rule: one word readable in 3 seconds from afar. Big logo + short line + high contrast.

Outdoor type-size rule: for each 1m of reading distance ≈ 2.5cm minimum character height.

Press & PR kit

Everything the press needs to write about Vondera accurately — ready descriptions, facts, and name rules.

Official descriptions

Facts (placeholder)

Name usage

Press release template & assets

Motion

Motion serves understanding, not spectacle — fast, smooth and calm. Rule: if it doesn't add meaning, remove it.

Content system

We write in clear Egyptian colloquial for marketing, and simple standard Arabic for product and press. Always: short, human, useful.

Preferred / avoid

Accessibility & quality

Vondera is for everyone. Every design passes the quality checklist before launch.

QA checklist

Governance

How the system stays alive and consistent as the brand grows.

Brand compliance checklist

Deliverables & downloads

Ready-to-use assets. Download what you need and start immediately.

Tokens JSON

{ "color": { "violet": "#5900FF", "pink": "#FF1F6C", "yellow": "#FFD900", "green": "#1F8A5B", "ink": "#140B1E", "paper": "#FCFBFE" }, "font": { "family": "Saudia", "weights": [400,500,600] }, "radius": { "sm": 11, "md": 16, "lg": 24 }, "space": [4,8,12,16,24,32,48,64] }