---
name: Coinbase
description: "A perfect example of a 'restraint-first' fintech design that uses cleanliness and professional typography to establish immediate user trust."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#0A0B0D"
  secondary: "#5B616E"
  tertiary: "#0052FF"
  neutral: "#5B616E"
  bg-soft: "#EEF0F3"
  line: "rgba(10,11,13,0.08)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A highly accessible, trust-focused fintech platform built on a restrained palette and clean sans-serif typography.

*A clean, regulated financial institution interface that demystifies digital assets.*

## Colors

Extreme restraint with high-contrast ink on clean white or soft gray backgrounds, accented only by a primary brand blue.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#0A0B0D`)** — uses `ink` token
- **Secondary text (`#5B616E`)** — uses `ink-soft` token
- **Accent (`#0052FF`)** — uses `accent` token
- **Muted (`#5B616E`)** — uses `muted` token
- **Borders (`rgba(10,11,13,0.08)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use geometric-sans for display and bold UI elements
- Use humanist-sans for body text to ensure maximum readability
- Limit weight usage to 400 and 600 to maintain clarity

## Layout

wide centered container with balanced 12-column grid

*Rhythm:* standard 4px grid with generous padding for breathable layouts

## Elevation & Depth

- 0px 8px 12px 0px rgba(0, 0, 0, 0.12)
- Borders: 1px solid rgba(10,11,13,0.08)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** primary blue pill for conversion, outlined or ghost for secondary actions
- **card:** clean white or soft gray containers with subtle 12px radius and minimal shadows
- **chip:** subtle tag-like elements for categories with light backgrounds
- **input:** clean outlined inputs with 12px radius and clear focus states
- **hero:** large typography paired with high-fidelity product mockups on split layouts

## Do's and Don'ts

**Don't:**
- don't use cluttered layouts — screenshot shows clean, spacious split-screen compositions
- don't rely on dark mode for primary focus — screenshot shows a predominantly light, white background
- don't use aggressive neon colors — screenshot shows a highly restrained palette of blue, black, white, and gray
- don't use playful or rounded display fonts — screenshot shows sharp, geometric sans-serifs for headlines
- don't use heavy decorative borders — screenshot shows minimal, subtle gray borders or none at all
- don't use multiple primary call-to-action colors — screenshot shows a single, consistent primary blue for conversion

---

## System Prompt (paste into AI agent)

```
Design a fintech platform interface that prioritizes trust, clarity, and accessibility. Use a restrained palette centered on white backgrounds, deep black or near-black text (#0A0B0D), and a single primary brand blue (#0052FF) for high-chroma accents. Body text should use a humanist-sans for readability, while headlines and UI elements use a geometric-sans. Embrace generous whitespace and a clean 12-column grid layout. Critical constraints: never use overly decorative typography, avoid dark mode as the primary theme, maintain extreme restraint with the color palette to ensure a professional, regulated feel, and avoid cluttered compositions. Focus on clear, authoritative copy and predictable, accessible interactions.
```