Capacities

A bright, calm knowledge-tool marketing surface built on pure white canvas with a single near-black primary CTA and Inter typography throughout. The system reads as friendly modern productivity software — large tight-tracked Inter display headlines, soft-rounded cards (12–16px), faint barely-there drop shadows, and floating product-UI label chips scattered around the hero. Brand voltage comes from heavy Inter display type and the in-context product mockup rather than from saturated color; accent hues appear only as third-party integration brand marks.

capacities.io

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

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display 64px · 700 · 1.05

The quick brown fox jumps

heading 36px · 700 · 1.25

The quick brown fox jumps

title 18px · 600 · 1.556

The quick brown fox jumps

body 14px · 600 · 1.429

The quick brown fox jumps

button 14px · 500 · 1.429

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	8px
sm	12px
md	16px
lg	24px
xl	32px
xxl	48px
section	56px

Border Radius

Name	Value	Preview
xs	4px
sm	6px
md	8px
lg	12px
xl	16px
xxl	20px
huge	24px
pill	9999px

FAQ

What colors does Capacities use?: Capacities's core palette includes #ffffff, #000000, #000000, #ffffff, #25d366. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Capacities DESIGN.md.
What font does Capacities use?: Capacities'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 Capacities design system?: A bright, calm knowledge-tool marketing surface built on pure white canvas with a single near-black primary CTA and Inter typography throughout. The system reads as friendly modern productivity softw…

More like this

↓ .md ↓ All files

loading…