Fontshare

An editorial, type-foundry-first interface built on a warm cream canvas (#ffffe3) with near-black ink (#10100e) and large in-page typographic specimens as the primary visual content. The system reads as a tool for designers — flat surfaces with zero elevation, sharp-cornered inputs and dividers contrasted against pill-radius toggle controls, muted sage-olive secondary text, and a small palette of pastel swatch accents. Brand voltage comes entirely from the type specimens themselves shown at large display sizes, not from color or decoration.

fontshare.com

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

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display-specimen 120px · 400 · 1.0

The quick brown fox jumps

wordmark 28px · 600 · 1.1

The quick brown fox jumps

nav-link 16px · 500 · 1.3

The quick brown fox jumps

filter-label 15px · 400 · 1.4

The quick brown fox jumps

body 15px · 400 · 1.5

The quick brown fox jumps

caption 12px · 500 · 1.3

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	5px
xs	6px
sm	10px
md	15px
lg	20px
xl	25px
xxl	40px
huge	60px
mega	100px

Border Radius

Name	Value	Preview
none	0px
pill	9999px
full	9999px

FAQ

What colors does Fontshare use?: Fontshare's core palette includes #10100e, #000000, #191815, #0e100e, #30302b. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Fontshare DESIGN.md.
What font does Fontshare use?: Fontshare's primary typeface is Satoshi. 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 Fontshare design system?: An editorial, type-foundry-first interface built on a warm cream canvas (#ffffe3) with near-black ink (#10100e) and large in-page typographic specimens as the primary visual content. The system reads…

More like this

↓ .md ↓ All files

loading…