Lotion #faf9f5
Unified page background color
Use as the default canvas for pages, video slides, and design references; do not use it for cards or text display boxes.
Personal visual system reference
Leo's Visual Palette
A copy-ready design reference for Leo's warm off-white canvas, near-black text, soft line colors, dark accents, light accents, and optional color variations. Built for humans sending a brief to designers and for AI agents that need exact visual rules from one URL.
Dark surface Lotion text on Sooty
Use this contrast mode for title cards, video openers, and bold visual anchors.
Light surface Sooty text on Lotion
Use this as the default page, article, product, and presentation canvas.
Foundation Colors
Canvas, text, and line rules.
Salt #f0eee6
Soft secondary background
Use for buttons, subtle raised surfaces, and quiet separation from Lotion.
Last Straw #e3dacc
Light lines color
Use for separators, borders, dividers, table lines, and subtle structure.
Black Mana #858585
Dark lines color
Use for darker rules, muted strokes, small icons, and supporting UI marks.
Noir #2c2b26
Second darkest color
Use when Sooty feels too severe, especially for panels and quiet dark UI.
Sooty #141414
Darkest color allowed, near black
Use for primary text on light backgrounds and deep contrast surfaces.
Dark Cluster
Use with Lotion text.
Peachy Feeling #d97757
Warm dark accent
Primary warm accent for buttons, active states, and editorial highlights.
Windstorm #6a9bcc
Blue dark accent
Calm, trustworthy blue for links, diagrams, and secondary calls to action.
Magic Carpet #827dbd
Purple dark accent
Use for intelligence, AI, philosophy, and contemplative visual moments.
Emerald Oasis #629887
Green dark accent
Use for balance, growth, nature, and stable positive states.
Light Cluster
Use with Sooty text.
Mellow Marrow #ebc9b7
Warm light accent
Soft container fill, quote block, or background tint for warm sections.
Peek-a-Blue #c7dedc
Blue-green light accent
Quiet information panels, calm cards, and gentle data highlights.
Dust of the Moon #cacadb
Purple-gray light accent
Neutral intelligence tint for AI, notes, and reflective cards.
Banana Republic #ffe292
Yellow light accent
Warm attention color for highlights, callouts, and optimistic accents.
Optional Variations
Heavy and light choices when the core palette needs range.
Reds
Blazing #e94e41
Heavy red
Use sparingly for danger, urgency, or sharp contrast.
Ballet #f7d5d4
Light red
Use for soft warnings, blush backgrounds, and warm detail.
Oranges
Arancio #ff7013
Heavy orange
Use for energetic emphasis and punchy warm highlights.
Angry Pasta #ffcc55
Light orange
Use for friendly warmth without full orange intensity.
Yellows
Banana Pepper #fdd630
Heavy yellow
Use for bright markers and selected states.
Banana Milk #fff7ad
Light yellow
Use for soft notes, explainers, and gentle emphasis.
Greens
Argula #75ad5b
Heavy green
Use for growth, success, and natural accents.
Ambrosia #c6e1bc
Light green
Use for calm positive containers.
Teals
Blue Ocean #52b4ca
Heavy teal
Use for fresh tech accents and active data visuals.
Aqua Fiesta #96e2e1
Light teal
Use for airy backgrounds and optimistic UI panels.
Blues
Assassin #2d4f83
Heavy blue
Use for serious authority and deep blue containers.
Ariel #aed7ea
Light blue
Use for accessible, gentle information surfaces.
Purples
Amethyst #9966cc
Heavy purple
Use for AI, imagination, and contemplative emphasis.
Beefy Pink #debeef
Light purple
Use for soft creative backgrounds.
Pinks
Baby Pink #ffb7ce
Heavy pink
Use for friendly warmth and human details.
Bunny Tail #ffe3f4
Light pink
Use for delicate background tinting.
Browns
Acorn #7f5e50
Heavy brown
Use for grounded editorial accents and earth-tone contrast.
Soba #d1b8a5
Orange support color
RGB is rgb(209, 184, 165). Use as a soft orange-family neutral; match quality is close with Delta E 2.36. Close alternates are Smoke Dragon #ccbbaa, Attic Linen #ccbca9, and Dinosaur Egg #cabaa9.
Grey sector
Five Shades of Grey
A dedicated neutral ramp for subtle depth, quiet UI structure, captions, and serious editorial surfaces without slipping into flat black and white.
01 Beluga #eff2f1
Grey shade 1
The lightest grey, ideal for airy panels and almost-white neutral fields.
02 Big Fish to Fry #dadbe1
Grey shade 2
A cool soft grey for alternate cards, quiet diagrams, and UI wells.
03 Argento #cecac3
Grey shade 3
A warmer middle grey that bridges Salt, Last Straw, and neutral containers.
04 Argent #888888
Grey shade 4
A practical secondary grey for marks, icons, captions, and support text.
05 Black Olive #3b3c36
Grey shade 5
The deepest grey in the ramp, useful for serious neutral blocks and labels.
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 two copy actions, 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
- Use Copy to AI / LLM when you want the entire visual system as one clean brief.
- Use Copy Sector or Copy Cluster when you want only one grouped palette area for a designer handoff.
- Use the small Copy button on a variation family, such as Yellows, when you only need its heavy and light colors.
- 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 Beluga #eff2f1 to Black Olive #3b3c36 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
What should a designer copy from this page?
Use Copy to AI / LLM for the complete palette brief, Copy Sector or Copy Cluster for a focused group, the small Copy button on each optional variation family for its heavy/light pair, or Copy All on a color card for one color with its name, hex value, role, and design note.
Which colors are safe for body text?
Use Sooty #141414 for body text on light backgrounds and Lotion #faf9f5 for text on dark backgrounds. Noir #2c2b26 can be used as a softer dark surface, but Sooty remains the primary readable ink.
How should the accent colors be used?
Use the four dark cluster colors when the text on top is Lotion. Use the four light cluster colors when the text on top is Sooty. The heavy/light variations are optional expansion colors for illustrations, borders, highlights, and containers. Use Five Shades of Grey when the design needs more neutral depth.