Tokens

Colors, roughness, stroke weights, and CSS custom properties for light and dark themes.

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">
      <ThemeToggle />
      {children}
    </ThemeProvider>
  );
}

Manual overrides set data-sk-theme="light" or "dark" on <html>. Use the sidebar toggle to try it on this site.

Contrast

Light ink on paper: 17.2:1 (WCAG AA pass)

Dark ink on paper: 19.0:1 (WCAG AA pass)

pencil is intentionally low-contrast. Use for placeholders and disabled states only.

Colors

paper

#FAFAFA

#0A0A0A

paperAlt

#F5F5F5

#141414

paperBright

#FFFFFF

#1A1A1A

ink

#171717

#FAFAFA

inkSoft

#525252

#A3A3A3

pencil

#A3A3A3

#737373

disabled

#D4D4D4

#525252

backdrop

rgba(0, 0, 0, 0.45)

rgba(0, 0, 0, 0.72)

accentYellow

#E5E5E5

#3A3A3A

accentBlue

#D4D4D4

#454545

accentRed

#737373

#D4D4D4

accentGreen

#DBDBDB

#404040

accentLavender

#E0E0E0

#474747

CSS variables

All color tokens are available as custom properties, e.g. var(--sk-colors-paper).

papervar(--sk-colors-paper)

paperAltvar(--sk-colors-paperAlt)

paperBrightvar(--sk-colors-paperBright)

inkvar(--sk-colors-ink)

inkSoftvar(--sk-colors-inkSoft)

pencilvar(--sk-colors-pencil)

disabledvar(--sk-colors-disabled)

backdropvar(--sk-colors-backdrop)

accentYellowvar(--sk-colors-accentYellow)

accentBluevar(--sk-colors-accentBlue)

accentRedvar(--sk-colors-accentRed)

accentGreenvar(--sk-colors-accentGreen)

accentLavendervar(--sk-colors-accentLavender)

Roughness

{
  "subtle": 0.35,
  "low": 0.5,
  "medium": 0.85,
  "high": 1.4
}