Brand Identity

How we build Bareed: Design principles, verbal language, and visual system

Bareed is more than an email platform—it's a movement toward digital dignity for Arabic speakers. Our brand reflects our values: bold, precise, and unapologetically Arabic-first.

Design Principles

Bold & Confident

We don't apologize for taking up space. Our Neo Brutalist aesthetic uses thick borders, high contrast, and strong shadows to demand attention. Just like our mission.

Arabic-First, Always

Arabic isn't an afterthought. It's the foundation. Every design decision starts with Arabic typography, RTL flow, and cultural context before considering English.

Functional Beauty

Beauty serves purpose. No decoration for decoration's sake. Every visual element guides users toward their goals with clarity and confidence.

Universally Accessible

High contrast ratios, clear typography, semantic HTML, and keyboard navigation ensure everyone can use Bareed, regardless of ability.

Color System

Our palette is bold and limited. We use high-contrast colors that work perfectly in both light and dark modes, with special attention to Arabic text legibility.

Primary Yellow

#FFD700

Brand identity, CTAs, key interactive elements

Secondary Cyan

#00D4FF

Accents, highlights, secondary actions

Accent Magenta

#FF006E

Alerts, warnings, special emphasis

Black & White

#000000 / #FFFFFF

Borders, text, backgrounds, structure

Typography System

A single voice: Rayat. A human-crafted serif that serves both Arabic and English, intentionally moving away from cold machine-like sans fonts to preserve warmth, heritage, and Bareed's mission of meaningful, dignified communication.

Arabic Typography

Rayat — Arabic cut

Drawn by Arabic type masters, Rayat keeps the rhythm and counters of handwritten scripts while staying crisp for UI. It signals that Bareed protects the soul of the message, not just its delivery.

Light (300), Regular (400), Medium (500), Bold (700), Black (900)

All Arabic UI, headlines, and long-form reading

English Typography

Rayat — Latin cut

The Latin cut mirrors the Arabic flow with human serifs and confident strokes. We reject sterile sans-serifs to keep the brand tactile, intentional, and aligned with Bareed's promise of original, unfiltered meaning.

Light (300), Regular (400), Medium (500), Bold (700), Black (900)

All English UI, product copy, and system communication

Verbal Language

How we speak defines who we are. Our voice is confident, direct, and respectful.

Tone of Voice

Confident, Not Arrogant

We know we're building something important. We state our vision clearly without exaggeration.

Direct, Not Cold

We value your time. Short sentences. Clear meaning. But always with warmth and respect.

Arabic, Not Arabized

We use natural Arabic expressions, not transliterated English. Our Arabic voice feels authentic, not foreign.

Writing Guidelines

  • 1Use active voice: 'We built' not 'It was built'
  • 2Short sentences: One idea per sentence
  • 3Specific numbers: '87% faster' not 'much faster'
  • 4Action-oriented: Start with verbs
  • 5No jargon: If grandma can't understand it, rewrite it
  • 6Cultural context: Arabic and English versions aren't literal translations—they're cultural adaptations

Logo & Identity

Our logo is simple and bold: the word BAREED in English and بريد in Arabic, accompanied by an envelope icon with thick black borders.

Logo Usage

  • •Always use black borders (4px minimum)
  • •Maintain minimum clear space (equal to the height of the envelope icon)
  • •Use on solid backgrounds only—no gradients or images
  • •Display both English and Arabic versions together when space permits

Logo Variations

  • →Full logo with icon + BAREED + بريد
  • →Envelope icon only (for favicons, app icons)
  • →BAREED only (for tight spaces)

Grid & Layout

We use a flexible grid system that adapts to both LTR and RTL layouts without compromise.

Desktop

12-column grid with 24px gutters, max-width 1280px

Tablet

8-column grid with 20px gutters

Mobile

4-column grid with 16px gutters

Spacing

8px base unit for all spacing (padding, margins, gaps)

Motion & Animation

Purposeful motion that guides attention and provides feedback. Never gratuitous.

  • Fast and snappy: Animations under 300ms
  • Easing: Use ease-out for entrances, ease-in for exits
  • Transform over position: GPU-accelerated transforms only
  • Respect prefers-reduced-motion for accessibility

Brand Resources

Download logos, fonts, and guidelines for consistent usage.