Leo's Visual Palette

What is Leo's Visual Palette?

Leo's Visual Palette is a personal design reference page for a warm, calm, editorial visual system. It records the exact color family Leo wants other homepages, product pages, video visuals, and design artifacts to reference. The page is intentionally more than a palette screenshot: every color has a role, a visible swatch, a name, a hex value, and copy actions for raw hex, one-line name-plus-hex text, and full design context, so the design brief can move cleanly from this page into a designer's chat, Figma note, CSS file, or AI prompt.

How to use it

1. Use Copy to AI / LLM when you want the entire visual system as one structured JSON brief.
2. Use Copy Sector or Copy Cluster when you want one grouped palette area as structured JSON.
3. In Optional Variations, use Copy Sector, Copy All Heavy, or Copy All Light when you want structured JSON.
4. Use the small Copy button on a variation family, such as Yellows, when you only need its heavy and light colors.
5. Use the icon on a color swatch for a one-line name plus hex value, such as Peek-a-Blue #c7dedc.
6. Use Copy Hex for a raw value, or Copy All for one color with its name, hex value, role, and design note.

The design method

The system starts with Lotion as the unified background, avoiding harsh pure white while keeping pages bright and readable. Salt is the soft secondary background and the preferred button fill. Sooty is the main text color on light backgrounds, while Lotion becomes the text color on dark backgrounds. Last Straw and Black Mana provide quiet line work, so borders and separators can structure a page without making it feel boxed in. The accent system is split into dark and light clusters: dark accents are meant to carry Lotion text, while light accents are meant to carry Sooty text. The optional heavy and light variations expand the range for illustrations, charts, thumbnails, and colorful borders without changing the core mood. The grey sector gives neutral depth its own ramp instead of making Argent sit alone inside the color variations.

Examples

• A personal homepage can use Lotion for the page background, Sooty for body text, Last Straw for separators, and Peachy Feeling for the primary action.
• A video title card can use Sooty or Noir as the background, Lotion as the title color, and Magic Carpet or Windstorm as the accent border.
• A dashboard or content hub can alternate Mellow Marrow, Peek-a-Blue, Dust of the Moon, and Banana Republic for card containers while keeping all text in Sooty.

Copy-ready AI agent brief

If an AI agent or LLM is reading this page to recreate the visual direction, use this instruction: build a warm editorial interface on Lotion #faf9f5, use Sooty #141414 as the primary ink, use Lotion #faf9f5 as text on dark surfaces, use Salt #f0eee6 for soft buttons and raised backgrounds, use Noir #2c2b26 only as a secondary dark surface, and use Last Straw #e3dacc or Black Mana #858585 for lines. Use Peachy Feeling #d97757, Windstorm #6a9bcc, Magic Carpet #827dbd, and Emerald Oasis #629887 for dark accents with light text. Use Mellow Marrow #ebc9b7, Peek-a-Blue #c7dedc, Dust of the Moon #cacadb, and Banana Republic #ffe292 for light cards with dark text. Use the Five Shades of Grey ramp from Anti-Flash White #f2f2f2 to Argent #888888 for neutral depth. Keep the overall impression calm, readable, human, and quietly colorful.

Why use this one

Most palette pages are built for designers already inside a design tool. This one is built for handoff. It gives a designer enough visual context to feel the palette immediately, while also giving AI systems plain text, schema, labels, and copy-friendly one-line values. That makes it useful as a stable URL Leo can send repeatedly instead of rewriting the same color instructions every time a new homepage, video visual, landing page, or product surface needs to share the same design DNA.

Frequently asked questions