Design system
Colors
Explore the real light and dark palettes, then use their semantic roles.
The palette explorer
Compare the eight key semantic colors in every existing preset. The explorer reads generated theme data; it does not introduce another palette. Its controls are independent of the site appearance.
--pimolu-background--pimolu-surface--pimolu-primary--pimolu-foreground--pimolu-border--pimolu-success--pimolu-warning--pimolu-dangerExplore without changing the site. Copy a semantic variable to use in your CSS.
Choose meaning before a color value
Use primary for the product accent, surface for raised content and foreground for readable text. Success, warning and danger communicate a status alongside an explicit label. Background and border establish the composition without competing with the content.
Primitives live in packages/design-tokens/src/tokens.json. Semantic aliases live in packages/themes/src/themes.json; named presets have their own palette source. Generated CSS uses --pimolu-* variables.
.project-summary {
background: var(--pimolu-surface);
color: var(--pimolu-surface-foreground);
border: 1px solid var(--pimolu-border);
}
.project-summary__status {
color: var(--pimolu-success);
}Review color in context
Use paired foreground tokens when placing text on a colored background. Check the exact text size, opacity, state and surface in both modes. Do not assume that a swatch alone proves contrast compliance.
Do not communicate an error with color alone. Keep text or an icon with an accessible label, and preserve visible focus in forced-colors mode.