Howard Hanna NYC

Overview

Howard Hanna NYC embodies Architectural Minimalism—a design philosophy that prioritizes clarity, restraint, and refined spatial composition. The brand serves discerning luxury real estate clients in New York City who demand both aesthetic sophistication and functional precision. The UI evokes a gallery-like serenity: generous whitespace (96px section padding on desktop, 64px on mobile), a restrained teal-green accent (#0e3a32), and serif-sans pairings that communicate both heritage and contemporary confidence. The emotional response is one of understated authority—users feel they are engaging with a premium, curated experience rather than a transactional platform.

The brand voice is measured, authoritative, and client-centric. Vocabulary favors precision over hyperbole: 'Elegran Exclusives,' 'Real Estate Without Compromise,' 'Luxury Meets Lifestyle.' Tone is never breathless or colloquial; instead, it mirrors the calm confidence of a seasoned agent. Example sentence in brand voice: 'Discover Manhattan's most refined residences—where architectural integrity meets uncompromising service.'

Colors

The color system centers on a sophisticated neutral foundation (#ffffff surface, #fbfbf9 surface-container-lowest) paired with a signature teal-green primary (#0e3a32). This primary is deployed sparingly but decisively: on primary CTAs (Buy, Sell, Rent buttons), navigation underlines, and interactive focus states. The secondary accent (#1863dc, a professional blue) supports secondary actions and data visualization, while the tertiary green (#00754e) reserves itself for status indicators and success states. Grays form a careful hierarchy: #5e5e5e for secondary text (on-surface-variant), #999999 for borders and dividers (outline), and #c6c6c6 for subtle container backgrounds (outline-variant). All interactive elements use the primary teal on hover with a 0.2s ease transition and a subtle sca

Typography

The type system pairs PP Fragment Glare (serif, 400 weight only) for all display and headline levels—creating a distinctive, refined voice that signals luxury and editorial authority. Body and label text uses tt-commons-pro (sans-serif, 400 weight), a geometric grotesque that provides clarity and contemporary neutrality. Display text (70px, -0.02em letter-spacing, 76px line-height) anchors hero sections; headline-lg (54px) and headline-md (38px) structure content hierarchy. Body-lg (19px, 28px line-height) is the default paragraph size, while body-md (16px) handles secondary content. All labels use uppercase transformation with 0.05–0.08em letter-spacing for visual distinction. On small labels over busy backgrounds (e.g., badges over property images), apply text-shadow: 0 2px 4px rgba(0, 0

Layout

The layout employs a 12-column grid with a max-width of 1440px, maintaining a fluid-to-fixed breakpoint at 768px. Desktop sections use 96px vertical padding (--global-section-padding: 96px); mobile reduces to 64px. Horizontal gutter is 40px on desktop, collapsing to 24px on mobile. The spacing scale (unit: 8px) is semantic: xs (4px) for micro-spacing, sm (12px) for compact grouping, md (24px) for standard component padding, lg (40px) for section separation, and xl (64px) for major layout breaks. Container max-width of 1440px ensures content remains readable on ultra-wide displays. White-space is treated as a design material—the hero section uses 50px horizontal padding on cards, and the contact form centers within its container with max-width: 100% to maintain visual balance. Navigation us

Elevation & Depth

Depth is conveyed through subtle shadow layering rather than color shifts. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards, hovered elements) applies the sm elevation: rgba(0, 0, 0, 0.45) 0px 15px 15px -13px, creating a soft, diffused shadow 15px below the element with -13px blur spread. Level 3 (modals, elevated buttons on hover) uses the md elevation: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px, a more pronounced shadow 25px below with -20px spread. All interactive elements transition to their elevated state over 0.2s ease. The modal overlay uses r

Shapes

The design employs Soft-Technical geometry: minimal, purposeful border-radius that respects both digital and architectural precision. Buttons and inputs use 8px radius (rounded.lg), balancing approachability with formality. Cards and containers default to 4px (rounded.DEFAULT) for subtle definition. Modals and elevated surfaces use 16px (rounded.xl) to signal prominence. Badges and pills use full (9999px) for organic, badge-like appearance. The 4px baseline is derived from the 8px spacing unit, ensuring proportional consistency. This approach avoids both sharp corners (which feel austere) and

Components

Action Elements Buttons are the primary interaction surface. Primary buttons (Buy, Sell, Rent) use 20px 46px padding, 56px height, 8px border-radius, 1px solid border in primary color (#0e3a32), and uppercase label-md typography (14px, 0.05em letter-spacing, 400 weight). On hover, the background shifts to primary-fixed-dim (#a1a1a1), the element scales 1.05, and the md shadow (rgba(0, 0, 0, 0.45) 0px 25px 20px -20px) applies over 0.2s ease. Secondary buttons mirror primary styling but use transparent background with primary text color and primary border; on hover, background becomes surface-container-high (#ececea). All buttons use text-overflow: initial and white-space: normal to accommodate multi-line labels.

Containers & Surfaces Cards use surface background (#ffffff), 4px bord

Do's and Don'ts

**Do**

• Do use PP Fragment Glare serif for all headlines and display text to maintain the luxury, editorial voice—never substitute with sans-serif for headings.
• Do apply the primary teal (#0e3a32) exclusively to interactive elements (buttons, links, focus states) and never as a background fill for large surfaces.
• Do maintain 96px vertical section padding on desktop and 64px on mobile; white-space is a core design principle and should never be compressed for content.
• Do use the md elevation shadow (rgba(0, 0, 0, 0.45) 0px 25px 20px -20px) on all hover states and modals to create consistent depth hierarchy.
• Do pair all button hover states with a 0.2s ease scale(1.05) transform to provide tactile feedback without animation excess.

**Don't**

• Don't use the primary teal (#0e3a32) for body text or large background fills; reserve it for CTAs and interactive focus states only.
• Don't apply border-radius greater than 16px except for badges (full/9999px); excessive rounding contradicts the architectural minimalism aesthetic.
• Don't mix serif and sans-serif within a single headline or body paragraph; maintain clear typographic separation between PP Fragment Glare (headlines) and tt-commons-pro (body).
• Don't use shadows with blur radius less than 15px or spread less than -20px; soft, diffused shadows reinforce the refined, gallery-like atmosphere.
• Don't compress section padding below 64px on mobile or 96px on desktop; white-space is essential to the brand's sense of luxury and clarity.