MagicPath

A bright, product-forward SaaS landing surface built on near-white canvas with a deep forest-green brand voltage (#0a6a3c) carried by the wordmark, primary download CTA, and the second clause of the hero headline. The system pairs the custom TWK Lausanne display face (tight negative tracking) with Inter for all UI text, and leans on white product-canvas cards floating on soft-gray bands with low, wide drop shadows. Brand energy comes from the green accent and from real product-canvas screenshots shown directly inside floating cards rather than from color saturation.

magicpath.ai

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

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

h1 64px · 500 · 1.0

The quick brown fox jumps

h2 48px · 500 · 1.0

The quick brown fox jumps

h3 18px · 510 · 1.2

The quick brown fox jumps

h4 14px · 600 · 1.429

The quick brown fox jumps

body 15px · 400 · 1.55

The quick brown fox jumps

button 13px · 590 · 1.0

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	6px
sm	8px
md	12px
lg	16px
xl	20px

Border Radius

Name	Value	Preview
none	0px
xs	3px
sm	4px
md	6px
lg	8px
xl	10px
xxl	14px
pill	56px

FAQ

What colors does MagicPath use?: MagicPath's core palette includes #0a6a3c, #dcf1e3, #0a0a0a, #1c1917, #3d3d3d. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the MagicPath DESIGN.md.
What font does MagicPath use?: MagicPath's primary typeface is TWK Lausanne. 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 MagicPath design system?: A bright, product-forward SaaS landing surface built on near-white canvas with a deep forest-green brand voltage (#0a6a3c) carried by the wordmark, primary download CTA, and the second clause of the…

More like this

↓ .md ↓ All files

loading…