Little Sparrow

Field Guide · locked

Design system

The tokens below are the single source of truth (defined insrc/app/globals.css). Change a value there and the whole site follows. Values shown as light / night.

Palette — light (default)

bg
--bg
#FCFBFA / #161E33
card
--card
#FFFFFF / #1D2740
ink
--ink
#292427 / #EAE4D4
muted
--muted
#665F60 / #9AA3BC
primary
--blue
#292427 / #93A8F5
red
--red
#D34332 / #FF7A50
green
--green
#2F7D4F / #6FBF8E
gold
--gold
#C98A2D / #E0B25E
tileface
--tileface
#FFFFFF / #F2E9D2

Palette — night

bg
--bg
#FCFBFA / #161E33
card
--card
#FFFFFF / #1D2740
ink
--ink
#292427 / #EAE4D4
muted
--muted
#665F60 / #9AA3BC
primary
--blue
#292427 / #93A8F5
red
--red
#D34332 / #FF7A50
green
--green
#2F7D4F / #6FBF8E
gold
--gold
#C98A2D / #E0B25E
tileface
--tileface
#FFFFFF / #F2E9D2

Body text on night and muted text — headlines stay cobalt, eyebrows vermilion. Tiles use the matching Luxe light or dark artwork.

The card above is literally rendered with the .night class on a wrapper — the same mechanism as the site-wide toggle.

Typography

Eyebrow · 麻雀入門

13px, bold, 0.22em tracking, uppercase, red

Headline

900 weight, uppercase, tight tracking, primary tone — hero uses clamp(46–88px)

Section heading

24–34px, same treatment

Body text — everything you need to begin, from your first draw to your first winning hand. Muted variant for asides.

15–17px system sans, 1.5 line height

中 發 東 五萬

Tile glyphs: Songti/serif, authentic ink colors

Patterns

Arrow link

Read the guide →

Index list

  1. 01Tiles
  2. 02Setup
  3. 03Play

Badges

Dragon set +1Won by self-draw★★★ 3 faan

Token → class map

  • bg-bgpage background
  • bg-card / border-linecards, hairline rules
  • text-ink / text-mutedbody / secondary text
  • text-blueheadlines, links, primary
  • text-redeyebrows, instructional arrows, plus icons, alerts
  • text-green / text-goldtile ink / faan stars
  • bg-tilefacetile faces

Tile system

Forty-two canonical tile definitions expand through copy counts into a complete 144-tile Hong Kong Old Style set. Artwork follows the site theme automatically unless a diagram forces a specific theme.

Size scale

  • xs
  • sm
  • md
  • lg
  • xl

Theme modes

theme="auto"
theme="light"
theme="dark"

Canonical faces

Circles

Bamboo

Characters

Winds

Dragons

Flowers

Seasons

Ordered row

Hand notation

  • 123m
  • ESWN RGB
  • 123m 456b 789t EEE RR

All 144 physical tiles

Canonical faces are repeated according to their physical copy counts.