design.md

Preview

# shopify.com Design Tokens

> Generated by UI Archive — https://ui-archive.com/shopify.com
> Snapshot: 2026-11-15
> Format: W3C DTCG compatible — suitable for Cursor, Lovable, Claude Code, and other AI coding agents

## Colors

| Token | Value | Description |
|-------|-------|-------------|
| --color-ff6900 | #ff6900 | Defined in :root as --color-orange-500 |
| --color-f0b100 | #f0b100 | Defined in :root as --color-yellow-500 |
| --color-00c950 | #00c950 | Defined in :root as --color-green-500 |
| --color-2b7fff | #2b7fff | Defined in :root as --color-blue-500 |
| --color-dab2ff | #dab2ff | Defined in :root as --color-purple-300 |
| --color-ad46ff | #ad46ff | Defined in :root as --color-purple-500 |
| --color-d4d4d8 | #d4d4d8 | Defined in :root as --color-zinc-300 |
| --color-9f9fa9 | #9f9fa9 | Defined in :root as --color-zinc-400 |
| --color-52525c | #52525c | Defined in :root as --color-zinc-600 |
| --color-black | #000000 | Defined in :root as --color-black |
| --color-white | #ffffff | Defined in :root as --color-white |
| --color-shade-40 | #a1a1aa | Defined in :root as --color-shade-40 |
| --color-shade-50 | #71717a | Defined in :root as --color-shade-50 |
| --color-shade-60 | #52525b | Defined in :root as --color-shade-60 |
| --color-shade-70 | #3f3f46 | Defined in :root as --color-shade-70 |
| --color-pistachio-10 | #d4f9e0 | Defined in :root as --color-pistachio-10 |
| --color-aloe-10 | #c1fbd4 | Defined in :root as --color-aloe-10 |
| --color-uc-glass | linear-gradient(#181d20,#181d20)padding-box,linear-gradient(180deg,#ffffff8c,#ffffff0f)border-box | Defined in :root as --uc-glass |
| --color-background-image-uc-glow | radial-gradient(circle at center,#6cd48480,#6cd48424 44%,transparent 68%) | Defined in :root as --background-image-uc-glow |
| --color-uc-fade-mask | linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%) | Defined in :root as --uc-fade-mask |
…

All Tokens