Urbi

Overview

Urbi is a geo-intelligence platform that transforms geospatial data into actionable business insights. The design system embodies 'Data-Driven Maximalism'—a visual language that celebrates precision and clarity through vibrant, multi-dimensional color fields (purples, golds, and teals) layered with technical UI elements. The aesthetic evokes both scientific rigor and creative possibility, positioning geospatial analysis as an accessible, empowering discipline rather than an opaque technical domain. Users experience a sense of discovery and control: the interface feels like navigating through layers of meaningful information, not drowning in it.

The brand voice is confident, precise, and forward-thinking. Urbi speaks in the language of outcomes and possibilities, avoiding jargon while respecting the intelligence of its audience. Tone is conversational yet authoritative—think 'We've mapped the patterns; now let's act on them.' Vocabulary favors active verbs (navigate, discover, measure, unlock) and concrete nouns (data, insights, decisions, precision). Example: 'Your location data tells a story. We help you read it.'

Colors

The color system is anchored by Urbi Purple (#4a15e8), the primary accent used for interactive elements, focus states, and brand moments. This deep, saturated purple conveys technical sophistication and trust—it appears on CTAs, links, and active states, commanding attention without aggression. Urbi Yellow (#ffba00) is the secondary accent, deployed as the dominant CTA button color and accent highlights; its warmth and energy create visual momentum and signal actionable moments. The tertiary accent, Sky Blue (#3898ec), supports secondary interactions and data visualization contexts.

The surface palette is built on a soft lavender base (#f6f5fa, rgb(246, 245, 250)) that feels premium and calm, reducing eye strain during data-intensive workflows. The on-surface text color is Deep Purple (#2

Typography

The type system pairs Suisse Intl (headlines, display) with Arial/Helvetica (body, labels), creating a sophisticated contrast between geometric precision and utilitarian clarity. Suisse Intl's clean, modern letterforms (used at 50px/500 weight for headlines, 60px/700 for display) convey technical confidence and premium positioning. Body copy in Arial (16px/400 weight, 24px line-height) ensures legibility at all sizes and screen densities, critical for data-heavy interfaces. Headlines use tighter line-height (58px for 50px text) to create visual compression and emphasis; body text uses generous 24px line-height (1.5x) to reduce cognitive load. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (12px) overlaid on colorful backgrounds to ensure legibility. Letter-spacing on disp

Layout

The layout system uses a 12-column grid with a max-width of 1280px, scaling fluidly on tablets (991px breakpoint) and mobile (768px, 480px). The gutter is consistently 24px, creating breathing room between columns without sacrificing information density. Section separation uses lg spacing (40px) vertically to establish clear rhythm; within sections, md spacing (24px) groups related content. The container max-width of 1280px ensures that data visualizations and tables remain scannable without excessive horizontal scrolling. White-space is intentional: the lavender surface (#f6f5fa) acts as a visual rest, allowing colorful data elements and cards to pop. Use md spacing (24px) for card padding and input field padding (14px vertical, 18px horizontal) to create comfortable touch targets (48px m

Elevation & Depth

Elevation is conveyed through subtle shadows and layering, not darkness. The base layer (Level 1) is the lavender surface (#f6f5fa) with no shadow. Standard cards (Level 2) use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift that separates content from the background. Elevated modals and overlays (Level 3) use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a broader spread that conveys greater depth. On hover, cards transition to the Level 3 shadow and translate up 4px (transform: translateY(-4px)) over 300ms, signaling interactivity. Focus states on inputs use a 3px inset ring of

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners that feel approachable without sacrificing precision. Buttons and inputs use 0.625rem (10px) border-radius, a subtle rounding that softens hard edges while maintaining geometric clarity. Cards and containers use 1rem (16px) for a more generous, inviting curve. Badges and pills use full (9999px) for maximum softness, signaling secondary or supplementary information. The rationale: sharp 90° corners feel cold and corporate; excessive rounding (>20px) feels playful and diminishes authority. The 10px–16px–full progression creates a visual hi

Components

Action Elements Buttons are the primary interaction pattern. Primary CTAs use Urbi Yellow (#ffba00) background with Deep Purple text (#26114f), 12px horizontal padding, 48px height, and 0.625rem radius. On hover, the background shifts to #ffc800 (slightly brighter), the shadow deepens to 0 6px 16px rgba(0, 0, 0, 0.2), and the button translates up 2px over 200ms, creating tactile feedback. Secondary buttons use white background with purple text, a 1px outline-variant border, and the same dimensions; on hover, they shift to surface-container-low (#f0eef8) with a subtle shadow. Ghost buttons (used in modals or over images) use rgba(255, 255, 255, 0.3) background with a 1px rgba(255, 255, 255, 0.4) border; on hover, opacity increases to 0.5 and shadow appears. All buttons use label-md typo

Do's and Don'ts

**Do**

• Do use Urbi Purple (#4a15e8) for all primary interactive elements—links, focus states, active tabs, and brand moments—to maintain visual coherence and trust.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and elevated surfaces; reserve lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and top-level overlays.
• Do pair Suisse Intl headlines with Arial body text; this contrast signals hierarchy and maintains readability across data-dense layouts.
• Do use Urbi Yellow (#ffba00) exclusively for primary CTAs and high-priority actions; it creates visual momentum and guides user attention.
• Do maintain 48px minimum height for all interactive elements (buttons, inputs, list items) to ensure comfortable touch targets on mobile.
• Do use the full (9999px) radius only for badges and pills; reserve 0.625rem for buttons and 1rem for cards to preserve visual hierarchy.

**Don't**

• Don't use gray or neutral colors for primary CTAs; always use Urbi Yellow (#ffba00) or Urbi Purple (#4a15e8) to signal actionability.
• Don't apply shadows to text; use text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) only on small labels over busy backgrounds for contrast.
• Don't mix Suisse Intl and Arial in the same headline; use Suisse Intl for all display and headline text, Arial for body and labels.
• Don't exceed 1rem (16px) border-radius on cards or containers; excessive rounding diminishes technical authority and feels juvenile.
• Don't use the lavender surface (#f6f5fa) as a text color; it lacks sufficient contrast. Always use Deep Purple (#26114f) or on-surface-variant (#5e4a7a).
• Don't apply hover transforms (translateY, scale) to non-interactive elements; reserve motion for buttons, cards, and list items to avoid confusion.