Active users
Last 30 days
48.2K
↑ 12.4% · HealthyPalette-first color system studio
Generate. Assign. Verify.
Start from a seed, choose generated swatches for Primary, Secondary, and Tertiary, then export independently resolved light and dark token contracts.
Current modelCSS Color 4 local-MINDE · WCAG 2.2 contracts · DTCG 2025.10
01 · Generator
Generate first. Assign component roles second.
The seed creates a scale and harmony palette. Choose generated swatches for Primary, Secondary, and Tertiary, then let the contrast contract resolve usable light and dark component colors.
Generated seed scale
Choose an assignment target above, then tap a generated step to supply that component role.
Generated harmony palette
Tap a candidate to assign it to the active Primary, Secondary, or Tertiary role.
Component color hierarchy
Primary, secondary, and tertiary are selected from the generated palette, then resolved into accessible light and dark component colors.
02 · Playground
Inspect the system in context.
A palette is not a row of swatches. This playground applies the active profile to navigation, cards, forms, states, charts, and hierarchy.
Light profile
Portfolio overview
Signal first. Decoration remains subordinate.
Automation coverage
Core workflows
78%
↑ 4.8% · On trackEngagement trend
Hue separates series. Lightness communicates magnitude.
Form controls
Surface, border, text, and focus must remain distinct.
Semantic states
Text labels prevent color-only meaning.
✓ Healthy · All systems operational
! Warning · Capacity above 80%
× Error · Deployment failed
i Info · Maintenance Saturday
03 · Component states
Validate the state machine, not only the resting screenshot.
The same component token contract is exercised across default, hover, pressed, focus-visible, disabled, invalid, read-only, checked, and semantic-message states.
04 · Data palettes
Match palette family to data semantics.
Sequential scales encode magnitude. Diverging scales encode movement around a meaningful midpoint. Qualitative scales separate unordered categories.
Sequential
A single hue family with ordered lightness.
Diverging
Two directions around a neutral midpoint.
Qualitative
Distinct categories with redundant labels.
Semantic states
Familiar associations, independently contrast-adjusted.
Palette diagnostics
Perceptual-distance checks are diagnostic thresholds, not WCAG conformance criteria.
| Diagnostic | Observed | Threshold | Result |
|---|
Color-vision simulations use fixed matrix approximations at full severity. They expose likely collisions but do not certify usability or replace testing with representative users.
05 · Profiles
Store only what you choose.
Named profiles and the optional remembered workspace stay in this browser. No network service is used.
Preference storage
Explicit local persistence with portable exports.
0 of 30 local profile slots used.
Current versus saved profile
Compare resolved token values before loading or replacing a profile.
Choose Compare on a saved profile.
06 · Tokens
Move from color values to system contracts.
Export semantic CSS custom properties or a structured JSON profile. Components should consume roles, not raw palette steps.
Token dependency architecture
Values resolve inward. Components never consume palette values directly.
07 · Principles
The theory behind the controls.
These rules convert color research into implementation constraints.
Separate the channels
RecommendedHue distinguishes categories. Lightness carries hierarchy and order. Chroma controls emphasis.
Generate modes independently
NormativeLight and dark appearances need separate surfaces, borders, text, chroma, and elevation decisions.
Semantics before harmony
NormativeA harmonious palette can still fail contrast, focus, states, forced colors, and category discrimination.
Avoid false boundaries
RecommendedOrdered data needs perceptually ordered scales. Rainbow scales can distort magnitude and create artificial transitions.
Never encode with color alone
NormativePair color with text, iconography, shape, position, pattern, or numeric labels.
Audit in context
NormativeContrast ratios are a floor. Review grayscale, common color-vision deficiencies, real devices, and task performance.
Generate, then assign deliberately
RecommendedThe seed generates a coherent palette. Product owners then assign generated swatches to Primary, Secondary, and Tertiary before accessibility resolution.
Validate the full gradient
NormativeA gradient foreground must remain legible across the complete interpolation path, including hover and pressed states. Treat angle, interpolation space, endpoints, and foreground as one component contract.
08 · Handbook projection
Trace guidance to implementation and tests.
The SPA is an executable projection. The handbook remains canonical. Every exported profile carries the guidance IDs that constrained generation and validation.
Guidance coverage registry
Status separates normative requirements from recommendations and experimental diagnostics.
| Guidance ID | Status | Implementation | Verification |
|---|
09 · Evidence
Primary and implementation sources.
The application is derived from the Visual Design Research System, the resilient mobile-first handbook, and current standards guidance. Stable requirements are separated from Working Draft enhancements.
Runtime capability report
The audited token model never depends on experimental CSS. This report identifies enhancements available in the current browser.
Method and provenance
Generated output records the application, generator, audit, token schema, and handbook versions separately.
Normative baselineCSS Color 4 mapped sRGB values, WCAG 2.2 contrast relationships, native semantics, and DTCG 2025.10 token exchange.
Progressive enhancementDisplay-P3 values, CSS Color 5 capability detection, reduced-transparency adaptation, and shareable recipe URLs.
Manual validation remainsForced colors, 200–400% zoom, native autofill, projectors, printing, sunlight, and representative-user discrimination.
OKLab and OKLCH, interpolation, Display-P3, and the current binary local-MINDE gamut-mapping model.
Contrast, use of color, focus, target size, reflow, and user preference requirements.
Perceptual ordering, lightness progression, and problems with rainbow scales.
A continuous color map optimized with color-vision deficiency in mind.
Sequential, diverging, and qualitative palette families for mapped and quantitative data.
Implementation precedent for perceptually ordered, grayscale-readable continuous scales.
Working Draft features such as light-dark(), contrast-color(), relative color syntax, and custom color spaces. Used only as progressive enhancement guidance.
User preferences for color scheme, contrast, reduced motion, reduced transparency, and forced colors.
Stable token groups, aliases, type inheritance, and portable exchange syntax.
Multi-context resolution for light, dark, high-contrast, brand, and other orthogonal modifiers.