Personalization Generator User Guide

The page is organized around a guided flow: Pool, Tune, Generate, Studio, and Export. Tabs expose the same steps plus detailed result categories.

• The brief: describe the brand, product, poster, dashboard, or editorial direction you want.
• Generate: runs a candidate sweep using the current pool and tuning settings.
• Stop: cancels the current sweep while preserving results already produced.
• Endless: keeps appending new variations in the background until stopped.
• Simple mode: hides most advanced controls for a quick pool and prompt workflow.
• Advanced mode: exposes depth, pool target, palette size, keep count, CVD-safe, contrast, and uniqueness controls; the Tune, Studio, and Export tabs work in both modes.
• Search results: filters visible cards inside the active result tab by name, HEX value, relationship, variant, or font metadata.

The pool is the engine's preference memory. It should include colors you actually want the system to orbit around, not only final brand colors.

• Add color: use the color picker or type a valid HEX value, then click Add.
• Build pool: expands the current taste into a larger target pool using curated seeds and OKLCH mutation.
• +24 random: injects randomized colors for broader exploration.
• Quick seeds: append ready-made UI, earthy, neon, pop, or grayscale sets.
• Jitter: nudges existing pool colors in OKLCH space to create close variants.
• Remove: click a swatch in the pool grid to remove it.
• Diagnostics: pool statistics show count, average chroma, lightness range, neutral count, hue distribution, and lightness ladder.

• Style chips: combine profile biases such as Calm, Luxe, Playful, Tech, Earthy, Editorial, Neon, Minimal, Heritage, Pastel, Cyber, Sun, Monochrome, Botanical, Nordic, Sunset, Midnight, and Coastal.
• Intent: choose UI, Brand, Poster, Editorial, or Dashboard so relationships and outputs weight the right use case.
• Preference note: adds text context that can bias curated seed matching.
• Pool target: controls how large the generated color pool should be.
• Palette size: sets the number of colors per generated palette from 5 to 12.
• Search depth: controls how many candidates the sweep samples. Higher depth can improve variety but costs more time.
• Keep top: controls how many high-scoring palettes survive the sweep.
• Diversity, Accessibility, and Warmth: shift scoring toward perceptual separation, contrast/CVD safety, and warmer or cooler hue behavior.
• CVD-safe, Contrast, Unique: add score penalties for color vision deficiency collapse and weak UI contrast, and filter out perceptual duplicates.

Generation is chunked so the browser remains responsive. The progress strip shows the sweep label, completion, estimated status, and a cancel button.

• Automatic first run: if the page has no palettes, it performs a small initial sweep so the interface is not empty.
• Candidate scoring: palettes are scored for preference match, harmony, diversity, contrast, style fit, and CVD/UI accessibility.
• Cancel: Stop or progress Cancel marks the job as cancelled and finalizes the partial candidate list.
• Endless mode: runs append sweeps repeatedly and deduplicates palettes by perceptual signature.
• Status pill: Idle, running, done, and cancelled messages explain the latest engine state.

• Overview: shows top score, pool preview, search space, output counts, average scores, top palette preview, score breakdown, and recent palettes.
• Palettes: lists ranked palettes with HEX strips, score breakdowns, contrast bars, copy, add-to-pool, Studio, and save actions.
• Gradients: derives linear, radial, conic, mesh, layered, sharp, soft-mesh, diagonal, spot, duotone, prism, and halo gradients from top palettes.
• Typography: pairs palettes with display, body, and accent font stacks and copies usable CSS variables.
• UI Pairs: turns palettes into background, text, surface, accent, and accent ink tokens with contrast classification.
• Posters: renders poster layouts such as Bauhaus, type-dominant, asymmetric, magazine, minimal-centered, brutalist, festival, Swiss, collage, kinetic, archive, and gradient poster.
• Tokens: turns the top palette into a design token system: eight semantic roles (primary, secondary, accent, neutral, success, warning, danger, info), an 11-step tonal ramp from 50 to 950 for each role, a Light and Dark theme preview, a contrast audit that gives the WCAG 2.1 ratio and APCA Lc for each pair, and categorical, sequential, and diverging data visualization scales. Copy CSS copies the light and dark themes plus a high-contrast block for prefers-contrast: more; Copy JSON copies the whole system.

