Magic Circle party game interface

Brand & UI/UX · 2023

Magic Circle

Brand identity and UI/UX for app-based party games.

Roles
Brand Specialist, UX Designer
Skills
Brand Identity, UI/UX Design, Graphic Design
Client
Magic Circle
Scale
Magic Garden, 2,000,000 players in 2026

Goal & Strategy

A design process that takes a party game from wireframe to world.

Goal

Establish a consistent brand for a games platform with a lot of moving parts.

Strategy

A robust color set with consistent saturation and a universally recognized set of characters.

The Project

Magic Circle is a game studio building app-based party games—the kind you pull up mid-party and play with everyone in the room. I ran the graphic design process that established the studio’s foundational brand aesthetic and developed the UI/UX treatment for its core user stories.

The platform was built to host many different games, so the brand had to stretch without fraying. The palette solves that with a large set of colors held at a consistent saturation range: every component can have its own hue and still read as the same product. Emoji do the same job for characters. They are universally recognized and universally loved, and they make a party game feel instantly friendly without a bespoke illustration style to maintain.

Over a two-month engagement I delivered the logo, the palette, the type system, the UI kit, and the MVP user story shown below, from choosing a game to learning the rules to joining a room. The platform launched on that foundation, and Magic Circle’s Magic Garden went on to reach 2,000,000 players in 2026.

Graphic Design

Fonts

  • Bogart Semibold type specimen
  • Greycliff CF Demibold type specimen

Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji Twemoji avatar emoji

Colors

A full playful spectrum drawn from the exploration—every game gets its own hue, unified by the ink and white that carry the UI.

  • #EB2390
  • #F69872
  • #EF93AC
  • #F07490
  • #DD4459
  • #DC2786
  • #9B2D8C
  • #9B5CB5
  • #7F4196
  • #65328F
  • #D7215E
  • #2FABDF
  • #1A77BC
  • #0E69B2
  • #234199
  • #38BBCF
  • #63C19D
  • #58C1BA
  • #43BEBB
  • #21A79C
  • #D8DD39
  • #8DC347
  • #6BBB4A
  • #61AB4C
  • #1F914B
  • #E9E665
  • #FEF035
  • #F6D44F
  • #FAAE4C
  • #EF5934
  • #43B872
  • #148F7D
  • #EA202C
  • #CE242D
  • #BE2132
  • #1C1C1C
  • #A3A3A3
  • #FFFFFF

MVP User Story

The core user story carried through end to end—choosing a game, learning to play, and joining a room.

  • Magic Circle MVP user story screen 1
  • Magic Circle MVP user story screen 2
  • Magic Circle MVP user story screen 3
  • Magic Circle MVP user story screen 4
  • Magic Circle MVP user story screen 5
  • Magic Circle MVP user story screen 6
  • Magic Circle MVP user story screen 7
  • Magic Circle MVP user story screen 8
  • Magic Circle MVP user story screen 9
  • Magic Circle MVP user story screen 10
  • Magic Circle MVP user story screen 11
  • Magic Circle MVP user story screen 12
  • Magic Circle MVP user story screen 13
  • Magic Circle MVP user story screen 14
  • Magic Circle MVP user story screen 16

The Final Product

Graphic design assets for Magic Circle’s final games, including Magic Garden, were created using my brand guidelines by other members of the company.

  • Magic Circle final game selection screen
  • Magic Garden key art
  • Magic Circle character burst art
  • Magic Garden store screenshot - collect and grow
  • Magic Garden store screenshot - sell giant and mutated crops
  • Magic Garden store screenshot - hatch and feed pets
  • Magic Garden store screenshot - visit and show off online
  • Magic Garden store screenshot - plants continue growing