Definium Therapeutics

Overview

Definium Therapeutics embodies a clinical-precision aesthetic rooted in the intersection of rigorous science and transformative hope. The brand serves researchers, clinicians, and patients seeking a new paradigm in psychiatric medicine—one where psychedelic therapeutics are presented not as fringe innovation, but as evidence-backed breakthroughs. The visual language is 'Architectural Clarity': clean, grounded typography (Saans), a warm earth-tone palette anchored by deep plum (#340022) and cream (#ebe7e1), and strategic use of a vivid burnt-orange accent (#ff531e) that signals breakthrough moments and calls to action. The emotional response is one of measured optimism—the UI conveys both the rigor of clinical trials and the expansive possibility of healing.

The brand voice is precise, authoritative yet approachable, and never sensational. Definium speaks in declarative statements grounded in data: 'We measure progress by the lives we transform.' 'Precise science. Boundless impact.' The vocabulary avoids hype; instead, it privileges clarity, specificity, and the human stakes of psychiatric innovation. Example sentence in brand voice: 'Our Phase 3 trial demonstrates a 71% remission rate in treatment-resistant depression—a threshold that redefines what recovery means.'

Colors

The color system is built on a warm, earthy foundation that evokes both clinical professionalism and human warmth. Primary (#ff531e) is the burnt-orange accent reserved exclusively for CTAs, active states, and breakthrough moments—it appears sparingly but decisively, commanding attention without aggression. Secondary (#1863dc) provides a cool counterpoint for data visualization, links, and secondary actions. Tertiary (#6741b4) and its container (#ddcade) support accent hierarchies in modals and specialized UI zones. The surface stack progresses from cream (#ebe7e1) as the default container through increasingly warm neutrals (surface-container-high: #e0dcd6, surface-container-highest: #d5d1cb) to create subtle depth without relying on darkness. On-surface text (#1b1916) is near-black for ma

Typography

The type system centers on Saans, a geometric sans-serif that conveys both precision and approachability. Display (84px, 400 weight, -0.02em tracking) is reserved for hero headlines and sets the expansive tone; Headline-lg (48px, 400 weight) anchors section introductions; Body-md (16px, 400 weight, 24px line-height) is the workhorse for body copy and ensures 1.5x line-height for readability over complex backgrounds. Label-md (14px, 500 weight, 0.01em tracking) is applied to all button text and UI labels to maintain visual hierarchy and scanability. Weights are deliberately restrained: 400 for body and display, 500 for labels and interactive elements. Never use 700 or higher weights—they conflict with the brand's measured, non-sensational voice. When displaying small labels over busy backgr

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid-to-fixed breakpoint strategy. Container padding follows the gutter token (24px) on desktop, reducing to 16px on tablet and 12px on mobile. Section separation uses lg spacing (40px) between major content blocks, creating a rhythm that feels spacious without excess. The hero section spans full-width with a semi-transparent overlay (rgba(27, 25, 22, 0.3)) to ensure text legibility over background imagery. Card-based layouts use md spacing (24px) for internal padding and maintain consistent 8px unit increments throughout. Whitespace is intentional: the brand avoids dense layouts, preferring breathing room that mirrors the 'boundless' positioning. Container max-width of 1280px ensures readability on ultra-wi

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic contrast. Level 1 (Base): flat surfaces at surface (#ebe7e1) with no shadow. Level 2 (Raised Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: surface-bright (#ffffff), used for standard cards and modals. Level 3 (Elevated/Modals): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), background: surface-bright, used for overlays and high-priority interactions. Hover states on cards transition the shadow from md to lg over 200ms (transition: box-shadow 200ms ease-out). No blur effects or glassmorphism—the aesthetic

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are applied consistently but conservatively, reinforcing the clinical-yet-approachable brand identity. Buttons use lg radius (1rem / 16px) for a modern, accessible feel without appearing playful. Cards and containers use xl radius (1.5rem / 24px) to soften edges while maintaining visual weight. Input fields use DEFAULT radius (0.5rem / 8px) for a more utilitarian appearance that signals form functionality. Icon buttons and badges use full radius (9999px) for circular affordances. The rationale: larger radii (lg, xl) on primary interacti

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background: {colors.primary} (#ff531e), text: white, padding: 12px 24px, height: 48px, rounded: lg (16px), with a 2px solid border matching the background. On hover, transition to button-primary-hover (background: #ff7a52, border: #ff7a52) over 150ms. Button-secondary mirrors the primary structure but uses transparent background with a 2px primary border and primary text; on hover, apply background: {colors.surface-container-high} (#e0dcd6) while maintaining the border. Button-dark (used in headers and dark contexts) uses background: #1b1916, text: white, and transitions to #46423a on hover. All buttons must include a focus state with outline: 2px solid {colors.primary} and outline-offset: 2px for keyboard

Do's and Don'ts

**Do**

• Do use primary orange (#ff531e) exclusively for CTAs, active states, and moments of breakthrough—never as a background fill for large surfaces.
• Do maintain 1.5x line-height (24px) on body-md (16px) text to ensure legibility, especially over complex backgrounds or imagery.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and modals; transition to the lg shadow (0 16px 40px) on hover over 200ms.
• Do use Saans at 400 weight for body and display; reserve 500 weight for labels and interactive text only.
• Do maintain 24px gutter padding on desktop layouts and reduce proportionally on mobile (16px tablet, 12px mobile).
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) to small labels displayed over busy hero imagery to ensure contrast.

**Don't**

• Don't use primary orange as a background color for large surfaces or containers—it should appear only on interactive elements and CTAs.
• Don't apply blur effects, gradients, or glassmorphism effects; the brand aesthetic is architectural and grounded, not ethereal.
• Don't use font weights above 500; heavy weights (700+) conflict with the measured, non-sensational brand voice.
• Don't apply shadows to buttons or input fields; use border or background-color shifts to signal state changes instead.
• Don't mix rounded radii inconsistently; buttons use lg (16px), cards use xl (24px), inputs use DEFAULT (8px)—maintain this hierarchy.
• Don't use secondary (#1863dc) or tertiary (#6741b4) colors for primary CTAs; reserve primary orange for all high-priority interactive moments.