Urbi

Overview

Urbi is a geo-intelligence platform that transforms complex geospatial data into actionable business insights. The brand serves enterprise clients across real estate, urban planning, and logistics sectors who demand precision, speed, and visual clarity in data-driven decision-making. The aesthetic is 'Vibrant Minimalism with Organic Depth'—a fusion of technical rigor and expressive, fluid visual language. The UI evokes a sense of clarity emerging from complexity: abstract, flowing organic shapes (purples, golds, teals) form the backdrop, while clean interface elements act as precision instruments that cut through visual noise. The emotional response is one of confident sophistication: users feel empowered by data, not overwhelmed by it.

The brand voice is precise, measured, and forward-thinking. Urbi speaks in concrete terms—'Precision Data for Enhanced Navigation'—avoiding hyperbole or marketing cliché. The vocabulary emphasizes measurement, insight, and actionability. Tone is professional yet approachable; the brand assumes users are intelligent but may be new to geospatial tools. Example sentence in Urbi's voice: 'Your location data now speaks the language of business outcomes.'

Colors

Urbi's color system balances a cool, professional foundation with vibrant accent colors that signal innovation and energy. The primary color is Urbi Purple (#4a15e8), a deep, saturated violet used exclusively for interactive elements—buttons, links, focus states, and brand moments. This purple conveys technical sophistication and brand identity; it appears on CTAs, form inputs when focused, and navigation highlights. The secondary color is Urbi Yellow (#ffba00), a warm, luminous gold reserved for primary call-to-action buttons and moments of highest emphasis. This warm-cool contrast creates visual tension that draws the eye and signals importance. The tertiary accent is a bright, friendly cyan (#3898ec) used for supporting information, secondary highlights, and data visualization elements.

Typography

The type system pairs Suisse Intl (a geometric, contemporary sans-serif from Swiss typographic tradition) for headlines and display text with Arial/Helvetica for body and UI copy. This pairing creates a clear hierarchy: Suisse Intl's measured, architectural forms signal precision and brand identity in headlines (50px, 500 weight for headline-lg; 36px, 500 weight for headline-md), while the familiar, highly legible Arial ensures accessibility and clarity in body text (16px, 400 weight for body-md; 14px, 600 weight for label-md). Letter-spacing is tight on headlines (-0.02em to -0.04em) to create visual density and confidence, while body text uses 0em spacing for natural readability. Line heights are generous: 58px for 50px headlines, 28px for 18px body text, ensuring comfortable reading eve

Layout

Urbi uses a fluid 12-column grid with a maximum container width of 1280px, allowing the design to breathe on large screens while maintaining focus. The page rhythm is built on a generous spacing scale: lg (40px) separates major sections, md (24px) groups related content, and sm (12px) provides breathing room within components. The hero section occupies the full viewport height with a 24px gutter on desktop, creating an immersive entry point. Content sections below use 40px vertical spacing (lg) to establish clear visual breaks, with 24px horizontal gutters maintaining consistent margins. The design favors white space over density—cards and content blocks are never cramped, with minimum 24px padding inside containers. On tablet (768px–991px), the gutter reduces to 16px and container max-wid

Elevation & Depth

Depth in Urbi is conveyed through subtle, layered shadows and strategic use of background color rather than aggressive drop shadows. The elevation system uses three primary levels: Level 1 (Base) has no shadow, relying on the light lavender surface (#f6f5fa) and subtle 1px borders in outline-variant (#c4bcd4). Level 2 (Standard Cards & Modals) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests the element is slightly lifted. Level 3 (Elevated Modals, Dropdowns, Popovers) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger, more pronounced shado

Shapes

Urbi employs a 'Soft-Technical' radius philosophy: rounded corners are present but restrained, signaling approachability without sacrificing precision. The rounded scale uses rem-based values for consistency: sm (0.5rem / 8px) for small, tight elements like badges and small buttons; DEFAULT (0.625rem / 10px) for inputs and compact components; md (0.75rem / 12px) for list items and secondary cards; lg (1rem / 16px) for primary buttons and standard cards; xl (1.5rem / 24px) for large modals and hero-section cards; full (9999px) for pill-shaped buttons and badges. Buttons use lg (1rem) radius, cr

Components

Action Elements Buttons are the primary interaction mechanism and use two distinct styles. Primary buttons (CTA) use the secondary color (Urbi Yellow, #ffba00) with on-secondary text (#26114f), 12px vertical / 24px horizontal padding, and lg radius (1rem). On hover, the background shifts to #ffb300 (slightly darker), the element translates up 2px, and the shadow elevates from md to lg (0 8px 24px rgba(0, 0, 0, 0.12)). The transition timing is 300ms ease-out, creating a responsive, tactile feel. Secondary buttons use a white background (#ffffff) with primary text (#4a15e8) and a 1px border in outline-variant (#c4bcd4). On hover, the background becomes surface-container-low (#f0eff5) and the border shifts to outline (#8b7a9e). Ghost buttons (used in hero sections over imagery) use rgba(2

Do's and Don'ts

**Do**

• Do use Urbi Purple (#4a15e8) for all interactive focus states, links, and brand moments—it is the signature accent and should feel intentional and premium.
• Do pair Urbi Yellow (#ffba00) primary buttons with Urbi Purple secondary buttons to create visual hierarchy and guide user attention through the interface.
• Do maintain the generous spacing scale (lg: 40px for sections, md: 24px for groups) to reinforce the 'clarity through precision' brand philosophy and prevent visual clutter.
• Do use Suisse Intl for all headlines and display text to establish brand identity; reserve Arial/Helvetica for body and UI copy to ensure accessibility and readability.
• Do apply subtle shadows (md: 0 3px 8px rgba(0, 0, 0, 0.15)) and micro-interactions (300ms transitions, 2px translateY on hover) to create tactile, responsive feedback without overwhelming the interface.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background colors; instead use on-surface (#26114f) and surface (#f6f5fa) to maintain the brand's warm, sophisticated palette.
• Don't apply border-radius greater than xl (1.5rem) on standard components; excessive rounding undermines the 'Soft-Technical' precision aesthetic and reads as playful rather than professional.
• Don't stack more than two accent colors (primary + secondary) in a single interface section; the vibrant visual language is powerful precisely because it is restrained and intentional.
• Don't use shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.12)) on standard components; the design relies on subtle depth and color to create hierarchy, not aggressive drop shadows.
• Don't reduce spacing below sm (12px) inside components or below md (24px) between sections on desktop; white space is a design tool, not wasted real estate, and maintains the premium, breathable aesthetic.