Brand Guidelines
Version 1.0 — July 2026. The single reference for using the Adnan Enterprises identity across print, digital, and partner-facing materials. Built directly from the approved mark — every color and type choice on this page traces back to it.
01
What the mark says before anyone reads a word
A logo is a set of decisions already made. Before writing a single rule, it's worth reading what this one is telling us.
- The wireframe globe is a trade network drawn literally: meridians standing in for shipping lanes, nodes for the ports and partners the company touches.
- The ascending form cut through the sphere is both the initial of the company name and a bearing line — a shipment departing a fixed point and gaining altitude.
- The gradient moves from a grounded navy into an open teal. Read left to right, it behaves like a route: departing a dependable origin, arriving somewhere open.
Positioning — a starting point
Reading the mark's own logic: Adnan Enterprises presents itself as a dependable connective layer in global trade — the fixed point a partner can route through with confidence, wherever the shipment is headed. Treat this as a first draft of the brand's promise, not finished strategy. Refine it against the company's actual commercial position and customer relationships before it goes external.
Voice, in three positions
A tone lives on a spectrum, not a single adjective. These three sliders set a starting position — adjust per channel (a customs notice reads differently from a LinkedIn post).
02
The primary lockup
One approved horizontal lockup. Everything else on this page is a controlled variation of it — never a redraw.
Anatomy
- Globe mark — the wireframe sphere and ascending "A" form, gradient-filled navy-to-teal. Never separated from its gradient except in the monochrome variants below.
- Wordmark — "ADNAN" / "ENTERPRISES", solid Deep Navy. Set in a bold geometric sans; do not substitute another typeface even under deadline pressure — see §05.
- Divider rule — a single hairline separating the company name from the tagline.
- Tagline — "Global Trade. Import | Export.", solid Teal. May be dropped in space-constrained lockups (see §03 stacked and icon variants) but never edited.
Clear space
Minimum clear space on every side = 0.5×, where × is the full height of the globe mark. Because it's defined as a multiple of the mark's own geometry, the exclusion zone scales correctly at any size — round up to the nearest step on the 8px grid (§06) when laying it into a fixed template.
Minimum size
| Lockup | Digital | |
|---|---|---|
| Full-color lockup | 220px wide | 30mm wide |
| Icon-only mark | 64px | 10mm |
| Favicon glyph | 16px | — |
Color variants
Don't
TEXT
HERE
03
Icon, stacked lockup & favicon
Square and small-format contexts get their own constructions — not a shrunk copy of the horizontal lockup.
Icon-only mark
Use where the full wordmark can't fit or would compete: social avatars, app icons at 64px and above, watermarks, favicons at larger display sizes. Never smaller than 64px / 10mm — below that, use the favicon glyph instead.
Stacked lockup
For square or vertical formats — social profile grids, signage, packaging — where the horizontal lockup's aspect ratio doesn't fit.
Favicon glyph
The wireframe globe is intentionally fine-lined — it reads at business-card size but breaks down into visual noise below ~48px. Rather than force the master mark smaller, the favicon is a purpose-built simplified glyph: the same gradient, the same ascending form, reduced to two shapes so it holds up in a 16px browser tab.
| File | Use |
|---|---|
| favicon.svg | Vector source, scales to any size |
| favicon-16.png / favicon-32.png / favicon-48.png | Browser tab & bookmark icons |
| apple-touch-icon-180.png | iOS home-screen icon |
| icon-192.png / icon-512.png | PWA manifest / Android home screen |
04
Color
Two brand colors, extended into a full tonal system so every text/background pairing can be checked against WCAG before it ships.
Mark gradient
Reserved for the globe mark itself. Do not use the gradient as a UI background, button fill, or text color — see the accessibility notes below on why the teal end fails small-text contrast.
Tonal ramps
Semantic colors
Accessible pairing matrix
| Foreground | Background | Contrast | Verdict |
|---|---|---|---|
| Navy text #0B3B61 | White #FFFFFF | 11.59:1 | PASS · AA text |
| Navy text #0B3B61 | Gray-50 #F9FAFA | 11.08:1 | PASS · AA text |
| Navy text #0B3B61 | Gray-100 #EFEFEF | 10.08:1 | PASS · AA text |
| Teal text #198C81 | White #FFFFFF | 4.11:1 | Large text / UI only |
| Teal text #198C81 | Gray-50 #F9FAFA | 3.93:1 | Large text / UI only |
| White text #FFFFFF | Navy #0B3B61 | 11.59:1 | PASS · AA text |
| White text #FFFFFF | Teal #198C81 | 4.11:1 | Large text / UI only |
| White text #FFFFFF | Gradient start #0F3D64 | 11.22:1 | PASS · AA text |
| White text #FFFFFF | Gradient end #25A08C | 3.24:1 | Large text / UI only |
05
Typeface pairing
Montserrat for headings, Work Sans for text. Both free and open (SIL OFL) — no licensing friction distributing collateral to overseas partners and printers.
Montserrat's heaviest cuts (800/900) are close enough to the wordmark's own letterforms that headings read as an extension of the logo rather than a mismatched addition — and its full 100–900 range gives an actual hierarchy that a single-weight face like Archivo Black can't. Work Sans was built for on-screen legibility at body sizes and carries broad Latin Extended and Vietnamese coverage, which matters for a company producing shipping documentation and web copy for partners across many regions.
Type scale
| Role | Face / weight | Size | Line height |
|---|---|---|---|
| Display / H1 | Montserrat 900 | 48px | 56px |
| H2 | Montserrat 800 | 32px | 40px |
| H3 | Montserrat 700 | 24px | 32px |
| H4 / Eyebrow | Montserrat 600, uppercase | 14px | 20px |
| Body Large | Work Sans 400 | 18px | 28px |
| Body | Work Sans 400 | 16px | 24px |
| Caption / Label | Work Sans 600 | 13px | 20px |
| Micro / Legal | Work Sans 400 | 12px | 16px |
Fallback stack
Headings: font-family: 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; Body: font-family: 'Work Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
Considered and passed over
- Archivo Black + Work Sans — the single tightest visual match to the wordmark's exact weight, but ships in only one static weight, forcing every heading level to lean on size alone for hierarchy.
- Poppins + Inter — Poppins' perfectly circular geometry reads rounder and softer than the wordmark's squared letterforms.
- Sora + Manrope — a sharp pairing, but leans more SaaS/tech than the industrial, trade-oriented gravity of this mark.
06
An 8px base unit
Every margin, padding value, and component size on brand materials should be a multiple of 8px — the same unit the logo's own clear-space formula rounds to.
Standard screen resolutions and retina pixel densities divide evenly by 8, which keeps edges crisp instead of landing on a sub-pixel. A 4px increment can be layered in for tight spacing between closely related elements (an icon and its label); line-heights stay on multiples of 4 to preserve vertical rhythm across text blocks.
07
Extending the visual language
Principles for the day a UI icon set or a photography library gets commissioned — so both extend the mark instead of drifting from it.
Iconography, if it's ever needed
- Stroke-based construction, never filled shapes — matching how the globe mark itself is built from lines, not solids.
- 1.5–2px stroke on a 24px grid, scaling proportionally at other sizes.
- Rounded joins and caps, echoing the node dots at each mesh intersection.
- Single color only — Deep Navy or Signature Teal, never the gradient, never mixed within one icon.
Photography & imagery direction
- Subject matter — ports, containers, cargo in transit, partnership and handshake moments, maps and routes: the physical world the mark abstracts into a wireframe.
- Color treatment — a consistent cool navy-to-teal tint sampled from the mark's own gradient, applied uniformly so unrelated stock photography reads as one brand.
- Composition — open, wide framing: horizon lines, loading bays, open water. Echo the gradient's own "departure to open water" logic; avoid cluttered or claustrophobic shots.
08
Non-negotiables
Accessibility isn't a separate audit pass — check every pairing against these numbers before it ships.
- Text contrast (WCAG 2.2 AA, SC 1.4.3): 4.5:1 minimum for normal text; 3:1 for large text — defined as 18pt/24px regular or 14pt/19px bold. Don't drop the bold exception; a bold 19px label at 3:1 is compliant even though 19px alone looks small.
- Non-text & UI contrast (SC 1.4.11): 3:1 minimum for icons, graphical objects, and UI boundaries — input borders, focus rings — against their adjacent color.
- Focus states: every interactive element needs a visible focus indicator meeting that same 3:1 threshold. Never remove a focus outline without replacing it.
- Minimum body text: 16px (1rem) baseline in digital interfaces. Reserve anything smaller for captions/labels where contrast and context compensate.
Cross-reference §04 before choosing a text/background combination — Teal-500 only clears the bar for large text and UI accents, not small body copy (4.1:1 on white). Use Teal-700 wherever teal text needs to run at normal reading size.
09
In the world
Three common applications, built from the approved variants above — nothing here is a one-off exception.
+92 300 000 0000
sara.ahmed@adnanenterprises.com · +92 300 000 0000
10
Where everything lives
Every file referenced on this page, and where it sits in the project.
| File | Purpose |
|---|---|
| brand/logo/adnan-enterprises-lockup.svg | Primary lockup, light background |
| brand/logo/adnan-enterprises-lockup-transparent.svg | Primary lockup, transparent background |
| brand/logo/adnan-enterprises-lockup-reversed.svg | Reversed, for dark backgrounds & photography |
| brand/logo/adnan-enterprises-lockup-black.svg | Monochrome black |
| brand/logo/adnan-enterprises-lockup-white.svg | Monochrome white |
| brand/logo/lockup-stacked.svg | Stacked lockup, square/vertical formats |
| brand/logo/icon-mark.svg / icon-mark-white.svg / icon-mark-black.svg | Icon-only mark, three colorways |
| brand/logo/favicon/ | Simplified favicon & app-icon glyph, all sizes |
| brand/guidelines.html | This document |