The Red — 333 South Wabash

Overview

The Red is a premium commercial real estate brand anchored by Chicago's most recognizable architectural icon—333 South Wabash, a 44-floor office tower defined by its striking crimson façade since 1972. The design system embodies 'Architectural Boldness': a confident, high-contrast aesthetic that treats the brand red (#C32D30) as both background and primary accent, creating an immersive, unapologetic visual environment. The UI prioritizes clarity and presence over subtlety, using deep plum (#2D000D) text and geometric precision to convey institutional solidity and modern ambition. The emotional response is one of confident arrival—users feel they are entering a space of consequence and distinction.

The brand voice is direct, authoritative, and grounded in Chicago's industrial heritage. Vocabulary favors concrete nouns (tower, landmark, workspace, floor) over abstractions, and sentences are declarative rather than aspirational. The tone never whispers; it states. Example: 'This is THE RED. Built to be bold. A historic landmark of character and color that has defined Chicago's skyline since 1972.' The typography system reinforces this through aggressive weight contrast (700-weight headlines against 400-weight body) and tight letter-spacing (-0.02em on display), creating visual tension that mirrors the building's architectural drama.

Colors

The color palette is deliberately monochromatic with a single, dominant accent. Primary (#C32D30) is the brand's signature red—used as the page background, CTA buttons, active states, and all interactive focus indicators. This is not a supporting color; it is the environment itself. On-primary (#2D000D) is a deep plum that provides maximum contrast (WCAG AAA) against the red background for all body text, labels, and UI elements. Secondary (#2D000D) reinforces the plum as a supporting neutral for secondary text and disabled states. Tertiary (#666666) is a mid-gray used for tertiary UI elements, borders, and subtle dividers. Error (#8C4C5F) is a muted mauve reserved for validation states and warnings, maintaining visual harmony within the red ecosystem rather than introducing a jarring accen

Typography

The type system is built on a single typeface, 'mg' (a custom font family loaded via @font-face with weights 400, 500, and 700), which reinforces the brand's proprietary, architectural identity. Display (112px, 700-weight, -0.02em letter-spacing) is reserved for hero headlines and major section breaks; its aggressive negative letter-spacing (-0.02em) creates visual compression that echoes the building's monolithic presence. Headline-lg (56px, 700-weight) and headline-md (40px, 700-weight) are used for section titles and card headers, maintaining the weight hierarchy. Body-lg (18px, 400-weight, 28px line-height) and body-md (16px, 400-weight, 24px line-height) provide readable body copy with generous line-height (1.56x and 1.5x respectively) to prevent visual fatigue on the high-contrast re

Layout

The layout system uses a fluid, viewport-relative grid with a 12-column structure and a maximum container width of 1280px. Margins are calculated using CSS custom properties (--vw: 0.0579vw on desktop, scaling to 0.2326vw on mobile) to maintain proportional spacing across all screen sizes. The gutter between columns is calc(var(--vw)*14), and horizontal margins (--marge-x) are also calc(var(--vw)*14), creating a consistent breathing room around content. Vertical spacing uses semantic tokens: lg (40px) for section separation, md (24px) for component padding, and sm (12px) for internal element spacing. The page rhythm is established through padding-top and padding-bottom utility classes (.pa-t-x, .pa-b-x, etc.) that scale with the viewport, ensuring sections maintain visual proportion across

Elevation & Depth

Depth in this system is achieved through layered shadows and background color shifts rather than blur or transparency. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and hairline elements; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, dropdowns, and standard UI surfaces; lg (0 8px 24px rgba(0, 0, 0, 0.2)) for modals and the most prominent overlays. Cards and containers use the md shadow by default (box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) paired with a background-color shift to surface-container (#78161E) to create visual separation from the

Shapes

The shape philosophy is 'Architectural Precision'—minimal rounding that respects the building's geometric severity while maintaining usability. Border-radius follows a strict scale: sm (2px) for subtle softening on small UI elements like badges and form inputs; DEFAULT (4px) for buttons, cards, and standard containers; md (6px) for slightly more prominent surfaces; lg (8px) for larger cards and modals; xl (12px) for the most prominent containers and overlays; full (9999px) for fully rounded elements like circular avatars or pill-shaped badges. Buttons use DEFAULT (4px) to maintain a crisp, arc

Components

Action Elements Buttons are the primary interactive element and use the full height of 48px with padding 12px 24px. Primary buttons (button-primary) have backgroundColor {colors.primary} (#C32D30), textColor {colors.on-primary} (#2D000D), fontWeight 600, textTransform uppercase, and letterSpacing 0.01em. On hover (button-primary-hover), the backgroundColor transitions to {colors.primary-container} (#78161E) over 250ms using cubic-bezier(0.33, 1, 0.68, 1). Secondary buttons use a transparent background with a 1px solid border in {colors.primary}, and on hover transition to backgroundColor {colors.surface-container-high} (#8C4C5F). All buttons use rounded DEFAULT (4px) and apply cursor: pointer on hover.

Containers & Surfaces Cards (card) use backgroundColor {colors.surface} (#C32D3

Do's and Don'ts

**Do**

• Do use the primary red (#C32D30) as the dominant background and reserve it for high-impact CTAs, focus states, and active indicators—it is the brand's signature environment, not a supporting accent.
• Do maintain WCAG AAA contrast by pairing on-primary (#2D000D) text with the red background (contrast ratio 12.5:1); never use light text on red.
• Do apply aggressive negative letter-spacing (-0.02em) on display-size headlines to create visual compression and architectural presence; reduce to -0.015em on headline-lg and -0.01em on smaller sizes.
• Do use the custom 'mg' typeface at weights 400, 500, and 700 exclusively; never substitute with system fonts or generic sans-serif fallbacks.
• Do scale all spacing and sizing using viewport-relative units (--vw and --vr) to maintain proportional rhythm across desktop and mobile viewports.
• Do transition interactive states (hover, focus, active) over 250ms using cubic-bezier(0.33, 1, 0.68, 1) easing to create a sense of controlled momentum.

**Don't**

• Don't introduce additional brand colors beyond the primary red, plum, and supporting grays—the monochromatic palette is the brand's defining constraint and should never be diluted with secondary accent colors.
• Don't use rounded corners larger than 12px (xl) on any element; the brand's architectural identity requires geometric precision, not soft, organic shapes.
• Don't apply blur, transparency, or glassmorphism effects to UI surfaces; the design system is built on solid colors and shadows, not layered translucency.
• Don't use light text (on-secondary or lighter) on the red background; always pair red with on-primary (#2D000D) to maintain accessibility and visual clarity.
• Don't animate transitions faster than 200ms or slower than 1000ms; the brand's easing curves (cubic-bezier(0.19, 1, 0.22, 1) for reveals, cubic-bezier(0.33, 1, 0.68, 1) for interactions) are calibrated to this range.
• Don't use the 'mg' typeface at weights other than 400, 500, or 700; the font is optimized for these weights and will render poorly at intermediate weights.