The Adam Olsen Team (AOT)

Overview

The Adam Olsen Team (AOT) represents a sophisticated real estate brand rooted in Texas architectural heritage and digital-first professionalism. The design system embodies 'Architectural Confidence'—a movement that marries the solidity and timeless elegance of classical real estate imagery with clean, modern digital interfaces. The brand serves buyers, sellers, and investors across Texas with a voice that is authoritative yet approachable, data-driven yet human. The UI evokes trust through clarity: a crisp white canvas punctuated by a signature cobalt blue (#1863dc) that commands attention on CTAs and key navigation, paired with warm accent oranges (#ff6900) for secondary highlights. The emotional response is one of competence and stability—users should feel they're in capable hands.

The AOT voice is precise, results-oriented, and locally grounded. Vocabulary favors concrete outcomes ('Unmatched Strategy and Results', 'Built to Win') over aspirational platitudes. Tone is conversational but never casual; sentences are direct and benefit-focused. Example sentence in brand voice: 'Your listing deserves a winning strategy—we've sold 50+ properties in your neighborhood this year.'

Colors

The color palette is anchored by a professional blue-white foundation with strategic accent deployment. Primary (#1863dc, a confident cobalt) is reserved exclusively for interactive elements—call-to-action buttons, active links, focus states, and key navigation items. This color appears 50 times across the site, signaling its dominance as the brand's signature accent. Secondary (#0056a7, a deeper navy) provides hierarchy for tertiary actions and hover states, creating visual depth without competing for attention. Tertiary (#ff6900, a warm orange) is deployed sparingly on badges, success states, and supporting highlights to inject energy and break monotony. The surface stack is deliberately neutral: white (#ffffff) as the primary canvas, with a carefully calibrated gray scale (surface-dim #

Typography

The type system pairs Cinzel (a classical serif from Google Fonts) for headlines and display text with Poppins (a modern geometric sans-serif) for body and UI labels. This pairing communicates the brand's dual nature: heritage and forward-thinking. Cinzel at 40px (headline-lg) with 400 weight and -0.01em letter-spacing conveys authority and timelessness, ideal for hero statements like 'Texas Real Estate Experts Built to Win.' Poppins at 16px (body-md) with 400 weight and 24px line-height ensures readability in dense property listings and form fields. For small labels and badges, Poppins 12px at 500 weight with 0.02em letter-spacing provides crisp, scannable information hierarchy. Apply text-shadow 0 2px 8px rgba(0, 0, 0, 0.3) to all hero-text overlaid on photographic backgrounds to ensure

Layout

The page layout follows a 12-column grid with a max-width of 1280px, centered on viewport. The gutter (spacing between columns) is 24px, maintaining breathing room without excessive whitespace. Section separation uses the lg spacing token (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for inline element grouping. The hero section spans full-width with a photographic background (real estate imagery) overlaid with a semi-transparent dark mask (rgba(0, 0, 0, 0.35)) to ensure text legibility. Primary CTAs ('Buy', 'Contact Us') are positioned in the hero's lower-left quadrant, using the button-primary component with 40px height and 8px 24px padding. Below the hero, content flows in alternating single-column and two-column layouts, with cards (property

Elevation & Depth

Depth is conveyed through subtle shadow layering rather than color shifts or transparency. The elevation system defines three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for minor UI elements like input fields and small cards, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for prominent overlays and hero-adjacent elements. Shadows use a consistent black with low opacity (8–15%) to avoid harsh contrast. No drop-shadows exceed 24px blur radius; this keeps the aesthetic grounded and architectural rather than ethereal. Hover states on cards

Shapes

The shape philosophy is 'Architectural Sharpness'—favoring minimal, precise border-radius values that echo the clean lines of modern real estate photography and floor plans. Buttons use rounded-sm (2px), creating a subtle softness while maintaining geometric clarity. Cards and containers use rounded-md (5px), a barely-perceptible curve that prevents the harsh 90° corner while preserving the 'built' aesthetic. Input fields use rounded-DEFAULT (4px), splitting the difference for a neutral, professional appearance. Modals and overlays use rounded-lg (6px) for slightly more breathing room. Full-ra

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #1863dc background with white text, 40px height, 8px 24px padding, and 2px border-radius. On hover, background shifts to #0d47a1 (a darker cobalt) over 200ms, signaling state change without animation jank. On active/pressed, background becomes #0a3a85 for tactile feedback. Button-secondary uses a transparent background with a 2px solid primary border, allowing secondary CTAs ('Learn More', 'View Details') to coexist without visual dominance. Avoid using secondary buttons for critical actions; reserve them for exploratory or informational links.

Containers & Surfaces Cards are the primary content container. The card component uses white background (#ffffff), 5px border-radius, 24px padd

Do's and Don'ts

**Do**

• Do use primary (#1863dc) exclusively for interactive elements—buttons, links, focus states, and active navigation. Never use it for backgrounds or body text.
• Do pair Cinzel headlines with Poppins body copy; never reverse this pairing or mix serif/sans within a single paragraph.
• Do apply the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and containers; this is the system's visual language for depth.
• Do use the full 12-column grid with 24px gutters on desktop; collapse to single-column on mobile (768px breakpoint) with 16px gutters.
• Do include a semi-transparent dark overlay (rgba(0, 0, 0, 0.35)) on all hero images with photographic backgrounds to ensure text legibility.
• Do transition hover states over 200ms using ease-in-out timing; this prevents jarring, instant color shifts.

**Don't**

• Don't use secondary (#0056a7) or tertiary (#ff6900) for primary CTAs; primary (#1863dc) is the only acceptable color for 'Buy', 'Contact Us', and other critical actions.
• Don't apply border-radius larger than 6px to buttons, inputs, or cards; this softens the architectural aesthetic and reads as unprofessional.
• Don't mix Cinzel and Poppins weights excessively; stick to 400 weight for Cinzel and 400–600 for Poppins to avoid visual chaos.
• Don't use gradients, patterns, or textures in the background; the design system relies on flat, solid colors and photographic imagery for visual interest.
• Don't exceed 24px blur radius on shadows; larger shadows create a 'floating' effect that conflicts with the grounded, architectural brand positioning.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use #212121 for dark text and #f5f5f5 for light text to reduce eye strain and maintain sophistication.