CIR animation

We compare platforms & may earn a commission. Learn more.

Coin Interest Rate Coin Interest Rate
Email Newsletter

Internal UI Patterns

📋 Design Standards Reference

Page Headers

H1: text-4xl md:text-5xl font-extrabold Desc: text-xl text-slate-600 Padding: pt-16 pb-12

Buttons

Border: rounded-md Default: px-5 py-2.5 text-sm Small: px-4 py-1.5 text-xs

Cards

Padding: p-8 Border: rounded-3xl Border: border-slate-200 dark:border-slate-800

Form Inputs

Border: border-slate-200 dark:border-slate-700 Radius: rounded-lg Focus: focus:ring-2 focus:ring-blue-500

Sections

Padding: py-16 Container: max-w-7xl mx-auto px-4 Gap: gap-6 (sections), gap-4 (cards)

Chips/Badges

Shape: rounded-full Size: px-3 py-1 text-xs Font: font-black uppercase

Number Formatting

Font: system font (not monospace) Alignment: tabular-nums Avoid: font-mono for numbers

Page Header Component

Use <PageHeader> for consistent page titles. Import from components/common/PageHeader.astro

Default (Centered)

Best Crypto Yields

Compare the best crypto yield rates for Bitcoin, Ethereum, and Stablecoins from top platforms.

<PageHeader title="..." description="..." />

With Eyebrow Category

Resources

Crypto Tools

Professional-grade calculators to optimize your yields.

<PageHeader ... eyebrow="Resources" />

Left Aligned

Guides

Latest crypto guides to help you earn more.

<PageHeader ... align="left" />

With Slot Content (CTAs)

Compare Rates

Find the best crypto yields across 70+ platforms.

<PageHeader ...><Button>...</Button></PageHeader>

Number Formatting

Use the system font for all numbers. Never use font-mono for prices, percentages, or statistics.

Standard Number Display

Price $97,432.50
APY Rate 12.5%
24h Change +3.24%
Market Cap $1.92T

class="font-bold tabular-nums" (NOT font-mono)

Numbers in Tables

Platform BTC APY ETH APY Stablecoin
Nexo 5.00% 6.00% 12.00%
Kraken 0.25% 3.75% 4.25%

class="tabular-nums text-right" for aligned columns

Guidelines

Do
  • • Use tabular-nums for number alignment
  • • Use system font with font-bold for emphasis
  • • Format with commas: 1,234,567
  • • Use consistent decimal places in tables
Don't
  • • Use font-mono for prices/stats
  • • Mix number formats in same context
  • • Use monospace for APY percentages
  • • Display raw unformatted numbers

Split Promo Card Pattern

New reference pattern for promo code index cards and single offer hero cards. Keep content unchanged; apply this layout system.

Single Offer Hero Variant (With Logo)

Verified 2026

Current Bonus

$15 in BTC after first trade

Use the promo code below when signing up to claim this exclusive bonus.

CIR15

Usage Rules

  • In top-left logo tiles, use logo || logo_white with a 2px brand-color border.
  • Right panel logo should be logo_white || logo and larger (h-32 w-32).
  • If no logo exists, use full dark brand background for the entire card, white text, and no right-side split panel.
  • Header chips should use the compact monochrome system: text-[10px] uppercase tracking-wide px-2.5 py-1.

Buttons

Use <Button> component. Standard: rounded-md px-5 py-2.5

Button.astro Component (Standard)

<Button variant="primary">Label</Button>

Small Size (Tables & Compact UIs)

<Button size="small">Label</Button>

With Icons

Inline Button Patterns (Legacy Reference)

Inline Primary Inline Secondary Table Action

When possible, use the <Button> component instead of inline styles.

Chips & Badges

Status indicators, category tags, and rate badges. Standard shape: rounded-full

Trend Chips (TrendChip.astro)

UP DOWN

<TrendChip trend="up" />

Category Chips

Yields Staking Lending Borrow

px-3 py-1 rounded-full bg-slate-100 text-xs font-black uppercase

Availability Badges

USA Global

APY Rate Badges

8.5% APY 6.2% APY 12% APY 8.5% APY

