Units

Overview

Units is a vibrant student accommodation platform that celebrates bold, architectural color-blocking and youthful energy. The design system embodies 'Chromatic Modernism'—a movement that prioritizes saturated primary colors (electric blue #0066ff, golden yellow #ffb200, vivid green #1be349) as structural design elements rather than accents, creating a playful yet professional environment that resonates with Gen-Z sensibilities. The brand serves students seeking community-driven housing with personality, transforming the typically sterile accommodation search into an engaging, visually distinctive experience.

The voice is confident, approachable, and celebratory—never corporate or distant. Units speaks in active, energetic language that emphasizes inclusivity and belonging. Example: 'Your people are here. Your space is ready. Your community starts now.' The typography system uses Aeonik Pro as the primary typeface, a geometric sans-serif that conveys modernity and clarity, paired with generous letter-spacing (0.02–0.03em) to enhance readability and reinforce the brand's spacious, welcoming aesthetic.

Colors

The Units color system is built on a foundation of warm, neutral surfaces (background #f4e9e1, a soft beige-cream) that provide visual rest, while three saturated primary accent colors drive all interactive and categorical elements. Primary (#0066ff, electric blue) is reserved for the most critical CTAs ('Book your Unit') and primary navigation states, applied at 100% opacity on white surfaces and with 20% opacity overlays for depth. Secondary (#ffb200, golden amber) energizes input fields, category tags, and supporting CTAs, creating visual rhythm and guiding the eye through content hierarchy. Tertiary (#1be349, vivid green) highlights community-focused elements, amenities, and positive actions like 'Contact' or 'Join.' The error state (#ff3d57, coral-red) maintains visual consistency wit

Typography

The typography system prioritizes clarity and personality through a geometric, modern typeface (Aeonik Pro) applied across all scales from display (60px, 700 weight) down to label-sm (12px, 500 weight). Display and headline-lg sizes use aggressive negative letter-spacing (-0.04em, -0.02em) to create visual impact and reinforce the brand's bold aesthetic, while body and label scales employ positive letter-spacing (0.01–0.03em) to enhance legibility on warm backgrounds and maintain the spacious, breathing quality of the design. The headline-md (28px, 600 weight) serves as the primary section heading, used for category titles and modal headers; body-lg (18px, 400 weight) is reserved for hero taglines and prominent descriptive text. All interactive labels (buttons, inputs, nav items) use label

Layout

Units employs a 12-column grid system with a maximum container width of 1280px, enabling flexible layouts that scale from mobile (single column) to desktop (multi-column card grids). The page rhythm is structured around a generous gutter spacing of 24px between sections, with lg spacing (40px) used for major section breaks (hero to content, content to footer). The warm beige background (#f4e9e1) provides visual continuity, while white or transparent card containers (with subtle border-radius 16px) float above this surface, creating a layered, modular composition. Horizontal padding follows the gutter token (24px) on tablet and desktop, reducing to 16px on mobile to maximize content width. The hero section spans full-width with a 16:9 aspect ratio image background, overlaid with a semi-tran

Elevation & Depth

Depth in Units is achieved through a restrained shadow system and subtle background color shifts rather than aggressive drop shadows. Level 1 (Base): the warm beige surface (#f4e9e1) serves as the foundation, with no shadow. Level 2 (Standard Cards): category cards and content containers use a soft, spread shadow (0 4px 12px rgba(0, 0, 0, 0.08)) with a 1px border in outline-variant (#c9cdd2) to define edges without visual heaviness. Level 3 (Elevated/Hover): on hover, cards elevate to 0 8px 22px rgba(0, 0, 0, 0.18) and shift background to surface-container-high (#ede4db), creating a subtle lif

Shapes

The Units shape philosophy is 'Architectural Clarity with Approachability'—combining sharp, geometric forms (90° corners on category cards, 10px radius on secondary buttons) with fully rounded elements (9999px border-radius on primary CTAs and input fields) to balance professional structure with youthful warmth. Primary CTAs ('Book your Unit') use full rounding (border-radius: 33.3312px, computed from 48px height) to create a pill-shaped button that feels inviting and clickable, signaling the brand's friendly, action-oriented tone. Secondary and tertiary buttons use lg radius (16px, 1rem) for

Components

Action Elements Primary buttons ('Book your Unit') are the hero interactive element: 48px height, full rounding (border-radius: 9999px), padding 15px 30px, background #0066ff, text color white, typography label-md (14px, 600 weight). On hover, background shifts to #0052cc with shadow 0 6px 16px rgba(0, 102, 255, 0.3) and a 200ms ease-out transition. On active/press, background darkens to #003d99 with shadow reduced to 0 2px 8px rgba(0, 102, 255, 0.15), providing tactile feedback. Secondary buttons (category CTAs like 'Contact') use background #ffb200, text #000000, lg radius (16px), padding 20px, with hover state shifting to #cc8800 and shadow 0 4px 12px rgba(0, 0, 0, 0.1). Tertiary buttons ('Community', 'Student Homes') use background #1be349, text #000000, lg radius, padding 16px 24p

Do's and Don'ts

**Do**

• Do use the three primary accent colors (blue #0066ff, yellow #ffb200, green #1be349) as structural design elements, not decorative flourishes—they define content hierarchy and user flow.
• Do apply full rounding (border-radius: 9999px) exclusively to primary CTAs and input fields to signal the highest-priority interactive elements.
• Do maintain the warm beige background (#f4e9e1) as the consistent foundation; avoid introducing additional neutral colors that dilute chromatic clarity.
• Do use Aeonik Pro typeface at all scales with positive letter-spacing (0.01–0.03em) on body and label sizes to preserve the spacious, breathing aesthetic.
• Do apply color-specific shadows (e.g., blue shadow on blue buttons) to reinforce visual cohesion and signal interactivity through depth.
• Do use md radius (12px) for category cards and structural containers to balance architectural clarity with approachability.

**Don't**

• Don't introduce new accent colors outside the primary palette (blue, yellow, green); the system's strength lies in chromatic restraint and intentional saturation.
• Don't apply rounding below lg radius (16px) to primary buttons or inputs; full rounding is reserved for the most critical interactive elements.
• Don't use drop shadows larger than 0 8px 22px rgba(0, 0, 0, 0.18); the system prioritizes subtle depth over dramatic elevation.
• Don't mix Aeonik Pro with system fonts or serif typefaces; maintain typographic consistency across all scales and contexts.
• Don't reduce letter-spacing below 0.01em on body text; the brand's spacious aesthetic depends on generous tracking.
• Don't apply text-shadow to dark text on light backgrounds; reserve text-shadow for white text on photographic or dark overlays only.