Hedra

Overview

Hedra is a Frontier AI Lab building generative intelligence for creative professionals. The design system embodies "Minimalist Precision"—a philosophy that prioritizes clarity, speed, and purposeful interaction over decorative flourish. The brand serves creators, strategists, and enterprises who demand professional-grade tools without friction. The visual language is deliberately austere: a near-white canvas (#fafafa) anchored by a vivid cobalt primary (#1863dc) that commands attention on CTAs and interactive states, paired with a serif typeface (victorSerif) for headlines that conveys sophistication and intentionality. The UI evokes a sense of calm control—every pixel earns its place. Voice: direct, confident, technically precise. Example: "Strategize, Ideate, Plan & Execute all types of creative work with general intelligence that learns you and works with your tools."

Colors

The color system operates on a high-contrast, light-dominant strategy. Primary (#1863dc) is a saturated cobalt reserved exclusively for actionable elements: primary CTAs, focus states, and brand-critical links. It appears sparingly but decisively—when a user sees this blue, they know they can act. Secondary (#fb2c36) is a vivid red used for error states, alerts, and destructive actions; it commands immediate attention without ambiguity. The surface stack ranges from near-white (#fafafa for surface) through carefully calibrated grays (#e9e9e9 for surface-container, #d0d0d0 for surface-container-highest) to near-black (#09090b for on-surface text). This creates a 9-step hierarchy that supports both subtle depth (via surface-container-low at #efefef) and bold contrast (via inverse-surface at

Typography

The type system pairs two distinct voices: victorSerif (a classical serif) for headlines and display text, and Geist (a geometric sans-serif) for body, labels, and UI copy. This pairing creates visual hierarchy through form rather than weight alone. Headlines use victorSerif at 400 weight (not bold) to convey authority through proportion and elegance—the 45.6px headline-lg at 400 weight reads as more sophisticated than a heavier sans-serif would. Body text uses Geist at 400 weight (16px, 24px line-height) for legibility at small sizes; labels use 500 weight (14px, 20px line-height) to add subtle emphasis without heaviness. Letter-spacing is minimal across all sizes (0em for body, -0.02em for display) to maintain tightness and precision. Apply text rendering: use -webkit-font-smoothing: ant

Layout

The layout operates on a 12-column grid with a max-width of 1280px, centered on the viewport. Spacing follows a strict 8px unit system: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The gutter width is 24px on desktop, reducing to 16px on tablet and 12px on mobile. White space is weaponized—large breathing room around hero content (lg spacing above and below) contrasts with compact component spacing (sm/md) to guide the eye and reduce cognitive load. Container max-widths vary by context: hero sections use the full 1280px, content cards nest at 1180px, and modals constrain to 845px for optimal readability. The grid is invisible but rigid; all elements

Elevation & Depth

Depth is conveyed through shadows and layering, never through color darkening or blur. The system defines three elevation levels: Level 1 (Base) is the flat surface at #fafafa with no shadow. Level 2 (Standard Card) uses md shadow (0 3px 8px rgba(0,0,0,0.15)) with a 1px border at #d0d0d0 to separate cards from the background—this creates a subtle lift without drama. Level 3 (Modal/Elevated) uses lg shadow (0 32px 68px rgba(0,0,0,0.3)) paired with a semi-transparent backdrop (rgba(0,0,0,0.6)) and a 4px blur to create a distinct layer that demands attention. All shadows use a 0 vertical offset a

Shapes

The shape philosophy is "Functional Geometry"—curves are minimal and purposeful, never decorative. Buttons use full (9999px border-radius) for primary CTAs to create a pill shape that feels approachable and clickable; secondary buttons use md (6px) for a subtle roundness that signals secondary importance. Cards use lg (8px) for a soft corner that softens the grid without appearing playful. Input fields use DEFAULT (4px) for a tight, professional appearance. Modals and dropdowns use md (6px) to match secondary buttons and maintain visual consistency. The rationale: full-radius buttons are insta

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use full radius (9999px), 12px vertical / 32px horizontal padding, 48px height, and primary color (#1863dc) background with white text. On hover, shift background to #0052b3 (a darker blue, not a tint) over 200ms. On active/pressed, apply box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) to create a tactile depression. Secondary buttons use md radius (6px), 8px vertical / 16px horizontal padding, 40px height, surface-container-highest background (#d0d0d0), and a 1px border at outline-variant (#9f9fa9). Ghost buttons are transparent with a 1px primary border; on hover, fill with primary-container (#d0e0ff) and shift text to on-primary-container (#0a2d7a).

Containers & Surfaces Cards are the primary content conta

Do's and Don'ts

**Do**

• Do use primary (#1863dc) exclusively for CTAs, focus states, and brand-critical interactions—never for backgrounds or body text.
• Do maintain at least 24px (md spacing) between major sections; use lg (40px) for hero-to-content transitions to create visual breathing room.
• Do apply 1px borders at surface-container-highest (#d0d0d0) to all cards and containers to define edges crisply without relying on shadows alone.
• Do use victorSerif at 400 weight for all headlines; never bold the serif typeface—let proportion and size convey hierarchy.
• Do transition all interactive states (hover, focus, active) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, professional motion.
• Do constrain modals to 845px max-width and center them on screen; apply a semi-transparent backdrop (rgba(0,0,0,0.6)) with 4px blur.

**Don't**

• Don't use secondary (#fb2c36) for anything other than errors, alerts, and destructive actions—it's a danger signal, not a brand accent.
• Don't apply shadows to text; use text-shadow only on small labels over busy backgrounds (0 1px 2px rgba(0,0,0,0.1)).
• Don't use border-radius larger than lg (8px) on non-primary elements; it dilutes the technical, precise aesthetic.
• Don't mix typefaces within a single component—use victorSerif for headlines, Geist for everything else.
• Don't apply multiple shadows to a single element; use the three-tier system (md, lg, none) consistently.
• Don't use color alone to convey state; pair color changes with shadow, border, or motion to ensure accessibility and clarity.