Usage rules
1Ball is the screen’s one coloured action (FAB or CTA), plus the block figure and the level accent. Every control state is ink or grey; the focus ring is ink.2At most one Block per hub. The tab bar and scope tabs never carry brand colour.3Every state has a non-colour second cue (weight, fill, glyph, chevron), and every colour code has a glyph or a label (WCAG 1.4.1).4Inline links are ink and underlined.5At most seven hue families per viewport. Brand is never a status; a status is never a category.6Text is at least 4.5:1 on its real ground, and 6.5:1 at 14 and below. A control boundary, a switch track and a state-bearing fill are at least 3:1 (WCAG 1.4.11).
Roles and use
Canvas ($background)#FFFFFF light, #0F1211 dark. Page ground; cards and sheets use it too.Surface ($card)#FFFFFF light, #1A201B dark. Dark card and sheet.Ink ($text)#0D100E light, #DFE4DC dark. Text, controls, focus ring; the label on ball in both themes.Secondary ($textSecondary)#4F5851 light, #A9B3AB dark. Meta, labels from 13 up, inactive tab-bar items.Tertiary ($textTertiary)#626C64 light, #8F968F dark. Text at 16 and up (placeholder), chevron, pencil and lock glyphs, non-essential strings.gray100#F2F2F2 light, #363E38 dark. Tonal buttons, search and track fills, skeleton, empty-state disc, avatar ground.Cell hairline#E5E5E5 light, white 9% dark. Single-line cell groups.Edge hairline#D4D4D4 light, white 14% dark. Sticky edges, tab rows.Control boundary ($borderControl)#8E8E93 light, white 40% dark. Input, textarea and picker-field boundary; Switch off track.Ball#D6F04A light, #D6F04A dark. The one action (FAB, CTA, primary button), block figure, level accent.Brand-weak#EFF9B7 light, #3A4220 dark. 모집 중 Tag tint (ball at 40% over white).Block#15181A light, #2A302B dark. The ink block.Brand mark#006D37 light, #006D37 dark. The mark and the grass court tile only.Success fill ($success)#00695C light, #00796A dark. Paid, confirmed, win: dot, glyph and the solid Tag in light (white text on it).Success text ($successText)#014B40 light, #75D1C6 dark. Success text.Success weak#CBEBE5 light, #234340 dark. Success weak fill.Warning fill ($warningFill)#F5B301 light, #E2B13C dark. Deadline, unpaid, caution (with ink text).Warning text ($warningText)#6B4A00 light, #E1B75C dark. Warning text.Danger ($error)#A3261F light, #FA9B94 dark. Cancelled, overdue, live, destructive: fills, borders and text, one red (white text on it in light, ink in dark).Error text ($errorText)#A3261F light, #FA9B94 dark. The same red as a text role: field error, asterisk, danger counter, danger CTA helper.Info#4B0082 light, #C9B2F2 dark. Informational only.Info weak#E8DCFB light, #40365F dark. Informational weak fill.Court hard ($courtHard)#089AC3 light, #67D3FC dark. Court dot and tile: a category code; the venue name is always present.Court clay ($courtClay)#8D3D00 light, #DA875A dark. Court dot and tile.Court grass ($courtGrass)#83971F light, #BBD068 dark. Court dot and tile.Backdropink 40% light, black 60% dark. Behind a sheet or dialog.Photo controlsink 60% light, ink 60% dark. MediaBand overlay: circle ink 50% (70% under Reduce Transparency); top scrim ink 35% to 0 over the first 100.Inverse surface#0D100E light, #DFE4DC dark. Toast, coachmark, tooltip: ink in light; in dark it flips to a light surface, as Material’s does.On inverse#FFFFFF light, #0D100E dark. Text and glyphs on the inverse surface: white in light, ink in dark; a text action on it is ball in light, ink in dark.
Contrast, computed from the swatches
Secondary on white7.38:1Tertiary on white, on gray1005.46:1, 4.87:1Error text on white, on gray1007.36:1, 6.57:1Control boundary on white3.26:1White on the danger fill, on the success solid (Tag fills, light)7.36:1, 6.61:1Ink on ball, ball on white14.96:1, 1.28:1 (a ball control relies on its label)Ball on the block13.95:1Secondary on the dark canvas8.72:1Tertiary on the dark card5.47:1Text on the inverse surface, light and dark19.13:1, 14.82:1The dark inverse surface against the dark canvas14.59:1