Brand System v1.0

The MariMetric Visual Identity

The complete design language powering the real-time maritime intelligence platform — from logo and color to components and voice.

  • 60+Design tokens
  • 12Core components
  • 18Languages
  • 4Industry standards
01 · Brand mark

Logo & monogram

A ship wheel meets a data point — the mark of maritime intelligence.

Dark
MariMetricMaritime Intelligence
Full lockup
Use on light surfaces, marketing pages, and the website header.
Dark
Monogram
The square mark for favicons, app tiles, avatars, and dense UI.
Light
MariMetricMaritime Intelligence
Full lockup
On light surfaces
Light
Monogram
Inverse on light surfaces
Clear space

Always keep a margin equal to the height of the M around the mark on all sides.

M
M
M
M
MariMetricMaritime Intelligence
Minimum size

Below these sizes, drop the wordmark and use the monogram only.

64 px
48 px
36 px
28 px
Web favicon · App icon · Avatar · Inline icon
02 · Color palette

Colors that earn trust

Built on a deep-sea foundation, accented with technology blue. Semantic colors carry status; the neutral scale carries hierarchy.

Primary
Deep Sea
--background
Brand base
Deep Sea · Elevated
--background-elevated
Deep Sea · Subtle
--background-subtle
Accent
Tech Blue
--accent
Primary action
Tech Blue · Hover
--accent-hover
Tech Blue (Light)
--accent / light
Light theme
Secondary
Teal
--teal
Live / Success accent
Cyan
--cyan
Data / Info accent
Indigo
(tracking-500)
MCP / AI
Semantic
Success
--success
Warning
--warning
Danger
--danger
Text
Foreground
--foreground
Primary text
Muted
--foreground-muted
Subtle
--foreground-subtle
03 · Typography

Type that breathes

Geist Sans for everything human, Geist Mono for everything technical. A single family keeps the brand consistent at every size.

Geist Sans · 6xl
Display · 6xl · Semibold
MariMetric
Geist Sans · 4xl
Heading 1 · 4xl · Semibold
Track any container
Geist Sans · 3xl
Heading 2 · 3xl · Semibold
Real-time maritime intelligence
Geist Sans · 2xl
Heading 3 · 2xl · Semibold
Currently at: Vessel Departure
Geist Sans · lg
Body large · lg · Regular
Track containers across MSC, COSCO and 20+ carriers.
Geist Sans · base
Body · base · Regular
The missing data layer for global shipping.
Geist Sans · sm
Small · sm · Regular
7-day history · 100 MCP calls / month
Geist Sans · xs caps
Caption · xs · Medium · Uppercase
Standards & Compliance
Geist Mono · sm · MediumLive indicator
MSCU1234567COSU6284910ONEU7740021
04 · Components

Composable building blocks

Every component is built on tokens. Every screen is built on components. Consistency comes for free.

Buttons
Text link
Badges & status
LiveAt PortIn TransitExceptionPendingNeutral
Cards & surfaces

Dashboard

Carrier, port, delay analytics

Tracking

Real-time location & status

API

Unified carrier data interface

Live indicator
Data refreshes every 30 min
API healthy · P95 120ms
MCP server online
05 · Patterns & surfaces

Surfaces that breathe

Grids, glows, and cover patterns — the visual language that makes MariMetric feel like an instrument panel, not a webpage.

Grid
40px · 0.05 opacity
Radial glow
Brand color from corner
Glass blur
Header frosted
Radar scan
Live feel / monitoring
Cover patterns · 8 variants
Transit
Port
Tracking
123
Guide
Logistics
Industry
Shipping
Tech
06 · Voice & tone

Concise, calm, expert

We speak like a navigator, not a salesperson. One thing well, not many things loudly.

Do

Track this MSC container to Shanghai in 6 hours.

Don't

Unlock the power of real-time container visibility with our award-winning platform!

Do

Currently at: Vessel Departure. ETA in 3 days.

Don't

Wow, your container is on a journey! Check back soon for exciting updates!

Do

No tracking data available for this carrier.

Don't

Oops! Something went wrong. Please try again later.

07 · Do's & don'ts

Protect the mark

The mark carries the brand. Treat it with the same care you'd treat a piece of equipment worth its weight in TEU.

MariMetricMaritime Intelligence
Don't stretch or compress the proportions.
MariMetricMaritime Intelligence
Don't recolor outside the brand palette.
MariMetricMaritime Intelligence
Don't add drop shadows, outlines, or glows.
MariMetricMaritime Intelligence
Don't place the mark on busy or low-contrast backgrounds.

Use MariMetric

Brand guidelines don't end here. They live in every pixel of the product.