mbrace
All works
Interactive

mbrace

Trade Show Display

UX/UI, Design, Digital & Technology

ClientMercedes-Benz | mbrace
AgencyDimensional Communications Inc.
RoleDirector of Digital Creative
DisciplineInteractiveUX/UI
hero
Brand & Digital Style Guide

Your World,
From Your Car

The design language for a cinematic, gesture-driven touch experience — spanning interactive kiosks, in-car concept displays, and connected web.

01

Brand Foundation

A premium, restrained aesthetic where dark space, engineered light, and generous typography let the product take center stage.

Principle 01

Cinematic Calm

Deep, near-black canvases with soft directional light. Space is a feature, not a void — content emerges from darkness.

Principle 02

Effortless Touch

Every surface responds to the hand. Navigation is physical — swipe, pinch, tap — and always forgiving.

Principle 03

Engineered Detail

Brushed-metal surfaces, precise rules, and typographic hierarchy signal craft and confidence.

Voice & Tone

Confident, concise, human. Copy speaks in short imperative cues — Touch to Start, Hold trunk latch — never technical or verbose. Reassuring where it matters most: peace of mind.

Pillars
Peace of MindSafety & assurance
Remote AccessControl from anywhere
Digital LifestyleConnected living
02

Logo & Lockup

primary lockup
Primary lockup — symbol + serif wordmark
Construction

Emblem paired with the wordmark set in a high-contrast serif. Lowercase wordmark, superscript numeral, red tagline rule.

Clear space

Maintain padding equal to the cap-height of the wordmark on all sides. Never crowd with other elements.

mbrace2
On dark — preferred
mbrace2
On platinum
mbrace2
Your World, From Your Car
Corner mark — persistent UI
03

Color System

Obsidian
#0E0E10 · Base canvas
Carbon
#1A1A1C · Panels
Graphite
#2C2C2F · Cards / chips
Brushed Steel
Gradient · Emblem / bg
Platinum
#C9CBCD · Light surface
Snow
#FFFFFF · Primary text
Signature Red
#C41230 · Accent
Signal Amber
#E8792B · Highlight cues

The palette is 90% neutral — obsidian to platinum — carrying the cinematic mood. Red is reserved for a single point of emphasis per screen: an active state, the tagline rule, or the numeral. Amber appears only within instructional content overlays.

Neutral ramp — layering & depth
Accent — max 5% of any screen
04

Typography

Display — Cormorant Garamond
Aa
Peace of Mind

High-contrast serif for headlines, wordmark, and navigation labels. Elegant, editorial, unmistakably premium. Use weights 400–500.

Interface — Helvetica Neue
Aa
TOUCH TO START

Bold sans for UI controls, buttons, breadcrumbs, and cues. Often uppercase with letter-spacing. Functional and legible at distance.

Hero · 82pxYour World, From Your Car
Nav label · 34pxRemote Access
Control · 15pxMENU · HOME · CLOSE
Breadcrumb · 12pxHome / Menu / Remote Access
05

UI Components

Navigation Chips
Peace of Mind
Remote Access
Digital Lifestyle

Semi-transparent dark chips float over imagery. Serif label, generous padding. Active state fills Signature Red.

Control Pills
HOME
MENU

Persistent, top-left. Bold caps, subtle border, dark fill.

Play Affordance

Brushed-metal ring over thumbnails; translucent white when overlaid on video.

Breadcrumb
Home  /  Menu  /  Remote Access  /  Send2Benz

Bottom-left, anchored bar. Current node in white, path in grey.

Viewer Controls

Prev / next chevrons flank fullscreen content; close sits top-right.

06

Screen Anatomy

anatomy
A · MENU / BACK
B · BREADCRUMB
C · CORNER MARK
D · CONTENT STAGE
A — Menu / Back

Persistent top-left. Single-step retreat through the hierarchy.

B — Breadcrumb

Bottom-left trail; orients the visitor at all times.

C — Corner Mark

Bottom-right lockup, always present, never interactive.

D — Content Stage

The centered field where imagery, video, and chips live.

Flow — 16:9 Landscape Touch
LANDING MENU THUMBNAIL WALL CONTENT (WINDOW) FULLSCREEN
07

Motion & Gesture

touch

Navigation is a physical language. Motion is smooth, weighted, and reversible — nothing snaps.

TAPSelect · preview a thumbnail
SWIPEMove between menu items and thumbnails
DOUBLE-TAPExpand to fullscreen · tap twice to go back
PINCHShrink fullscreen content back to a window
DRAGReposition and scrub through the content wall
storyboard
Interaction storyboard — landing, menu, thumbnail wall, and content states
08

Imagery

cinematic
Cinematic hero — dusk light, low horizon, product in motion
product
environment
DO

Directional, low-key lighting. Deep shadows, controlled specular highlights on metal and glass.

DO

Let subjects emerge from black. Negative space frames the hero and carries the type.

AVOID

Flat, evenly-lit stock. Busy backgrounds. Saturated color casts that fight the neutral palette.

09

Screen Gallery

landing
Landing — Touch to Start
menu
Menu — Primary Pillars
wall
Thumbnail Wall — Content Mosaic
wall angle
Content Wall — Perspective View
fullscreen
Fullscreen Content — Feature Detail