Flat Design 2.0 (Semi-Flat)

Flat Design 2.0 (Semi-Flat) is a design-style child skill ('flat aesthetics, but with subtle hints of physics to communicate interactability'), part of the design-it family and not meant to be triggered directly - and distinct from plain Flat Design, which forbids shadows entirely. Three core principles: Mostly Flat (the primary aesthetic stays 2D and solid), Subtle Elevation (extremely soft, large-spread shadows used strictly to indicate interactable elements like buttons and floating action buttons, or layered elements like modals), and Micro-Gradients (occasional, barely-noticeable linear gradients so large surfaces don't feel dead).

Use it when the user's request matches this restrained-but-not-totally-flat aesthetic - modern SaaS products or clean consumer apps that want flat's clarity without feeling lifeless or losing interactivity cues. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA pairs well with Warm Tech or Earth-Grounded Elegance palettes, clean readable sans-serifs, and a strict shadow discipline: shadows must be low opacity, high blur, and tinted with the background color rather than pure black - rgba(43, 48, 58, 0.08) instead of a generic black shadow. The web implementation applies a very subtle, diffuse box-shadow to cards (0 10px 30px var(--shadow-color)), deepening slightly with a lift (translateY(-4px)) on hover, and gives interactive buttons a small colored shadow tinted to the button's own accent color rather than neutral black.

.flat2-card {
  box-shadow: 0 10px 30px var(--shadow-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flat2-card:hover { transform: translateY(-4px); }

SwiftUI enforces the same restraint with explicit numeric guidance: shadow opacity should stay in the 0.05-0.08 range with a 10-16pt blur radius - "if you can immediately see the shadow, it's too heavy" - always tinted (e.g. Color.accentColor.opacity(0.25) for a button shadow, never pure black), plus a subtle scaleEffect press-down animation to add physical feedback without breaking the flat illusion, driven by a long-press gesture that tracks pressed state rather than a full button-press animation.

Designers and developers building a modern SaaS or consumer product who want flat design's clarity plus just enough tinted, understated shadow to signal what's interactable - without sliding into either harsh drop-shadow skeuomorphism or completely flat, feedback-less surfaces - the tell for getting it right is that the shadow should never be the first thing a user consciously notices about the layout.