Lotion #faf9f5 AAA · 17.49:1
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 AAA · 15.86:1
Soft secondary background
Use for buttons, subtle raised surfaces, and quiet separation from Lotion.
Last Straw #e3dacc AAA · 13.31:1
Light lines color
Use for separators, borders, dividers, table lines, and subtle structure.
Black Mana #858585 AA · 4.99:1
Dark lines color
Use for darker rules, muted strokes, small icons, and supporting UI marks. Pair with Sooty when text must sit directly on it.
Noir #2c2b26 AAA · 13.46:1
Second darkest color
Use when Sooty feels too severe, especially for panels and quiet dark UI.
Sooty #141414 AAA · 17.49:1
Darkest color allowed, near black
Use for primary text on light backgrounds and deep contrast surfaces.
Dark Cluster
Strong accents; use Sooty for AA normal text.
Peachy Feeling #d97757 AA · 5.90:1
Warm dark accent
Primary warm accent for borders, active marks, and editorial highlights. Use Sooty for text placed directly on this fill.
Windstorm #6a9bcc AA · 6.29:1
Blue dark accent
Calm, trustworthy blue for links, diagrams, and secondary accents. Use Sooty for text placed directly on this fill.
Magic Carpet #827dbd AA · 4.93:1
Purple dark accent
Use for intelligence, AI, philosophy, and contemplative visual marks. Use Sooty for normal text placed directly on this fill.
Emerald Oasis #629887 AA · 5.58:1
Green dark accent
Use for balance, growth, nature, and stable positive marks. Use Sooty for normal text placed directly on this fill.
Light Cluster
Use with Sooty text.
Mellow Marrow #ebc9b7 AAA · 11.91:1
Warm light accent
Soft container fill, quote block, or background tint for warm sections.
Peek-a-Blue #c7dedc AAA · 13.08:1
Blue-green light accent
Quiet information panels, calm cards, and gentle data highlights.
Dust of the Moon #cacadb AAA · 11.39:1
Purple-gray light accent
Neutral intelligence tint for AI, notes, and reflective cards.
Banana Republic #ffe292 AAA · 14.51:1
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
Strawberry Field #f7827e AAA · 7.41:1
Heavy red
RGB is rgb(247, 130, 126). Use sparingly for warm urgency, alert accents, and strawberry-red emphasis.
Channel #fbc8c6 AAA · 12.44:1
Light red
Lightest color from the Five Shades of Strawberry Field algorithm; use for soft warnings, blush backgrounds, and warm detail.
Oranges
Buttery #fcbe7c AAA · 11.23:1
Heavy orange
RGB is rgb(252, 190, 124). Use for energetic emphasis and softer true-orange highlights.
Bisque #fee2c5 AAA · 14.82:1
Light orange
Lightest color from the Five Shades of Buttery algorithm; use for friendly warmth without full orange intensity.
Yellows
Pasta Luego #f7e17c AAA · 14.05:1
Heavy yellow
RGB is rgb(247, 225, 124). Use for bright markers, selected states, and optimistic attention.
Bullet Hell #fbf2c5 AAA · 16.32:1
Light yellow
Lightest color from the Five Shades of Pasta Luego algorithm; use for soft notes, explainers, and gentle emphasis.
Greens
Sage Sensation #b7e396 AAA · 12.67:1
Heavy green
RGB is rgb(183, 227, 150). Use for growth, success, freshness, and calm natural accents.
Snowy Mint #dff3d1 AAA · 15.68:1
Light green
Lightest color from the Five Shades of Sage Sensation algorithm; use for calm positive containers.
Teals
Cold Blue #78dedc AAA · 11.65:1
Heavy teal
RGB is rgb(120, 222, 220). Use for fresh tech accents and active data visuals.
Gentle Cold #c4f0f0 AAA · 14.97:1
Light teal
Lightest color from the Five Shades of Cold Blue algorithm; use for airy backgrounds and optimistic UI panels.
Blues
Milky Waves #71bbde AAA · 8.65:1
Heavy blue
RGB is rgb(113, 187, 222). Use for calm authority, links, diagrams, and blue containers.
Cotton Clouds #c1e1f0 AAA · 13.42:1
Light blue
Lightest color from the Five Shades of Milky Waves algorithm; use for accessible, gentle information surfaces.
Purples
Somewhere in a Fairytale #d1a7e8 AAA · 9.13:1
Heavy purple
RGB is rgb(209, 167, 232). Use for AI, imagination, and contemplative emphasis.
Scented Spring #ebd8f5 AAA · 13.75:1
Light purple
Lightest color from the Five Shades of Somewhere in a Fairytale algorithm; use for soft creative backgrounds.
Pinks
Elastic Pink #f0aad4 AAA · 10.01:1
Heavy pink
RGB is rgb(240, 170, 212). Use for friendly warmth and human details.
Grape Taffy #f8daec AAA · 14.24:1
Light pink
Lightest color from the Five Shades of Elastic Pink algorithm; use for delicate background tinting.
Browns
Lama #dbb293 AAA · 9.48:1
Heavy brown
RGB is rgb(219, 178, 147). Use for grounded editorial accents and earth-tone warmth.
White Truffle #efddcf AAA · 13.96:1
Light brown
Lightest color from the Five Shades of Lama algorithm; use as a soft brown-family neutral.
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 Anti-Flash White #f2f2f2 AAA · 16.46:1
Grey shade 1
The lightest grey, ideal for airy panels and almost-white neutral fields.
02 Super Silver #ededed AAA · 15.74:1
Grey shade 2
A soft silver grey for alternate cards, quiet diagrams, and UI wells.
03 Placebo #e5e5e5 AAA · 14.62:1
Grey shade 3
A practical light grey that bridges Salt, Last Straw, and neutral containers.
04 Elephant in the Room #acacac AAA · 8.12:1
Grey shade 4
A middle grey for marks, icons, captions, and support text.
05 Argent #888888 AA · 5.20:1
Grey shade 5
The deepest grey in this ramp, useful for serious neutral blocks and labels. Use Sooty for readable text on the fill.
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
- Use Copy CSS Variables when you need every named color plus semantic canvas, surface, text, and border aliases ready for code.
- Use Copy to AI / LLM when you want the entire visual system as one structured JSON brief with verified text-color guidance.
- Use Copy Sector or Copy Cluster when you want one grouped palette area as structured JSON.
- In Optional Variations, use Copy Sector, Copy All Heavy, or Copy All Light when you want structured JSON.
- Use the small Copy button on a variation family, such as Yellows, when you only need its heavy and light colors.
- Use the icon on a color swatch for a one-line name plus hex value, such as Peek-a-Blue #c7dedc.
- 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. Both clusters use Sooty when normal text sits directly on a color; the stronger Dark Cluster remains best suited to fills, borders, active marks, and non-text accents. Lotion is reserved for text on true dark surfaces such as Noir and Sooty. Every swatch shows the exact WCAG ratio for the foreground it renders. 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 stronger accents, borders, and non-text marks; use Sooty when normal text sits directly on them. 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
What should a designer copy from this page?
Use Copy to AI / LLM for the complete structured JSON palette brief, Copy Sector or Copy Cluster for a focused JSON group, Copy All Heavy or Copy All Light in Optional Variations for JSON color schemes, the small Copy button on each optional variation family for its heavy/light pair, the icon on any swatch for one-line name plus hex text, or Copy All on a color card for one color with its 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 Dark Cluster for stronger accents, borders, and non-text marks, and use the Light Cluster for softer cards and panels. When normal text sits directly on either cluster, use Sooty and confirm the visible WCAG ratio. Reserve Lotion text for true dark surfaces such as Noir or Sooty.