BtcLoans

Overview

BtcLoans is a fintech comparison platform that transforms complex Bitcoin lending data into an accessible, high-contrast interface. The design aesthetic is "Crypto-Minimalist Clarity"—a fusion of austere dark-mode sophistication with vibrant accent colors that signal trust, speed, and financial precision. The brand serves crypto-native users and institutional borrowers seeking transparent, real-time APR rankings and loan term comparisons. The UI evokes confidence through stark black backgrounds (rgb(0, 0, 0)), crisp white typography (rgb(255, 255, 255)), and a signature lime-green accent (rgb(74, 222, 128)) that dominates CTAs and key data points. The emotional response is clarity without coldness: the interface feels authoritative yet approachable, technical yet human.

Voice and brand personality are direct, data-driven, and conversational. The tone avoids jargon bloat; instead, it prioritizes actionable insights. Example sentence in brand voice: "Nexo's 2.9%–18.9% APR with 20% LTV gives you flexibility—compare that against Bybit's fixed 5.74% at 80% LTV and pick your trade-off." The vocabulary leans on financial clarity (APR, LTV, collateral) paired with accessible framing ("Get the funding you need", "Find Best Deal"). The brand personality is confident, transparent, and slightly irreverent—it respects the user's intelligence and assumes they're making informed decisions, not being sold to.

Colors

The color system is built on a high-contrast dark foundation with strategic accent deployment. Primary (#4ade80, rgb(74, 222, 128)) is the brand's signature lime-green, used exclusively on CTAs ("Find Best Deal", "Get Started"), active states, and key data highlights (APR percentages in green). This accent appears sparingly but dominates visual hierarchy—it's the color users click. Secondary (#f97316, rgb(249, 115, 22)) is a warm orange used for secondary actions, badges, and status indicators; it provides warmth against the cold black canvas without competing for attention. Tertiary (#3b82f6, rgb(59, 130, 246)) is a corporate blue reserved for informational badges and tertiary UI elements.

The surface stack anchors the dark mode: surface (#000000) is pure black, surface-container (#1b1b1

Typography

The type system uses Inter as the primary typeface, chosen for its geometric clarity and excellent readability at small sizes on high-contrast backgrounds. Display (72px, weight 300, line-height 80px, letter-spacing -0.04em) is reserved for hero headlines like "Find the best Bitcoin loan rates"; the light weight conveys sophistication while the negative letter-spacing tightens the visual mass. Headline-lg (40px, weight 600) and headline-md (28px, weight 600) are used for section titles and card headers. Body-lg (18px, weight 400, line-height 28px) and body-md (16px, weight 400, line-height 24px) handle descriptive copy and list content; the 1.5x line-height (24px on 16px base) ensures legibility over dark backgrounds. Label-md (14px, weight 500, letter-spacing 0.01em) and label-sm (12px, w

Layout

The layout uses a 12-column fluid grid with a max-width of 1400px, centered on larger screens. The hero section spans full-width with a two-column split: the left column (40% width) contains the headline, subheading, and primary CTA; the right column (60% width) displays the "Top Providers" card stack. Spacing follows a semantic scale: gutter (24px) separates major sections, lg spacing (40px) creates breathing room between hero and provider rankings, md spacing (24px) is used for card padding and internal component spacing, and sm spacing (12px) is used for list item padding and tight groupings. The container maintains 24px horizontal padding on mobile (viewport < 768px), collapsing to a single-column layout. Provider rows use md padding (24px) with 1px borders at surface-container-high; t

Elevation & Depth

Depth is conveyed through layered surfaces and subtle shadows rather than dramatic drop shadows. Level 1 (Base): the pure black background (rgb(0, 0, 0)) with no shadow. Level 2 (Standard Card): surface-container (#1b1b1b) with a 1px border at surface-container-high (#2a2a2a) and a soft shadow of 0 4px 12px rgba(0, 0, 0, 0.26). Level 3 (Elevated/Header): surface-container (#1b1b1b) with rounded corners (9999px for header pill, 4px for cards) and the same shadow. The header navigation uses border-radius: 9999px to create a pill-shaped container, signaling it as a distinct, floating element. Pro

Shapes

The shape philosophy is "Functional Precision with Approachability"—combining sharp, technical edges with subtle rounding to convey both authority and accessibility. Buttons use border-radius: 9999px (full pill shape) to signal they are interactive and friendly; this applies to both primary CTAs ("Find Best Deal") and secondary buttons. Cards and input fields use border-radius: 4px (0.25rem) for a more technical, data-focused appearance; this reinforces the fintech aesthetic. The header navigation uses border-radius: 9999px to create a distinct, floating pill that stands apart from the page co

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use background: {colors.primary} (#4ade80), text-color: {colors.on-primary} (#000000), border-radius: 9999px, padding: 12px 32px, height: 44px, font-weight: 500, and font-size: 14px. On hover, the background shifts to {colors.primary-fixed-dim} (#22c55e) with a 200ms ease-in-out transition. Secondary buttons use a transparent background with a 1px border at {colors.primary} and the same text color; on hover, they gain a 10% opacity background (rgba(74, 222, 128, 0.1)). Both button types use label-md typography (14px, weight 500).

Containers & Surfaces Cards are the primary container for data. They use background: {colors.surface-container} (#1b1b1b), border: 1px solid {colors.surface-container-high} (#2

Do's and Don'ts

**Do**

• Do use {colors.primary} (#4ade80) exclusively on CTAs and active states—it's the brand's signature accent and should never be diluted or overused.
• Do maintain pure black (#000000) as the page background and pure white (#ffffff) for body text to maximize contrast and readability on dark mode.
• Do apply 1px borders at {colors.surface-container-high} (#2a2a2a) to define card and input edges instead of relying on shadows alone.
• Do use border-radius: 9999px on buttons and the header to signal interactivity and friendliness; use border-radius: 4px on cards and inputs for technical precision.
• Do apply 200ms ease-in-out transitions on hover states to feel responsive without being jarring.
• Do use label-md (14px, weight 500) for all button text and UI labels to maintain visual consistency across interactive elements.

**Don't**

• Don't use secondary colors (orange #f97316, blue #3b82f6) on primary CTAs—they dilute the brand's signature green accent and confuse interaction hierarchy.
• Don't add drop shadows larger than 0 4px 12px rgba(0, 0, 0, 0.26)—the dark background already provides depth; heavy shadows feel dated and reduce contrast.
• Don't use light gray or near-white backgrounds; stick to the surface stack ({colors.surface-container} #1b1b1b and {colors.surface-container-high} #2a2a2a) to maintain the dark-mode aesthetic.
• Don't apply text-shadow to body-md or larger text; reserve it only for label-sm on complex backgrounds where legibility is at risk.
• Don't mix border-radius values inconsistently—use 9999px for buttons/header, 4px for cards/rows, and 6px for inputs; deviation breaks the visual system.
• Don't use the primary green (#4ade80) for non-interactive elements like badges or status indicators—reserve it for CTAs and active states only.