Palette Studio — a free color palette, typography, spacing, motion, and UI component tool for developers, with WCAG contrast and colorblindness checking, and export to CSS, Tailwind, SCSS, or an AI prompt.

Contents

1. What UI and UX actually mean

UI (User Interface) is everything you can see and touch on screen — the buttons, colors, text, icons, layout. UX (User Experience) is how it feels to use — whether someone can find what they need, whether the app responds quickly, whether mistakes are easy to fix. A screen can look beautiful (great UI) and still be confusing to use (bad UX), or the reverse: plain-looking but effortless. You need both, and most of this guide is really about UI — color, type, motion, components — in service of good UX.

2. Why a "system" instead of one-off design

If every button, every screen, every color is decided independently, two things go wrong: it looks inconsistent (users notice, even if they can't say why), and it gets slower to build over time, because nothing is reused. A design system is just a small set of decisions made once — a handful of colors, one or two fonts, one spacing scale — that everything else reuses. This tool exists to help you make exactly those decisions once, in the Palette, Type, and Motion tabs, and then apply them everywhere via Preview and Export.

3. How to actually choose colors

This is the part beginners overthink. Here's a practical order of decisions — follow it top to bottom and you'll land somewhere reasonable:

1. Pick light or dark first. This one choice affects everything else. Dark feels technical/premium/focused (dashboards, dev tools); light feels open/friendly/simple (most consumer and marketing sites). Neither is "better" — pick what fits your audience.
2. Pick exactly one accent color. This is your brand color — used for primary buttons, links, and anything that should draw the eye. Base it on the emotion you want: blue reads trustworthy/calm, green reads positive/natural, orange/red reads energetic/urgent, purple reads creative/premium. Don't pick five "brand colors" — pick one, and let it work hard.
3. Add two semantic colors: positive and negative. These should almost always stay close to green and red — not because it's a rule, but because users have learned that association everywhere else and fighting it just confuses people.
4. Add your neutrals. A background, a surface (card) color, and two text colors (primary and secondary/muted). These do 90% of the visual work and get almost no attention — make sure primary text is easy to read on the background before anything else.
5. Check contrast immediately, not at the end. A palette that looks great as five swatches next to each other can still be unreadable as actual text. This tool's Palette tab checks WCAG contrast live, as you pick — use it.
6. Stop there. Accent + positive + negative + background + surface + 2 text colors is a complete, professional palette. Everything else (chip backgrounds, hover states, chart colors) can be derived from these six — lighter/more transparent versions of the same hues — rather than invented separately. That's exactly what this tool's "soft" and "strong" variants are.

4. How to choose fonts

Two fonts is almost always enough: one for headings, one for body text. They should contrast in character — a serif heading with a sans-serif body, or a bold geometric heading with a neutral, highly-readable body — but not fight each other in mood. Body text especially should be boring on purpose: it's read the most and noticed the least when it's doing its job. Then apply a type scale — a set of sizes that grow by a consistent ratio (1.25× is a safe default) — instead of picking sizes by eye. The Type tab has nine curated pairings and a scale generator to try this hands-on.

5. Spacing & layout, briefly

Pick one spacing unit (8px is the most common) and only ever use multiples of it — 8, 16, 24, 32px. This alone makes a layout look intentional instead of eyeballed. Whitespace around content is not wasted space — it's what makes a busy screen feel calm and tells the eye what belongs together (things close together are related; things far apart aren't). When in doubt, add more space, not less.

6. Using motion on purpose

Every animation should answer a question: where did this element come from, or where is it going? A card that slides up as it appears tells the eye it "arrived" from below. A button that lifts on hover tells you it's interactive before you click it. Motion that exists only to look impressive — without answering one of those questions — usually just slows the interface down and annoys repeat users. Keep most transitions under 300ms. The Motion tab shows twelve common patterns and when each one is appropriate.

7. Accessibility, the non-negotiable basics

You don't need to become an expert to avoid the most common, most harmful mistakes:

• Text needs enough contrast against its background to be readable — check the ratio, don't eyeball it (this tool does it for you).
• Never use color as the only way to communicate something (e.g. "red text means error") — pair it with an icon, label, or shape too.
• Anything clickable needs a visible focus state for people navigating by keyboard, not just a mouse.
• Buttons and tap targets need to be big enough to hit reliably, especially on mobile (44×44px is the common minimum).

8. A starting workflow you can copy

Decide colors, then fonts, then how things should move — in that order, each one is a small, contained decision. Then look at Preview (both Web and Mobile) to see whether the whole system holds together, not just each piece in isolation. Only once it looks right there do you export the code or copy the AI prompt — exporting first and fixing colors after just means redoing the export.

9. Mistakes almost everyone makes at first

• Too many accent colors. If everything is emphasized, nothing is. One accent, used consistently, reads as more confident than five "brand colors."
• Checking contrast only at the end. Fix it while you're picking colors, not after the whole UI is built around a palette that turns out to be unreadable.
• Copying colors without copying their context. A palette that looks great on someone else's dark, minimal dashboard may not survive being applied to your dense, light data table — always test against your own real content.
• Designing only the happy path. Every screen needs a loading state, an empty state, and an error state, too — not just the version with perfect data.
• Treating motion and accessibility as decoration. Both are functional, not optional polish — they change whether people can actually use what you built.