Flat UI stays, but surfaces gain depth via subtle texture, micro-noise, and soft specular highlights. Pair clean grids with “material cues” that hint at glass, fabric, or brushed metal. Keep contrast high and motion low.

Monospace-inspired grotesks with tight tracking and geometric numerals. Use for data, pricing, and code-adjacent brands. Mix one expressive weight with a humanist body font. Optical sizing on, letter-spacing negative on big heads.

Two-tone palettes dominate: dark base + one saturated accent. Accent drives state, charts, and CTAs. Build tokens first; guard contrast in light/dark.

Micro-transitions in 120–220 ms, physics eased. Emphasize causality: press → response. Respect reduced motion. Prefer transform/opacity only.

Magazine layouts enter product: wide margins, pull quotes, annotated imagery. Use for onboarding, case studies, and feature launches. Keep typographic scale consistent.

Low-frequency, GPU-friendly gradients with hue drift tied to app state or time. Avoid rainbow noise; pick a 20–40° hue arc. Export as CSS conic/linear where possible.

Tiny GL scenes and billboarded depth for context, not spectacle. Prebake lighting, cap DPR, and fall back to video/Lottie on mobile. Use to explain mechanisms or space.

Interfaces foreground metrics: sparklines, deltas, thresholds. Visual hierarchy follows signal strength. Charts blend with UI tokens, not libraries’ defaults.

Hard light, crisp shadows, true-to-life color. Minimal retouch. Show grips, seams, ports—honest product storytelling.

Small, purpose-built real-world cues: toggle notches, embossed stamps, stitched dividers. Use sparingly to guide affordance.

Badges and frames that label generated/assisted content. Neutral iconography, timestamps, provenance links. Trust as a design layer.