Brand
The MKE Mahjong Brand
One sentence guides everything MKE Mahjong makes: the warmth of your grandmother’s card table, with the polish of a modern studio. The palette comes from the game’s own materials (ivory tile faces, bamboo jade, deco raspberry), and the type nods to the 1920s, when America first fell for mahjong.
Palette
Colors from the tiles themselves
Ivory dominates, jade leads, rose punctuates. Roughly 60/30/10, and rose stays scarce so it always lands.
--ivory · #FAF7F1
Dominant surface: the tile face
--jade · #2E6B4F
Primary: deep bamboo jade
--jade-soft · #DDEAE2
Tinted cards & surfaces
--rose · #AC3A6C
Accent: deco raspberry, scarce by design
--rose-soft · #F7E4ED
Subtle highlight surfaces
--ink · #1E2A24
Text: green-cast near-black
Typography
A softly deco pairing
Display: Fraunces
Learn the game.
Fraunces is warm and softly deco. Its old-style curves echo the 1920s era when mahjong swept America. Used for headings, prices, and the logo’s M. Semibold weight, slightly tightened tracking.
Body: Instrument Sans
Clear, friendly, and easy to read at the table.
Instrument Sans carries all running text: plainspoken and modern, so the display face keeps its charm without the page feeling costumed. Generous line-height, pretty text-wrapping.
Logo
A tile bearing an M
The mark is a rounded mahjong tile with a Fraunces M and a rose dot, a nod to the dot suit. Flat, palette-native, and legible at any size.
The tile mark, at display, nav, and favicon sizes
The full lockup and its compact variant
Voice
How MKE Mahjong sounds
First person, always
Julie speaks for herself: “I bring the tiles,” never “our instructors provide materials.” There is no corporate we.
Warm and plainspoken
Short sentences, real words, no jargon without a definition nearby. Write like a note to a friend, not a brochure.
Zero pressure
No urgency tactics, no countdown timers, no “book now before it’s gone.” An invitation, never a pitch.
Name the game correctly
“Mah Jongg” (two words) when citing the National Mah Jongg League or its card; “mahjong” (one word, lowercase) generically.
Motion
Tiles being dealt
Every animation follows one metaphor: a tile being dealt: a brief, confident movement that settles into place. Nothing bounces, nothing loops, nothing floats.
- · Brief: 160ms for micro-interactions, 240ms for components, 480ms for scenes, never longer
- · Settled: ease-out curves (cubic-bezier 0.22, 1, 0.36, 1): fast start, gentle landing, like a tile placed on felt
- · Respectful: prefers-reduced-motion disables it all; content is complete without a single animation