Design UI components with retro-futuristic aesthetics

A visual sub-style reference for "Retro Futurism" - the future as imagined in the 1950s-60s: rockets, atoms, and sleek aerodynamic chrome, also called Atompunk. It is a child reference of a parent design-it skill and is not meant to be triggered directly - it applies when a user's aesthetic request matches this specific look. Core principles are aerodynamic shapes with sweeping curves and teardrop forms rather than perfect squares, space-age motifs like stars, atoms, orbits, and 1950s-Cadillac-style fins, and mid-century pastel colors paired with shiny reflective chrome. Visual DNA specifies exact palette values - turquoise, atomic tangerine, mint green, silver/chrome, and deep space black - Googie-architecture or bold cursive typography, or clean mid-century geometric sans-serifs like Futura, and sleek bezels with dramatic drop shadows and offset overlapping shapes. It provides full, complete implementations across five platforms: CSS for web, an asymmetric-corner "atompunk card" with a hard offset box-shadow, a Googie-style sweeping background element, and a clip-path starburst motif; SwiftUI, asymmetric corner radii per corner to create the teardrop aerodynamic look, with chrome borders faked via a gray/white LinearGradient stroke; Flutter, BorderRadius.only() for native asymmetric corners, noting that a true gradient chrome border needs a CustomPaint; React Native, independent borderTopLeftRadius-style props for the aerodynamic shape, with a note that complex geometric backgrounds like starbursts should be SVG components via react-native-svg; and Jetpack Compose, RoundedCornerShape with independent topStart/topEnd/bottomEnd/bottomStart values and a native Brush-based border for the metallic gradient, noted as easier here than on other platforms. Do's and don'ts call for strict use of Futura or Century Gothic for an authentic mid-century feel, and explicitly forbid a dirty or distressed look - retro-futurism must read as clean, optimistic, and shiny, unlike standard retro or steampunk.

Use this sub-style when a user's aesthetic request matches 1950s-60s space-age futurism - sweeping aerodynamic shapes, atomic motifs, chrome accents - it is invoked as a reference within the parent design-it skill's style selection, not called directly by name. Do not use it for a dirty, distressed, or weathered look, since the style is explicitly defined as clean and optimistic rather than gritty retro or steampunk.

Input is a target platform - web, iOS, Flutter, React Native, or Android/Compose - and content to style. Output is complete, ready-to-adapt code implementing the asymmetric aerodynamic card pattern for that platform, for example the web CSS:

.atompunk-card {
  background-color: #fff;
  border: 4px solid #Silver;
  border-radius: 40px 10px 40px 10px; /* Sweeping, aerodynamic corners */
  padding: 32px;
  box-shadow: 15px 15px 0px rgba(0,0,0,0.1);
  position: relative;
}

Provides parallel implementations in CSS, SwiftUI, Flutter, React Native, noting a react-native-svg dependency for complex starburst shapes, and Jetpack Compose, all built around asymmetric corner radii, hard offset shadows, and metallic gradient borders.

Designers and frontend or mobile engineers implementing a mid-century "Atompunk" space-age aesthetic across web or native app platforms.