Brand Identity Development

ASITE

A folded ribbon 'A' for a studio that builds and designs the web in one place.

Date
May 2017
Client
Ahmed AlGhamdi (Riyadh, KSA)
Discipline
Technology, Web Development & UI/UX Lab
Sector
Technology
Dossier 23 / 37

About the project, our role, our approach

The introduction

ASITE is a web development and UI/UX lab. Its mark, a folded, dimensional 'A' in two blues with a clean geometric wordmark, signals precision and craft in digital product.

Mohammed Vaseeuddin was asked to build a sharp, modern identity that reads equally to engineers and to the brands they design for.

Refine the mark

Refine the folded-A mark and squared wordmark.

Set the language

Define a precise, technical-yet-human visual language.

Find the voice

Establish a clear, confident product voice.

Ready the system

Set colour and type for product, pitch and web.

  1. 01Discovery: understand the lab's craft, clients and the dev-plus-design promise.
  2. 02Essence: frame ASITE as where build and design meet.
  3. 03System: mark behaviour, UI-ready palette and type, and templates for case studies.

History and heritage

Brand origin story

ASITE was founded on a simple frustration: too often, the people who design a site and the people who build it never share a room. ASITE is both, a lab where UI/UX and development sit together, so an interface is engineered as carefully as it is drawn.

The folded 'A' is that idea made visual: a single ribbon that turns a flat letter into something structural, built.

Mission, vision, promise, essence statement

Vision and mission

Mission, what we do today

To design and build digital products where the experience and the engineering are one craft.

Vision, future aspiration

To be the studio brands trust when a site has to look right and work flawlessly.

Brand promise

Designed with intent, built to last, no handoff gap.

Brand essence statement

ASITE is design and development, folded into one.

The principles that guide ASITE

Core values

Craft

Care in the pixel and the codebase alike.

Precision

Details decide whether software feels good.

Clarity

Simple interfaces over clever ones.

Partnership

Build with clients, not just for them.

Meaning, culture, interpretation

Brand essence

Name and symbol

'A site', the thing they make; the folded ribbon 'A' turns a flat letter into something structural and built.

Cultural resonance

In tech, a confident geometric mark signals competence and modernity to founders and CTOs alike.

Emotional recipe

Confidence and relief, the sense that the work is in capable hands.

Interpretation for the brand

Lead with the dimensional A and the squared type; keep UI clean, blue-led and generous with space.

Archetype, personality, tone of voice

Brand archetype

Sharp, precise and approachable. ASITE speaks like a senior engineer-designer: clear, confident and jargon-light, explaining the 'why' as readily as the 'what'.

  • Primary, Creator
  • Secondary, Sage
  • Precise
  • Modern
  • Confident
  • Clear
  • Technical

Logo, typography, colour, mood

Visual identity

Crisp interface mockups, isometric and folded-paper forms, blueprint grids, code on dark glass and generous negative space. Precise, dimensional and unmistakably digital.

RajdhaniPrimary typeface

A squared, technical sans matching the wordmark, for headings, UI labels and product chrome.

InterSecondary typeface

A workhorse interface sans for body copy, documentation and dense UI.

60%DominantASITE Blue, Primary30%SecondarySky, Secondary10%AccentGraphite, Ink
ASITE Blue, Primary
Sky, Secondary
Graphite, Ink
Cloud, Ground
  • Folded-A
  • Isometric
  • Blueprint grid
  • UI mockups
  • Two-blue
  • Negative space

First applications and handover

Business stationery

  1. 01Letterhead: folded-A mark with studio contact block.
  2. 02Proposal and SOW: branded scope and estimate template.
  3. 03Business card: mark-forward card for the team.
  4. 04Case study: templated project write-up layout.
  5. 05Email signature: compact mark and link block.
  6. 06Social kit: launch and behind-the-build templates.

Clear space, minimum size, misuse

Logo usage

The mark, and how to protect it. Give it room, hold its proportions, and keep it on-system across every surface.

ASITE logo, clear space
Clear space equals half the mark height on every side.
ASITE logo at minimum size
24px minimum height for digital, to keep the mark legible.
Use the master mark, unaltered.
Do not stretch or distort
Do not rotate the mark
Do not recolour off-system
Do not add shadows or effects
Do not place on low contrast

In their words

As a tech lab, our own branding needed to reflect cutting-edge capabilities. The identity and positioning captured our technical proficiency while keeping the narrative highly accessible to enterprise clients.
Fayez Al Fayez, CTO
Read the case studyCollapse the case study

The struggle

We build highly complex UI/UX and web development systems, but our own brand was failing to communicate our technical edge to non-technical enterprise decision-makers.

The evaluation

We required a brand that looked as sophisticated as our code, translating complex technological proficiency into an accessible corporate narrative.

The execution

The design and positioning perfectly bridged the gap. The visual identity was modern and precision-driven, while the brand messaging was simplified to speak directly to business outcomes rather than just tech specs.

The result

A powerful, cutting-edge identity that elevated our market presence. It allowed us to engage C-suite executives with a clear, accessible narrative that highlighted our high-end engineering capabilities.