Titan

Overview

Titan is a wealth management platform designed for the next generation of tech professionals—founders, engineers, and high-earners navigating complex equity compensation. The design system embodies **Architectural Minimalism**: a clean, grid-based aesthetic that prioritizes clarity and precision over ornamentation. The visual language combines deep blacks (#111111) with warm, neutral surfaces (#f3efeb, #dbd9d7) and a strategic accent in vibrant orange (#ff9900) that signals action and opportunity. This restraint creates an atmosphere of professional confidence and trustworthiness, where every pixel serves a functional purpose.

The brand voice is direct, intelligent, and human-centered. Titan speaks to ambitious professionals who value efficiency and expertise—no jargon, no false promises, just clear guidance. The tone is conversational yet authoritative, balancing accessibility with financial sophistication. Example: "Your RSU strategy shouldn't be left to chance. We pair AI-powered analysis with a dedicated advisor who understands your equity." The UI reinforces this voice through generous whitespace, deliberate typography hierarchy, and interaction patterns that feel responsive and intentional.

Colors

The color system is built on a foundation of **high-contrast minimalism** with functional accents. Primary (#111111) is the dominant text and interactive element color, used for headlines, buttons, and critical UI surfaces—it commands attention without aggression. Surface colors (#ffffff, #f3efeb, #dbd9d7) create a subtle depth hierarchy that guides visual scanning: the brightest surface (#ffffff) is the default canvas, while container layers (#f3efeb at surface-dim, #dbd9d7 at surface-container-highest) provide visual separation for cards, modals, and grouped content. The secondary accent color (#ff9900) is reserved exclusively for high-priority CTAs ("Join Titan", "Get Started") and hover states—its warmth and saturation create urgency without overwhelming the interface. Outline colors (

Typography

The type system uses **Geist** exclusively across all scales, a contemporary sans-serif that balances geometric precision with humanist warmth—ideal for fintech and tech-forward brands. Display (60px, fontWeight 500, lineHeight 68px, letterSpacing -0.02em) anchors hero sections and major page titles; headline-lg (48px, 500, 56px) structures primary content sections; headline-md (32px, 500, 40px) introduces subsections. Body text (16px–18px, fontWeight 400, lineHeight 24–28px) maintains legibility at all sizes with generous line-height (1.5x) to reduce cognitive load. Labels (12–14px, fontWeight 500, letterSpacing 0.01–0.02em) are used for buttons, badges, and form fields—the increased letter-spacing (0.01em) adds visual separation and formality. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0

Layout

The layout system uses a **24-column fluid grid** with a maximum container width of 1440px, clamped at 991px on tablet and 767px on landscape mobile. The gutter is 24px (1.5em) between columns, creating breathing room without excessive whitespace. Section spacing follows a semantic scale: lg (40px) separates major content blocks (hero to features, features to testimonials), md (24px) divides subsections and card groups, sm (12px) provides breathing room within components. The grid is responsive via CSS custom properties (--_layout---grid--col-X) that scale fluidly; on mobile, the unit size reduces to 10px to maintain proportion on smaller screens. Container max-widths vary by section (1300px, 1180px, 1080px observed) to create visual rhythm—narrower containers for text-heavy sections, wide

Elevation & Depth

Depth is conveyed through **subtle layering and precise shadows** rather than dramatic drop-shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow; Level 2 (Standard Card): 1px solid border at #d8d3cc with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)—barely perceptible, used for cards and input fields. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with background shift to surface-container-high (#dbd9d7)—applied on card hover and modal backgrounds. Level 4 (Maximum Depth): box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) reserved for modals and overlay surfaces. The

Shapes

The shape philosophy is **Geometric Precision with Functional Softness**—corners are rounded just enough to feel contemporary and approachable, but sharp enough to maintain architectural clarity. Buttons use full radius (9999px / border-radius: 142.222px observed on primary CTA) to signal action and create a distinct visual target; secondary buttons use DEFAULT (8px) for subtlety. Cards and containers use lg (16px) or xl (24px) to create visual separation without appearing playful. Input fields use DEFAULT (8px) for consistency with form language. The rationale: full-radius buttons stand out a

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses {colors.primary} (#111111) background with {colors.on-primary} (#ffffff) text, full radius (9999px), 12px vertical / 24px horizontal padding, and 48px height for touch targets. On hover, shift to #2a2a2a with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and transition: background-color 0.3s cubic-bezier(0.65, 1, 0.9, 1). On active, darken to #000000 and reduce shadow to 0 1px 2px rgba(0, 0, 0, 0.06). **button-accent** uses {colors.secondary} (#ff9900) for high-priority CTAs; on hover, shift to #e68a00 with a warm shadow box-shadow: 0 3px 8px rgba(255, 153, 0, 0.2). **button-secondary** is transparent with a 1px border at {colors.outline-variant} (#d8d3cc); on hover, fill with {colors.surface-container-low

Do's and Don'ts

**Do**

• Do use {colors.primary} (#111111) for all body text, headlines, and primary interactive elements—it's the brand's anchor color and ensures accessibility (WCAG AA ≥ 4.5:1 contrast on white).
• Do reserve {colors.secondary} (#ff9900) exclusively for high-priority CTAs and hover states; overuse dilutes its signal strength and confuses the visual hierarchy.
• Do apply full radius (9999px) to primary buttons only; use DEFAULT (8px) or lg (16px) for secondary buttons and cards to maintain visual distinction.
• Do use the 24-column grid with 24px gutters; it scales responsively and maintains rhythm across breakpoints via CSS clamp() and fluid typography.
• Do apply transitions with cubic-bezier(0.65, 1, 0.9, 1) (outgoing) or cubic-bezier(0.87, 0, 0.13, 1) (incoming) over 0.3s for smooth, natural motion that feels premium.

**Don't**

• Don't use {colors.secondary} (#ff9900) for body text or secondary UI elements; it's reserved for high-priority actions and will create visual noise.
• Don't mix border-radius values within a single component family (e.g., don't use both 8px and 16px on different button states); maintain consistency within families.
• Don't apply shadows deeper than {elevation.lg} (0 8px 32px rgba(0, 0, 0, 0.15)) on standard cards; reserve maximum depth for modals and overlays only.
• Don't use system fonts or fallback stacks; always load Geist from Google Fonts and specify font-feature-settings: 'ss02' on, 'ss03' on for headings to activate stylistic alternates.
• Don't exceed 1440px container width; narrower sections (1080px, 1180px) create visual rhythm and prevent text lines from becoming too long (>75 characters).