Route4Green

Design system route4green-pilot · v1.0.0 · published 25/09/2026

Refined by the BrandPilot team

Read-only

b2b-saas

developer-api

logistics

light-mode

vietnamese

Foundation

The brand's rules - philosophy, color and type tokens, usage guidelines - defined once on the design system.

Philosophy

Route4Green is for people who verify before they believe: it exists to show the fleet-level assignment it made and the numbers that prove it, not to describe optimization in adjectives.

The system is FOR dense, scannable evidence - tables, deltas, JSON, schematic route geometry - on light surfaces where reading happens all day.

It takes the stance that a working green and a measured sentence outperform a gradient and a claim; if a screen can't be verified against a dispatcher's own records, it doesn't belong in the product.

Use these tokens

Machine-readable surfaces for adopters and their coding agents.

Agent prompt Adoption manifest (JSON)Adoption guide globals css tailwind theme Tailwind v4 theme (CSS)Design Tokens (DTCG JSON)brand manifest Token bundle (ZIP)

Color tokens

Light value first, dark-mode value second.

--accent

accent

#007E2F / #22C55E

Highlight hue: the single most important interactive element per view (hero CTA, active tab) - never doubles as severity 'pass'

On white AA 5.2:1 · On dark AA large 3.2:1

--accent-hover

accent

#006526 / #4ADE80

Highlight hover state

On white AAA 7.2:1 · On dark Fail 2.2:1

--border-neutral

neutral

#D8DED9 / #3A433C

Default borders, dividers, input outlines

On white Fail 1.3:1 · On dark AAA 12.2:1

--card-surface

surface

#FFFFFF / #1C2921

Cards, code blocks, modals, elevated panels

On white Fail 1.0:1 · On dark AAA 16.7:1

--chart-1

data

#429C5A / #6BC084

Data viz series 1 - safe for small labels (4.5:1+ on paper)

On white AA large 3.4:1 · On dark AA 4.8:1

--chart-2

data

#009D9D / #2DD4CF

Data viz series 2 - safe for small labels

On white AA large 3.3:1 · On dark AA 5.0:1

--chart-3

data

#248FCC / #5AAEE0

Data viz series 3 - safe for small labels

On white AA large 3.5:1 · On dark AA 4.6:1

--chart-4

data

#7F79D1 / #A6A2E0

Data viz series 4 - measures ~3.4:1 on paper; use for chart lines, area fills and large labels (≥18px/bold ≥14px) only, never small numeric labels or body-size text

On white AA large 3.7:1 · On dark AA large 4.4:1

--chart-5

data

#B167AB / #CE95C6

Data viz series 5 - measures ~3.9:1 on paper; use for chart lines, area fills and large labels only, never small numeric labels or body-size text

On white AA large 3.8:1 · On dark AA large 4.2:1

--data-row-tint

data

#EEF3EE / #20302669

Alternating table row background for endpoint/plan/result tables - kept visually distinct from accent surface

On white Fail 1.1:1 · On dark AAA 14.8:1

--graphite-text

neutral

#1A1F1C / #EDF1EE

Primary body and heading text on light ground / primary text on dark ground

On white AAA 16.7:1 · On dark Fail 1.0:1

--mid-gray

neutral

#5B655E / #A6AFA8

Secondary text, captions, table metadata

On white AA 6.0:1 · On dark Fail 2.7:1

--paper-surface

surface

#F7F8F5 / #14201A

Canonical page background

On white Fail 1.0:1 · On dark AAA 15.6:1

--primary

primary

#1F7A3D / #3FBE6E

Brand chrome, primary buttons, links, active nav, focus rings

On white AA 5.3:1 · On dark AA large 3.1:1

--primary-foreground

primary

#FFFFFF / #0C160F

Text/icons on primary fill

On white Fail 1.0:1 · On dark AAA 16.7:1

--primary-hover

primary

#186531 / #57CB80

Primary hover/pressed state

On white AAA 7.1:1 · On dark Fail 2.3:1

--secondary

secondary

#62996D / #6FA779

Secondary-hue fill only: supporting badge/chip backgrounds, decorative dividers. Do NOT use as text - falls to ~3:1 on paper. Pair with primary-foreground or graphite-text at ≥16px bold / large-label contexts only, never for body-size text.

On white AA large 3.3:1 · On dark AA 5.0:1

--secondary-hover

secondary

#517F5A / #84B78D

Secondary fill hover state

On white AA 4.6:1 · On dark AA large 3.6:1

--secondary-text

secondary

#3F6B48 / #9CCBA3

