Introduction

Curation is the design system behind the MyList web platform. MyList is a product about taste — people curate lists of what they love — and Curation is the same act applied to the interface: a small set of chosen values, kept deliberately, with the reasons written down.

Principles

One ink. Surfaces, hairlines and hover plates are one base colour plus an opacity modifier — bg-ink/[0.03], border-ink/10 — so they invert cleanly between themes. Text is the exception: alpha does not survive the flip where legibility is the point, so text names a rung of a ladder instead. This split is the system's load-bearing idea; Colors walks through it.

Ported, not invented. Nearly every value here is the shipping legacy app's, carried over by frequency and tuned only where a light ground demanded it. The radius scale is legacy's vocabulary; the overlay motion is legacy's modal transitions; the black brand is the mobile app's.

Both themes from one definition. Light and dark are two palettes behind the same token names. Components never branch on theme; they spend tokens, and the palette answers. The theme toggle in this header is there so every specimen on these pages can be checked against both.

Reasons live with the values. The tokens are declared once, in app/globals.css, each with the reasoning beside it. These pages summarise that file and the components built on it; when they disagree, the code is right.

How it ships

Curation is not a package. It is Tailwind 4 theme tokens declared in app/globals.css and consumed as utilities — text-ink-tertiary, bg-canvas-raised, rounded-lg, animate-dialog-in — plus the components that spend them: app-specific primitives in components/base, and a thin shadcn/ui layer in components/ui whose semantic tokens are mapped onto MyList's palette so an unmodified shadcn component already belongs.

import { Button } from "@/components/ui/button";        // shadcn layer
import { BaseButton } from "@/components/base/base-button"; // ported legacy primitives
import { cn } from "@/lib/utils";                           // clsx + tailwind-merge

What these pages list

Only what ships. Every component documented here is a file with call sites in the production web app; every token is one the app spends today. Nothing on these pages is aspirational, and a component that leaves the codebase leaves the docs. The pages themselves are files too — content/design/*.mdx, indexed by their frontmatter the way the help centre's articles are — so adding a page is adding a file.