Studio applies a selected palette to a complete brand system. It is the fastest way to judge whether a palette works beyond a swatch strip.

• Palette switcher: choose from the top 24 kept palettes or shuffle among them.
• Theme: Auto uses the palette's readable pair; Light or Dark forces the system direction.
• Density: Cozy and Compact change mockup spacing.
• Inspect: shows token labels on mockups for debugging color roles.
• Test: opens a live token swap panel where palette colors can replace background, text, accent, accent 2, or surface tokens.
• Mockups: Studio renders brand identity, dashboard, landing page, components, type scale, charts, pricing, auth, chat, mobile, calendar, music, magazine, banner, email, and product screens.
• Save brand system: mirrors the current Studio system to the Library workspace with colors, system tokens, overrides, theme, density, and source metadata.

Presets are complete starting points with colors, style chips, and intent. They are useful when you want a strong direction before tuning.

• Preset examples: Creator SaaS, Premium Studio, Festival Poster, Earth Brand, Calm Editorial, Data Console, Pastel Atlas, Cyber Console, Vintage Press, Monochrome Lab, Botanical Brand, Nordic Calm, Sunset Studio, Midnight Tech, Coastal Brand, Editorial Plum, and Solstice Type.
• When to use: choose a preset when your brief matches a known genre, then edit the pool and note before generating.
• When to avoid: start from a custom pool when you already have brand colors or stakeholder-approved colors.

• Copy color: click individual swatches to copy HEX values.
• Copy palette: copies the full HEX list for a palette.
• Copy gradient: copies a CSS background declaration.
• Copy typography: copies font and color CSS variables.
• Copy UI pair: copies background, text, surface, accent, and accent ink tokens.
• Copy poster: copies poster color and font CSS.
• Copy CSS: copies CSS custom properties for the top palette, top gradient, and top typography system, plus the semantic token system from the Tokens tab.
• Download JSON: downloads a full snapshot with preferences and generated results under schema aa.personalization-generator.v3.
• Save to Library: mirrors palettes, gradients, type systems, UI pairs, posters, and Studio systems into the universal Library workspace.

• Product UI: seed neutrals plus one accent, choose Tech or Minimal, set intent to UI or Dashboard, keep CVD-safe and Contrast on, then inspect UI Pairs and Studio.
• Brand exploration: load a relevant preset first (it replaces the pool), add two or three approved colors, choose Brand intent, run a medium depth sweep, then save the strongest Studio systems.
• Poster direction: choose Playful, Neon, Editorial, or Sun, set intent to Poster, allow higher chroma, then review Gradients and Posters before Studio.
• Editorial system: use Heritage, Luxe, Editorial, or Calm, set intent to Editorial, prioritize typography outputs, and test magazine and banner mockups in Studio.
• Accessibility-first palette: leave CVD-safe, Contrast, and Unique enabled, increase Accessibility, then review UI Pairs and contrast bars before exporting.

• Results feel too similar: increase Diversity, add more pool colors, enable Unique, or run Endless mode for more candidates.
• Results feel off-brand: remove unrelated pool colors, lower random exploration by rebuilding from a tighter pool, and write a clearer preference note.
• Generation feels slow: lower Search depth or Keep top. You can cancel any sweep without losing completed candidates.
• Contrast is weak: enable Contrast, enable CVD-safe, increase Accessibility, and inspect the UI Pairs tab.
• Studio token looks wrong: open Test, swap the token manually, or reset overrides.
• Saved item says already saved: the Library mirror tracks each run and index so the same output is not duplicated. Generate again or save a different item.
• State reappears after reload: pool, tune settings, active tab, mode, and Studio settings are persisted in localStorage.