Cassis

Overview

Cassis is a fintech SaaS platform designed for users who demand transparency, security, and clarity in financial management. The brand embodies "Austere Modernism"—a design philosophy that rejects unnecessary ornamentation in favor of purposeful, editorial typography and a dark canvas that conveys trust and professionalism. The interface prioritizes legibility and hierarchy through a considered serif-and-sans pairing (Geist for headlines, Inter for body), creating a visual language that feels both authoritative and approachable. The emotional response is one of calm confidence: users feel they are in control of their finances, not overwhelmed by complexity. The single accent color—a vivid mint green (#5effbf)—appears only on primary actions and key interactive moments, making every CTA feel intentional and earned. Voice: precise, reassuring, never patronizing. The brand speaks in declarative statements with quiet authority. Example: "Bank-grade, audited, boring. Exactly as it should be."—a sentence that celebrates restraint as a feature, not a limitation.

Colors

The color system is built on a near-black foundation (#030405) that conveys security and depth, paired with a warm off-white (#fefcfb) for text. The primary accent is a saturated mint green (#5effbf), used exclusively on primary CTAs ("Start free trial"), focus states, and the "Recommended" badge on the Pro tier. This high-contrast pairing ensures accessibility (WCAG AA+) while maintaining visual drama. Secondary accent colors include a vibrant orange (#ff5b14) for alerts and tertiary actions, and a bright blue (#0099ff) for links and secondary highlights. The surface stack progresses from the darkest container (#000000) through mid-tones (#1c1c1c, #262a31) to support layering and depth without introducing true blacks that feel harsh. The outline color (#5c5854) is used for borders and div

Typography

The type system uses Geist (a geometric sans-serif with humanist warmth) for all headlines and display text, establishing editorial authority and visual hierarchy. Inter (a highly legible sans-serif) handles body copy, labels, and UI text, ensuring clarity at small sizes and on screens. The display size (56px, 400 weight, -0.02em tracking) is reserved for hero statements like "Bank-grade, audited, boring," where the generous letter-spacing and light weight create breathing room and sophistication. Headline-lg (40px) is used for section titles and pricing tier names, while headline-md (28px) handles subsections. Body text is set at 16px with 24px line-height (1.5), providing comfortable reading rhythm. Labels and buttons use 14px with 500 weight and 0.01em tracking, ensuring they feel disti

Layout

The layout uses a 12-column grid system with a max-width of 1340px, allowing for flexible content arrangement across desktop, tablet, and mobile viewports. The gutter is consistently 24px, creating rhythm and breathing room between sections. Sections are separated by 64px (lg spacing) vertically, establishing clear visual breaks without excessive whitespace. The pricing cards are arranged in a 3-column grid on desktop, collapsing to 1 column on mobile, with the featured Pro tier card receiving a 2px border in primary green and slightly elevated shadow (0 8px 24px rgba(0, 0, 0, 0.2)). Container padding is 24px on all sides, ensuring content never touches viewport edges. The hero section uses a centered, single-column layout with max-width 900px, focusing user attention on the core value pro

Elevation & Depth

Depth is conveyed through layered shadows and subtle background color shifts rather than bright highlights. The base elevation (Level 1) is the surface background (#030405), which provides the foundation. Level 2 (standard cards and containers) uses a 1px solid border in outline-variant (#3f3d3a) and a subtle shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating gentle separation from the background. Level 3 (featured cards, modals, and elevated states) uses a stronger shadow: 0 8px 24px rgba(0, 0, 0, 0.2) with a 2px border in primary green (#5effbf), signaling importance and interactivity. Hover st

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used purposefully to soften the austere dark aesthetic without introducing organic or playful curves. Buttons and primary CTAs use full border-radius (9999px), creating pill-shaped containers that feel modern and clickable. Pricing cards and input fields use 0.75rem (12px) radius, providing subtle rounding that distinguishes them from the sharp edges of the background while maintaining a structured, grid-aligned appearance. Smaller UI elements like badges use 0.5rem (8px) radius, creating a visual hierarchy of roundness. The full-rad

Components

Action Elements Buttons are the primary interaction mechanism and use consistent sizing and spacing. The primary button ("Start free trial") is 44px tall with 12px vertical and 24px horizontal padding, using the full border-radius (9999px) and primary green background (#5effbf) with black text. On hover, the background shifts to #4de6a8 (a slightly darker green) with a 120ms ease-out transition, providing tactile feedback. On active/pressed state, the background becomes #3dd99a. Secondary buttons ("Sign in", "Talk to us") use a transparent background with a 1px border in outline-variant (#3f3d3a) and on-surface text (#fefcfb), with the same 44px height and full radius. On hover, the background becomes surface-container-high (#262a31). Ghost buttons (navigation links, tertiary actions)

Do's and Don'ts

**Do**

• Do use the primary green (#5effbf) exclusively on primary CTAs and focus states—every instance of this color should signal an action the user should take.
• Do maintain the 24px gutter and 64px section spacing consistently across all pages to create predictable, editorial rhythm.
• Do pair Geist headlines with Inter body copy to create clear visual hierarchy and maintain the editorial, fintech-forward aesthetic.
• Do use the full border-radius (9999px) on all buttons to make them unmistakably clickable and distinct from static content.
• Do apply the 120ms ease-out transition to all hover states (background color, shadow, border) for smooth, responsive feedback.
• Do use the outline-variant color (#3f3d3a) for all borders and dividers to maintain subtle separation without visual noise.

**Don't**

• Don't use the secondary orange (#ff5b14) or tertiary blue (#0099ff) on primary CTAs—reserve these for alerts, warnings, and secondary actions only.
• Don't apply shadows stronger than 0 8px 24px rgba(0, 0, 0, 0.2)—deeper shadows will make the interface feel heavy and undermine the austere aesthetic.
• Don't use border-radius smaller than 4px on any interactive element—sharp corners should be reserved for the background and static frames.
• Don't mix Geist and Inter weights arbitrarily—use Geist 400 for headlines and Inter 400/500 for body and labels to maintain typographic clarity.