Tokens

Semantic colors, six arcade accents, hard shadows, shape, and motion tokens.

Theming

Import @sketchpad/tokens/tokens.css once. System dark mode works automatically via prefers-color-scheme.

import '@sketchpad/tokens/tokens.css';
import { getThemeInitScript } from '@sketchpad/tokens';
import { ThemeProvider, ThemeToggle } from 'sketchpad-ui';

// In root layout <head> (before React):
// <script dangerouslySetInnerHTML={{ __html: getThemeInitScript() }} />

export default function App({ children }) {
  return (
    <ThemeProvider defaultTheme="system" defaultColor="blue">
      <ThemeToggle />
      {children}
    </ThemeProvider>
  );
}

Set defaultColor to blue, yellow, pink, green, orange, or purple. A validated customAccent accepts any six-digit hex color and derives a readable foreground.

Contrast

Light text on canvas: 16.7:1 (WCAG AA pass)

Dark text on canvas: 17.9:1 (WCAG AA pass)

Accent foregrounds are selected automatically; muted colors are reserved for secondary text, placeholders, and disabled states.

Colors

canvas

#FFF6E5

#101014

surface

#FFFFFF

#1B1B22

surfaceRaised

#FFFDF7

#24242E

text

#171717

#FFF8E7

textMuted

#5B5B66

#B8B8C4

border

#171717

#F6F1E7

hardShadow

#171717

#000000

disabled

#CAC7BE

#54545F

backdrop

rgba(23, 23, 23, 0.68)

rgba(0, 0, 0, 0.78)

focus

#3D7EFF

#FFD23F

success

#5CD65C

warning

#FFD23F

danger

#FF5A5F

#FF7478

info

#3D7EFF

#6B9BFF

paper

#FFF6E5

#101014

paperAlt

#FFFFFF

#1B1B22

paperBright

#FFFDF7

#24242E

ink

#171717

#FFF8E7

inkSoft

#5B5B66

#B8B8C4

pencil

#77737E

#8F8F9D

accentYellow

#FFD23F

accentBlue

#3D7EFF

#6B9BFF

accentRed

#FF5A5F

#FF7478

accentGreen

#5CD65C

#72E072

accentLavender

#9B6DFF

#B291FF

ACCENT PRESETS

blue#3D7EFF

yellow#FFD23F

pink#FF4D9D

green#5CD65C

orange#FF8A3D

purple#9B6DFF

CSS variables

All semantic tokens are custom properties, e.g. var(--sk-colors-surface).

canvasvar(--sk-colors-canvas)

surfacevar(--sk-colors-surface)

surfaceRaisedvar(--sk-colors-surfaceRaised)

textvar(--sk-colors-text)

textMutedvar(--sk-colors-textMuted)

bordervar(--sk-colors-border)

hardShadowvar(--sk-colors-hardShadow)

disabledvar(--sk-colors-disabled)

backdropvar(--sk-colors-backdrop)

focusvar(--sk-colors-focus)

successvar(--sk-colors-success)

warningvar(--sk-colors-warning)

dangervar(--sk-colors-danger)

infovar(--sk-colors-info)

papervar(--sk-colors-paper)

paperAltvar(--sk-colors-paperAlt)

paperBrightvar(--sk-colors-paperBright)

inkvar(--sk-colors-ink)

inkSoftvar(--sk-colors-inkSoft)

pencilvar(--sk-colors-pencil)

accentYellowvar(--sk-colors-accentYellow)

accentBluevar(--sk-colors-accentBlue)

accentRedvar(--sk-colors-accentRed)

accentGreenvar(--sk-colors-accentGreen)

accentLavendervar(--sk-colors-accentLavender)

SHAPE & MOTION

{
  "border": {
    "compact": 2,
    "default": 3
  },
  "radii": {
    "none": 0,
    "sm": 4,
    "md": 8,
    "sketchSm": 0,
    "sketchMd": 4,
    "sketchLg": 8
  },
  "shadow": {
    "offsetSm": 3,
    "offsetMd": 4
  },
  "motion": {
    "fast": 80,
    "default": 140,
    "slow": 160
  }
}