DropX
Sign inBook a parcel
Official brand guidelines · v1.2

Building the future of smart logistics

A practical identity system for every DropX touchpoint—from the first booking to the final handover. Fast, clear, and dependable by design.

Fast by defaultClear under pressureHuman at every handoff
Explore the system View components

01

Core philosophy

The principles behind every DropX decision.

Lightning speed
Remove friction from pickup to doorstep. Every screen should make the next action obvious.
Absolute trust
Use clear status, transparent pricing, and visible proof at every handover.
Merchant simplicity
Make the complex logistics network feel calm, predictable, and easy to operate.

02

Color system

Volt Orange brings energy to a grounded system of obsidian, carbon, and semantic status colors.

Accessibility rule: never use color alone. Pair status colors with a label, icon, or shape; target 4.5:1 contrast for body text.

Production color specifications

CMYK values are starting points for print proofing; always approve against a physical proof.

ColorHEXRGBCMYKRole
Volt Orange#FF5500255 85 00 67 100 0Accent / action
Deep Obsidian#0D0F1213 15 1828 17 0 93Dark canvas
Carbon Gray#1A1D2426 29 3628 19 0 86Dark surface
Terminal Green#00C8530 200 83100 0 58 22Success
Alert Amber#F59E0B245 158 110 36 96 4Attention

03

Light & dark mode

One DropX identity, two carefully balanced environments.

Dark mode

The primary environment for operations, tracking, and rider workflows. Use Obsidian as the canvas and Carbon for raised surfaces.

Canvas#0D0F12
Surface#1A1D24

Light mode

Use for customer-facing pages, printable documents, and bright environments. Keep orange for action and progress—not large backgrounds.

Canvas#F7F8FA
Surface#FFFFFF

Mode rule: do not simply invert colors. Preserve semantic meaning, contrast, elevation, and focus visibility when switching themes.

04

Typography

Inter is the working voice: geometric, legible, and fast to scan.

Display / H1

DropX moves what matters.

Inter ExtraBold 800 · marketing and hero banners

Heading / H2

Every handover is visible.

Inter Bold 700 · section titles and cards

Body / UI

Book, track, and deliver with confidence.

Inter Regular 400 / Medium 500 · app interfaces

06

Brand voice

Every message should sound capable, direct, and human.

→
Direct
Lead with what happened and what to do next. Prefer “Pickup confirmed” over a long passive sentence.
◌
Reassuring
When plans change, explain the next step, give a useful time frame, and avoid blame or vague promises.
✦
Energetic
Use momentum, not hype. Let fast, useful experiences prove the promise.

07

Product components

Patterns for forms, inputs, tables, and the moments where work gets done.

Forms & inputs
Labels stay visible. Focus is orange. Error messages explain how to recover.
Focus: orange border + subtle ringError: red border + message belowDisabled: lower contrast, keep context
Tables
Optimize for scanning. Right-align numbers and keep status labels short.
ParcelDestinationStatusCOD amount
DX-10482Gulshan 2Delivered৳ 1,280
DX-10483Mirpur 10In transit৳ 860
Buttons & actions
The same hierarchy should remain clear in both themes. Use one primary action per region and keep labels verb-first.

Light mode

White canvas

Focus uses a visible orange ring. Destructive actions require confirmation. Loading actions preserve width and label.

Dark mode

Obsidian canvas

Focus uses a visible orange ring. Destructive actions require confirmation. Loading actions preserve width and label.

Status badges
Badges are compact labels, not the only source of meaning. Keep the status name visible and use the same semantic color in both modes.

Light mode

Icon + label
CreatedIn transitOut for deliveryDeliveredFailedReturned

Do not rely on color alone. Statuses should remain understandable in grayscale and with color-vision differences.

Dark mode

Icon + label
CreatedIn transitOut for deliveryDeliveredFailedReturned

Do not rely on color alone. Statuses should remain understandable in grayscale and with color-vision differences.

Responsive behavior
Responsive design changes density and arrangement—not the meaning or priority of an action.
Desktop · 1024px+

Show context, navigation, and supporting metrics together.

Mobile · under 640px

Stack forms, keep primary actions reachable, and scroll wide tables.

Forms: one column, full-width controls.

Tables: preserve columns with horizontal scroll.

Actions: keep the primary action visible first.