Type Labels

Guide Tool New BTC Staking

Cards

Standard: p-8 rounded-3xl border-slate-200 dark:border-slate-800

Action Cards (with Hover Overlay)

Yields

Best Yields

Earn up to 12% APY on your BTC.

Staking

Staking Rewards

Compare staking providers.

Lending

Lending Rates

Find the best lending terms.

Platform Cards

Nexo
12% APY

Nexo

Top reward rates for crypto holders.

View Review
Coinbase
4.5% APY

Coinbase

Top reward rates for crypto holders.

View Review
Kraken
6% APY

Kraken

Top reward rates for crypto holders.

View Review

Simple Feature Cards

Earn yield

Compare rates across Bitcoin, Ethereum and stablecoins.

Compare Rates

Borrow cash

Access liquidity without selling your crypto assets.

View Loans

Spend crypto

Find crypto debit and credit cards for everyday payments.

Find Cards

Research

See rankings, deep-dive reviews, and side-by-side comparisons.

All Platforms

VS Comparison Cards

Nexo
vs
Coinbase
Coinbase
vs
Kraken

Typography

Heading and text styles used throughout the site.

Page Title (Large)

Bitcoin BTC

text-5xl md:text-7xl font-black tracking-tight
Page Title (Standard)

Best Crypto Yields

text-4xl md:text-5xl font-extrabold tracking-tight
Section Title

Top Bitcoin Platforms

text-3xl md:text-4xl font-bold tracking-tight
Card Title

Platform Name

text-xl font-bold
Section Label

Earn Rates

text-sm font-bold uppercase tracking-wider text-slate-500
Body Text

Compare the best Bitcoin interest rates and APY offers from top crypto platforms. Find the highest yields for your BTC holdings.

text-slate-600 dark:text-slate-400
Description Text (Below Headers)

Professional-grade crypto calculators to help you optimize your yields.

text-xl text-slate-600 dark:text-slate-400 leading-relaxed
Small/Disclaimer

*Rates listed for stablecoins on US-supported platforms are strictly activity-based rewards.

text-[10px] text-slate-400

Form Elements

Standard: border-slate-200 dark:border-slate-700 rounded-lg

Filter Bar (Segmented Control)

Availability:
Sort by:

Input Fields

border-slate-200 dark:border-slate-700 rounded-lg p-3 focus:ring-2 focus:ring-blue-500

Tables

Table patterns for platform lists and rate comparisons.

Platform
Availability
BTC
ETH
Stable
SOL
Nexo Nexo
USA
12%
5.5%
10% activity*
-
Visit
Coinbase Coinbase
USA
4.5%
5.5%
10% activity*
-
Visit
Kraken Kraken
Global
6%
5.5%
10%
-
Visit

Dark Cards (Rates)

Always-dark styled cards for rate displays on platform pages.

Platform Rates

Earn Rates

₿
BTC Bitcoin
UP
8.5% APY
Ξ
ETH Ethereum
5.5% APY

*Stablecoin rates listed are strictly activity-based rewards.

Crypto Colors

Official brand colors for cryptocurrencies used in hover effects and badges.

BT
Bitcoin
#f7931a
ET
Ethereum
#627eea
SO
Solana
#9945ff
US
USDC
#2775ca
US
USDT
#479570
XR
XRP
#23292f
LT
Litecoin
#345d9d
DO
Dogecoin
#C3A634

Spacing & Layout Guidelines

Common spacing values and container patterns.

Common Spacing

  • gap-4 - Card grids
  • gap-6 - Section spacing
  • p-8 - Card padding
  • py-16 - Section padding
  • mb-6 - Section header margin

Border Radius

  • rounded-full - Chips, badges
  • rounded-md - Buttons
  • rounded-lg - Inputs, small elements
  • rounded-xl - Tables, containers
  • rounded-3xl - Cards

Containers

  • max-w-4xl - Page headers
  • max-w-7xl - Main content
  • px-4 sm:px-6 lg:px-8 - Padding
  • mx-auto - Centering

Pattern Usage Audit (49 Pages)

