CURATED · OPEN · FREE

Base

A minimalist, high-trust fintech platform for building on the blockchain.

cryptol2

↓ Download design system (6 MB)Open in OpenDesign

Visit: https://www.base.org

📦 Browse pack contents →

Identity DNA

blockchainglobal financeinfrastructureopeninstitutional

The AWS of blockchain — foundational, enterprise-grade, and ubiquitous.

Color

#0052FFAccent

#171717Ink

#000000Ink soft

#FFFFFFBG

#F8F8F8BG soft

#9A9A9AMuted

rgba(229,231,235,1)Line

High-contrast minimalism: deep black text on stark white with a single, high-chroma blue for primary actions.

Typography

geometric-sans · humanist-sans · geometric-mono

display54px · 700
body16px · 400
small14px · 400

Use baseSans for UI and hero text · Use Geist Mono for monospaced elements and data · Maintain tight letter-spacing on large display headings

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px grid with generous vertical padding for large sections.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgb(229, 231, 235) for cards and inputs

rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered content container with clear hierarchical spacing

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle fade and color transitions for interactive elements · Transform transitions for hover states

Color and border-color transitions on a 0.15s cubic-bezier curve · Immediate visual feedback with no delayed state change

Components

button High-contrast pill-shaped primary buttons with white text on blue, or bordered secondary variants
card Clean white cards with subtle borders and clear visual separation
chip Simple pill-shaped tags with neutral backgrounds
input Clean bordered text inputs with clear padding
hero Large centered headline with subtext and dual action buttons

Voice & Don'ts

Tone Confident, institutional, and forward-looking
Headlines Bold, direct, and declarative
CTAs Action-oriented and clear

don't use dark mode — screenshot shows a bright, white-background hero section
don't use decorative serifs — screenshot shows a clean, geometric sans-serif for headlines
don't use multi-color gradients — screenshot shows a single high-chroma blue for primary actions
don't use heavy drop shadows — screenshot shows minimal or no visible shadows on main components
don't use chaotic layouts — screenshot shows a strictly centered, grid-based hierarchical layout
don't use small, cramped spacing — screenshot shows generous white space around core content
Avoid: playful language
Avoid: excessive jargon
Avoid: complex sentence structures

Inside the pack — real screenshots

Base — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Design a high-trust, institutional fintech platform. Use a stark white background with deep black text for maximum readability. The primary brand color is a vibrant, high-chroma blue used exclusively for interactive elements like buttons and links. Typography should be clean and geometric, using a sans-serif for headlines and body text, with tight letter-spacing for large display sizes to maintain a modern, technical feel. Avoid any dark mode, playful aesthetics, or multi-color gradients. Layouts must be centered, spacious, and strictly grid-aligned to convey stability and reliability. Components like buttons should be pill-shaped with high contrast. Critical donts: do not use dark backgrounds; do not use decorative serif fonts; do not use more than one primary accent color.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko