FIELD NOTES / DESIGN DECISIONS
Practical guides for
color and UI design.
Focused explanations, implementation examples, and checklists for the small decisions that make interfaces easier to use.
THE LIBRARY / 12 ARTICLES
Explore the ideas.
12 guides
Color Theory for Interfaces: Hue, Chroma, Lightness, and Context
A practical guide to choosing and adjusting colors for web interfaces, with clear examples of hue, chroma, lightness, and contrast.
WCAG Color Contrast: AA Ratios, Exceptions, and a Testing Workflow
Understand WCAG 2.2 text contrast thresholds, when large-text exceptions apply, and what a color-pair checker does not test.
OKLCH vs HSL in CSS: A Practical Color Adjustment Example
See how OKLCH and HSL represent CSS colors, why their lightness controls behave differently, and how to add an OKLCH declaration safely.
How to Design and Export a UI Theme with LiveTheme
A product walkthrough: choose theme colors and fonts, review them on interface layouts, and copy framework-specific CSS.
Designing a Dark Mode Color Palette That Stays Readable
Build a dark theme by assigning surface and text roles, controlling bright accents, and checking contrast in real components.
DaisyUI 5 Themes: A Tailwind CSS Color Token Example
Create a small DaisyUI theme with current semantic CSS variables, understand the content-color pairing, and test it in components.
How to Build a UI Color Palette from One Brand Color
Turn a single brand color into interface roles, supporting surfaces, and tested foreground pairs without treating a generated palette as finished.
shadcn/ui Theme Colors: Map a Palette to CSS Variables
Map interface colors to shadcn/ui semantic variables, keep foreground pairs intentional, and review light and dark theme values.
Semantic Colors in UI Design: A Useful Token Map
Define primary, surface, text, and status colors by role, and avoid using hue alone to communicate meaning.
CSS Gradients for UI: Color Stops, Direction, and Readability
Write and adjust CSS gradients with deliberate color stops, then check text contrast across the rendered background.
Color Contrast in Web Forms: Labels, Errors, and Focus
Review the color decisions in form labels, hints, errors, borders, and focus indicators without relying on color alone.
A Practical Type Pairing and Scale for Web Interfaces
Choose complementary heading and body fonts, set a compact size scale, and check how typography behaves in real UI layouts.
FROM READING TO MAKING