The Design Kit.
The tools and sites I actually use. Not exhaustive, just opinionated. If a category isn't here, it's because I don't think you need anything for it yet.
How to use this list
Don't bookmark all of them on day one. Pick what you need for the project in front of you. Each card is tagged so you can see at a glance: free means fully usable for free, free + paid means there's a free tier and a paid tier with more features, and paid means you'll pay for it.
For inspiration sites and where to gather references, see Chapter 03. For images and media specifically, see Chapter 06. For hosting, see Chapter 09.
Fonts & typography.
Type sets the personality before any other choice on the page. Spend more time here than you think you need to.
Google Fonts free
Free, fast, easy to embed. The default for almost any project. Filter by category, weight, and language.
Fontpair free
Curated Google Font pairings with live previews. Saves you an hour of mixing fonts that don't go together.
Typescale free
Calculate a typographic scale (sizes for h1, h2, h3, body) using ratios. Pair with your chosen font and copy the CSS.
Modern Font Stacks free
System font stacks that look great without loading anything from Google. Faster page loads, no font swaps. Great for performance-sensitive projects.
Color.
Most projects need: a brand palette (3–5 colors), a few neutrals, and at least one accent. These tools help you generate, refine, and check those.
Coolors free + paid
Generate palettes by spacebar. Great when you have one anchor color and need supporting hues.
Realtime Colors free
Test palettes on a real-looking marketing page in real time. Pastes immediate feedback on whether your colors actually work for headlines, body, accents.
CSS Gradient free
Build linear and radial gradients visually, copy CSS. Simple but you'll use it constantly for hero backgrounds.
Smooth Shadow free
Generate layered, realistic-looking shadows. The single-shadow defaults browsers give you look cheap; smooth shadows make cards feel premium.
Contrast Checker free
Make sure your text meets WCAG contrast guidelines so people can actually read it. Especially important for light text on dark backgrounds.
UI components.
Buttons, cards, hover effects, navigation patterns. When you need a specific element, these give you copy-paste code.
UIverse free
Massive open community library. Free. Filter by component type and visual style. Save the CSS as you shop (see Chapter 03).
Aceternity UI free
Modern, animated React components. Tailwind-based. Heavy on the SaaS-y aesthetic. Much of the source can be adapted to plain HTML/CSS.
CodyHouse free + paid
More designed and accessibility-conscious. Reliable patterns for nav menus, modals, tabs, and forms.
Tailwind UI paid
Premium component library if you're using Tailwind. Worth the one-time fee if you're building lots of marketing sites.
Animation.
Used sparingly, animation makes a site feel alive. Used heavily, it makes a site feel slow. Less is almost always more.
GSAP free
The professional standard for scroll-triggered, timeline-based animation on the web. Free for most uses. The ACF site uses it.
Animista free
Visual CSS animation generator. Pick a feel (slide, fade, focus-in), tweak parameters, copy the keyframes. No JavaScript required.
AOS — Animate On Scroll free
Lightweight library for "fade in as you scroll" effects. Add an HTML attribute to any element. Easier than GSAP for simple cases.
LottieFiles free + paid
Free and paid library of vector animations (think animated illustrations). Drop into any site as a small JSON file.
Icons & illustrations.
Skip the emoji. Use a real icon set so the site looks intentional.
Phosphor Icons free
9,000+ icons in six weights. My default. Free. Great for both UI bits and illustrative accents.
Heroicons free
Cleaner, more minimal set from the Tailwind team. Two weights (outline and solid). Pairs well with Inter.
Lucide free
Open-source fork of Feather. Slightly more comprehensive. Friendly stroke-based style.
unDraw free
Free editorial-style illustrations you can recolor to match your palette. Use sparingly — they get visual fatigue fast.
Code editors (optional).
You don't need a code editor if you're using Claude Code. Claude reads, writes, and edits files for you. You can build entire sites without ever opening one.
An editor becomes useful if you want to: quickly peek at a file without prompting Claude, make a tiny manual tweak, browse your project folder visually, or view image and asset files. If that sounds useful, here are the options. If it doesn't, skip this section.
Cursor free + paid
VS Code with AI baked in. If you don't use Claude Code, this is the closest equivalent inside an editor.
VS Code free
Free, ubiquitous, plenty of extensions. The standard if you don't want AI in your editor. Pairs with Claude Code (run Claude Code in VS Code's built-in terminal).
Zed free
Newer, faster, more elegant. Good if VS Code feels heavy. AI features improving quickly.
Browser extensions.
The handful of extensions that actually save time on every project.
WhatFont free
Hover over any text on any site, see the font name and size. Indispensable when you're shopping for type.
ColorZilla free
Eyedropper for any color on any page. Grab the exact hex of a color you like.
Wappalyzer free + paid
Tells you what tech stack a site is built with — Squarespace, Webflow, custom React, etc. Useful when you're studying competitor sites.
What was actually used on the ACF build
From this kit, the ACF site pulls in Google Fonts (Plus Jakarta Sans, DM Sans), Phosphor Icons for accents, and GSAP + ScrollTrigger as the animation engine. On top of that is a stack of custom CSS work: floating-bubble shapes behind standout images, a custom cursor that morphs over interactive elements, gradient overlays, layered soft shadows, and a bunch of bespoke keyframe animations that go beyond what any single tool gives you out of the box.
The point: the design kit is a starting library, not a finished site. You pull what you need from it, then write the actual personality on top. WhatFont and ColorZilla got heavy use during the look book phase. Animista helped sketch animation ideas before hand-tuning them. The site has way more going on under the hood than the short list of tools suggests.
What's next
You have your fonts, colors, components, and animation tools picked out. Next chapter is images and media — where to source photos and video, how Cloudinary works, and how not to get charged unexpectedly.