flat-design

Flat Design

"Digital surfaces should look digital. Embrace the 2D plane."

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. Zero Depth: Absolutely no drop shadows, bevels, gradients, or 3D effects. Everything sits on the same z-axis.
2. Sharp & Simple Geometries: Perfect circles, sharp rectangles. No complex organic shapes.
3. High Contrast Solid Colors: Rely on stark contrast between solid blocks of color to delineate space.

Visual DNA

• Colors: Pairs well with Industrial Chic or Modern Editorial. Avoid gradients entirely.
• Typography: Strong, highly legible sans-serifs (e.g., Roboto, Open Sans). Keep it medium to bold.
• Icons: Solid, monochromatic, glyph-style icons without intricate details.

Web Implementation

• Rely entirely on background colors and borders for structure.
• CSS Example:

.flat-card {
  background-color: var(--secondary-base);
  border: 2px solid var(--primary-text);
  border-radius: 0; /* Sharp corners preferred */
  padding: 32px;
  /* NO box-shadow */
}
.flat-btn {
  background-color: var(--cta-highlight);
  color: #fff;
  border: none;
  padding: 16px 32px;
  font-weight: 700;
  text-transform: uppercase;
  transition: opacity 0.2