Buttons

One primary action per region. Use sentence case and verbs: Create parcel, Assign rider.

Status

Green means complete, amber means attention, red means blocked. Always include text.

Responsive

Stack forms on small screens. Let tables scroll horizontally; never shrink critical data until unreadable.

08

Layout & visual language

A calm, generous system that keeps logistics information easy to scan.

Grid and spacing
Use a 4px base unit and a 12-column desktop grid. Let space create hierarchy before adding borders.
Base unit4px
Spacing scale4 · 8 · 12 · 16 · 24 · 32 · 48 · 64
Content width1200px max · 640px reading measure
Breakpoints640 / 768 / 1024 / 1280px
Card radius12px default · 16px feature
Elevation
Reserve depth for hierarchy and interaction.

Level 1 · card

Quiet separation from the canvas

Level 2 · popover

Temporary focus or decision

09

Iconography

Icons should clarify an action or status, never decorate an empty space.

Style

Use Lucide-style outline icons with a 1.75px stroke, rounded joins, and a 24px viewbox.

Meaning

Pair an icon with text for critical status. Never communicate success, failure, or warning by icon color alone.

Sizing

16px in dense UI, 20px in buttons, 24px in feature cards. Align to the text baseline.

Approved: consistent stroke Avoid: mixed filled and outline families

10

Imagery & illustration

Show real movement, real people, and the confidence that comes from visibility.

Human and in motion
Prefer documentary-style images of riders, merchants, parcels, and handoffs. Capture purposeful movement, not staged smiles.
Product first
Parcels should look handled, labeled, and real. Keep backgrounds simple enough for UI overlays and copy.
Warm, not glossy
Use natural light, deep neutrals, and one orange accent. Avoid generic warehouse stock imagery and heavy filters.

Do

A rider hands a clearly labeled parcel to a receiver.

Visible context, real handoff, clear human benefit.

Avoid

A generic delivery truck with no DropX context.

If the story could belong to any courier, it is not specific enough.

11

Motion & interaction

Motion should explain a change in parcel state and get out of the way.

Quick feedback

150–200ms

Hover, focus, button press, and inline validation.

Navigation

200–300ms

Sheets, menus, page transitions, and status reveals.

Reduce motion

Respect setting

Remove travel and looping animation when reduced motion is enabled.

12

Content & localization

Write for busy people, then make the same clarity work in every language.

Message patterns
Success
✓ Pickup confirmedYour pickup request has been successfully processed
Delay
✓ Pickup delayed · We’ll update you by 4:00 PMThere has been an unexpected issue
Error
✓ Enter a valid 11-digit phone numberInvalid input
Localization

Use plain English and short sentences. Keep labels expandable for longer translations.

Support Bangla copy without shrinking type below 14px. Test mixed-script numbers, dates, and currency.

Keep brand names, tracking numbers, and status labels consistent across channels.

13

Production applications

The identity should be unmistakable on screen, in print, and on the road.

Packaging

Obsidian base, centered orange lockup, generous clear space.

Digital

Light-first customer surfaces; dark operational surfaces where focus matters.

Print

Use the light lockup on white stock and preserve a minimum 12mm mark height.

Fleet & gear

High-visibility orange mark on navy or obsidian; prioritize legibility at distance.

Export rule: use SVG for digital and large-format work, PDF for print handoff, and PNG only when a raster asset is required. Never screenshot a logo from the website.

14

Governance & handoff

A brand system stays useful when ownership and change are explicit.

Source of truth

Keep logo assets in apps/web/public/brand and update this page with every approved identity change.

Versioning

Current release: v1.2 · 28 September 2026. Record material palette, typography, or logo changes here.

Owner

DropX Brand & Product Design. Request review before creating a new logo, status color, or campaign lockup.

15

Production handoff

The final checks before a logo or campaign leaves the team.

Accessibility

Use the approved contrast pairs, include meaningful alt text, and pair every status color with text or an icon.

Print proof

Convert wordmarks to outlines, proof CMYK physically, and preserve the minimum print sizes before vendor delivery.

Legal review

Confirm trademark status, copyright ownership, and final campaign copy with the appropriate owner before external publication.

Handoff files: see docs/brand-guidelines.md for the WCAG contrast audit, print checklist, localization notes, and source-file requirements.