Faeth Therapeutics

Overview

Faeth Therapeutics embodies 'Clinical Warmth'—a design philosophy that merges scientific precision with human-centered empathy. The brand serves oncology patients, clinicians, and investors seeking clarity in complex PAM pathway science. The aesthetic is deliberately restrained: a deep forest green (#1e6649) anchors trust and growth, paired with warm neutrals (off-white #f8fafc, charcoal #020617) and a golden accent (#fcbc05) that signals hope and breakthrough. The UI evokes a sense of calm authority—never clinical coldness, never corporate sterility. The hero imagery (hands, patient moments) and typography (Geist at 96px, 300 weight) create an intimate, approachable tone despite the sophisticated science.

The brand voice is precise, patient-first, and optimistic without being breathless. Vocabulary favors clarity over jargon: 'multi-node inhibition' becomes 'break through the PAM barrier.' Sentences are direct, active, and grounded in outcome. Example: 'PIKTOR seeks to close the exits—stopping tumors before they reroute.' The personality is that of a trusted guide: knowledgeable, unhurried, and genuinely invested in the patient's journey.

Colors

The color system is built on a 'trust-and-growth' hierarchy. Primary (#1e6649, a deep forest green) is the signature accent—used exclusively on CTAs ('Join our team', 'Allow All'), focus states, and brand-critical interactive elements. This green conveys both clinical credibility and organic hope. Secondary (#fcbc05, a warm golden yellow) acts as a highlight for status badges, success states, and secondary calls-to-action; it appears sparingly to maintain impact. Tertiary (#0d299f, a deep blue) is reserved for data visualization and technical contexts.

The surface stack is deliberately minimal and light: surface (#ffffff) is the default canvas, with surface-container variants (ranging from #f1f5f9 to #cbd5e1) used for subtle depth and card backgrounds. On-surface (#020617, near-black) pro

Typography

The type system uses Geist (a geometric, modern sans-serif) across all scales, with weights ranging from 300 (display, ultra-light) to 500 (labels, semi-bold). Display (96px, 300 weight, -0.02em letter-spacing) is reserved for hero headlines and sets the brand's aspirational tone. Headline-lg (48px, 400 weight) is used for section titles and key messaging. Body-md (16px, 400 weight, 24px line-height) is the default reading size and must maintain 1.5x line-height for accessibility. Labels (14px, 500 weight) are used for buttons and badges; apply a 0.01em letter-spacing to add subtle sophistication. On small labels over busy backgrounds (e.g., badges on hero imagery), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to ensure legibility. Never use font weights below 300 or above 500 in the co

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The gutter is 24px (md spacing), creating breathing room between sections. Hero sections use full-width imagery with an overlay gradient (rgba(0, 0, 0, 0.3) to rgba(0, 0, 0, 0.6)) to ensure text legibility over photography. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections. Container padding is consistently 24px on desktop, reducing to 16px on tablet and 12px on mobile. The design favors white space over density: cards and content blocks are never packed tighter than md spacing (24px) apart. Use the spacing scale semantically: xs (4px) for micro-interactions, sm (12px) for component internals, md (24px) for section rhythm, lg (40px) for major b

Elevation & Depth

Depth is achieved through subtle shadows and border treatments rather than color shifts. Level 1 (base surfaces) uses no shadow, only a 1px border at {colors.surface-container} (#e9ecef). Level 2 (cards, modals) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift. Level 3 (floating elements, dropdowns) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a broader, more diffuse shadow. All shadows use a 6-degree angle (typical for natural light) and avoid harsh black; use rgba(0, 0, 0, 0.12–0.15) for consistency. Hover states on cards transition the shadow from Level 1 to Level

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used sparingly and consistently to signal interactivity without sacrificing clinical precision. Buttons use 9px (rounded.lg, or 0.5625rem), a subtle curve that feels modern without being playful. Cards and containers use 12px (rounded.md, or 0.75rem), slightly more generous to create visual softness. Input fields use 4px (rounded.DEFAULT, or 0.25rem), a minimal curve that maintains a structured, form-like appearance. Badges use full (9999px) for maximum softness, signaling non-critical status information. The rationale: larger radii

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#1e6649) with white text, 12px padding (horizontal), and 44px height. On hover, the background darkens to #004934 (a 20% darker shade) over 200ms. Button-secondary uses a white background with a 1px border at {colors.outline} (#94a3b8) and primary text; on hover, the background shifts to {colors.surface-container-low} (#e2e8f0) and the border darkens to primary. Button-tertiary is transparent with primary text; on hover, it gains a subtle background (surface-container-low) without a border. All buttons must have a minimum touch target of 44px height and 48px width for accessibility.

Containers & Surfaces Cards are the primary content container. Default card uses a white background (#

Do's and Don'ts

**Do**

• Do use primary (#1e6649) exclusively for CTAs and interactive focus states—never use secondary or tertiary for user actions.
• Do maintain 24px (md spacing) as the default section separator; use 40px (lg spacing) only for major content breaks.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and modals; never use flat designs or borders alone for depth.
• Do use Geist 400 weight for body text and 500 weight for labels; never use weights outside the 300–500 range.
• Do apply 9px border-radius to buttons and 12px to cards; maintain consistency across the system.
• Do test all text over imagery with a 0.3–0.6 opacity dark overlay to ensure WCAG AAA contrast (18:1 minimum).

**Don't**

• Don't use secondary (#fcbc05) or tertiary (#0d299f) for interactive elements; reserve them for status badges and data visualization only.
• Don't apply multiple shadows to a single element; use only one shadow value per depth level.
• Don't use hard corners (0px border-radius) on interactive elements; minimum 4px for inputs, 9px for buttons.
• Don't exceed 1280px container width; always center content and maintain consistent gutters (24px) on desktop.
• Don't use system fonts or fallbacks; always specify Geist, Geist Fallback, sans-serif in that order.
• Don't apply background-color changes on hover for cards; use shadow and border elevation only to avoid visual noise.