Auria

Overview

Auria embodies a philosophy of **Editorial Minimalism with Warm Pragmatism**—a design language that prioritizes clarity and strategic communication over decorative flourish. The brand serves business advisory firms, consultancies, and growth-focused organizations that value precision, trust, and measured sophistication. The aesthetic evokes a high-end editorial publication: generous white space, deliberate typography hierarchy, and a restrained earthy palette (warm beige #f2efe9, deep brown #644835, and taupe accents) that conveys both approachability and authority. The UI communicates calm confidence—users feel guided, not overwhelmed.

Auria's voice is direct, measured, and intellectually honest. The brand avoids hyperbole, jargon, and breathless enthusiasm. Instead, it speaks in declarative sentences with active verbs: "Structure behind sustainable profits." "Meet the new services ready for early business." The tone is consultative—as if a trusted advisor is explaining a complex strategy in plain language. Typography is generous (72px headlines, 18px body text), breathing room is abundant (24px gutters, 40px section spacing), and every visual element serves a communicative purpose.

Colors

The color system is built on a foundation of **warm neutrality**—a deliberate departure from cold grays or pure white. Primary surface #f2efe9 (a soft beige with warm undertones) creates a sophisticated, editorial backdrop that feels less sterile than traditional white (#ffffff) while remaining highly legible. The primary accent color is #644835, a warm brown that appears on CTAs, active states, and key interactive elements. This earthy tone conveys stability and expertise without the aggression of pure black or the coldness of blue.

Secondary and tertiary colors (both #66625c and #4d4a45, respectively) form a tonal family of warm grays and deep taupes used for supporting text, borders, and secondary UI elements. The outline color #66625c (a medium taupe) is used for dividers and subtle b

Typography

The type system is anchored in **Geist** (with Arial and sans-serif fallbacks), a modern geometric sans-serif that balances precision with warmth. The hierarchy is deliberately compressed: display text at 72px (fontWeight 500, lineHeight 80px, letterSpacing -0.02em) commands attention without aggression, while body text at 16px (fontWeight 400, lineHeight 24px) remains highly readable at any viewing distance. Headlines use fontWeight 500 (not 700) to avoid heaviness; the generous letterSpacing (-0.015em to -0.02em on larger sizes) creates visual breathing room and reinforces the editorial aesthetic. Labels and small text (12–14px) use fontWeight 500 with positive letterSpacing (0.01–0.02em) to maintain clarity at reduced sizes. Apply text-rendering: optimizeLegibility and -webkit-font-smoo

Layout

Auria uses a **12-column fluid grid** with a max-width of 1280px, centered with equal margins. The gutter is 24px (spacing.md), creating a 48px column gap. Container padding is 24px on desktop, reducing to 16px on tablet (991px breakpoint) and 12px on mobile. Section spacing follows the lg token (40px) for major rhythm breaks, md (24px) for subsection separation, and sm (12px) for component-level spacing. The design favors asymmetry: hero sections often occupy 60/40 or 65/35 splits (text left, imagery right), and card grids use 3 columns on desktop, 2 on tablet, 1 on mobile. White space is treated as a design material, not a void—margins and padding are never collapsed. The container-max-width of 1280px ensures text lines remain readable (typically 60–75 characters per line at body-md size

Elevation & Depth

Depth in Auria is achieved through **subtle shadow and surface stratification**, not dramatic layering. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for primary cards, dropdowns, and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for hero overlays and floating CTAs. Shadows are warm-tinted (using rgba(0, 0, 0, ...) rather than pure black) to harmonize with the beige palette. Cards and containers use no border by default; instead, rely on shadow and background color differentiation.

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are present but restrained, reinforcing the brand's balance between approachability and precision. Use rounded.DEFAULT (0.5rem / 8px) for buttons, inputs, and small interactive elements—this is the workhorse radius. Use rounded.md (0.75rem / 12px) for cards and list items, creating a subtle softness without appearing playful. Use rounded.lg (1rem / 16px) for larger containers, modals, and hero sections. Reserve rounded.xl (1.5rem / 24px) for special emphasis (e.g., featured testimonial cards, large CTA sections). Never use rounded.ful

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor {colors.primary} (#644835), textColor white, typography label-md (14px, fontWeight 500), padding 12px 24px, height 44px, and rounded DEFAULT (8px). On hover, transition the backgroundColor to #5a3f2d (a 15% darkening) over 200ms ease-out, maintaining the same text color. The button-secondary uses a semi-transparent dark overlay (rgba(0, 0, 0, 0.34)) with on-surface text, height 40px, and the same rounded DEFAULT. On hover, increase opacity to rgba(0, 0, 0, 0.48). For ghost buttons (secondary CTAs), use transparent background with a 1px border in {colors.outline} (#66625c), same padding and height as primary, and on hover apply backgroundColor {colors.surface-container-high}

Do's and Don'ts

**Do**

• Do use the warm beige surface (#f2efe9) as your base and layer surface-container shades for depth—never revert to pure white or cool grays.
• Do apply the primary brown (#644835) exclusively to CTAs, active states, and key interactive elements; it is the brand's signature accent and must remain distinctive.
• Do maintain generous white space: minimum 24px gutters, 40px section breaks, and 18px+ body text line-height to preserve the editorial aesthetic.
• Do use fontWeight 500 for headlines and 400 for body text; avoid 700 weight except in rare emphasis cases, as it conflicts with the refined tone.
• Do transition all interactive states (hover, focus, active) over 200ms ease-out to create smooth, predictable feedback without jarring snaps.
• Do use rounded DEFAULT (8px) for buttons and inputs, rounded md (12px) for cards, and reserve rounded lg (16px) for larger containers—this hierarchy reinforces the soft-technical aesthetic.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary surfaces; the warm beige palette is non-negotiable and defines the brand identity.
• Don't apply the primary brown (#644835) to body text, backgrounds, or non-interactive elements—it must remain reserved for CTAs and active states to maintain visual hierarchy.
• Don't collapse white space or reduce padding below the spacing.sm (12px) token; the generous breathing room is essential to the editorial aesthetic.
• Don't use fontWeight 700 for body text or headlines; the brand voice is measured and refined, not bold or aggressive.
• Don't apply rounded.full (9999px) to buttons or cards; use it only for badges and small status indicators to signal their secondary role.
• Don't mix typefaces; Geist is the sole brand typeface—Arial and sans-serif are fallbacks only, never intentional design choices.
• Don't use harsh shadows (box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3)) or high-contrast overlays; keep shadows soft (md: 0 3px 8px rgba(0, 0, 0, 0.15)) and overlays warm-tinted (rgba(0, 0, 0, 0.34)).