Financely

Overview

Financely is a structured finance advisory platform that demystifies complex debt structuring and lender outreach through a clean, professional interface. The design system embodies Professional Minimalism—a movement that prioritizes clarity, hierarchy, and trust through restrained color use, generous whitespace, and purposeful typography. The brand serves institutional and mid-market clients who demand precision and confidence; the UI evokes competence and accessibility by avoiding visual noise while maintaining visual interest through strategic gradient accents and a carefully calibrated color hierarchy. The emotional response is one of calm authority: users feel guided, not overwhelmed.

Financely's voice is direct, confident, and jargon-aware without being condescending. The brand speaks to financial professionals in their language—transaction structures, lender outreach, mandate acceptance—while remaining approachable to first-time users. Tone is consultative, never breathless or hyperbolic. Example sentence in brand voice: 'Submit your transaction details, and we'll review the structure against our lender network to identify the best fit for your capital needs.'

Colors

The color system is anchored by a deep indigo primary (#3d3ab1) used exclusively for primary CTAs, active states, and brand-critical interactive elements. This color commands attention without aggression—it reads as professional and trustworthy on light backgrounds. The secondary accent is a vivid blue (#1a94f3), reserved for links, secondary CTAs, and status indicators; it provides visual contrast and guides users through the information hierarchy. A tertiary gradient accent (#8352c5, the purple endpoint) is used in hero sections and elevated containers to create visual rhythm and break monotony across long-form content.

The surface stack is anchored in near-white (#ffffff, #f8fbff, #f4f4f4) to maintain clarity and reduce cognitive load. The on-surface text color is a deep navy (#091740)

Typography

The type system pairs Montserrat (geometric, confident, used for all headings and labels) with Nunito Sans (humanist, readable, used for body copy and UI labels). This pairing communicates professionalism through Montserrat's structured letterforms while maintaining warmth and approachability through Nunito's open counters and generous spacing. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements; Headline-lg (40px, 700 weight) anchors major sections; Headline-md (34px, 700 weight) is used for page titles like 'Client Onboarding Procedure'; Title-lg (23px, 700 weight) breaks up content sections; Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and hero copy; Body-md (16px, 400 weight, 24px line-height) is the default body text; Label-

Layout

The page layout uses a fixed-width container (max-width: 1080px, centered with auto margins) to maintain readability and focus. The grid system is 12-column on desktop, collapsing to single-column on mobile. Section padding is 42px top/bottom with 20px horizontal gutter, creating breathing room between major content blocks. Cards and step containers use a 2-column grid (gap: 18px) on desktop, collapsing to 1 column on tablet and mobile. The spacing scale is semantic: {spacing.xs} (4px) for micro-interactions like badge padding; {spacing.sm} (12px) for input padding and tight grouping; {spacing.md} (24px) for component padding and section margins; {spacing.lg} (40px) for major section separation; {spacing.xl} (64px) for hero-to-content transitions. Whitespace is treated as a design element—

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the 'floating' aesthetic of Material Design in favor of subtle layering. Level 1 (Base): no shadow; surfaces sit flush on the background. Level 2 (Card/Standard Container): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and standard containers to suggest a single layer of lift. Level 3 (Elevated/Hero): box-shadow: 0 8px 24px rgba(10, 23, 64, 0.045), applied to hero sections, modals, and prominent CTAs to create visual hierarchy without excessive depth. The shadow color uses the brand's deep navy (rgba(

Shapes

The shape philosophy is Soft-Technical: rounded corners are used strategically to soften the geometric precision of the interface while maintaining a professional, structured aesthetic. Buttons and primary CTAs use 8px border-radius ({rounded.lg}) to balance approachability with authority—not so rounded as to feel playful, but rounded enough to feel modern and friendly. Cards and containers use 12px border-radius ({rounded.lg}) for consistency with buttons, creating a cohesive visual language. Input fields and form elements use 4px border-radius ({rounded.DEFAULT}) to maintain visual distincti

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the brand indigo (#3d3ab1) background with white text, 12px font-size (label-sm weight), 10px 17px padding, and 8px border-radius. On hover, the background darkens to #302d91 and the button translates up 1px (transform: translateY(-1px)) to signal interactivity. The button includes a subtle shine animation (fh-shine keyframe, 5s ease-in-out infinite) that sweeps a semi-transparent white gradient across the surface at 180ms intervals, creating a premium, polished feel without being distracting. Secondary buttons (button-secondary) invert the color scheme: white background with indigo text, 999px border-radius (pill-shaped), and a 1px indigo border. Ghost buttons (button-ghost) use transpa

Do's and Don'ts

**Do**

• Do use the primary indigo (#3d3ab1) exclusively for primary CTAs, active states, and brand-critical interactive elements—never dilute it with secondary uses.
• Do maintain at least 42px vertical padding between major sections to create visual breathing room and guide the eye through long-form content.
• Do apply the 90° gradient (indigo to purple) to hero sections and elevated containers to create visual rhythm and break monotony without relying on shadows.
• Do use Montserrat (700 weight) for all headings and labels to reinforce hierarchy and authority; reserve Nunito Sans for body copy and UI labels.
• Do apply the 180ms ease transition to all interactive elements (buttons, links, cards) to ensure smooth, responsive feedback and signal interactivity.
• Do use the soft-technical border-radius scale (8px for buttons, 12px for cards, 4px for inputs, 999px for badges) to balance professionalism with approachability.

**Don't**

• Don't use the secondary blue (#1a94f3) for primary CTAs or brand-critical elements—it's reserved for links, secondary actions, and status indicators.
• Don't exceed 1080px container max-width on desktop; wider layouts reduce readability and dilute the focused, professional aesthetic.
• Don't apply shadows deeper than 0 8px 24px rgba(10, 23, 64, 0.045); excessive depth creates a 'floating' aesthetic that conflicts with the professional minimalism.
• Don't mix rounded and sharp corners on the same component (e.g., 8px radius on one button, 0px on another); consistency reinforces the soft-technical philosophy.
• Don't use system fonts or generic sans-serif fallbacks; always load Montserrat and Nunito Sans from Google Fonts to maintain brand consistency.
• Don't reduce letter-spacing below -0.04em on headings or increase it above 0.08em on labels; the current calibration is optimized for readability and visual hierarchy.