Secondary-hued TEXT row: badge/chip labels, supporting links, small emphasis text - holds 5.6:1 on paper and 6.0:1 on card in light, and equivalent contrast on dark background/card in dark mode

On white AA 6.1:1 · On dark Fail 2.7:1

--status-error

status

#B3261E / #F87171

Severity: critical/error

On white AA 6.5:1 · On dark Fail 2.5:1

--status-info

status

#1D5FA8 / #60A5FA

Severity: informational

On white AA 6.4:1 · On dark Fail 2.5:1

--status-success

status

#1C7A44 / #4ADE80

Severity: pass/success, independent of brand green in same view

On white AA 5.3:1 · On dark AA large 3.1:1

--status-warning

status

#9A6400 / #F5A524

Severity: warning

On white AA 5.0:1 · On dark AA large 3.3:1

Typography

Families load from Google Fonts; the scale renders in the heading family.

heading

"Archivo", 'IBM Plex Sans', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

primary

"IBM Plex Sans", 'IBM Plex Sans', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Scale

bodyRoute4Green

body-mediumRoute4Green

captionRoute4Green

displayRoute4Green

h1Route4Green

h2Route4Green

h3Route4Green

h4Route4Green

mono-codeRoute4Green

mono-inlineRoute4Green

smallRoute4Green

Motion

Preset (functional)

CSS-only transitions; durations drop to near zero when a visitor prefers reduced motion.

Durations

Fast120ms

Base200ms

Slow320ms

Easings

Standardcubic-bezier(0.2, 0, 0, 1)

Emphasizedcubic-bezier(0.3, 0, 0, 1.1)

Exitcubic-bezier(0.4, 0, 1, 1)

Hover

Lift-2px

Scale1.02

Stagger50ms

Imagery direction

Avoid

Stock-smile business photography, aspirational lifestyle logistics scenes, leaf/globe/earth/seedling/eco iconography, decorative abstract shapes unconnected to route geometry, gradients.

Subjects

Real Vietnamese logistics operators mid-task: dispatch room screens and order boards, port loading/unloading, national highway driving from a driver's or roadside perspective, cold-chain warehouse operations, vehicle-level stop scanning and load-checking.

Treatment

Documentary, unstaged-looking, natural light, slightly desaturated to sit quietly behind or beside data rather than compete with it. Crops favor task and hands-on-work over posed faces.

Schematic Role

Polylines, ordered stop markers, before/after route paths and coordinate grids serve as the system's secondary illustration language, rendered in the product's own token colors (green + neutrals + severity hues where relevant) to double as brand mark and technical demonstration.

Voice and tone

Chạy thử cùng VNPost: một tuyến thật, số liệu đo được, không dự báo

Chia đơn cho cả đội xe, không chỉ sắp lại thứ tự điểm giao

Những gì chưa có, nói trước cho rõ

Dont

Driving a greener future for logistics

AI-powered sustainable delivery

Reduce your carbon footprint today

Revolutionary route optimization

Trusted by industry leaders worldwide

Traits

measured

specific

unhurried

verifiable

plain

Structure

Number first, then how it was measured, then what it means. Never lead with an adjective or an outcome promise.

Language Rule

All Vietnamese copy carries full diacritics; English copy is a high-quality full translation, not a stripped-down summary, for international buyers who don't read Vietnamese fluently.

Usage guidelines

Color

Green (primary/secondary/accent tints of the single hue) is reserved for brand chrome, links, and primary interactive states (buttons, active nav, focus rings). It must never double as a severity 'pass' color in the same view where brand green also appears as decoration, to avoid ambiguity. Severity reds/ambers/blues live outside the harmony as fixed functional tokens. Neutrals (graphite text, mid gray, paper/card surfaces, data-row tint) carry all table and document density; color is added only where it means something.

Layout

Tables (endpoints, plan results, stop sequences, before/after deltas) use alternating row tints (Data Row Tint), clear dividers, and generous column padding; they are treated as primary content, not secondary detail. Marketing pages lead with a real or realistic API request/response or fleet-split diagram before any descriptive copy block. Fleet-level assignment visuals must show multiple vehicles and redistributed orders - never a single truck's reordered stop list - to keep the core differentiator visually unambiguous.

Dark Mode

Dark tokens live only under a.dark class scope, tuned for extended dashboard/docs reading sessions by engineers, not treated as the brand's face.

Typography

Headings use a confident, slightly technical sans for wordmark/lockup harmony with the kept 'R' mark; body uses a highly legible workhorse sans at 16px/1.5-1.75 for long documentation reads. Monospace is reserved strictly for code, JSON, endpoint paths and coordinate data at 12-14px/1.2-1.4 line-height, always visually distinct from body.