Kiri Design System
Kiri’s design system: warm, editorial Japanese-craft language with lacquer browns, paper neutrals, and a serif/sans pairing.
This file is the human-readable mirror of docs/design.md (the source of truth). Both update together.
Brand
The Kiri mark: the bronze jeweler's loupe beside the tracked small-caps wordmark ("All-Caps Small-Caps Trailed"). Newsreader SemiBold, uppercase, +0.125em tracking, a 1.5:1 icon-to-text ratio at every size.
Lockup · master and context sizes, 1.5:1 icon-to-text
Master · 36/24Kiri
Nav · 26/17Kiri
Mobile · 23/15Kiri
On the dark anchor · footer and cta-band grounds
Kiri
on brand-950 the wordmark runs paper cream; never recolor the loupeColors
Natural materials named in Japanese: Urushi lacquer ink, Haku bronze accents, Suna sand and Kami paper surfaces. Toggle dark mode (top right) to see the inverted roasted-brown set.
Primary
Urushi
#322014
Primary
Kuri
#5A3921
Primary
Haku
#52321B#7E4E2D#B78D62#C5A681
Secondary
Tsuchi
#C5A681
Secondary
Suna
#EFEEE8
Secondary
Kami
#F5F4F2
Tonal ramps · hover a cell for its hex
Accents
info
error
accent-alt
Semantic mapping · core
on-primary text
on-primary text
link / emphasis
decorative
Surfaces
on-surface text
on-surface text
on-surface text
muted text
hairline
emphasized
recessed wells
Semantic & categorical
success / trend-up
warning
error / trend-down
info
categorical
rarity tier 3
rarity tier 4
rarity tier 5
rarity tier 6
Typography
Newsreader (Production Type, free via Google Fonts) for headings (chosen over paid transitional serifs as the closest free equivalent) and Geist (Vercel) for everything functional. Money always uses tabular numerals.
Displaydisplay · Newsreader · 60px / 1.22 / −0.025em
Heading 1h1 · Newsreader · 48px / 1.22 / −0.025em
Heading 2h2 · Newsreader · 36px / 1.3 / −0.025em
Heading 3h3 · Newsreader · 24px / 1.3 / −0.015em
Heading 4h4 · Newsreader 500 · 16px / 1.3 / −0.015em
Body Large: the quick brown fox jumps over the lazy dog.body-lg · Geist · 18px / 1.5
Body: the quick brown fox jumps over the lazy dog.body · Geist · 16px / 1.5
Body Small: the quick brown fox jumps over the lazy dog.body-sm · Geist · 13px / 1.5
Caption: April 8, 2026 · 12 min readcaption · Geist · 11px / 1.4 / 0.01em
Label: Rarity · Mythiclabel · Geist 500 · 10px / 1.4 / 0.04em · uppercase
Spacing
4px base scale. Default to space-5 (24px) card padding; keep card grids catalog-generous.
space-1 · 4px
space-2 · 8px
space-3 · 12px
space-4 · 16px
space-5 · 24px
space-6 · 32px
space-7 · 48px
space-8 · 64px
space-9 · 96px
Radius
Radius scales with component size: badges xs, buttons/inputs sm, cards md, modals lg, chips/pills full.
none · 0
xs · 4px
sm · 8px
md · 12px
lg · 16px
full · pill
Elevation & Depth
Essentially flat: depth comes from warm surface steps and hairline borders. Shadows only on floating layers (modal, drawer, toast, menus), always brown-tinted.
Level 0background · page
Level 1surface + border · cards, panels
Level 2surface-raised + border-strong · inputs, hover
Level 3 · floatingshadow-float · modals, drawers, menus, toasts
System
Breakpoints, container, motion, focus, and layering: the invisible tokens that keep builds consistent.
Breakpoints & container
mobile · < 640px
tablet · 640–1024px
desktop · > 1024px
container1200px max · 24px gutters mobile, 32px tablet+ · card grids 2 → 3 → 4-5 columns
Motion · three durations, ease-out, slow tier off under reduced-motion
fast · 150ms
hovers, color shifts
medium · 300ms
menus, accordions, drawers
slow · 600ms
cover zooms, chart transitions
Focus · 2px accent ring, 2px offset, on every interactive element
button · focus-visible
input · focus
focus inside invalid field · error ring
Z-index scale
0page content
100sticky header
200dropdowns & menus
300drawers
400modals
500toasts & banners
Interaction & keyboard · Esc, arrows, focus traps, ARIA
| Surface | Keyboard | ARIA |
|---|---|---|
| Modal & drawer | Esc closes · Tab trapped · focus returns to trigger | role="dialog" aria-modal, labelled by title |
| Menus (dropdown, user, kebab) | ↑ ↓ cycle · Home/End jump · Enter activates | menu pattern · trigger carries aria-expanded |
| Card search | ↑ ↓ highlight · Enter selects · Esc clears popup, then query | combobox with listbox popup |
| Tabs & segmented pills | ← → move · Home/End jump | tablist / tab / tabpanel |
| Date picker | Arrows move by day · PgUp/PgDn by month | grid pattern · aria-selected |
| Range slider | Arrows adjust · Shift for 10× steps | role="slider" with aria-valuenow |
| Sortable headers | Enter / Space toggle | aria-sort on the active column |
| Toast | Never takes focus · auto-dismiss 5s, hover pauses | polite live region |
| Icon-only buttons | Standard activation | always aria-label |
Voice & formatting · money, time, truncation, tone
| Rule | Example |
|---|---|
| Card prices always show two decimals | $0.25 · $42.00 |
| Aggregates past $10,000 drop cents | $14,208 |
| Percentages show one decimal | 3.2% · never 3% or 3.24% |
| Time is relative under 24 hours | 12 minutes ago · 2 hours ago · Yesterday · June 12 · June 12, 2025 |
| Card names truncate to one line | Kiri, Mist Courser of the End… (full name in the popover) |
| Numeric columns right-align, tabular | 1,204 |
Say
- Deck saved to your collection.
- No cards found. Try another game.
- Add your first card
Don't say
- Success!! Your deck has been saved!
- ERROR: query returned 0 results
- You don't have any cards yet :(
Iconography · Lucide, three sizes only
16 · inline with text
20 · bars, list leads
24 · feature contexts
search
clock
globe
bell
copy
check
chevron-down
see
Brandloupe · brand mark
Brandloupe · brand mark
Actions
Three button weights. Static copies show hover and disabled states without interaction.
Buttons · three weights and their states
button-primary
button-primary-hover
button-primary-disabled
button-secondary
button-secondary-hover
button-ghost
Copy button · confirms with a moss check for two seconds
4 Kiri, Mist Coursercopy-button · rest
tcg_••••••••••••4411copied state
Loading state · width holds, label becomes spinner + progress verb
button-primary · loading
button-secondary · loading
spinner · standalone
Forms & Inputs
The intake kit for portfolio flows: inputs, selects, steppers, the card-search combobox, variant pickers, and price alerts.
Text inputs
input
input-focus
input · error state
input · disabled
Select & stepper
Magic: The Gathering select
4stepper · quantity
variant picker · condition (segmented)
variant picker · printing
Checkbox & radio
Foils onlycheckbox · checked
Include sealed productcheckbox
Near Mintradio · selected
Lightly Playedradio
Graded slabscheckbox · disabled
Warlord (no price data) select · disabled
Form field · label + control + help / error
Price paid (each)
Used to compute your cost basis and P&L.
Quantity
Quantity must be at least 1.
Trade notes
Visible to trade partners only.
Tag input · Enter or comma commits, Backspace removes
Standard ✕
Budget ✕
Trade bait ✕
Add tag…
Card search · combobox with results open
Kiri, Mist Courser
Origins · 042Mythic$42.00
Origins · 042Mythic$42.00
Kiri's Lantern
Origins · 118Uncommon$0.85
Origins · 118Uncommon$0.85
Mist Valley Kirin
Empire · 007Rare$6.40
Empire · 007Rare$6.40
No cards found. Try another game.
Search overlay · the command layer (nav well or ⌘K)
Date picker & range slider
July 2026
SuMoTuWeThFrSa
2829301234
567891011
12131415161718
19202122232425
2627282930311
Price range$10 – $48
Auth card
Price alert
Alert me when Kiri, Mist Courser goes
above
Chips & Badges
Chips filter and tag; badges mark rarity and status; the freshness chip is mandatory on every pricing surface.
Featuredchip
Foils only ✕chip · removable filter
Mythic only ✕chip · selected
Mythicbadge · default Tsuchi
Instantbadge · accent-alt
Lightly Playedcondition chip
Prices updated 2h agofreshness-chip
Rarity ladder · six game-agnostic tiers
Commonrarity-common
Uncommonrarity-uncommon
Rarerarity-rare
Epicrarity-epic
Mythicrarity-mythic
Secretrarity-secret
Secretrarity-secret · prismatic
Magic: The GatheringCommonUncommonRareMythic Rare
PokémonCommonUncommonRareUltra RareIllustration RareHyper Rare
Yu-Gi-Oh!CommonRareSuper RareUltra RareSecret Rare
WarlordCommonUncommonRare
Sorcery: Contested RealmOrdinaryExceptionalEliteUnique
Rarity badge · standard wash + dense dot variant
badge-rarity-* · standard
Common
Uncommon
Rare
Epic
Mythic
Secret
Secret
badge-dot · tables, lists, tile meta
Common
Uncommon
Rare
Epic
Mythic
Secret
Cards
Panel cards, content cards with the corner-notch action, feature cards, and the card-image frame.
Panel cards
Kiri, Mist Courser
Legendary mount. When Kiri attacks, draw a card for each ally that shares its clan.
Kiri, Mist Courser
Border strengthens to border-strong with a 2px lift. No shadow.
card-frame · 63:88 image placeholder
Card grid tile · the browse/search workhorse (hover reveals quick-add)
Kiri, Mist Courser
Origins · 042
Mythic
$42.004.8%
Kiri, Mist Courser
Origins · 042
Mythic
$42.004.8%
Paper Crane Scout
Origins · 101
Common
$0.252.1%
Bronze Familiar
Empire · 033
Rare
$3.100.0%
Content cards · hover any card: the notch arrow expands into Read More
Featured
10 Legendary Mounts Worth Chasing in the Origins Set
Tired of set reviews that assume you have a full playset budget? We cut through the noise with 10 cards organized by deck archetype.
Best Budget Decks for the Standard Format
Whether you're new to ranked play or returning after a break, the best starting deck depends on your playstyle.
Best Budget Decks for the Standard Format
Whether you're new to ranked play or returning after a break, the best starting deck depends on your playstyle.
7 Best Sealed Products to Collect in 2026
Feature cards · illustration well + serif caption
Azure Vault
Binder Nine
Origins Vault
Private collection vault
Track every card you own, securely, on your terms.
trade_stream.log
[200] 09:14:22 GET /api/v1/price_check
[INFO] 09:14:23 Trade node_04 settled
Trade audit logging
Complete history for every trade and price change.
Sarah Chen
Club Admin
Club Admin
Guest User
Visitor
Visitor
Advanced access control
Role-based permissions for clubs and teams.
Editorial
Article typography and the sidebar widget set.
Immersive article header · card-featured at page scale
News · Market
The One Ring Keeps Climbing: What Its Third Rally Tells Us
Three spikes in twelve months is not hype, it is a supply story. We chart every reprint rumor against the price line.
Article layout · prose + sidebar widgets
Why Sealed Play is the New Gold Standard in 2026
The Shift from Netdecking to Sealed-First
The netdeck movement promised consistency and speed. But 2026 has revealed the true cost of copying lists without understanding them: stale metas, brittle play patterns, and games that feel solved before they begin.
The Origins II limited environment (which released yesterday) confirmed what judges have been signaling for months: sealed-first formats reward genuine card evaluation over memorized answers.
Three foundational principles
- Card evaluation from the ground up. Every pick gets judged in context, not against a tier list.
- Synergy as a design requirement. The pool you open enforces creative deckbuilding naturally.
- Flexible strategy without meta gaps. Whatever you open, your fundamentals carry the game.
Related articles
Draft Archetypes in Origins II
Sealed Pool Evaluation 101
Building Decks on a Budget
Judging at Your First Event
Track your collection with ease.
Scan, value, and organize every card you own.
Prose extras · blockquote, code, figure
“Sealed taught me more about card evaluation in one weekend than a year of netdecking ever did.”
Deck imports accept plain text lists, one card per line: 4 Kiri, Mist Courser. The API returns each card's variants with price history:
GET /api/v1/cards?q=kiri&game=magic
→ { "price": 14.91, "priceChange30d": 6.2, "priceHistory": [...] }
→ { "price": 14.91, "priceChange30d": 6.2, "priceHistory": [...] }
Accordion · FAQs, rules text, collapsible filters
How often do prices update?
Prices sync nightly from our market data provider. Each pricing surface shows a freshness chip with the exact time of the last update.
Which games are supported?
Can I import my collection from a CSV?
Marketing
Public-site compositions: hero, section headers, pricing, and the closing CTA band.
Hero
Portfolio tracking
Know what your collection is worth
Track prices across Magic, Pokémon, Yu-Gi-Oh!, and Sorcery. Add cards in seconds, follow every swing, and trade with confidence.
Section header
Price tracking
Every card. Every printing. Every day.
Nightly market data across four games, with condition-level pricing on every variant.
Pricing · the featured tier carries the only primary button
Collector
For casual collections.
$0 / month
- 100 cards tracked
- Daily price updates
- 1 price alert
Most popular
Trader
For serious collectors.
$6 / month
- Unlimited cards
- Portfolio P&L and cost basis
- 20 price alerts
- CSV import
Dealer
For stores and power traders.
$15 / month
- Everything in Trader
- Bulk tools and exports
- Unlimited alerts
CTA band · closes public pages
Start tracking your collection tonight.
Free for your first 100 cards. No credit card required.
Community & Trading
Trader profiles, two-sided trade offers, fulfillment timelines, ratings, and comments.
Profile header
AD
Amara Diallo
4.9· 128 trades
Trade offer · Accept is the only primary button
You give
Kiri, Mist CourserLP$42.00
Paper Crane Scout ×4NM$1.00
Total$43.00
⇄
You get
Bronze FamiliarNM · Foil$38.50
Mist Valley KirinLP$6.40
Total$44.90
Awaiting your response
$1.90 in your favor
Trade timeline · fulfillment status
Offer accepted
July 2, 2026 · 4:12 PM
Both sides confirmed
July 3, 2026 · 9:40 AM
Cards shipped
Tracking added · July 5
Trade settled
Both parties confirm receipt
Comments · reply indented behind a hairline
Data & Tables
Tables, holdings, stat tiles, the price matrix, and position panels. Money is always tabular-numeral Geist.
Holdings table · filter bar, sortable headers, P&L, sparklines, row actions
| Card | Rarity | Cond. | Qty | Cost | Price ▼ | P&L | Trend | |
|---|---|---|---|---|---|---|---|---|
| Kiri, Mist Courser Origins · 042 |
Mythic | LP | 2 | $61.00 | $84.00 | +$23.00 | ||
| Paper Crane Scout Origins · 101 |
Common | NM | 12 | $4.80 | $3.00 | −$1.80 | ||
| Bronze Familiar Empire · 033 |
Rare | NM · Foil | 1 | $3.00 | $3.10 | +$0.10 |
Holdings row · mobile collapse below 640px
Kiri, Mist Courser
Origins · 042 · LP × 2
$84.00
+$23.00
Bulk selection · checkbox column + floating action bar
| Card | Qty | Price | |
|---|---|---|---|
| Kiri, Mist Courser | 2 | $84.00 | |
| Paper Crane Scout | 12 | $3.00 | |
| Bronze Familiar | 1 | $3.10 |
bulk-bar · floats bottom-center at the toast layer; Esc clears the selection
Filter panel · browse-page facets
Filters · 3 ✕
mobile trigger · opens the panel as a drawer
Sort control · for grids, where tables use sortable headers
Sort: Price sort-control · descending
Sort: Name sort-control · ascending
Stat tiles · portfolio metrics
$4,281
Portfolio value
3.2% today
$3,644
Cost basis
+$637
Unrealized P&L
17.5%
Kiri, Mist Courser
Top mover
12.4% · 7D
Price matrix · condition × printing · one language at a time (English default; others behind a language select)
| Condition | Normal | Foil |
|---|---|---|
| Near Mint | $42.00 | $96.50 |
| Lightly Played | $36.80 | $81.20 |
| Moderately Played | $29.40 | $64.00 |
Position panel · your holding on a card page
Quantity2 × LP
Avg cost$30.50
Market value$84.00
Unrealized P&L+$23.00 · 37.7%
Charts & Portfolio
Lightweight Charts theme, rendered here as static token-styled mocks. Area/line only; bronze for neutral series, moss/crimson strictly for direction.
Chart baseline · day-one state (solid line at today's value, terminal dot)
NM · Normal
$1.25
Portfolio hero · dashboard lead
Portfolio value
$4,281.09 3.2%
Cards
1,204
Cost basis
$3,644
Best 7d mover
Kiri, Mist Courser
Price chart · single card
Kiri, Mist Courser · Lightly Played
$14.91 6.2%
Avg · 30d
$14.46
Low · 30d
$13.94
High · 30d
$14.91
Comparison chart · two series max, slate joins bronze
Kiri, Mist Courser $42.00
Mist Valley Kirin $6.40
Allocation bar · portfolio distribution
Magic 46%
Pokémon 28%
Yu-Gi-Oh! 18%
Sorcery 8%
Sparklines · inline trend for tables and card rows
Kiri, Mist Courser$42.004.8%
Paper Crane Scout$0.252.1%
Bronze Familiar$3.100.0%
Feedback
Alerts (semantic wash), toast, tooltip, skeleton loading, and empty states.
Banner · page-level system strip, full-width under the nav
Progress bar · determinate loads like imports and syncs
Importing cards340 / 1,204
Syncing prices82%
Alerts & toast
New set “Origins II” previews begin next week.
✓ Deck saved to your collection.
This deck is 2 cards under the 60-card minimum.
✗ Card could not be added: collection limit reached.
Deck exported · View file
Tooltip
Prices refresh nightly from JustTCG
Skeleton loading · paper shimmer, never gray
Empty state
No cards in your portfolio yet
Search for any card across Magic, Pokémon, Yu-Gi-Oh!, and Sorcery to start tracking its value.
Overlays
Modal for decisions; drawer for flows. Both float on surface-raised behind the warm scrim.
Modal
Delete this deck?
“Mist Riders v3” will be removed from your collection. This can't be undone.
Popover · card preview on a dotted-underline trigger
Top mover this week:
Kiri, Mist Courser
, up 12.4% since Monday.
Kiri, Mist Courser
Origins · 042 · Mythic
$42.004.8%
Drawer · add-card flow
Add to portfolio
Card
Kiri, Mist Courser
Origins · 042Mythic
Origins · 042Mythic
Language
English
Condition
Printing
Quantity
2Price paid (each)
Date acquired
No market price for this version yet. It counts in your collection and stays out of your totals until pricing appears.
Settings & Pages
Settings sections, the API key row, the danger zone, error page templates, and the onboarding checklist.
Settings billing card · plan + live usage meters (free tier)
Collector · Free
Portfolio4 / 100
Active alerts1 / 1
Settings section · title left, card right, Save bottom-right
Developer access
Use the API to read your portfolio programmatically.
API key
tcg_••••••••••••4411
Server-side only. Never expose this key in client code.
Webhook URL
Danger zone · always the last settings section
Delete account
Your portfolio, alerts, and trade history are removed permanently. This cannot be undone.
Error page · 404 and 500 share the template
Error 404
This card isn't in any set.
The page you're after was traded away, renamed, or never printed.
Onboarding checklist · dismissable once complete
Get set up 2 of 4
Create your account
Add your first card
Set a price alert›
Import a collection›
Do's and Don'ts
Do
- Set every heading in Newsreader and every functional string in Geist.
- Build depth from surface steps and hairline borders; shadows for modals, drawers, menus, and toasts only.
- Keep the paper-and-lacquer warmth: warm neutrals, brown-tinted shadows, earthy semantics.
- Use label (10px, 0.04em, uppercase) for all micro-text: table headers, badges, eyebrows.
- Give card grids catalog-like breathing room: 24px padding, 16px+ gutters.
- Show money in tabular numerals; color gains moss and losses crimson, and pair every price with a freshness chip.
Don't
- No blue-purple gradients, glassmorphism, neon glows, or generic-SaaS styling.
- No cold pure grays or stark #FFFFFF; every neutral carries the warm cast.
- No heavy shadow stacks or saturated accents; the system is quiet and flat.
- No kitsch-Japanese ornament: no cherry blossoms, torii gates, brush-script fonts.
- Never headings in Geist, body in Newsreader, or a third typeface.
- Don't over-round: cards cap at md (12px), buttons at sm (8px); pills only for chips, secondary buttons, and segmented controls.