Shop.app

A commerce-discovery interface built on a white canvas with a heavily-rounded, card-forward layout and a single bright Shop-purple accent (#5433eb). The system reads as friendly consumer marketplace — a dark app-download banner pinned to the top, a large pill search bar as the hero action, rounded brand/product cards with soft ambient shadows, and a left icon rail for navigation. Brand voltage comes from the purple search-submit button + logo and from real merchant product photography shown inside big rounded cards rather than from decorative color.

shop.app

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

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

heading-lg 20px · 400 · 1.1

The quick brown fox jumps

heading-sm 14px · 400 · 1.286

The quick brown fox jumps

body 10px · 400 · 1.2

The quick brown fox jumps

button 14px · 400 · 1.571

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	6px
sm	8px
md	10px
lg	12px
xl	16px
xxl	24px
xxxl	32px
section	48px
section-lg	64px

Border Radius

Name	Value	Preview
xs	4px
sm	8px
md	11px
lg	17px
xl	20px
xxl	28px
xxxl	32px
huge	40px
pill	9999px

FAQ

What colors does Shop.app use?: Shop.app's core palette includes #5433eb, #000000, #807c7a, #7b7b7b, #c9cbcc. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Shop.app DESIGN.md.
What font does Shop.app use?: Shop.app's primary typeface is GT Standard. 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 Shop.app design system?: A commerce-discovery interface built on a white canvas with a heavily-rounded, card-forward layout and a single bright Shop-purple accent (#5433eb). The system reads as friendly consumer marketplace…

More like this

↓ .md ↓ All files

loading…