Radian

Overview

Radian is an electric enduro motorcycle brand that embodies precision engineering and bold performance through a design system rooted in **Architectural Minimalism with High-Contrast Energy**. The visual language combines industrial restraint—clean lines, generous whitespace, and a neutral off-white canvas (#f5f3ef)—with a vibrant yellow accent (#fdeb07) that signals power, immediacy, and forward motion. The brand serves riders who demand both technical sophistication and visual clarity: engineers, adventurers, and early adopters who move first. The UI evokes a sense of control and confidence, where every element earns its place through function and clarity.

Radian's voice is direct, precise, and unapologetic. The tone avoids breathless marketing speak in favor of concrete specifications and honest capability claims. Vocabulary leans technical ("swappable battery," "70 hp," "1060 Nm torque") without sacrificing accessibility. The brand personality is "engineered for motion"—every interaction feels intentional, responsive, and built for performance. Example sentence in Radian's voice: "Swap in 30 seconds. Ride for hours. No compromise."

Colors

The Radian color system operates on a principle of **maximum contrast and intentional restraint**. The primary color, a vivid yellow (#fdeb07), is reserved exclusively for call-to-action elements, interactive states, and brand moments—it commands attention without apology. Against the neutral surface palette (off-white #f5f3ef, dark text #121714), this yellow creates a 15+ contrast ratio, ensuring accessibility and visual hierarchy. Secondary colors include a technical blue (#3898ec) for informational UI and a performance red (#ff4c24) for alerts and critical actions. The surface stack uses warm, muted grays (#eceae6 for containers, #e8e8e8 for outlines) to maintain a premium, engineered aesthetic. All surfaces sit on a consistent off-white background (#f5f3ef) that avoids pure white, redu

Typography

The Radian type system uses **Instrument Sans** as the primary typeface, a geometric sans-serif that conveys precision and modernity without sacrificing warmth. The hierarchy spans from display (60px, 500 weight) for hero statements down to label-sm (12px, 500 weight) for UI labels and metadata. All sizes use a consistent 500 font-weight for headlines and 400 for body text, creating visual rhythm without excessive weight variation. The system prioritizes readability at small sizes: body-md (16px, 24px line-height) ensures comfortable reading on mobile, while label-md (14px, 20px line-height) maintains legibility in dense UI. Letter-spacing is minimal (0 to -0.04em) to reinforce the engineered, tight aesthetic. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) on white text over yellow backgr

Layout

Radian employs a **fluid, 12-column grid system** with a maximum container width of 1280px, allowing content to breathe on desktop while remaining compact on mobile. The spacing scale uses semantic tokens: gutter (24px) for section separation, lg (40px) for major layout breaks, md (24px) for component padding, and sm (12px) for internal element spacing. The design favors generous whitespace—sections are separated by lg spacing (40px) to create visual rest and emphasize the "engineered clarity" aesthetic. Container max-width of 1280px ensures text remains readable and layouts don't sprawl. Padding inside cards and inputs uses md spacing (24px) on desktop, reducing to sm (12px) on mobile to optimize screen real estate. The grid is fluid (not fixed-width breakpoints) until the tablet breakpoi

Elevation & Depth

Depth in Radian is conveyed through **subtle, precise shadows and strategic layering**, not through dramatic blur or glassmorphism. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle UI elements like hover states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and dropdowns. Shadows use a consistent black with 6–15% opacity, avoiding harsh or colored shadows. Cards sit at md elevation by default, lifting to lg on hover (with a 200ms ease transition). The modal overlay uses a semi-transparen

Shapes

Radian's shape language is **Soft-Technical**: rounded corners are used strategically to soften the industrial aesthetic without sacrificing precision. Buttons and primary interactive elements use full rounding (border-radius: 9999px), creating pill-shaped affordances that signal "tap here." Cards and containers use lg rounding (1rem / 16px), balancing approachability with formality. Input fields use DEFAULT rounding (0.5rem / 8px), a subtle curve that feels refined without being playful. Modals and elevated surfaces use lg rounding (1rem) to establish visual hierarchy. The reasoning: full rou

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses full rounding (border-radius: 9999px), primary yellow background (#fdeb07), and dark text (#121714) with 12px vertical and 24px horizontal padding, resulting in a 48px height. On hover, the background shifts to primary-fixed-dim (#d3c400) with a 200ms ease transition, providing tactile feedback. The button-secondary variant uses a transparent background with a 1px border in the text color, maintaining visual weight without competing for attention. Ghost buttons (transparent, no border) are used for tertiary actions; they inherit the primary text color and lift to a 10% yellow background on hover. All buttons use label-md typography (14px, 500 weight) and apply a cursor: pointer for clarity.

Do's and Don'ts

**Do**

• Do use primary yellow (#fdeb07) exclusively on CTAs, focus states, and hero moments—never on body text or large surfaces.
• Do maintain the 48px button height across all interactive elements for consistent touch targets and visual rhythm.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and surfaces; reserve lg elevation for modals and dropdowns.
• Do use Instrument Sans at 500 weight for all headlines and 400 weight for body text to maintain the engineered aesthetic.
• Do separate major sections with lg spacing (40px) to create visual rest and emphasize clarity.
• Do apply a 200ms ease transition on all hover and focus state changes to provide tactile feedback without feeling sluggish.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) as primary colors; stick to the defined palette (#f5f3ef for surface, #121714 for text).
• Don't apply shadows with colored tints (e.g., blue or red shadows); use only black shadows at 6–15% opacity.
• Don't exceed lg rounding (1rem) on containers or cards; excessive rounding undermines the engineered aesthetic.
• Don't use secondary colors (blue #3898ec, red #ff4c24) for primary CTAs; reserve primary yellow for the most important actions.
• Don't apply text-shadow or other effects on small labels (label-sm, label-md) unless they sit over busy backgrounds.
• Don't mix typefaces; Instrument Sans is the sole typeface family for all text, including headings, body, and labels.