In partnership with
Write docs 4x faster. Without hating every second.
Nobody became a developer to write documentation. But the docs still need to get written — PRDs, README updates, architecture decisions, onboarding guides.
Wispr Flow lets you talk through it instead. Speak naturally about what the code does, how it works, and why you built it that way. Flow formats everything into clean, professional text you can paste into Notion, Confluence, or GitHub.
Used by engineering teams at OpenAI, Vercel, and Clay. 89% of messages sent with zero edits. Works system-wide on Mac, Windows, and iPhone.
The big idea: interfaces don’t have color palettes, they have color jobs
Brand palettes answer “what looks like us?” Interface palettes answer “what does this element do?” Confusing the two is why side projects look like fruit salad.
A working interface palette is smaller than you think:
• Neutrals do 90% of the work. Backgrounds, borders, text — you need a real neutral scale (8–10 steps), and it’s where cheap palettes fail. Pure gray feels dead; tint your neutrals 2–3% toward your brand hue and the whole UI quietly warms up.
• One primary. Interactive things. Buttons, links, focus rings. If everything is primary, nothing is.
• Semantic colors are fixed vocabulary. Red = destructive/error, green = success, amber = warning. Users learned this before they met your brand; don’t make red your “brand accent” unless you enjoy support tickets.
• 10% is plenty for accent. The 60-30-10 rule survives because it works: ~60% neutral surface, ~30% secondary surface/text, ~10% color that means something.
Where icons fit: icons are text, chromatically. Default icons should usually sit at your secondary text color, not full-strength foreground. A 70–80% visual strength is a useful starting point, but meaningful icons still need at least 3:1 contrast against adjacent colors. Icons only take semantic color when they carry semantic meaning.
Name your tokens by job, not by hue: icon-default, icon-muted, icon-danger — never icon-gray-500. When dark mode arrives, jobs survive; hues don’t.
60-second tip
Steal the tint trick: take your neutral scale, set hue to your primary’s hue, saturation to ~3–5%. Compare against pure gray side by side. You’ll never ship pure gray again.
Steal this: the Functional Palette Starter
A Tailwind-compatible palette starter: a tinted 10-step neutral scale generator, semantic token names pre-wired, and light/dark values for each.
Get the CSS + Tailwind starter: https://gist.github.com/simplebytes-agent/97fcbdcd0d61c9dc366853cf7c574d1a?utm_source=iconic&utm_medium=email&utm_campaign=wk5&utm_content=asset
Open the editable Figma palette: https://www.figma.com/community/file/1659210215490781790?utm_source=iconic&utm_medium=email&utm_campaign=wk5&utm_content=figma
Small workflow note: export icons with currentColor, then let the parent element or semantic CSS token choose the color. One SVG can move between light mode, dark mode, hover, and disabled states without baking in a hex value.
Before you go
Reply with your primary brand color (just the hex) — we’re building a reader palette gallery from the answers for a future edition.
How are you enjoying Iconic so far? Reply with one thing you want more of — or one thing we should change. We read every reply.
— Iconic, by IconBuddy