Color is one of the most powerful tools in design, communicating emotion, hierarchy, and brand personality. The 60-30-10 color rule creates balanced compositions by dedicating 60% of the design to a dominant color, 30% to a secondary color, and 10% to an accent color that draws attention to key elements. Color psychology informs these choices: red signals urgency or error, green conveys success or affirmation, blue builds trust and calm, yellow attracts attention, and orange feels friendly and action-oriented. Color harmony principles like complementary, analogous, triadic, and monochromatic schemes ensure pleasing combinations, while understanding color temperature (warm versus cool) helps set the emotional tone. Beyond aesthetics, color must meet accessibility standards; the Web Content Accessibility Guidelines (WCAG) require contrast ratios of at least 4.5:1 for normal text and 3:1 for large text, ensuring readability for users with visual impairments.
Typography shapes how users read, scan, and absorb information. Typography hierarchy uses different sizes, weights, and styles to create clear distinction between headings, subheadings, and body text, guiding readers through content. Optimal line height (leading) is typically 1.4 to 1.6 times the font size for body text, while line length should stay between 50 and 75 characters for comfortable reading. Kerning adjusts space between specific letter pairs, particularly important in headings and logos, while tracking applies uniform spacing across a text block and is especially valuable at small or large sizes. Designers pair fonts thoughtfully, often contrasting serif and sans-serif options, and rely on modular scales built from mathematical ratios to maintain harmony. Responsive typography uses relative units like rem and viewport units to scale fluidly across screen sizes.
Layout and composition tie color and typography together into coherent interfaces. Responsive design ensures layouts adapt gracefully across desktop, tablet, and mobile viewports, with mobile-first design increasingly the norm as it forces focus on core functionality under constrained conditions. Grid systems, often based on twelve columns, provide structural alignment, while the eight-point grid system sizes and spaces all elements in multiples of eight pixels for visual consistency. Whitespace, also called negative space, is never wasted; it improves readability, creates focus, and gives designs room to breathe. Designers must also consider how design styles evolve, from skeuomorphic interfaces that mimic real-world objects, to flat design that emphasizes simplicity, to Material Design's blend of flat aesthetics with subtle depth, to neumorphism's controversial soft shadows that often fail contrast requirements.