Moto Card

Overview

Moto Card is a premium fintech brand positioned at the intersection of modern wealth management and digital-native infrastructure. The brand serves high-net-worth individuals and crypto-native users seeking a seamless, globally-accessible payment experience without traditional banking friction. The aesthetic is 'Refined Minimalism with Technological Precision'—a dark, high-contrast visual language that evokes luxury through restraint, metal-inspired surfaces, and architectural clarity rather than ornamentation. The UI conveys quiet confidence: every element earns its place, and the experience feels both premium and approachable.

The brand voice is precise, calm, and aspirational without breathlessness. Moto speaks to users as peers navigating modern wealth—no jargon, no hype, just clarity. Example: 'Zero FX fees built in. Spend globally, settle locally.' The vocabulary is direct (infrastructure, movement, access) and the tone avoids marketing clichés. Moto acknowledges complexity but hides it behind elegant design, making crypto-backed finance feel as natural as traditional banking.

Colors

The color system is built on a near-black canvas (#080808) paired with a high-contrast light neutral (#e1e5e5), creating maximum legibility and a premium, gallery-like aesthetic. Primary (#e1e5e5) is the signature light accent used on CTAs, interactive elements, and key brand moments—it reads as refined silver against the dark background. Secondary (#3898ec) is a precise, tech-forward blue reserved for accents, links, and status indicators; it appears sparingly to maintain visual hierarchy. Tertiary (#dddddd) is a softer light neutral used for secondary text and supporting surfaces.

The surface stack progresses from near-black (#080808 surface) through charcoal grays (#1c2227 surface-container, #20272c surface-container-high) to create subtle depth without lightening the overall tone. On-

Typography

The type system uses Neuemontreal as the primary typeface, paired with Arial as a fallback—a geometric sans-serif that conveys both technological precision and refined elegance. Display (64px, 500 weight, -0.02em letter-spacing) is reserved for hero headlines like 'BUILT FOR MODERN WEALTH' and commands attention through scale and negative space. Headline-lg (48px) and headline-md (32px) are used for section titles and maintain the uppercase convention seen throughout the brand. Body-md (16px, 500 weight) is the workhorse for UI labels, buttons, and navigation—the 500 weight (medium) gives it visual weight without feeling heavy. Body-lg (18px, 400 weight) is used for longer-form content and descriptions. Label-md (14px, 500 weight) is applied to buttons, badges, and form labels with 0.01em

Layout

The page uses a fluid, 12-column grid system with a max-width of 1280px (container-max), centered with auto margins. The global padding (--padding-global) is 24px on desktop, creating breathing room around content. Section rhythm follows a lg spacing (40px) pattern for vertical separation between major sections, with md spacing (24px) used for component-level grouping. The hero section spans full-width with a dark background video or image, establishing the immersive, premium tone immediately. Cards and content blocks use md padding (24px) internally, with sm spacing (12px) between nested elements. Mobile breakpoints compress the layout at 992px (tablet) and 576px (mobile), with responsive font sizing using CSS calc() to maintain hierarchy. The container-large class enforces max-width: 128

Elevation & Depth

Depth is conveyed through layering and subtle shadow rather than dramatic drop shadows. Level 1 (Base) is the dark background (#080808) with optional texture or video. Level 2 (Standard Card/Overlay) uses a 1px solid border in outline-variant (#838a8f) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), creating a soft separation from the background. Level 3 (Elevated/Modal) applies box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) with a 1px border in on-surface-variant (#c0c4c6), signaling prominence. Glass surfaces (overlays, nav blur) use backdrop-filter: blur(12px) with -webkit-backdrop-filter: bl

Shapes

The shape philosophy is 'Architectural Precision with Refined Edges'—sharp corners are used for structural elements (cards, inputs, containers) to convey technical sophistication, while CTAs and interactive elements use full-radius (border-radius: 9999px) to signal action and approachability. Buttons use rounded: full (9999px) with padding: 18px 24px for primary CTAs, creating a pill-shaped form that feels premium and modern. Secondary buttons use rounded: full with a border for visual distinction. Input fields use rounded: DEFAULT (8px) with a bottom-border-only style (0 0 1px 0 solid outline

Components

Action Elements Buttons are the primary interactive element and use full-radius (9999px) to signal clickability. Primary buttons (button-primary) have backgroundColor: {colors.primary} (#e1e5e5), textColor: {colors.on-primary} (#080808), padding: 18px 24px, and height: 48px. On hover (button-primary-hover), the background shifts to {colors.primary-fixed-dim} (#c6cfcf) with a 200ms ease-out transition. Secondary buttons (button-secondary) use backgroundColor: {colors.surface-container-high} (#20272c), a 1px border in outline-variant, and the same padding/height. Avoid using color alone to convey state; always pair with opacity or background shifts.

Containers & Surfaces Cards (card) have backgroundColor: rgba(0, 0, 0, 0) (transparent), a 1px border in surface-variant (#212528), rou

Do's and Don'ts

**Do**

• Do use primary (#e1e5e5) sparingly on CTAs and key interactive moments—it's the brand's signature accent and loses impact if overused.
• Do maintain high contrast between text and background; minimum WCAG AA ratio of 4.5:1 for body text, 3:1 for large text.
• Do apply uppercase text-transform to all headings to reinforce the architectural, authoritative brand voice.
• Do use full-radius (9999px) exclusively for buttons and interactive elements; reserve sharp corners (8–12px) for containers and structure.
• Do pair glass overlays (backdrop-filter: blur(12px)) with a 1px border in rgba(255, 255, 255, 0.1) to maintain visual separation.
• Do use 150–200ms ease-out transitions for hover and focus states to feel responsive without jarring.

**Don't**

• Don't use bright or saturated colors on the dark background; they will feel out of place and break the refined aesthetic.
• Don't apply shadows with pure black (rgb(0, 0, 0)); always use rgba(0, 0, 0, X) with opacity 0.12–0.25 for subtlety.
• Don't mix rounded and sharp corners on the same component; buttons are always full-radius, containers are always 8–12px.
• Don't use secondary blue (#3898ec) for large areas or backgrounds; reserve it for accents, links, and status indicators only.
• Don't add decorative gradients or textures to the dark background; the brand relies on clarity and restraint, not visual noise.
• Don't use system fonts or generic sans-serifs; always specify Neuemontreal with Arial as fallback to maintain the premium, geometric aesthetic.