Hubtown

Overview

Hubtown's design system embodies **Architectural Minimalism with Digital Precision**—a premium real estate aesthetic that merges corporate authority with cutting-edge technology. The brand serves India's discerning property investors and developers, delivering complex spatial and financial data through a luminous, high-contrast interface. The visual language centers on a deep navy canvas (#020a19) punctuated by a signature periwinkle accent (#d5e0ff), creating an atmosphere of clarity, trust, and forward momentum. This is not austere brutalism; it is refined, purposeful, and deeply technical.

The brand voice is authoritative yet approachable: precise without jargon, confident without arrogance. Hubtown speaks in concrete facts—square footage, delivery timelines, location advantages—delivered with the calm certainty of a developer who has shipped 45 million square feet. Example sentence in brand voice: "Our Mumbai portfolio spans 12 million sq. ft. across 8 completed projects, with an additional 3.2 million sq. ft. currently under construction in the Bandra-Kurla Complex."

Colors

The color system is built on a **high-contrast, luminosity-driven hierarchy** designed to cut through visual noise and emphasize data clarity. Primary (#d5e0ff, a soft periwinkle) is the signature accent—used exclusively on call-to-action buttons, active states, and key interactive elements. It appears frequently but sparingly, ensuring maximum impact when users need to take action. The surface stack is anchored in a deep navy (#020a19) that serves as the page background and primary text container, providing a sophisticated, premium canvas. Secondary surfaces layer at #0f1829 (surface-container-low) and #252d42 (surface-container-high), creating visual depth through subtle luminosity shifts rather than color rotation.

Glassmorphic surfaces use rgba(213, 224, 255, 0.05) to rgba(213, 224, 2

Typography

The type system employs a **geometric, high-contrast pairing** of Grotesk (display, headlines, and body text) with Commit Mono (labels and data). Grotesk Bold at 700 weight drives headlines (display: 60px/68px, headline-lg: 40px/48px, headline-md: 28px/36px), establishing visual authority and commanding attention. Body text uses Grotesk Regular at 400 weight (body-lg: 18px/28px, body-md: 16px/24px), ensuring legibility over the dark background with a 1.5x line-height multiplier for breathing room. Labels and metadata use Commit Mono at 500–600 weight (label-md: 14px/20px, label-sm: 12px/16px) with 0.01em to 0.05em letter-spacing, reinforcing the technical, data-forward personality. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (label-sm) when layered over busy glassmorphi

Layout

The layout system uses a **fluid 12-column grid** with a maximum container width of 1366px, scaling responsively from 480px mobile breakpoints to 3840px ultra-wide displays. The gutter spacing is consistently 24px (md spacing unit), creating a rhythm that feels spacious without excess. Section separation uses lg spacing (40px) for major content blocks, while internal card padding uses md spacing (24px). The design favors generous white space—surfaces are never packed; breathing room is a design principle. Container max-width of 1366px ensures content remains scannable and focused, preventing the eye from traveling too far horizontally. Responsive breakpoints follow Tailwind conventions (480px, 768px, 1024px, 1366px, 1536px, 1921px, 2560px, 3840px), with layouts adapting fluidly rather than

Elevation & Depth

Depth is conveyed through **layered glassmorphism and precise shadow choreography** rather than flat color shifts. Level 1 (Base): The background is a solid #020a19 with no shadow, establishing the foundation. Level 2 (Standard Cards): backdrop-filter: blur(20px), background: rgba(213, 224, 255, 0.05), border: 1px solid rgba(213, 224, 255, 0.1), box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This creates a subtle lift, readable but not aggressive. Level 3 (Elevated/Modals): backdrop-filter: blur(40px), background: rgba(213, 224, 255, 0.12), border: 1px solid rgba(213, 224, 255, 0.15), box-shadow:

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used strategically to soften the precision of the data-forward interface without sacrificing clarity. Buttons and primary interactive elements use rounded-lg (1rem / 16px), creating a friendly, approachable touch point. Cards and glass surfaces use rounded-xl (1.5rem / 24px), emphasizing their role as containers for complex information. Input fields use rounded-DEFAULT (0.5rem / 8px), maintaining a compact, technical appearance. Badges and small labels use rounded-full (9999px), creating pill-shaped containers that feel modern and

Components

Action Elements Buttons are the primary call-to-action mechanism. **button-primary** uses backgroundColor: {colors.primary} (#d5e0ff), textColor: {colors.on-primary} (#020a19), padding: 12px 24px, height: 48px, rounded: {rounded.lg}, with a transition: all 0.33s cubic-bezier(0.2, 0, 0, 1). On hover, transition to button-primary-hover with backgroundColor: {colors.primary-fixed-dim} (#a8bce8) and boxShadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle depth shift. **button-secondary** uses a transparent background with a 1px solid border in {colors.primary}, maintaining visual hierarchy while offering an alternative action path. **button-ghost** removes the border entirely, relying on opacity transitions (0.33s linear) on hover to signal interactivity—ideal for tertiary actions or d

Do's and Don'ts

**Do**

• Do use the primary color (#d5e0ff) exclusively on high-priority CTAs and active states—overuse dilutes its impact and confuses the visual hierarchy.
• Do layer glassmorphic surfaces with backdrop-filter: blur(20px) minimum; blur(40px) for elevated modals. Never use blur(0) or flat colors for glass components.
• Do maintain a 1.5x line-height multiplier on body text (body-md: 16px/24px) to ensure legibility over dark backgrounds and glassmorphic surfaces.
• Do use Grotesk Bold exclusively for headlines and display text; reserve Grotesk Regular for body and Commit Mono for labels and data.
• Do respect the 24px gutter spacing (md unit) as the baseline rhythm; never deviate without explicit design rationale.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) as the standard elevation shadow; use 0 8px 32px rgba(0, 0, 0, 0.25) only for modals and top-level surfaces.

**Don't**

• Don't use the primary color (#d5e0ff) for body text, backgrounds, or secondary UI elements—it is reserved for interactive affordances only.
• Don't flatten glassmorphic surfaces by removing the backdrop-filter or using solid colors; the blur effect is essential to the brand's visual identity.
• Don't apply border-radius values smaller than rounded-DEFAULT (0.5rem / 8px) on interactive elements; the brand requires a minimum softness to feel premium.
• Don't mix Grotesk and Commit Mono weights arbitrarily; follow the typography hierarchy strictly (Grotesk Bold for headlines, Grotesk Regular for body, Commit Mono for labels).
• Don't use shadows stronger than 0 8px 32px rgba(0, 0, 0, 0.25) on standard components; excessive shadow depth creates visual clutter and undermines the glassmorphic aesthetic.
• Don't reduce the gutter spacing below 24px or the container max-width below 1366px without explicit responsive breakpoint logic; the layout system depends on this rhythm.