mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
skill: drop unvalidated anti-centering rule; add image-led hero carve-out
The anti-centering rule ("Don't default to centering everything") was
added without empirical support. We have a detector for it
(everything-centered, threshold ≥70%) that fires on 0 / 998 samples
in the corpus — never validated, never useful.
Meanwhile the rule was almost certainly responsible for collapsing
Gemini 3.5 flash's luxury-hotel skill-on output from the canonical
"full-bleed photo + centered overlay headline" cinematic hero (the
shape skill-off Gemini chooses 67% of the time) to a 50/50
magazine grid (full-bleed rate drops to 18% under skill-on, -49pp).
Changes:
- skill/SKILL.md #### Layout: drop "Don't default to centering..."
- skill/reference/brand.md ## Layout: drop the same rule; replace
with a positive carve-out — image-led briefs (hotels, restaurants,
magazines, photography) often want full-bleed hero with overlaid
menu and centered headline; let the photograph be the design
- skill/reference/layout.md: drop the assessment question and the
"asymmetric breaks centered-content pattern" framing
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
1ae6846bc6
commit
d32cd832fb
@@ -44,7 +44,6 @@ Two hard typographic ceilings you currently miss:
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -46,7 +46,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -42,7 +42,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -41,7 +41,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -44,7 +44,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -42,7 +42,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -46,7 +46,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -44,7 +44,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -46,7 +46,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -46,7 +46,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -44,7 +44,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -44,7 +44,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -46,7 +46,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
@@ -51,7 +51,6 @@ Two hard typographic ceilings you currently miss:
|
||||
#### Layout
|
||||
|
||||
- Vary spacing for rhythm.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template.
|
||||
- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
|
||||
- Don't wrap everything in a container. Most things don't need one.
|
||||
- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
|
||||
|
||||
@@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg
|
||||
|
||||
- Asymmetric compositions are one option. Break the grid intentionally for emphasis.
|
||||
- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings.
|
||||
- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack.
|
||||
- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template.
|
||||
- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design.
|
||||
- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness.
|
||||
|
||||
## Imagery
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface.
|
||||
Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface.
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design:
|
||||
3. **Grid & structure**:
|
||||
- Is there a clear underlying structure, or does the layout feel random?
|
||||
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
|
||||
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
|
||||
|
||||
4. **Rhythm & variety**:
|
||||
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
|
||||
@@ -65,7 +64,7 @@ Create a systematic plan:
|
||||
- **Tight grouping** for related elements (8-12px between siblings)
|
||||
- **Generous separation** between distinct sections (48-96px)
|
||||
- **Varied spacing** within sections (not every row needs the same gap)
|
||||
- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense
|
||||
- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase).
|
||||
|
||||
### Choose the Right Layout Tool
|
||||
|
||||
|
||||
Reference in New Issue
Block a user