Financely

Overview

Financely is a structured finance advisory platform that demystifies complex debt structuring, collateral pricing, and transaction support through transparent, scope-based pricing. The brand personality embodies 'Professional Clarity'—a design aesthetic that combines institutional trust (deep navy #1a1f5a, crisp whites) with modern accessibility (vibrant primary blue #1a94f3 as the signature accent). The UI prioritizes legibility and confidence: users should feel that complex financial concepts are presented with precision and care, never obscured. The emotional response is one of competence and partnership—clients trust Financely to navigate intricate mandates with clarity and expertise. Voice: authoritative yet approachable, precise without jargon. Example: 'Your advisory fee depends on transaction scope and complexity—we'll outline the exact range before engagement.'

Colors

The color system is anchored in institutional trust with a modern accent. Primary (#1a94f3) is the signature call-to-action blue, used on all interactive elements (buttons, links, focus states) and the eyebrow labels that guide users through pricing tiers. It appears in the hero CTA 'Submit Your Transaction' and secondary CTAs like 'Book a Consultation'. On-primary is pure white (#ffffff) for maximum contrast on the primary blue. Primary-container (#e3f2fd) provides a soft background for highlighted sections, while on-primary-container (#0d4a99) ensures readable text. Secondary (#17965b, a professional green) supports secondary actions and status indicators, with on-secondary (#ffffff) for contrast. Tertiary (#8352c5, a muted purple) is reserved for accent highlights and tertiary navigatio

Typography

The type system pairs Montserrat (geometric, confident, 700 weight for headlines) with Nunito Sans (warm, readable, 400 weight for body). Display (56px, 700, -0.03em letter-spacing) anchors hero sections and major page titles. Headline-lg (44px, 700, -0.03em) is used for primary section headings like 'Advisory Fees Based on Transaction Scope'. Headline-md (36px, 700, -0.02em) supports subsection titles. Title-lg (20px, 700) is applied to card titles and emphasis text. Body-lg (18px, 400, Nunito Sans) is the primary reading size for introductory paragraphs and descriptions. Body-md (16px, 400) is the default body text for longer content blocks. Label-md (13px, 700, Montserrat, 0.05em letter-spacing) is used on buttons and interactive labels. Label-sm (12px, 700, Montserrat, 0.08em letter-sp

Layout

The layout follows a 12-column grid with a max-width of 1240px, centered with auto margins. The pricing page uses a fixed container (860px max-width) to focus attention on the pricing card, which sits within a 64px (xl spacing) vertical rhythm. Horizontal gutter is 18px on desktop, reducing to 16px on tablet and mobile. Section separation uses lg spacing (40px) between major blocks. The pricing card itself uses 42px padding internally, creating a spacious, breathing interior. The grid is fluid on mobile (single column, 16px gutter) and tablet (2 columns, 18px gutter), then expands to full 12-column on desktop. Container max-width prevents content from stretching beyond 1240px on ultra-wide screens. White-space is generous: the pricing range box uses 22px padding and sits 25px below the lea

Elevation & Depth

Depth is achieved through a subtle shadow and border system rather than layered backgrounds. Level 1 (Base): flat white surface (#ffffff) with no shadow, representing the page canvas. Level 2 (Cards & Containers): 2px solid border in #d3e8f8 (outline color) with box-shadow: 0 10px 30px rgba(18, 45, 77, 0.07)—a soft, spread shadow that lifts the card slightly. Level 3 (Hover & Elevated States): the same 2px border with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), creating a more pronounced lift. Interactive elements (buttons) use no shadow at rest but apply transform: translateY(-1px) on hover

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften institutional rigidity without sacrificing clarity. Buttons use rounded.lg (1rem / 16px border-radius) to create approachable, clickable targets. Cards and containers use rounded.xl (1.5rem / 24px) for a more generous, modern feel. Input fields use rounded.md (0.75rem / 12px) for a balanced, functional appearance. The pricing range box uses rounded.md (12px) to align with input styling. Badges and small accent elements use rounded.full (9999px) for pill-shaped emphasis. The rationale: larger radius (

Components

Action Elements Buttons are the primary interactive component. Button-primary uses background: #1a94f3, color: #ffffff, padding: 13px 21px, height: 50px, border-radius: 8px (rounded.lg), and font-family: Montserrat, font-size: 13px, font-weight: 700. On hover, apply transform: translateY(-1px) and filter: brightness(0.96) with a 120ms transition (transition: transform 0.12s ease, filter 0.18s ease). Button-secondary mirrors the primary button but uses background: #17965b for secondary actions. Both buttons use a 2px solid border matching their background color. The 'Book a Consultation' CTA in the header uses background: #3d3ab1 (a darker purple variant) with the same padding and hover behavior, plus an animated shine effect (::after pseudo-element with linear-gradient and animation: f

Do's and Don'ts

**Do**

• Do use primary blue (#1a94f3) on all primary CTAs and focus states—it is the brand's signature accent and must appear consistently.
• Do maintain 2px solid borders on cards and containers in outline color (#d3e8f8) to create clear visual separation without harshness.
• Do apply generous padding (42px on cards, 22px on smaller containers) and lg spacing (40px) between sections to create breathing room and reduce cognitive load.
• Do use Montserrat (700 weight) for all headlines and labels to convey authority and precision; reserve Nunito Sans for body text to maintain warmth and readability.
• Do apply transform: translateY(-1px) and filter: brightness(0.96) on button hover with 120ms transitions to signal interactivity without jarring visual changes.
• Do use the full color token system (primary, secondary, tertiary, surface stack) to maintain consistency across all pages and components.

**Don't**

• Don't use primary blue (#1a94f3) on secondary buttons or non-interactive elements—reserve it exclusively for CTAs, focus states, and brand highlights.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.12) or use multiple stacked shadows; the system uses a single, soft shadow per elevation level.
• Don't mix Montserrat and Nunito Sans weights arbitrarily; use Montserrat 700 for headlines/labels only, and Nunito Sans 400 for body text.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radius values break the system's geometric precision.
• Don't place small labels (label-sm, 12px) over busy backgrounds without text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) to ensure legibility.
• Don't reduce padding below 12px on interactive elements or below 22px on card interiors; the system prioritizes spaciousness and clarity over density.