SecuredFinance

Overview

SecuredFinance is an institutional-grade DeFi protocol that bridges traditional interbank capital markets with decentralized finance infrastructure. The brand serves sophisticated financial actors—traders, institutional investors, and protocol developers—who demand both security and innovation. The visual language embraces "Gradient Maximalism with Institutional Restraint": a vibrant, saturated blue-to-purple gradient background (#5162ff primary accent) provides energy and forward momentum, while clean typography, precise spacing, and minimal ornamentation ensure clarity and trustworthiness. The UI evokes the precision of a trading terminal combined with the openness of modern fintech design. Users should feel they are accessing a powerful, well-engineered system that respects their expertise and capital.

The brand voice is confident, technical, and direct—never hype-driven or casual. Vocabulary emphasizes institutional credibility: "interbank-grade," "protocol," "markets," "capital." Tone is matter-of-fact; example sentence: "Access institutional liquidity pools with sub-millisecond settlement and cryptographic proof of reserve." The design system reflects this: every interaction is purposeful, every color choice deliberate, every spacing decision rooted in information hierarchy rather than decoration.

Colors

The color system is built on a deep, cool-toned surface palette (#152d50 as the primary container, #0a1929 as the darkest background) that provides visual stability and reduces eye strain during extended trading sessions. The primary accent is a saturated, electric blue (#5162ff) used exclusively for interactive elements—primary CTAs, focus states, and brand-critical highlights. This color appears on the "Sign up" button, navigation highlights, and form focus rings, making it the unmistakable call-to-action color. Secondary accent is a soft, mint-green (#cafcc4, the logo dot color) used sparingly for status indicators, success states, and secondary CTAs like "Explore." Tertiary is a warm, off-white (#faf2ef) reserved for contrast elements and high-emphasis text on dark backgrounds. The sur

Typography

The type system uses Suisseintl exclusively, a geometric sans-serif that conveys both precision and approachability. Display (74px, weight 300, -0.02em letter-spacing) is reserved for hero headlines like "Interbank-grade Capital Markets Protocol meets DeFi"—the light weight and negative letter-spacing create an elegant, spacious feel appropriate for institutional positioning. Headline-lg (48px, weight 400) and headline-md (32px, weight 400) are used for section titles and major UI headings, maintaining consistent weight to establish visual rhythm. Body-lg (18px) and body-md (16px) serve body copy and card content, with 0.005–0.01em letter-spacing to enhance legibility at smaller sizes. Label-md (14px, weight 500, 0.02em) is applied to button text, form labels, and navigation items; the inc

Layout

The page uses a fluid, 12-column grid system with a max-width of 1280px, centered on desktop and full-bleed on mobile. The hero section spans the full viewport height with a gradient background (blue to darker blue, animating subtly via CSS transforms) and uses lg spacing (40px) for section separation. Navigation is pinned to the top in a pill-shaped container with 24px gutter padding and uses nav-pill components (rounded-full, 40px height, semi-transparent white background with backdrop-filter blur). The main headline uses display typography and is vertically centered in the hero, with md spacing (24px) between the headline and supporting CTAs. Below the hero, content sections are separated by xl spacing (64px) to create breathing room and visual hierarchy. Cards and containers use md pad

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering rather than dramatic drop shadows. Level 1 (Base): the animated gradient background with no shadow. Level 2 (Standard Cards): box-shadow of 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at rgba(255, 255, 255, 0.12) to define edges without harsh contrast. Level 3 (Elevated/Modals): box-shadow of 0 8px 24px rgba(0, 0, 0, 0.2) with the same border treatment. Hover states transition from Level 2 to Level 3 over 200ms using cubic-bezier(0.4, 0, 0.2, 1) easing, creating a subtle lift effect. Focus rings on interactive e

Shapes

The shape language follows "Institutional Precision with Approachable Softness." Buttons and primary CTAs use rounded-full (1280px border-radius) to signal friendliness and accessibility, softening the otherwise formal institutional aesthetic. Secondary buttons and form inputs use rounded-DEFAULT (8px) for a balanced, professional appearance. Cards and elevated containers use rounded-lg (16px) to create visual distinction from inputs while maintaining a modern, refined look. The logo and avatar elements use rounded-full (100% border-radius) for organic, human-centric presentation. Navigation p

Components

Action Elements Buttons are the primary interaction mechanism and use three distinct variants. Button-primary (background: #5162ff, text: white, height: 48px, padding: 12px 32px, rounded-full) is the dominant CTA and appears on "Sign up" and "Explore" actions. On hover, it transitions to button-primary-hover (background: #3d4dd4, text: #e8ebff) over 200ms. Button-secondary (transparent background, white text, 1px outline border, rounded-full) is used for secondary actions like "Read documentation" and transitions to a surface-container-high background on hover. Button-tertiary (background: #cafcc4, text: #022336, rounded-full) is reserved for success-state CTAs and secondary highlights; on hover, it shifts to #a8f5b0 background. All buttons include a focus ring of 0 0 0 3px rgba(81, 98

Do's and Don'ts

**Do**

• Do use the primary blue (#5162ff) exclusively for CTAs, focus states, and brand-critical highlights—never dilute it with secondary uses.
• Do maintain the lg spacing (40px) between major sections to create visual breathing room and reduce cognitive load during information-heavy interactions.
• Do apply the text-shadow (0 2px 4px rgba(0, 0, 0, 0.15)) to all text rendered over the gradient background to ensure accessibility and readability.
• Do use rounded-full for all primary buttons and navigation pills to signal interactivity and approachability within the institutional aesthetic.
• Do transition all hover and focus states over 200ms using cubic-bezier(0.4, 0, 0.2, 1) easing to create a cohesive, polished interaction feel.

**Don't**

• Don't use the secondary green (#cafcc4) as a primary accent or CTA color—reserve it for status indicators and success states only.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.2) or use harsh, high-contrast borders that break the refined, institutional aesthetic.
• Don't mix typeface weights within a single headline or use weights other than 300, 400, or 500 for body and display text.
• Don't reduce spacing below md (24px) between major content sections or use less than 12px padding inside cards and containers.
• Don't apply focus rings or hover states without a 150–200ms transition—instant state changes feel jarring and reduce perceived polish.