Heron AI

Overview

Heron AI embodies **Architectural Minimalism with Technical Precision**—a design language that mirrors the disciplined, blueprint-driven world of professional architecture. The brand serves AEC professionals (architects, engineers, modelers) who demand clarity over decoration, efficiency over ornament. The UI evokes the aesthetic of technical drawings: clean linework, generous negative space, and a restrained color palette anchored by a single vivid accent (burnt orange #fa3600) that signals actionable intelligence. The emotional response is one of calm competence—the interface reassures users that complex tasks (code review, model analysis, automated fixes) are handled with precision and transparency.

The voice is direct, technical, and never breathless. Heron speaks in the language of building professionals: concrete, outcome-focused, free of marketing hyperbole. Example: "Heron flags non-compliant wall thicknesses at 3:14 AM—you approve the fix, it executes in 2 seconds, your model is corrected." The brand personality is that of a trusted colleague: knowledgeable, reliable, and respectful of the user's time and expertise.

Colors

The color system is built on a **high-contrast, monochromatic foundation with a single accent**. The primary palette consists of warm grays (#282828 on-surface, #72726f secondary, #b3b3af outline) layered over a near-white background (#f5f5ed surface), creating the visual weight of printed technical documentation. This neutral stack ensures legibility and focus—no competing hues distract from the content.

**Primary (#fa3600)** is the brand's signature burnt orange, deployed exclusively on CTAs, active states, error highlights, and brand moments. It is never used for passive elements. On hover, primary buttons maintain the same background but gain elevation via box-shadow: 0 8px 24px rgba(250, 54, 0, 0.24), signaling interactivity without color shift. **Secondary (#72726f)** and **Tertiary

Typography

The type system uses **BT Grotesk** (a geometric sans-serif with technical precision) across all scales, reinforcing the architectural aesthetic. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks; Headline-lg (40px, 700 weight) anchors subsections; Body-md (16px, 500 weight) is the workhorse for UI copy and descriptions. The weight progression (500 for body, 600 for titles, 700 for headlines) creates clear hierarchy without relying on color shifts. Letter-spacing is negative on large sizes (-0.04em on display, -0.02em on headline-lg) to tighten the visual mass and evoke technical precision; body text uses 0em tracking for maximum legibility. On small labels over busy backgrounds (e.g., badges on cards), apply text-shadow: 0 1px 2px rgba(0,

Layout

The layout follows a **12-column grid with a 1280px max-width container**, centered on desktop and full-width on mobile (with 24px gutter on each side). The page rhythm is governed by the spacing scale: section breaks use lg spacing (40px), card stacks use md spacing (24px), and internal component padding uses sm spacing (12px). The design favors generous negative space—no element is crowded—to echo the clarity of technical drawings. Container max-widths are set to 991px on tablet and 940px on smaller screens to maintain readability. The grid is invisible but strictly observed: all text blocks, cards, and images align to column boundaries. Whitespace is semantic: lg spacing (40px) separates major sections (hero, features, FAQ), md spacing (24px) separates cards within a section, and sm spa

Elevation & Depth

Depth is conveyed through **subtle shadows and border treatments**, never through color darkening or layering. The elevation system uses three levels: **Level 1 (Base)** has no shadow, only a 1px solid border at #b3b3af (outline color). **Level 2 (Standard Card)** applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift from the background. **Level 3 (Hover/Elevated)** applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), signaling interactivity. All shadows use a consistent blur radius (8–24px) and spread (0px) to maintain visual coherence. Buttons do not have shadows at rest; on

Shapes

The shape philosophy is **Architectural Sharpness with Minimal Softness**—corners are kept tight to reinforce the technical, blueprint-like aesthetic. Border-radius follows a strict scale: **sm (0.25rem / 4px)** is used for small UI elements (badges, small buttons); **DEFAULT (0.5rem / 8px)** is the standard for inputs, buttons, and cards; **md (0.75rem / 12px)** is used for larger cards and modals; **lg (1rem / 16px)** is reserved for hero sections and full-width containers; **xl (1.5rem / 24px)** is used only for the largest containers or special emphasis; **full (9999px)** is used for circu

Components

Action Elements **Buttons** come in three variants: Primary (solid #fa3600 background, white text, 48px height, 12px 24px padding, 0.5rem radius), Secondary (transparent background, #282828 text, 1px #b3b3af border, 48px height), and Ghost (transparent, #fa3600 text, no border). On hover, Primary buttons maintain the background color but gain elevation (box-shadow: 0 8px 24px rgba(250, 54, 0, 0.24)) and a subtle upward translate (transform: translateY(-2px)). Secondary buttons on hover shift to surface-container-high background with a darker border. All buttons use a 0.5s cubic-bezier(0.23, 1, 0.32, 1) transition for smooth state changes. Ghost buttons on hover gain a light orange background (rgba(250, 54, 0, 0.08)) without changing text color.

Containers & Surfaces **Cards** are

Do's and Don'ts

**Do**

• Do use the primary accent (#fa3600) exclusively on CTAs, active states, and brand moments—never on passive UI elements or backgrounds.
• Do maintain the 1px #b3b3af border on all cards, inputs, and containers to preserve the technical, blueprint-like aesthetic.
• Do apply elevation via shadows (0 3px 8px rgba(0, 0, 0, 0.15) for standard, 0 8px 24px rgba(0, 0, 0, 0.12) for hover) rather than color shifts or opacity changes.
• Do use BT Grotesk at 500–700 weight for all text; never mix typefaces or use system fonts.
• Do respect the spacing scale (sm 12px, md 24px, lg 40px) for consistent rhythm and breathing room across sections.

**Don't**

• Don't use primary (#fa3600) for backgrounds, disabled states, or secondary UI—reserve it for interactive moments only.
• Don't add rounded corners greater than 1rem unless the element is explicitly circular (avatars, icon buttons).
• Don't apply shadows to buttons at rest; shadows appear only on hover to signal interactivity.
• Don't mix the neutral palette with additional accent colors (no purples, blues, or greens)—the system is intentionally monochromatic with a single accent.
• Don't use opacity or color shifts to indicate hover states; instead, use shadow elevation, border color changes, or subtle transforms (translateY, scale).