flat-design-2

Flat Design 2.0 (Semi-Flat)

"Flat aesthetics, but with subtle hints of physics to communicate interactability."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Mostly Flat: The primary aesthetic remains 2D and solid.
2. Subtle Elevation: Use extremely soft, large-spread shadows strictly to indicate interactable elements (buttons, floating action buttons) or layers (modals).
3. Micro-Gradients: Occasional, barely noticeable linear gradients to prevent large surfaces from feeling dead.

Visual DNA

• Colors: Pairs well with Warm Tech or Earth-Grounded Elegance.
• Typography: Clean, readable sans-serifs.
• Shadows: Shadows must be low opacity, high blur, and usually tinted with the background color, not pure black.

Web Implementation

• CSS Example:

:root {
  --shadow-color: rgba(43, 48, 58, 0.08); /* Tinted shadow */
}

.flat2-card {
  background-color: var(--bg-primary);
  border-radius: 8px;
  padding: 32px;
  /* Very subtle, diffuse shadow */
  box-shadow: 0 10px 30px var(--shadow-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flat2-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(43, 48, 58, 0.12);
}

.flat2-bt