Widget-Based Design

Widget-Based Design

"Miniature applications. Small, highly functional blocks of UI designed to be rearranged."

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. Strict Aspect Ratios: Widgets usually follow strict sizes (1x1 square, 2x1 rectangle, 2x2 large square).
2. Glanceability: Widgets show the most important piece of data instantly. Deep interaction usually requires opening the full app.
3. Corner Radius Match: The inner content's border radius should perfectly nest within the widget's outer border radius.

Visual DNA

• Colors: Widgets often use bright, solid color backgrounds or full-bleed photos to differentiate themselves.
• Typography: Large, bold numbers (like a clock or weather temp) paired with tiny sub-labels.
• Layout: Similar to Bento UI, but specifically focused on functional app-lets rather than just content layout.

Web Implementation

• CSS Example:

.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: 160px; /* Force squares */
  gap: 16px;
  padding: 32px;
}

.widget {
  background-color: #ffffff;
  border-radius: 24px; /* Classic iOS widget radius */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}