Skip to content
DesignMunkDesignMunk Submit a site

Base

base.org
The blockchain for global finance
Data & Infrastructure Fintech Next.js Tailwind Homepage base Sans Google Sans Flex
Share Visit site
base.org DESKTOP · 1440
Base

AI Breakdown

Design export

---
version: alpha
name: Base
description: The blockchain for global finance
colors:
  primary: "#171717"
  secondary: "#5454fc"
  tertiary: "#0000ff"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: googleSansFlex
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: googleSansFlex
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.21
  headline-sm:
    fontFamily: googleSansFlex
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
  headline-xs:
    fontFamily: googleSansFlex
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: baseSans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 4.64
    letterSpacing: -0.18em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 72px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 16px 20px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 16px 20px
    height: 48px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Base: Institutional Calm, Electric-Blue Pill Actions

## Overview

Institutional, developer-first, and finance-ready. The UI is spacious and minimal, relying on crisp black text on white surfaces with electric-blue accents used sparingly for action. Density stays low, copy is concise, and hierarchy comes from type scale, whitespace, and borders instead of effects. The tone should feel trustworthy, performant, and open to both enterprises and builders.

## Colors

- **primary (#171717):** Core ink for headlines, body text, and icons.
- **secondary (#5454fc):** Signature blue for primary CTAs, active states, and key accents.
- **tertiary (#0000ff):** Supporting blue used sparingly for highlights, decorative glyphs, and secondary accents.
- **neutral (#ffffff):** Base canvas and default card surface.
- **border (#e5e7eb):** Hairline strokes for cards, dividers, and inputs.
- **surface (#ffffff):** Card and section surfaces on the light mode canvas.
- **on-surface (#171717):** Default text color on white surfaces.

## Typography

Headlines use Google Sans Flex at bold weights for authority and clarity: lg 32px/700 (hero and major section intros), md 24px/700 (section headers), sm 20px/600 and xs 18px/600 (card titles and subheads). Google Sans Flex is a custom, self-hosted family; agents should substitute Inter, Manrope, or Work Sans for a similar humanist-grotesk feel.

Body copy uses Base Sans at 16px/400 (token body-md). Base Sans is custom/self-hosted; use Inter, IBM Plex Sans, or Satoshi as obtainable substitutes. The body token specifies generous leading (lineHeight 4.64) and tight tracking (-0.18em); apply it where airy layout and short blurbs are intended. For longer paragraphs inside components, use the component's defaults or a smaller headline tier (headline-xs) to keep rhythm compact without inventing new tokens.

## Layout

Spacing is deliberate and spacious: xs 6px for micro gaps, sm 16px for inside-card padding, md 32px for block spacing, lg 48px for section breathing room, and xl 72px for hero and major section separations. Sections commonly stack as hero → trust row → product cards → metrics → value props → news → CTA. Grids favor simple 1×3 or 1×4 cards that collapse responsively; center alignment in the hero and even gutters keep the page calm.

## Elevation & Depth

Shadows are disabled across scales. Hierarchy is conveyed through whitespace, the border color (#e5e7eb) for 1px rules, and tonal contrast between #ffffff surfaces and #171717 text. Emphasis comes from size and weight changes, blue accents, and grouped spacing—not from blur or glow. Hover states should rely on border/foreground shifts and subtle background tints of the existing palette.

## Shapes

Corners speak the component's role: sm 8px for containers and cards (content holders), and full 9999px for interactive pills like buttons, badges, and chips. Avoid mixing radii on the same element; reserve the full radius for actions to keep the tap targets distinct.

## Components

Buttons
- Primary Button: 48px tall, 16×20px padding, full radius (9999px), text #171717. Use secondary #5454fc as the typical fill for the key CTA.
- Secondary Button: White fill (#ffffff), text #171717, full radius, 48px height—reads as a quiet alternative or a pair member.
- Link Button: Text-only, square corners, inherits #171717; pair with a subtle chevron when needed.

Card
- White surface, #171717 text, 16px padding, 8px radius. Add a 1px #e5e7eb border to separate from the canvas when grouped.

### Top Navigation
Centered wordmark with menu groups. Right-aligned pill "Get Started" uses full radius, 48px height, and secondary #5454fc to stand out.

### Hero With Dual CTAs
Headline in headline-lg, concise subhead, two-button group (primary filled blue, secondary white). Use xl 72px vertical spacing and center alignment.

### Trust Logo Strip
Monochrome partner logos in a single row with md 32px vertical offsets and 1px dividers as needed. Text uses body-md.

### Three-Up Product Cards
Trading, Payments, Agents. Each card: 8px radius, 16px padding, 1px #e5e7eb border, title in headline-sm or xs, supporting copy in body-md, trailing chevron.

### Metrics Belt
Four counters in a row: large numeral line (headline-md) over a label (body-md). Keep generous md–lg gaps; no shadows.

### Value Proposition List
Four items ("Instant...", "Always-on...", etc.). Each item stacks a small icon, a headline-xs title, and a short body-md blurb with md spacing.

### Latest Releases List
Vertical list of links with dates. Use headline-xs for titles and body-md for meta. Add 1px #e5e7eb dividers between items.

### Footer Columns & Status Badge
Four link columns with sm–md spacing, small copyright row, and a quiet status pill using full radius and border color for the outline.

## Do's and Don'ts

- Do set body and headline text in #171717 on #ffffff surfaces for maximum clarity.
- Do reserve #5454fc for primary CTAs and high-value accents; use #0000ff sparingly for secondary highlights.
- Do keep buttons 48px high with full (9999px) radius and 16×20px padding; pair primary and secondary for key actions.
- Do frame cards with 8px corners, 16px padding, and a 1px #e5e7eb border—no shadows.
- Don't introduce new grays or drop-shadows to simulate depth; use borders and spacing instead.
- Don't crowd sections; prefer md (32px) or larger gaps and short, scannable copy blocks.

## Agent Prompt Guide

Quick color reference — Text: #171717; Background/Surface: #ffffff; Border: #e5e7eb; Accent (primary action): #5454fc; Secondary accent: #0000ff.

1) Build a centered hero with dual CTAs
- Canvas #ffffff. H1 set in googleSansFlex (fallback Inter, Manrope), 700, 32px, line-height 1.19, color #171717. Subhead set in googleSansFlex 600, 18px, line-height 1.22, color #171717. Place two buttons: primary 48px tall, 16×20px padding, radius 9999px, background #5454fc, text #171717; secondary 48px tall, radius 9999px, background #ffffff, border 1px #e5e7eb, text #171717. Vertical spacing: xl 72px around the block.

2) Create a three-card product grid
- Grid of 3 columns on desktop, 1 on mobile. Each card: background #ffffff, text #171717, padding 16px, radius 8px, border 1px #e5e7eb. Title in googleSansFlex 600, 18–20px; body in baseSans (fallback Inter, IBM Plex Sans, Satoshi) 16px/400 with line-height 4.64 and letter-spacing -0.18em. Gaps: md 32px.

3) Implement a metrics belt
- Four items in a row with md 32px gaps. Value in googleSansFlex 700, 24px, color #171717; label in baseSans 16px/400. Section padding: lg 48px top and bottom. No shadows; add a top border 1px #e5e7eb if separation is needed.

4) Add a latest releases list
- Vertical stack with md 32px gaps. Title links in googleSansFlex 600, 18px; meta/date in baseSans 16px/400. Each item separated by a 1px #e5e7eb divider with sm 16px vertical padding.

5) Compose the global nav
- Left logo, center menus, right CTA. Menu links in baseSans 16px/400. CTA button: 48px height, radius 9999px, background #5454fc, text #171717. Nav height approx lg 48px spacing with a bottom border 1px #e5e7eb.

## Similar Brands

- Coinbase — Similar white canvas, black type, and blue CTA discipline; Base is even sparser and more developer-centric.
- Stripe — Institutional minimalism with blue accents and precise spacing; Stripe uses more gradients and motion.
- Circle — Financial-grade clarity and a restrained palette; Circle leans more into illustrations and gradients.
- Solana — Crypto-infrastructure messaging with strong typographic hierarchy; Solana opts for dark mode and neon accents where Base stays light.

More like this

Browse Data & Infrastructure →
motherduck.com
Mother Duck AI
Mother Duck
Infrastructure for answers: serverless cloud data warehouse for SQL or natural language.
Homepage · 2 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 2 days ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 4 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 6 days ago