Design system

The room,
as an interface

Deep felt greens and blacks. Brass lamp glow. Chalk blue for everything you can touch. Ball colors for skill levels. One system from a phone screen to a Vegas jumbotron — this page shows the tokens and core components.

01 · Color

Felt, brass, chalk, cream

Page--ink-900

Card--ink-card

Hairline--ink-line

Felt 900--felt-900

Felt 700--felt-700

Felt 500--felt-500

Felt 300--felt-300

Brass 400--brass-400

Brass 300--brass-300

Chalk 500--chalk-500

Chalk 300--chalk-300

Cream 100--cream-100

Cream 300--cream-300

Cream 500--cream-500

All text/background pairs used in the UI meet WCAG 2.1 AA contrast on their surfaces.

02 · Type

Barlow Condensed & Barlow

Rack 'em

Division standings, week 13

Body large — Barlow 400. The reward for showing up on a Tuesday is a team that noticed you weren't there last week.

Caption — Barlow 400/500 at small sizes for metadata, hints, and table headers.

Tabular numerals for scores: 52 · 48 · 45

03 · Skill levels

The ball is the badge

Skill levels render as their pool ball — SL5 is the 5-ball. Instantly legible to anyone who's ever racked a game.

04 · Actions

Buttons, chips, tags

Default 3 spots left Forming now

05 · Surfaces

Cards & felt

Standard card

Ink surface, hairline border, soft depth.

Felt card

The table itself — for member cards and hero moments.

Example art direction: hands bridging for a long rail shot

06 · Forms

Labeled, obvious, forgiving

Real labels on every field — no placeholder-only forms, no color-only required marks.

Night

07 · Motion

Purposeful, reduced-motion safe

One reveal pattern (fade-rise on scroll), micro-transitions under 200ms on interactive elements, and everything honors prefers-reduced-motion. No parallax, no autoplaying carousels — motion is seasoning, not structure.

The room,as an interface