Something kept, not launched.
A pod is a handful of people who lend each other cards. The site is the shared shelf, and it should feel like something kept rather than something launched.
A crest, not a logo: struck rather than designed, and old enough to have been there before the site. It sits alone in the masthead and never appears beside a wordmark.
Magicians United in full, always both words, never abbreviated in the interface. The pod is “the pod”, lowercase, because it is a group of friends and not a product tier.
No gradients, no glass, no rounded corners, no drop shadows except the one that lifts an overlay off the page. Borders are hairlines. If a thing needs to stand out it is gold, and only one thing on a screen is.
Four up, four down, one metal.
Four surfaces from near-black up, four inks from parchment down, and one metal. Status is two colours and is never decorative.
--color-voidNear-black, cool, matte. Everything sits on the void; the others step up from it.
--color-boneParchment down to barely there. Ash is for labels and the small print; ash-faint means spent.
--color-goldThe accent means one of three things: this is yours, this is chosen, or this is the number that matters. Never more than one of those on a line.
--color-okReserved. Green is a finished trade; the burnt orange is a refusal or a removal. Neither is ever used to make something look interesting.
.pipCard colours are the game’s, not the brand’s. They appear as pips only, never as text colour and never as a background.
Three faces, three jobs.
A serif that leans for anything titled, a mono for anything labelled, and a plain sans for prose so the other two stay special.
.display-italic.displayCormorant Garamond. Page titles, section titles, a card’s name in an overlay, the number on an empty state. Never for a paragraph.
.label-monoIBM Plex Mono, uppercase, widely tracked, ash. Eyebrows, counts, folios, metadata, every small thing that is not a sentence.
The system sans at 15px / 1.6, because prose here is short and should get out of the way. Anything longer than a line gets a measure of 42rem.
Decks are separate from binders: importing a decklist never adds cards to anyone’s collection. Open one and it tells you which of its cards you already own.
Stock, not an absence of light.
A fixed, almost invisible noise over the whole page, so the near-black reads as stock rather than as an absence of light. It is drawn, not an image. Under it, a warm cast falls from above like a lit table.
body::beforebody::afterBoth are fixed, pointer-events-none, and behind everything. You are looking at them now.
.rule.rule-soft.rule-goldHairlines do the work that boxes and shadows do elsewhere. A rule ends a section; an ornamented rule ends a title.
Three weights, one small size.
Gold is the thing you came to do; ghost is a real alternative; quiet is everything else.
.btn.btn-ghost.btn-quietOne gold button per screen. If two things are gold, neither is the thing to do.
.btn-sm:disabledAnywhere a button sits in a row of text or inside a panel head.
.is-destructiveIt is quiet, and it turns warn on hover. Hover it.
A choice you can make more than once.
A filter, a section, an answer. Pressed is gold. Chips never navigate unless they are a nav,
and then they carry aria-current instead of aria-pressed.
.chip.chip-rowPressed carries the gold border, the gold ink, and the faintest gold wash.
.pip.avatarA chip can carry a colour pip or a member’s avatar. It never carries both, and never wraps to two lines.
One field style, no tricks.
One field style for every input, select and search box. No floating labels, no
placeholder-as-label: a field that needs naming gets a label-mono above it.
.fieldFocus takes the gold border. Nothing else moves.
Under 16px, iOS Safari zooms the page when a field takes focus and never zooms back. Every field is forced to 16px at phone widths for that one reason. This is not a preference.
Things that fold.
The site has three: a tool row that opens on a page, a quiet disclosure that hides detail under a heading, and a heading that folds what is under it.
.panel.panel-headA hairline underneath, a title that goes gold under the pointer, and a count at the right.
.disclosureA native details. The caret turns; nothing else moves.
› What counts as a printing
A printing is a specific set and collector number, because that is what you hand across the table.
.fold-head
The caret is drawn in CSS, not written, so the heading reads as just its own words — which
is why the button carries an explicit aria-label. Without it the accessible
name comes out as “› Creatures · 22”.
Counts are mono, always.
A panel of figures reads left to right in the order you asked for them. The one that matters is gold — and only one is.
.stat-panel.stat-value.is-goldValues in the display face, labels in mono. One value wears the metal.
.viz-row.viz-fillA count, and the floor it is measured against drawn behind it. The bar is the reading; the number beside it is the proof. Hovering one names what it counted.
.section-title .countChapters read as chapters, not as another metadata label.
The one container.
A hairline box on the slab, gold on hover when it is a link. Nothing nests inside another tile.
.tile[data-foil][data-finish]A foil printing wears a diagonal rainbow, like light across real foil, and catches a moving sheen on hover. Etched foil is a cooler, tighter band. This is the one piece of ornament in the system, and it earns its place because it encodes real data — whether the physical card is foil. The art here is the empty card face the tile shows before an image arrives.
A card’s own words, with its mana symbols drawn rather than spelled, and its reminder text left in the lighter ink.
T: Add CC.
Flying, vigilance (Attacking doesn’t cause this creature to tap.)
Four states, and never the same words.
Every list has four states — loading, empty, filtered to nothing, and broken — and they never share words. The same sentence for two of them is how people decide a page is broken.
A line of flavour instead of a spinner; an empty state that says what to do about it.
Paste a list and it becomes a deck everyone can see.
.noticeA line about what just happened or what is about to. Three tones: default, ok, error.
Nothing may push the page sideways.
A row wider than the screen scrolls inside itself and says so. The fades go on the wrapper, never as a mask on the scroller: a mask clips the focus rings of what is inside it and quietly breaks keyboard use for a cosmetic gain.
.scroll-row.scroll-row-trackSnap is proximity, not mandatory: mandatory fights a short flick near the end of the row and lands you somewhere you did not aim for. Drag this row sideways.
Dates people can read aloud.
Dates are written out, not slashed, because a slashed date means two different days depending on who is reading it. Times are the reader’s own. Both are mono, because they are metadata and not a sentence.
A date carries its month in words. A time inside today carries the hour and minute only. Neither is ever the loudest thing in a row.
Locking a date carries what people already said into who is coming, and your answer names the deck you are bringing.
Say the thing, then stop.
Write the way you would tell someone at the table.
| This | Not this |
|---|---|
| Commander has no sideboard, but this deck has 2 cards in one. | Validation error: sideboard_not_allowed |
| Nothing in your binder matches “rat”. | No results found! |
| Waiting on Owner, Jesse. | 2 of 4 responses received |
| A deck never touches anyone’s binder. | Seamlessly manage your collection |
Sentence case everywhere except label-mono, which is uppercase because it is a
label and not a sentence. Numbers are digits. A count and its noun agree — one card, two
cards — and the code does the agreeing, not a trailing “(s)”.
Break one and it stops being this system.
- One gold per screen. If two things are gold, neither is the thing to do.
- A destructive action is never gold. It is quiet, and turns warn on hover.
- Hairlines, not boxes and shadows. The only shadow that exists lifts an overlay off the page; the only others are a hover lift on a tile and a glow under the gold button.
- No gradients, no glass, no rounded corners. Two exceptions, both functional: the pip, which is a circle because the game’s symbols are, and the 4px cap on a data bar’s growing end.
- Status colour is reserved. Never used to make something look interesting.
- Card colours are the game’s. Pips only — never text colour, never a background.
- Nothing nests inside another tile.
- Nothing may scroll the page sideways.
html, body { overflow-x: clip }— clip, not hidden, because hidden makes them scroll containers and the sticky masthead stops sticking. Every grid and flex child that can hold a long name carriesmin-w-0. - Every list has four states — loading, empty, filtered to nothing, and broken — and they never share words.
- Every example in the design system is the live component. A design system whose examples are approximations lies.