Gradient Design

Gradient Design is a design-style child skill ('color in motion - fluid transitions that add energy and depth to flat surfaces'), part of the design-it family and not meant to be triggered directly. Three core principles: Gradients as the Primary Visual (backgrounds, buttons, text, and borders all use gradients instead of solid colors), Analogous or Complementary Blends (gradient colors must be chosen carefully so the transition doesn't turn muddy - blending red directly to green creates a muddy brown midpoint, so the fix is routing through yellow: red to yellow to green), and Subtle Animation (background gradients should slowly shift and rotate rather than sit static).

Use it when the user's request matches this vibrant, energetic, color-in-motion aesthetic - hero sections, marketing pages, or creative tool branding that wants to feel alive rather than static. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA uses Warm Tech (blues to oranges) or custom vibrant pairs like Purple to Coral or Deep Blue to Cyan, clean heavy sans-serifs that mask well with a gradient fill, and a minimal UI structure (glass panels or white/black cards) so the gradients have room to breathe rather than competing with busy layout. The web implementation animates a large mesh-like gradient background by oversizing it (background-size: 400% 400%) and shifting background-position through a keyframe loop, applies a gradient fill directly to bold headline text via background-clip: text with transparent fill color, and fakes a gradient border using an absolutely-positioned pseudo-element sized slightly larger than the card, sitting behind it in z-index.

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
.gradient-text {
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

SwiftUI reproduces the animated background by toggling a LinearGradient's start/end points between two diagonal states inside a withAnimation(.linear(duration: 5.0).repeatForever(autoreverses: true)) loop, and applies the same gradient-text technique via .foregroundStyle(LinearGradient(...)) on bold display text - matching the web's CSS-clip trick with a native SwiftUI modifier instead of a workaround.

Designers and developers building a vibrant hero section, marketing page, or creative-tool brand identity that wants energetic, animated color as the primary visual element - with the color science handled correctly so blends stay vivid instead of turning muddy in the middle.