Tokens
One cobalt ink draws everything on cream paper. A few spot colors are printed underneath, slightly off-register.
Every token lives in @plop-ui/tokens and ships twice from one source: as CSS variables (--plop-*, in @plop-ui/tokens/tokens.css, already included in @plop-ui/react/styles.css) and as a typed object.
import { color, status, surfaces } from "@plop-ui/tokens";
color.ink; // "#2848D8"
status.critical; // "tomato"
Color
| Token | Value | |
|---|---|---|
--plop-ink | #2848D8 | |
--plop-ink-text | #1C2E8C | |
--plop-ink-soft | #3B4A92 | |
--plop-on-ink | #FFF8E7 | |
--plop-paper | #FFFDF7 | |
--plop-paper-back | #E6DCC2 | |
--plop-sheet | #FBF8F0 | |
--plop-track | #EDE4CC | |
--plop-tomato | #D2381E | |
--plop-mustard | #F6C445 | |
--plop-bubblegum | #F6A9B8 | |
--plop-periwinkle | #A9B6EE | |
--plop-mint | #9FD8B8 | |
--plop-leaf | #2F8A57 | |
--plop-tomato-text | #A1301A | |
--plop-ochre | #B7791F | |
--plop-berry | #B83A68 | |
--plop-placeholder | #5D69A6 |
Contrast roles
Like Material's "on" colors, every fill has a paired text color that passes WCAG AA. The bright ink draws lines; the deeper text ink carries words on color.
| Fill | Text role | Contrast |
|---|---|---|
--plop-fill-ink | --plop-on-fill-ink (#FFF8E7) | 6.6:1 |
--plop-fill-tomato | --plop-on-fill-tomato (#FFF8E7) | 4.6:1 |
--plop-fill-periwinkle | --plop-on-fill-periwinkle (#1C2E8C) | 5.8:1 |
--plop-fill-bubblegum | --plop-on-fill-bubblegum (#1C2E8C) | 6.2:1 |
--plop-fill-mint | --plop-on-fill-mint (#1C2E8C) | 7.1:1 |
--plop-fill-mustard | --plop-on-fill-mustard (#1C2E8C) | 7.1:1 |
--plop-fill-plain | --plop-on-fill-plain (#2848D8) | 6.9:1 |
For colors set at runtime, such as a client's brand color, use onColor(bg). It measures the fill and returns deep ink or cream, whichever has the higher contrast:
Status
Every status also carries a text label, never color alone.
critical | tomato |
dispatched | ink |
en-route | mustard |
resolved | mint |
unassigned | periwinkle |
Type
| Token | Value | Use |
|---|---|---|
--plop-font-logo | Sketchpop Black Italic (900) | The wordmark only |
--plop-font-letter | Sketchpop Bold Italic (700); Black Italic for headings | Headings, buttons, tags; uppercase, calt on |
--plop-font-body | Sketchpop Regular upright (400) | Body, hints, inputs; sentence case |
Type scale (px): 13, 15, 17, 19, 24, 32, 44, 72. Body defaults to 19.
Shape and motion
| Token | Value |
|---|---|
--plop-radius-sticker | 26px 20px 28px 18px / 20px 28px 18px 26px (irregular on purpose) |
--plop-stroke | 3px default, 2.5px small, 7px illustrations |
--plop-shadow-hatch | 45° ink lines, 2.2px on / 3.4px off, offset 5px 7px |
--plop-ease-spring | cubic-bezier(.28, 1.75, .5, 1), 500ms |
--plop-ease-squish | cubic-bezier(.2, .9, .3, 1), 80ms |
--plop-boil-interval | 140ms between the 3 wobble filters |