Complete audit of all pages. Standard pattern: text-4xl md:text-5xl font-extrabold, pt-16 pb-12

1
Matches Standard
39
Needs Migration
9
Keep as Hero
49
Total Pages
Page Current H1 Padding Status
best-crypto-yields.astro text-4xl md:text-5xl font-extrabold pt-16 pb-12 Matches
index.astro (Homepage) text-5xl font-bold pt-20 pb-12 Hero - Keep
[coin].astro (Coin Hubs) text-5xl md:text-7xl font-black Custom gradient Hero - Keep
[coin]-yields.astro text-4xl md:text-6xl font-extrabold Carousel hero Hero - Keep
404.astro Uses h2 Custom Special
[...slug].astro (WordPress) Dynamic Custom Special
cards/[slug].astro text-4xl md:text-6xl font-black Custom Hero - Keep
compare/[...slug].astro Dynamic Custom Special
creditcard/[slug].astro Product detail Custom Hero - Keep
guides/[slug].astro Blog post template Custom Hero - Keep
Oversized H1 (md:text-6xl or larger)
cards/index.astro text-4xl md:text-6xl font-black pt-20 pb-16 Migrate
[coin]-lending.astro text-4xl md:text-6xl font-extrabold pt-24 pb-32 Migrate
[coin]-reward-rates.astro text-4xl md:text-6xl font-black pt-16 pb-24 Migrate
[coin]-staking-rates.astro text-4xl md:text-6xl font-extrabold pt-24 pb-32 Migrate
[coin]-staking-rewards.astro text-4xl md:text-6xl font-black Embedded Migrate
staking.astro text-4xl md:text-6xl font-extrabold pt-24 pb-32 Migrate
crypto-loan-calculator.astro text-4xl md:text-5xl lg:text-6xl py-16 md:py-20 Migrate
Undersized H1 (text-3xl or missing md breakpoint)
guides.astro text-3xl font-bold py-12 Migrate
exchanges.astro text-3xl font-bold py-12 Migrate
creditcard/index.astro text-3xl font-bold Embedded Migrate
all-crypto-lending-companies.astro text-3xl font-bold Embedded Migrate
borrow-against-crypto.astro text-3xl font-bold Embedded Migrate
[coin]-loans.astro text-3xl md:text-4xl font-bold Embedded Migrate
defi-yield-apps.astro text-3xl md:text-4xl lg:text-5xl pt-12 pb-10 Migrate
staking-rates.astro text-3xl md:text-5xl font-extrabold pt-24 pb-12 Migrate
Calculator Pages (missing md breakpoint)
[coin]-interest-calculator.astro text-4xl font-bold py-12 Migrate
[coin]-yield-calculator.astro text-4xl font-bold py-12 Migrate
crypto-interest-calculator.astro text-4xl font-bold py-12 Migrate
crypto-staking-calculator.astro text-4xl font-bold py-12 Migrate
Close to Standard (minor fixes needed)
tools.astro text-4xl md:text-5xl font-extrabold pt-20 pb-14 Fix Padding
neobanks.astro text-4xl md:text-5xl font-extrabold pt-16 pb-12 Review
compare/index.astro text-4xl font-extrabold Embedded Add md:text-5xl
stablecoin-yields.astro text-4xl font-extrabold Embedded Add md:text-5xl
No Dedicated Header
platforms/index.astro No h1 (filter only) — Add Header
platforms/[slug].astro No dedicated header — Add Header
platforms/[slug]-alternatives.astro No dedicated header — Add Header
platforms/[slug]-new-user-bonus.astro No dedicated header — Add Header

Note: Additional dynamic pages ([coin]-*, compare/*, etc.) follow patterns of their parent templates listed above.

USDC USDC 18% BTC BTC 12% ETH ETH 14% USDT USDT 18% SOL SOL 12% XRP XRP 12% LTC LTC 12% DOGE DOGE 12%
USDC logo USDC Yields Bitcoin logo Bitcoin Yields Ethereum logo Ethereum Yields USDT logo USDT Yields Solana logo Solana Yields XRP logo XRP Yields Litecoin logo Litecoin Yields Dogecoin logo Dogecoin Yields