Design system

Colour

surface-sunken#0b0f15
surface-base#10151d
surface-panel#18202b
surface-raised#222d3b
surface-border#36455b
surface-border-strong#51637f
text-primary#efe6d2
text-muted#b9ad95
text-subtle#8f8573
text-inverse#1a1206
accent-base#d9a441
accent-hover#e6b85c
accent-pressed#b98a32
accent-text#1a1206
danger-base#d8604a
danger-hover#e27762
danger-pressed#c55a44
danger-text#1a0703
success-base#78b062
success-text#0b1407
info-base#5bb3b0
info-text#061312
focus#f4d27a
overlayrgba(5, 8, 12, 0.72)
seat-1#e35d4b
seat-2#4d93e3
seat-3#5cb86c
seat-4#e8c547
seat-5#a57ad9
seat-6#eb8c3c
seat-7#41bdb4
seat-8#dd70ad

Type

Drafting Table: display face

Body face. The quick brown fox jumps over the lazy dog, 0123456789.

xs 0.75rem: Seat 3 drew two cards

sm 0.875rem: Seat 3 drew two cards

md 1rem: Seat 3 drew two cards

lg 1.25rem: Seat 3 drew two cards

xl 1.5625rem: Seat 3 drew two cards

2xl 1.9531rem: Seat 3 drew two cards

3xl 2.4414rem: Seat 3 drew two cards

Space and radius

space-1 0.25rem
space-2 0.5rem
space-3 0.75rem
space-4 1rem
space-5 1.5rem
space-6 2rem
space-7 3rem
space-8 4rem
radius-sm 4px
radius-md 8px
radius-lg 12px
radius-pill 999px

Buttons

Panel, default

The side panel, dialogs and the inspector sit on this surface.

Panel, raised

Lobby cards and popovers sit one step above the page.

Panel, sunken

Wells inside a panel, such as the action log.