Stake

Overview

Stake is a fintech platform that democratizes investment access for Australian and international markets. The design system embodies 'Confident Minimalism'—a philosophy that strips away visual noise while maintaining architectural precision and purposeful hierarchy. Every element serves the investor's decision-making process, from the bold serif headlines (Gestura Text at 88px) that command attention, to the clean sans-serif body copy (Universal Sans at 16px) that builds trust through clarity. The brand personality is direct, uncompromising, and empowering: it speaks to self-directed investors who value speed and transparency over hand-holding. Voice example: 'Trade 12,000+ stocks commission-free. No gatekeepers, no delays—just you and the market.'

Colors

The color palette is anchored in a near-black primary (#141414) that dominates all interactive elements and text, paired with pure white (#ffffff) for maximum contrast and legibility. This monochromatic foundation is punctuated by a vibrant secondary blue (#1556b0) used for data visualization, charts, and secondary CTAs, and a bold tertiary red (#fb002e) reserved for alerts, errors, and high-stakes actions. The surface stack progresses from pure white (surface) through subtle grays (#f6f6f6 surface-dim, #e7e7e7 surface-container-highest) to create micro-hierarchies without introducing color. Primary (#141414) is applied to all primary buttons, navigation text, and body copy. Secondary blue (#1556b0) supports financial data contexts and secondary navigation. Tertiary red (#fb002e) appears o

Typography

The type system pairs a distinctive serif display font (Gestura Text) for headlines with a modern geometric sans-serif (Universal Sans) for body and UI text. This pairing creates visual contrast: the serif headlines (88px, 56px, 40px) convey authority and confidence, while the sans-serif body (16px–18px) ensures accessibility and scannability. Display text (88px, 500 weight) is reserved for hero statements and page titles; headline-lg (56px) for section breaks; headline-md (40px) for subsections. Body-md (16px, 500 weight) is the default for form labels and UI text; body-lg (18px, 400 weight) for longer-form content. Labels use 700 weight at 14px (label-md) for button text and 12px (label-sm) for badges and helper text. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (12px

Layout

The layout uses a responsive 12-column grid (8 columns on mobile, 12 on desktop) with a fixed container max-width of 1280px and 24px horizontal padding on all breakpoints. Grid gap is 16px on mobile and 24px on desktop, creating a rhythm that scales proportionally. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for component groupings, and sm spacing (12px) for internal component padding. The hero section spans full-width with a 40px gap below the headline, followed by a 64px gap before the next content section. Input fields and cards use md padding (24px) internally, with sm padding (12px) between nested elements. The layout philosophy prioritizes whitespace as a design material: generous margins around CTAs, breathing room between form fields, and c

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and subtle containers, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated surfaces like modals and popovers, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for the highest-priority overlays. Cards at rest use sm elevation; on hover, they transition to md elevation over 200ms. Input fields use no shadow at rest, but gain a 3px inset focus ring (0 0 0 3px rgba(21, 86, 176, 0.1)) when focused. Modals and drawers use lg elevation with

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used sparingly and purposefully to soften hard edges without sacrificing geometric clarity. Buttons use the full radius (768px) to create pill-shaped affordances that feel modern and clickable; this extreme rounding signals interactivity at a glance. Cards and containers use the default radius (0.5rem / 8px) for subtle softness. Input fields use the full radius (768px) to match button styling and create a cohesive input ecosystem. Modals and popovers use lg radius (1rem / 16px) for a more refined appearance. Chips and badges

Components

Action Elements Buttons are the primary driver of user intent. Primary buttons use {colors.primary} (#141414) background with {colors.on-primary} (#ffffff) text, label-md typography (14px, 700 weight), full radius (768px), and 10px vertical / 20px horizontal padding for a 40px total height. On hover, the background transitions to {colors.primary-container} (#e7e7e7) over 200ms with cubic-bezier(0.4, 0, 0.2, 1) timing. Secondary buttons use transparent background with a 1px solid border in {colors.outline} (#cccccc) and {colors.primary} text; on hover, the background fills with {colors.surface-container-high} (#e9ecef). Tertiary buttons are text-only with no border, using {colors.primary} text and md radius (12px); they activate on hover with a subtle background fill. All buttons includ

Do's and Don'ts

**Do**

• Do use Gestura Text for all headlines (40px and above) to establish visual authority and brand recognition.
• Do apply full radius (768px) consistently to all interactive elements (buttons, inputs, chips) to create a cohesive, modern interaction language.
• Do use the primary color (#141414) for all primary CTAs and body text; reserve secondary blue (#1556b0) for data visualization and tertiary red (#fb002e) for errors only.
• Do maintain 24px horizontal padding and 40px vertical spacing between major sections to create breathing room and guide visual hierarchy.
• Do use the elevation system (sm/md/lg shadows) to establish clear depth layers; never use decorative shadows or blur effects outside the defined scale.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) for a snappy, responsive feel.

**Don't**

• Don't mix serif and sans-serif fonts within a single component; use Gestura Text only for headlines and Universal Sans for all UI text.
• Don't use colors outside the defined palette (primary, secondary, tertiary, error, surface stack); custom hex values break the system's cohesion.
• Don't apply border-radius values other than the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary rounding undermines the architectural precision aesthetic.
• Don't use shadows heavier than lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) or apply multiple layered shadows; the system relies on restraint.
• Don't reduce padding below sm (12px) on interactive elements or below md (24px) on containers; insufficient whitespace creates cognitive overload.
• Don't apply opacity or transparency effects to text; use the defined color palette instead to maintain contrast and accessibility standards.