HCP Urbanism

Overview

HCP Urbanism is a professional planning consultancy platform that transforms complex municipal growth challenges into structured, implementable frameworks. The brand serves municipal corporations, urban planners, and development stakeholders seeking data-driven, context-sensitive town planning solutions. The aesthetic is 'Technical Clarity'—a disciplined, information-dense design language that mirrors the precision of urban planning itself. The UI combines cartographic visualization (satellite imagery, color-coded planning zones, water body overlays) with clean, hierarchical information architecture. Users experience a sense of control and confidence: the interface feels authoritative yet approachable, never overwhelming despite handling large datasets. The brand voice is professional, methodical, and grounded in evidence. Vocabulary emphasizes integration, frameworks, corridors, and sustainable coordination. Example sentence: 'The northern planning area regularizes 850 hectares of fragmented growth through an integrated urban structure.'

Colors

The color system anchors on a deep indigo primary (#3f51b5), chosen for its association with institutional trust and technical precision—the color of planning documents and municipal authority. This primary is deployed on CTAs, form focus states, and key navigation elements. Secondary accent #ff4081 (vibrant magenta) highlights critical alerts, selected states, and emphasis markers—drawing attention to actionable planning data without overwhelming the interface. Tertiary #f44336 (red) signals errors, constraints, and areas requiring intervention. The surface stack uses a near-white foundation (#fafafa) with carefully calibrated grays (#ebebeb, #e5e7eb, #d1d5db) to create visual separation between content layers without introducing color noise. On-surface text is set to #1a1a1a (near-black)

Typography

The type system uses SF Pro Display (semibold, bold, light weights) for headlines and SF Pro Text (regular, semibold) for body and UI labels, creating a two-family hierarchy that balances authority with readability. Display (60px, 700 weight, -0.04em tracking) commands attention on hero sections and major headings; Headline-lg (40px, 600 weight) anchors page sections; Headline-md (28px, 600 weight) introduces subsections; Title-lg (20px, 600 weight) labels cards and data blocks. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) carry descriptive text and planning narratives, with 0.03125em tracking to aid readability in dense planning documents. Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) are reserved for form labels, badges, and

Layout

The page layout follows a 12-column grid with a 1280px container max-width, providing ample breathing room for cartographic content and tabular data. The gutter is set to 24px, creating consistent horizontal rhythm. Vertical spacing uses the semantic scale: lg (40px) separates major sections (hero, planning zones, methodology); md (24px) divides subsections and card groups; sm (12px) creates breathing room within cards and form groups. The hero section spans full-width with a prominent satellite map visualization (the planning schemes overlaid in yellow with blue water bodies), establishing the cartographic identity immediately. Content sections below use a two-column or three-column layout depending on data density, with the left column reserved for navigation or filtering controls and th

Elevation & Depth

Visual hierarchy is achieved through a restrained shadow system and strategic use of surface containers rather than dramatic depth effects. Level 1 (Base): The background surface (#fafafa) with no shadow, establishing the neutral canvas. Level 2 (Standard Cards & Inputs): 0 4px 12px rgba(0, 0, 0, 0.08)—a soft, diffuse shadow that lifts content 4dp above the surface, used for cards, form fields, and list items. Level 3 (Elevated Modals & Popovers): 0 3px 8px rgba(0, 0, 0, 0.15)—a slightly sharper shadow for modals, dropdowns, and floating action elements. Buttons use 0 3px 8px rgba(0, 0, 0, 0.1

Shapes

The shape philosophy is 'Structured Precision'—rounded corners are used sparingly and consistently to signal interactive or contained elements, never to soften the interface into informality. Buttons and primary CTAs use lg (1rem / 16px) border-radius, creating a subtle softness that distinguishes them from rigid data tables. Cards and input fields use DEFAULT (0.5rem / 8px) or md (0.75rem / 12px) radius, maintaining a clean, technical appearance. Chips and badges use full (9999px) radius to emphasize their discrete, selectable nature. The satellite map and planning zone overlays have no borde

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #3f51b5 background with white text, 48px height, 12px 24px padding, and lg (16px) border-radius. On hover, the background shifts to #3949ab with an elevated shadow (0 4px 12px rgba(0, 0, 0, 0.20)) to signal state change. On active/pressed, the background darkens to #1a237e with a reduced shadow (0 2px 4px rgba(0, 0, 0, 0.12)). Button-secondary uses a transparent background with a 1px outline in {colors.outline}, maintaining the same height and padding. Hover state applies {colors.surface-container-high} background at 100% opacity. All buttons use label-md typography (14px, 600 weight) with 0.0125em tracking for crisp, scannable text.

Containers & Surfaces Cards are the primary content

Do's and Don'ts

**Do**

• Do use the indigo primary (#3f51b5) exclusively for CTAs, form focus states, and key navigation—never dilute it with secondary uses.
• Do maintain 24px gutters and 40px section spacing to create breathing room around dense planning data and cartographic content.
• Do apply label-md (14px, 600 weight) typography to all form labels and button text for consistent, scannable UI chrome.
• Do use the full shadow stack (sm/md/lg) to create clear elevation layers—never mix shadow values within a single component state.
• Do preserve the cartographic hero map at full width with no border-radius or shadow, allowing satellite imagery and planning overlays to dominate the visual hierarchy.

**Don't**

• Don't use the secondary magenta (#ff4081) or tertiary red (#f44336) as primary accent colors—reserve them for alerts, errors, and emphasis only.
• Don't apply rounded corners (border-radius > 0) to data tables, planning zone overlays, or cartographic elements—keep them sharp and rectilinear.
• Don't use colored shadows or drop-shadow filters—all shadows must use neutral black at 8–15% opacity (rgba(0, 0, 0, 0.08–0.15)).
• Don't mix SF Pro Display and SF Pro Text within a single line of body text—use Display/Title weights for headings only, Text weights for body and labels.
• Don't reduce padding or line-height below the specified minimums (sm 12px, body line-height 1.5x) when displaying planning narratives or technical documentation—readability over density.