#design tokens
Articles tagged “design tokens”
5 articles with this tag
How to Build a Landing Page Color System Without Starting From Scratch
How to Build a Landing Page Color System Without Starting From Scratch The hardest part of choosing landing page colors is not finding a nice color. It is building a system that still works after the hero section. I have made this mistake more than once. I pick a good primary color, drop it into a button, maybe add a...
6 min readRead more
How to Export a Website Color Palette Into CSS, Tailwind, and JSON
How to Export a Website Color Palette Into CSS, Tailwind, and JSON Exporting colors sounds simple until you actually try to use the colors in a real project. A palette on its own is just inspiration. A copied export is where it starts becoming useful. That is the reason I cared so much about the export flow in Color...
7 min readRead more
How to Turn a Website Color Palette Into Design Tokens
How to Turn a Website Color Palette Into Design Tokens A color palette is useful for about five minutes. Design tokens are useful for the whole project. That difference took me longer to learn than I want to admit. When I first started studying website colors, I was happy just to collect hex codes. I would see a clean...
8 min readRead more
Why Color Contrast Matters More Than the Palette Itself
Why Color Contrast Matters More Than the Palette Itself I used to judge color palettes too quickly. If the swatches looked good together, I assumed the design would work. A soft background, a confident primary color, a muted accent, a few calm neutrals. That was enough to make me feel like I had a direction. I would...
9 min readRead more
How I Built Color Scheme Extractor
How I Built Color Scheme Extractor I built Color Scheme Extractor because I kept running into the same small design problem. I would land on a website that looked good, pause for a second, and think: "Why does this color system feel so clean?" Sometimes it was a SaaS landing page with one confident accent color....
10 min readRead more