Revolution Express

Overview

Revolution Express is a premium Vietnamese transportation service brand that marries heritage railway aesthetics with contemporary digital minimalism. The design system serves travelers seeking authentic, curated journeys through Vietnam—positioning the brand as both nostalgic and forward-thinking. The visual language employs a "Luxury Minimalism" aesthetic: a near-black canvas (rgb(0, 5, 0)) punctuated by warm gold accents (#d4af37) and cool cyan highlights (#2098d1), evoking the interplay of train windows at dusk and the precision of vintage timetables. The UI evokes a sense of anticipation and sophistication—every interaction feels deliberate, every surface intentional.

The brand voice is refined yet approachable: precise, poetic, never rushed. Vocabulary leans toward journey-centric language: "Build Your Journey," "Step Aboard," "Ride the Vietnam Revolution." Tone is conversational but authoritative—the brand speaks as a knowledgeable guide, not a salesperson. Example sentence in brand voice: "Your seat awaits by the window; the Mekong Delta unfolds at 6:47 AM."

Colors

The color system operates on a principle of **Contrast & Warmth**: a deep, near-black foundation (#000500, rgb(0, 5, 0)) provides visual rest and luxury, while a warm metallic gold (#d4af37) serves as the primary accent—used exclusively on CTAs, active states, and brand moments. This gold is never applied to body text or backgrounds; it is reserved for moments of intentional interaction. Secondary accent cyan (#2098d1) provides a cool counterpoint, used for secondary CTAs, status indicators, and data visualization. The surface stack progresses from pure black (#000000) at the dimmest level through carefully calibrated grays (#0d0d0d, #151515, #242424) to create subtle depth without breaking the dark aesthetic. On-surface text is pure white (#ffffff) for maximum legibility over dark backgro

Typography

The type system is anchored in Montserrat, a geometric sans-serif that conveys modernity and precision—qualities essential to a transportation brand. The hierarchy spans from Display (60px, 700 weight) for hero moments down to Label-sm (12px, 500 weight) for micro-interactions. Headlines use tighter letter-spacing (-0.04em to -0.01em) to create visual compression and sophistication, while body text employs 0.01–0.02em spacing for clarity. All type is set in white (#ffffff) or near-black (#000500) for maximum contrast; no gray text is used except in disabled states. Italic styling is reserved for hero taglines (e.g., "Ride the Vietnam Revolution" rendered in italic at 40px, 400 weight). Apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) on white text overlaid on photographic backgrounds to ens

Layout

The layout employs a 12-column grid with a max-width of 1280px, centered on the viewport. Horizontal rhythm is governed by the spacing scale: lg (40px) separates major sections, md (24px) divides subsections, and sm (12px) creates breathing room within components. The gutter is fixed at 24px on desktop, reducing to 16px on tablet and 12px on mobile. White-space is treated as a design material—negative space around CTAs and hero imagery is never compressed. The hero section spans full-width with a 16:9 aspect ratio, overlaid with a semi-transparent dark gradient (rgba(0, 5, 0, 0.4)) to ensure text legibility. Cards and containers use md (24px) padding internally, with lg (40px) margins between them. Container backgrounds are always surface-container or darker; never white or light gray. Sec

Elevation & Depth

Depth is conveyed through subtle shadows and border definition rather than layering or blur effects. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor interactive elements like hover states on text links; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, input fields, and standard buttons; lg (0 8px 24px rgba(0, 0, 0, 0.25)) for modals, dropdowns, and elevated surfaces. All surfaces receive a 1px solid border at {colors.surface-container-high} or {colors.outline-variant} to define edges crisply. No blur, no glassmorphism, no transparency overlays—the aesthetic is

Shapes

The shape philosophy is **Technical Minimalism**: rounded corners are used sparingly and consistently to signal interactivity without softening the brand's precision. Buttons and inputs use md (0.75rem / 12px) border-radius—enough to feel modern, not so much as to appear playful. Cards use lg (1rem / 16px) for a slightly more generous curve that suggests containment. The navigation bar and hero section use no border-radius (0px) to anchor the layout with architectural sharpness. Badges and pills use full (9999px) for maximum roundness, signaling status or metadata. This graduated approach—shar

Components

Action Elements Buttons are the primary interaction mechanism and must command attention without aggression. **button-primary** uses {colors.primary} (#d4af37) background with {colors.on-primary} text, 12px 32px padding, 48px height, and md border-radius. Apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) on default state. On hover, shift to **button-primary-hover**: background becomes {colors.primary-fixed-dim} (#d4af37 at 90% opacity), shadow elevates to {elevation.lg}, and a 200ms ease-out transition animates the change. **button-secondary** uses transparent background with {colors.primary} text and a 1px border at {colors.primary}; on hover (**button-secondary-hover**), apply rgba(212, 175, 55, 0.08) background. **button-ghost** is text-only with no border or background; on hover

Do's and Don'ts

**Do**

• Do use {colors.primary} (#d4af37) exclusively on CTAs, active navigation states, and focus rings—never on body text or backgrounds.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and buttons; elevate to {elevation.lg} on hover or focus.
• Do maintain the dark surface stack ({colors.surface} #000500 as base) across all pages; never introduce white or light-gray backgrounds.
• Do use Montserrat at 600+ weight for headlines and 400 for body text; never use serif fonts or system fonts.
• Do include 200–300ms ease-out transitions on all interactive state changes (hover, focus, active).
• Do apply 1px borders at {colors.surface-container-high} or {colors.outline-variant} to define card and input edges.
• Do use {colors.secondary} (#2098d1) for secondary CTAs and status indicators; never mix it with primary gold on the same component.

**Don't**

• Don't use white (#ffffff) or light gray backgrounds; the brand is dark-first. All surfaces must be {colors.surface-container} or darker.
• Don't apply {colors.primary} to body text, disabled states, or non-interactive elements—it is reserved for CTAs and active states only.
• Don't use box-shadow values outside the defined elevation scale (sm, md, lg); no custom shadows or blur effects.
• Don't apply border-radius > lg (1rem) to buttons or inputs; reserve full (9999px) for badges and pills only.
• Don't use transparency, gradients, or glassmorphism effects; the aesthetic is flat, precise, and opaque.
• Don't mix typefaces; Montserrat is the sole font family. Never fall back to system fonts or serif alternatives.
• Don't animate opacity or scale on hover; use only background-color, box-shadow, and border-color transitions.
• Don't apply text-shadow on white text over dark backgrounds; use it only on white text over photographic imagery.