Opening Preview Mode
PressF from any view to toggle the overlay open or closed. You can also click the preview button in the controls toolbar if you prefer the mouse.
To dismiss the overlay, press F again, press Escape, or click anywhere outside the preview content area.
F is always available regardless of which view is active (palette, gradient, or extract). It does not require a dialog to be closed first.Switching Modes
The top bar of the overlay contains a mode switcher with two options:- ui elements — a shadcn-flavored dashboard mockup
- title design — large display typography with layout presets
localStorage and restored the next time you open the overlay.
A mosaic view (solid color bars spanning the full screen, one per palette color) is also present as the initial default until another mode is selected.
Mode 1: UI Elements (shadcn Dashboard)
The UI Elements mode renders a complete dashboard mockup built with shadcn/ui components. Every surface — background, cards, sidebar, buttons, badges, chart, form inputs — is driven live by color role assignments.What’s in the mockup
The mock dashboard includes:- Sidebar with nav links (Dashboard, Users, Analytics, Settings) and a company name header. The active item uses the primary color.
- Page header with a title and a primary-color action button.
- Stat cards showing revenue, active users, and conversion metrics with trend badges.
- Revenue trend chart — a Recharts area chart using the primary color for the fill and stroke.
- Goals panel with progress bars for monthly target, user retention, and support resolution.
- New entry form with name and email inputs plus a submit button.
- Recent transactions table with user avatars, status badges (success / pending / failed), and amounts.
Color roles
Eight color roles control the entire mockup. They are listed on the left sidebar of the UI Elements mode:| Role | Drives |
|---|---|
background | Main page background |
foreground | Body text, headings, icon strokes |
card | Card and sidebar surfaces |
primary | Primary buttons, active nav item, chart fill |
accent | Secondary accent surfaces |
border | Card borders, input borders, dividers |
muted | Secondary/muted text, axis labels |
destructive | ”Failed” status badges |
Auto-assignment on open
When the overlay opens, roles are assigned automatically using luminance and saturation heuristics:- background → lightest color (highest relative luminance)
- foreground → darkest color (lowest relative luminance)
- card → second-lightest color
- primary → most saturated color
- accent → second-most saturated color
- border → median-luminance color
- muted → second-darkest color
- destructive → third-most saturated color
Font selector
Choose a typeface for the entire mockup from six options, loaded lazily from Google Fonts:| Font | Character |
|---|---|
| system | System monospace (ui-monospace, monospace) — the app’s default, no network load |
| inter | Neutral, modern — general-purpose sans-serif |
| playfair | Editorial, luxury — serif for magazine or brand work |
| space grotesk | Tech, geometric — startup and SaaS aesthetic |
| nunito | Friendly, rounded — consumer apps |
| jetbrains mono | Dev, technical — terminal and developer tools |
localStorage.
Corner radius
A slider labeled corner radius controls the--radius CSS custom property used by all shadcn components in the mockup, from 0rem (sharp corners) to 1.5rem (very rounded). This lets you preview the same palette across different component rounding styles. The value persists in localStorage.
Copy CSS variables
A copy css vars button at the bottom of the left sidebar copies all eight role assignments as a:root {} block:
Mode 2: Title Design
Title Design mode shows your palette colors applied to large display typography in a full-screen composition. It is useful for evaluating a palette’s impact at headline scale — print, poster, editorial, or hero sections.Layout presets
Three layouts are available. Switch between them using the buttons in the top bar:- Hero
- Editorial
- Poster
Left-aligned composition with an oversized headline, a spaced uppercase subheading, a short body paragraph, and a ruled footer line with small-caps label text.The heading fills the left third of the screen at display size. The subheading sits below in uppercase tracking. Good for evaluating how a palette reads on a landing page hero section.
localStorage and is restored the next time the overlay opens.
Editable text
Both the heading and the subheading are editable inline. Click either text element to turn it into a text input. The current text is selected automatically so you can start typing immediately. Press Enter or Escape (or click anywhere outside) to commit the edit and return to display mode. The text values persist inlocalStorage.
Color role pickers
Three color roles appear in the top bar when Title Design mode is active:| Role label | Drives |
|---|---|
| bg | Background surface of the entire composition |
| text | Heading and body text |
| accent | Subheading, category tags, ruled lines, accent elements |
- bg — lightest or darkest depending on palette average luminance
- text — highest-contrast color against the background
- accent — most saturated remaining color
Keyboard Reference
| Key | Action |
|---|---|
F | Toggle preview overlay open / closed |
Esc | Close the overlay |
Related Pages
Generating Palettes
Generate new palettes to preview in different color scenarios.
Color Relationships
Apply harmony rules to build palettes that preview well across all modes.
Exporting Palettes
Export the palette as CSS variables, Tailwind config, or art app swatches.
Contrast Checker
Verify WCAG contrast ratios before using colors for text and interactive elements.