← ClaudeAtlas

design-fundamentalslisted

A working reference for visual and graphic design fundamentals — typography, color, layout and grids, visual hierarchy, spacing, and the perception principles behind them. Consult this whenever making or critiquing visual design decisions: choosing or pairing typefaces, setting type for readability, building a color palette, laying out a page/screen/slide/poster, establishing hierarchy, fixing a cluttered or unbalanced composition, or explaining *why* a design does or doesn't work. Use it when the user asks for design feedback, wants their layout/typography/color improved, or is designing any visual artifact and wants it to look considered rather than accidental. Reach for this even when "design fundamentals" isn't named — any real visual-design choice benefits from it.
JoaoMonteiro100/ux-design-skills · ★ 0 · Web & Frontend · score 67
Install: claude install-skill JoaoMonteiro100/ux-design-skills
# Design Fundamentals A reference for the durable fundamentals of visual design — the principles that hold across brands, tools, and trends. Use it to make deliberate choices and to explain them. Good design usually isn't the product of one bold move; it's many small, consistent decisions about type, space, color, and alignment that add up to something that feels effortless. The guiding instinct throughout: **reduce noise so the message comes through.** Most visual problems are too much (clutter, too many fonts/colors/sizes, competing focal points) rather than too little. When something looks wrong but you can't name why, suspect inconsistency, weak hierarchy, or cramped spacing first. This file covers the essentials inline. For a decision, jump to the relevant section; for a critique, walk all of them. ## Typography Type is most of the design in most interfaces and documents. Get it right and the rest gets easier. **Readability first.** - **Measure (line length):** aim for roughly 45–75 characters per line for body text. Too long and the eye loses its place returning to the next line; too short and rhythm breaks. - **Line height (leading):** body text usually wants ~1.4–1.6× the font size. Denser for short labels, looser for long-form reading. Larger headings need *tighter* relative leading than body. - **Size:** body text should be comfortable at its viewing distance — on screen, ~16px and up for primary reading text. Don't make people work. - **Contrast:**