CSS Design Guide

Understanding color systems is fundamental to web design. Each system has specific strengths: HEX (#RRGGBB): The most common web color format. Six hexadecimal digits representing Red, Green, and Blue channels (0-255 each). Example: #3B82F6 is a bright blue. Shorthand (#RGB) is available when each pair is identical: #FFF = #FFFFFF. RGB / RGBA: Functional notation that separates Red, Green, Blue channels as decimal values. RGBA adds an Alpha channel for transparency. Example: rgba(59, 130, 246, 0.5) is the same blue at 50% opacity. HSL / HSLA: Hue (0-360°), Saturation (0-100%), Lightness (0-100%). The most intuitive system for designers because it maps to how humans think about color: • Hue is the color itself (0°=red, 120°=green, 240°=blue) • Saturation controls vibrancy (0%=gray, 100%=vivid) • Lightness controls brightness (0%=black, 50%=pure color, 100%=white) OKLCH (new): The newest CSS color space, supported since 2023. It provides perceptually uniform lightness, meaning a 50% lightness blue and 50% lightness yellow actually look equally bright — unlike HSL where they don't. OKLCH is becoming the preferred color system for design tokens. Pro Tip: Use HSL for your design system. Creating color scales becomes trivial — just adjust the Lightness value: hsl(220, 90%, 95%) for backgrounds, hsl(220, 90%, 50%) for primary, hsl(220, 90%, 20%) for text.

Great web design starts with understanding how colors interact and ensuring everyone can perceive them: Color Harmony Rules: • Complementary: Colors opposite on the wheel (blue + orange). High contrast, energetic. Use for CTAs and important UI elements. • Analogous: Adjacent colors (blue + blue-green + cyan). Harmonious and calming. Use for backgrounds and content areas. • Triadic: Three equally spaced colors (red + yellow + blue). Vibrant and balanced. Use one as primary, others as accents. • Split-Complementary: Base color + two colors adjacent to its complement. Less tension than complementary, more interest than analogous. • Monochromatic: Variations of a single hue (different saturation and lightness). Professional and cohesive. The safest choice. Accessibility (WCAG 2.1) Requirements: • Normal text: Minimum 4.5:1 contrast ratio against background • Large text (18px bold / 24px regular): Minimum 3:1 contrast ratio • UI components: Minimum 3:1 contrast ratio against adjacent colors • Don't rely on color alone to convey information (use icons, patterns, or text labels) Color Blindness Considerations: • 8% of men and 0.5% of women have some form of color vision deficiency • The most common type (deuteranopia) makes red and green look similar • Always test your palette with color blindness simulators • Ensure your design works in grayscale The 60-30-10 Rule: Apply your dominant color to 60% of the interface, secondary color to 30%, and accent color to 10%. This creates visual balance and natural hierarchy.

CSS gradients are resolution-independent, have zero file size impact, and are fully hardware-accelerated. Master them to replace heavy image backgrounds: Linear Gradients: The workhorse of web design. Define a direction and color stops: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); Advanced: Create sharp lines by placing two color stops at the same position: background: linear-gradient(to right, red 50%, blue 50%); /* sharp split */ Radial Gradients: Expand from a center point outward. Perfect for spotlight effects and button highlights: background: radial-gradient(circle at 30% 30%, #fff 0%, transparent 50%, #111 100%); Conic Gradients: Rotate around a center point like a color wheel. Used for pie charts, gauges, and artistic effects: background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red); Stacking Gradients: Multiple gradients can be layered using comma separation — a powerful technique for complex patterns without images: background: linear-gradient(135deg, rgba(255,0,0,0.3) 0%, transparent 50%), linear-gradient(225deg, rgba(0,0,255,0.3) 0%, transparent 50%), linear-gradient(315deg, rgba(0,255,0,0.3) 0%, transparent 50%); Performance Tips: • CSS gradients are rendered by the GPU and add zero bytes to page weight • Avoid animating gradient properties directly — animate opacity or transform instead • Keep color stops under 10 per gradient for best rendering performance • Use will-change: background carefully as it can increase GPU memory usage

Box shadows are the primary tool for creating visual depth in flat UI designs. Understanding shadow anatomy and creating consistent shadow systems elevates your design quality dramatically. Anatomy of box-shadow: box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color] [inset]; Creating Realistic Shadows: Real-world shadows have two components that most developers miss: 1. A large, soft shadow for ambient occlusion (the overall darkening) 2. A small, sharp shadow for the key light (directional light source) /* Realistic layered shadow */ box-shadow: 0 1px 3px rgba(0,0,0,0.12), /* sharp key shadow */ 0 4px 12px rgba(0,0,0,0.08); /* soft ambient shadow */ Elevation Systems (Material Design inspired): Create a consistent shadow scale for your design system: /* Level 1: Cards, input fields */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); /* Level 2: Dropdowns, popovers */ --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); /* Level 3: Modals, dialogs */ --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 6px 10px rgba(0,0,0,0.08); /* Level 4: Floating actions, tooltips */ --shadow-xl: 0 20px 50px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1); Neuomorphism (Soft UI): A design trend using dual shadows (light + dark) to create soft, extruded elements: box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff; Warning: Neumorphism can fail WCAG contrast requirements. Use sparingly and test carefully. Dark Mode Shadows: Shadows are less visible on dark backgrounds. Options: • Reduce opacity and increase blur • Use subtle borders instead of shadows • Use colored shadows matching the background hue • Consider using elevation through background lightness instead

Design tokens are the atomic values (colors, shadows, spacing, typography) that define your visual system. A well-structured token system ensures consistency across your entire application. Color Tokens (using CSS custom properties): :root { /* Base palette */ --color-primary-50: hsl(220, 90%, 96%); --color-primary-100: hsl(220, 90%, 90%); --color-primary-500: hsl(220, 90%, 50%); --color-primary-900: hsl(220, 90%, 15%); /* Semantic colors */ --color-bg: var(--color-primary-50); --color-text: var(--color-primary-900); --color-accent: var(--color-primary-500); /* Dark mode override */ @media (prefers-color-scheme: dark) { --color-bg: var(--color-primary-900); --color-text: var(--color-primary-50); } } Why This Approach Works: 1. Change one HSL hue value and your entire brand color palette updates 2. Semantic names (--color-text, --color-bg) decouple design intent from specific values 3. Dark mode becomes a simple token swap, not a complete redesign 4. Components reference tokens, not hardcoded colors, making themes trivial Popular Token Systems: • Tailwind CSS: Provides a pre-built, well-considered token system • Open Props: A set of CSS custom properties with great defaults • Radix Colors: Carefully crafted color scales with built-in accessibility • Material Design 3: Google's token-based design language Getting Started: Begin with 5 tokens: primary color, background, text, border, and shadow. Expand only when you need more specificity. A small, well-used token set is far more valuable than a comprehensive one nobody follows.