Contact

Limited Grades

A responsive Magic: The Gathering draft companion that makes card performance data easier to use.

Visit Limited Grades ↗ (opens in a new tab)

Limited Grades is an open-source Magic: The Gathering draft assistant built around 17Lands data. As an avid drafter on Magic Arena, I was interested in making that data easier to use during a draft. I reached out to its developer to offer help with the UI, and worked with them on the design shown here.

My focus was making card performance easier to scan during a draft, without hiding the underlying statistics from players who want more detail. The resulting interface uses clear rankings, filtering, and responsive layouts to turn dense game data into a practical set guide.

The product

The set guide groups cards by grade and colour. Players can narrow the rankings with filters, search for a card by name, or open a card to compare its performance across decks and inspect the underlying 17Lands statistics. On mobile, the colour groups stack vertically and additional filters expand when needed.

Limited Grades — Reality Fracture product views
Light mode — Desktop rankings — cards grouped by grade and colour
Light mode — Desktop rankings — cards grouped by grade and colour
Dark mode — Desktop rankings — cards grouped by grade and colour
Dark mode — Desktop rankings — cards grouped by grade and colour
Light mode — Rarity filtering — comparing only rare cards
Light mode — Rarity filtering — comparing only rare cards
Dark mode — Rarity filtering — comparing only rare cards
Dark mode — Rarity filtering — comparing only rare cards
Light mode — Card details — deck analysis alongside the full 17Lands statistics
Light mode — Card details — deck analysis alongside the full 17Lands statistics
Dark mode — Card details — deck analysis alongside the full 17Lands statistics
Dark mode — Card details — deck analysis alongside the full 17Lands statistics
Light mode — Card search — matching names without scanning the whole set
Light mode — Card search — matching names without scanning the whole set
Dark mode — Card search — matching names without scanning the whole set
Dark mode — Card search — matching names without scanning the whole set
Light mode — Mobile rankings — colour groups stack within each grade
Light mode — Mobile rankings — colour groups stack within each grade
Dark mode — Mobile rankings — colour groups stack within each grade
Dark mode — Mobile rankings — colour groups stack within each grade
Light mode — Mobile filters — rarity, type, mana value, and search expand when needed
Light mode — Mobile filters — rarity, type, mana value, and search expand when needed
Dark mode — Mobile filters — rarity, type, mana value, and search expand when needed
Dark mode — Mobile filters — rarity, type, mana value, and search expand when needed

next→

Building a site in 2026

Building a site in 2026

Rebuilding this portfolio to explore newer CSS properties and browser APIs—what I tried and how I found working with them.

  • css
  • code
  • frontend
  • nuxt