SpherePay

A precise, fintech-infrastructure landing surface anchored on pure white canvas (#ffffff) with pure-black Inter display headlines and a single electric-blue (#2970ff) call-to-action color. The system reads as engineered-and-serious — oversized 96px hero type with tight negative tracking, hard-edged square content blocks (0px radius), a deep navy band (#1f2937) that acts as a chromatic divider, and a restrained near-monochrome palette where blue is the only voltage. Brand character comes from the enormous low-weight Inter headline and the geometric color-block grid rather than from decoration.

spherepay.co

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display-xl 96px · 400 · 1.0

The quick brown fox jumps

display-lg 60px · 500 · 1.1

The quick brown fox jumps

label-sm 14px · 600 · 1.5

The quick brown fox jumps

body 16px · 400 · 1.25

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	8px
sm	12px
md	16px
lg	24px
xl	32px
xxl	40px
xxxl	48px
huge	64px
section	128px

Border Radius

Name	Value	Preview
none	0px
xs	2px
sm	4px
md	6px
lg	8px
xl	14px
xxl	16px
full	1440px

FAQ

What colors does SpherePay use?: SpherePay's core palette includes #2970ff, #cad8ff, #d1e0ff, #eff4ff, #3898ec. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the SpherePay DESIGN.md.
What font does SpherePay use?: SpherePay's primary typeface is Inter. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the SpherePay design system?: A precise, fintech-infrastructure landing surface anchored on pure white canvas (#ffffff) with pure-black Inter display headlines and a single electric-blue (#2970ff) call-to-action color. The system…

More like this

↓ .md ↓ All files

loading…