UI design fundamentals: color, typography, spacing and weight
Learn the building blocks of an interface with step-by-step guides, working specimens, and reusable CSS examples.
Live React previews. Copyable code. Made for your next product.
Start here.
How to create a UI color palette, step by step
Build a UI color palette with semantic roles, copyable CSS tokens, contrast checks, and a practical review checklist.
How to choose font pairings for a product interface
Choose a font pairing using real UI specimens, role assignments, fallback checks, and a practical typography specification.
Serif vs. sans serif: how to choose for your interface
Compare serif and sans serif fonts using product tasks, realistic specimens, and a decision checklist instead of style stereotypes.
Explore design fundamentals.
30 resources to explore
Step-by-step guides 5
Work through a practical design task from start to finish.
How to create a UI color palette, step by step
Build a UI color palette with semantic roles, copyable CSS tokens, contrast checks, and a practical review checklist.
How to create semantic color tokens for UI
Map primitive colors to semantic UI tokens, document states and themes, and validate meaning with a small implementation example.
GitHub for designers: your first pull request, step by step
Learn repos, branches, commits, and pull requests with a designer-friendly walkthrough, GitHub Desktop options, naming examples, and a copyable PR template.
How to check color contrast in a UI
Check text and interface contrast with a live calculator, WCAG reference thresholds, state-by-state examples, and a review checklist.
How to create a UI spacing system
Build a spacing scale with semantic roles, CSS tokens, component examples, and a responsive layout checklist.
Color codes 20
Find a color, copy its codes, and check contrast.
Red color codes: #FF0000
Red HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Orange color codes: #FFA500
Orange HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Yellow color codes: #FFFF00
Yellow HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Green color codes: #008000
Green HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Lime color codes: #00FF00
Lime HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Blue color codes: #0000FF
Blue HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Navy color codes: #000080
Navy HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Cyan color codes: #00FFFF
Cyan HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Teal color codes: #008080
Teal HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Purple color codes: #800080
Purple HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Pink color codes: #FFC0CB
Pink HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Magenta color codes: #FF00FF
Magenta HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Coral color codes: #FF7F50
Coral HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Lavender color codes: #E6E6FA
Lavender HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Beige color codes: #F5F5DC
Beige HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Brown color codes: #A52A2A
Brown HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Gray color codes: #808080
Gray HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Black color codes: #000000
Black HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
White color codes: #FFFFFF
White HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Gold color codes: #FFD700
Gold HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Fonts & typography 4
Choose typefaces, pair fonts, and build a type scale.
How to choose font pairings for a product interface
Choose a font pairing using real UI specimens, role assignments, fallback checks, and a practical typography specification.
Serif vs. sans serif: how to choose for your interface
Compare serif and sans serif fonts using product tasks, realistic specimens, and a decision checklist instead of style stereotypes.
How to create a UI type scale with CSS examples
Create a practical UI type scale, assign semantic text roles, and test size, weight, line height, and responsive behavior.
Font weight, border width, and icon strokes: a UI guide
Choose font weights, border widths, and icon strokes with a live specimen, CSS examples, and practical hierarchy checks.
Design glossary 1
Understand the language of product design.
Give your workflow
a new set of skills.
Reusable AI skills from the TDP team. Explore the collection and find a practical starting point for your next project.
Explore the skills repo