Ocampos Crypto Exchange

Overview

Ocampos is a fintech-forward cryptocurrency exchange platform that prioritizes clarity, speed, and user confidence. The design language—termed 'Warm Minimalism'—combines a soft gradient background (transitioning from rose-pink through peach to cream) with a clean, geometric interface that feels both approachable and technically sophisticated. The brand serves traders and digital asset managers who demand both security and ease of use, evoking a sense of calm professionalism amid market volatility. The visual experience is intentionally warm and inviting, never cold or austere, positioning crypto trading as accessible rather than intimidating.

The voice is direct, confident, and human-centered. Ocampos speaks in active, present-tense language that emphasizes agency and control: 'Trade with confidence,' 'Manage your assets,' 'Get started instantly.' The tone avoids hype and jargon; instead, it grounds complex financial concepts in everyday language. Example sentence in brand voice: 'The fastest and safest way to buy, sell, and manage your digital assets—trade with confidence on one secure platform.'

Colors

The color system balances warmth with technical clarity. Primary (#3b82f6, a vibrant sky blue) is the signature accent used on all call-to-action buttons, links, and interactive focus states—it commands attention without aggression and signals trustworthiness in a fintech context. Secondary (#ef4444, a bold red) is reserved for alerts, error states, and accent elements that demand immediate notice; it appears on the hero's floating icon cluster to create visual dynamism. Tertiary (#171717, near-black) anchors the interface as the primary text color and is used for high-contrast buttons like 'Connect Wallet' and 'Get Started,' reinforcing authority and finality.

The surface stack is built on pure white (#ffffff) as the base, with carefully graduated grays (surface-container-low at #f5f5f5,

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys modernity and precision without sacrificing warmth. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines like 'Hi, Let's Trade With Ocampos,' commanding attention with its scale and negative letter-spacing that creates visual tightness. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections and feature blocks. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive copy and supporting text, maintaining readability at larger sizes. Body-md (16px, 400 weight, 24px line-height) is the default for body copy and form labels. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text, badges, and UI labels, ensuring crisp legib

Layout

The layout uses a 12-column grid with a max-width of 1400px, allowing content to breathe on large screens while maintaining focus. The hero section spans full-width with a warm gradient background (transitioning from #f3e8e8 through #fcd5ce to #fce7d5), establishing immediate emotional warmth. Primary content sections use lg spacing (40px) for vertical separation, creating a rhythm that feels generous without being wasteful. The gutter is consistently 24px, applied to all horizontal padding within containers. Navigation and header elements use md spacing (24px) for internal padding, while card components use md (24px) for internal content padding. White-space is treated as a design element: the hero's floating icon cluster is positioned with xl spacing (64px) from the headline, creating vi

Elevation & Depth

Depth is conveyed through subtle shadows and layering, avoiding the flat aesthetic while maintaining clarity. The base elevation uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to cards, input fields, and standard UI containers. Elevated states (on hover or focus) use box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), creating a sense of lift without becoming distracting. The hero section uses a soft gradient background with no shadow, establishing it as the foundational layer. Floating elements (like the icon cluster in the hero) use box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) to separate th

Shapes

The shape philosophy is termed 'Geometric Warmth'—combining sharp technical precision with approachable softness. Buttons and primary CTAs use full border-radius (9999px), creating pill-shaped forms that feel friendly and modern; this is applied to 'Get Started,' 'Connect Wallet,' and 'View Pricing' buttons. Cards and containers use lg radius (1rem / 16px), providing enough rounding to feel contemporary without sacrificing a sense of structure. Input fields use DEFAULT radius (0.5rem / 8px), a subtle curve that signals interactivity without overwhelming. The nav bar and header use full radius

Components

Action Elements Buttons are the primary interaction mechanism and use consistent sizing: 48px height with 12px vertical and 32px horizontal padding. Primary buttons (background: #3b82f6, text: white, rounded: full) are used for high-intent actions like 'Get Started' and 'Connect Wallet.' On hover, the background transitions to #60a5fa with an elevated shadow (0 16px 40px rgba(0, 0, 0, 0.12)) over 200ms. Secondary buttons (background: white, border: 1px solid #d0d0d0, text: #171717) are used for lower-priority actions like 'View Pricing.' Tertiary buttons (background: #171717, text: white) are reserved for critical actions requiring maximum contrast. All buttons use transition: all 0.2s ease-out to provide smooth state changes.

Containers & Surfaces Cards use a consistent pattern:

Do's and Don'ts

**Do**

• Do use primary blue (#3b82f6) exclusively for CTAs and interactive focus states—it is the signature brand accent and must never be diluted or overused on non-interactive elements.
• Do apply the warm gradient background (rose-pink to peach to cream) to hero sections and full-width containers to establish immediate emotional connection and brand recognition.
• Do use Inter font exclusively across all text; its geometric precision reinforces fintech credibility while its rounded letterforms maintain approachability.
• Do maintain consistent button sizing (48px height) and use full border-radius (9999px) for all primary CTAs to create a cohesive, modern interaction model.
• Do apply subtle shadows (0 4px 12px rgba(0, 0, 0, 0.08)) to all cards and containers; elevation should be felt, not seen.
• Do use negative letter-spacing (-0.04em) on display headlines to create visual tightness and sophistication.

**Don't**

• Don't use secondary red (#ef4444) for anything other than alerts, errors, and accent elements in the hero; overuse dilutes its warning signal.
• Don't apply rounded corners smaller than 0.5rem (8px) to interactive elements—the shape language requires at least this much softness to feel on-brand.
• Don't use box-shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12) on standard components; excessive elevation creates visual chaos and contradicts the minimalist aesthetic.
• Don't mix typefaces; Inter is the sole font family—using system fonts or serif alternatives breaks brand consistency and signals technical carelessness.
• Don't place text directly on the gradient background without a semi-transparent overlay or text-shadow; legibility must be guaranteed (apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) when necessary).
• Don't use pure black (#000000) for text; always use tertiary (#171717) or on-surface (#171717) to maintain the warm, approachable tone.