# Hallmark Layout Rules Explained: Principles, Scales, and Banned Patterns

> Discover Hallmark layout rules: 12 principles including spacing scales, mandatory asymmetry, CSS Grid, and banned patterns. Prevent AI-generated designs.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-08-16

---

**Hallmark enforces 12 layout rules—including primary axis selection, a nine-step spacing scale, mandatory asymmetry, CSS Grid preference, and explicit bans on center-aligned designs—to prevent "AI-generated" visual templates.**

Hallmark treats layout as the primary guard against generic, AI-looking pages. These **Hallmark layout rules** are codified in the [`skills/hallmark/references/layout-and-space.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md) reference file and reinforced companion guides for responsive behavior and quality gates. The system is purposefully opinionated: every spatial decision signals design intent rather than defaulting to safe, symmetrical templates.

## Core Layout Principles in Hallmark

Hallmark's foundational rules establish directional bias and intentional imperfection as design virtues.

### Primary Axis Selection

Every Hallmark layout **must choose a dominant direction**: left-biased, right-biased, top-heavy, or bottom-weighted. Center-bias is permitted only as a fallback default, never as an active choice.

> *"A layout has a primary axis…"* — Layout-and-Space § Principles ([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L7))

This directional commitment prevents the visual flatness that characterizes untemplated AI output.

### Mandatory Asymmetry

**Intentional asymmetry reads as human design intent**. Perfect symmetry is flagged as template-generated slop. Hallmark builders must break balance through deliberate spatial decisions rather than accepting even distributions.

> *"Asymmetry reads as intentional…"* — Layout-and-Space § Principles ([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L8))

### Varied Spacing Prohibition

Uniform gaps—every section padded at `24px`, for example—create machine-like rhythm. Hallmark requires **mixed spacing scales** within any view: combine small, medium, and large gaps to disrupt predictable cadence.

> *"Varied spacing. If every gap is 24px…"* — Layout-and-Space § Principles ([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L10))

## The Hallmark Spacing Scale

Hallmark mandates a **4pt base unit with nine named steps**. Raw pixel values are forbidden throughout the system.

### Named Scale Implementation

The scale uses functional naming (`-3xs` through `-4xl`) rather than size descriptions, enforcing semantic intent:

```css
:root {
  --space-3xs: 0.125rem;  /* 2 px */
  --space-2xs: 0.25rem;   /* 4 px */
  --space-xs:  0.5rem;    /* 8 px */
  --space-sm:  0.75rem;   /* 12 px */
  --space-md:  1rem;      /* 16 px */
  --space-lg:  1.5rem;    /* 24 px */
  --space-xl:  2.5rem;    /* 40 px */
  --space-2xl: 4rem;      /* 64 px */
  --space-3xl: 6rem;      /* 96 px */
  --space-4xl: 9rem;      /* 144 px */
}

```

> *"4pt base. Nine steps. Named by role, not size."* — Layout-and-Space § The spacing scale ([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L15-L28))

The [`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css) file implements this scale as CSS custom properties, ensuring cross-component consistency.

## CSS Grid and Responsive Rules

### Grid-First Architecture

Hallmark **prefers CSS Grid for page-level layout** and reserves Flexbox for component internals. This separation of concerns enables complex two-dimensional arrangements while maintaining component portability.

### Fluid Auto-Fit Grids

Static column configurations—particularly the ubiquitous three-equal-cards pattern—are explicitly prohibited. Hallmark requires fluid responsive behavior:

```css
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

```

> *"Prefer CSS Grid… Don't default to 3 columns of equal cards"* — Layout-and-Space § Grids ([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L37-L40))

The [`skills/hallmark/references/responsive.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md) file extends these guidelines with rules for image-bearing tracks and breakpoint-specific density changes.

### Named Grid Areas for Complex Layouts

Sophisticated arrangements must declare **named grid areas** and rename them at breakpoints:

> *"Use named grid areas for complex layouts"* — Layout-and-Space § Grids ([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L40))

This naming convention documents spatial intent directly in CSS, making layout logic inspectable and maintainable.

## Asymmetry Techniques in Hallmark

The [`layout-and-space.md`](https://github.com/Nutlope/hallmark/blob/main/layout-and-space.md) reference defines six specific techniques for breaking symmetry:

| Technique | Implementation |
|-----------|----------------|
| **Wide left margin** | Asymmetric page margins that weight content leftward |
| **Hanging headers** | Intentionally misaligned heading blocks (opt-in) |
| **Offset grids** | Grid items that break alignment to adjacent cells |
| **Grid-breaks** | Deliberate empty cells or spanning disruptions |
| **Generous top/tight bottom** | Vertical asymmetry in section padding |
| **Alignment coherence** | Consistent misalignment across related elements |

([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L42-L50))

These techniques are documented in [`skills/hallmark/references/structure.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/structure.md) with complementary rules for left-margin and heading alignment.

## Depth, Shadow, and Z-Index Rules

### Hierarchy Without Shadow Dependency

Hallmark conveys depth through **weight, size, and hue variation** rather than shadow density. The system permits only two predefined shadow tokens.

### Named Z-Index Scale

Ad-hoc `z-index` values are banned. Hallmark provides a six-level named scale:

```css
:root {
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}

```

> *"Depth is weight and scale, not shadow… Z-index has six levels, named."* — Layout-and-Space § Depth ([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L51-L69))

## Explicitly Banned Layout Patterns

Hallmark maintains a hard **bans list** in [`layout-and-space.md`](https://github.com/Nutlope/hallmark/blob/main/layout-and-space.md) that triggers immediate rejection:

- **Centre-aligned everything** — default centering without directional intent
- **100vh single-sentence heroes** — wasteful vertical centering with minimal content
- **Card-in-card patterns** — nested container anti-patterns
- **Identical feature grids** — repetitive three-column equal cards
- **Uniform padding** — consistent spacing without variation
- **Ad-hoc z-index** — unscoped stacking context values
- **Shadow-on-dark glow** — inappropriate depth effects

([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L72-L80))

The [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) file implements automated enforcement of these prohibitions as quality gates.

## Page-Edge Clipping Safety

Any element that deliberately overflows the viewport—clipped-edge enrichment, full-bleed marquees, or oversized headlines—must be paired with global clipping protection:

```css
html { overflow-x: clip; }
body { overflow-x: clip; }   /* fallback for older Safari */

```

> *"Always pair clipped-edge with a global clip… `html { overflow-x: clip; }`"* — Layout-and-Space § Page-edge clipping ([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L82-L93))

This rule prevents horizontal scroll contamination while enabling intentional edge-breaking visual effects.

## Recovery Patterns: When Layouts Look "Fine But Flat"

Hallmark provides five specific interventions for layouts that pass technical validation but lack visual life:

1. **Add a break-out element** — pull one item outside the main container
2. **Unbalance column widths** — shift from equal distribution to ratio-based sizing
3. **Move the primary CTA off-centre** — reject default button placement
4. **Remove a card** — create asymmetric groupings through subtraction
5. **Alter section padding** — change vertical rhythm between adjacent sections

> *"If the layout looks fine but flat, do one of these…"* — Layout-and-Space § When in doubt ([source](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md#L104-L112))

## Key Source Files for Hallmark Layout Rules

| File | Purpose |
|------|---------|
| [`skills/hallmark/references/layout-and-space.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md) | Definitive layout doctrine and rule definitions |
| [`skills/hallmark/references/responsive.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md) | Responsive grid behavior and image track guidelines |
| [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) | Automated quality gates and hard-fail conditions |
| [`skills/hallmark/references/structure.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/structure.md) | Left-margin and heading alignment complements |
| [`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css) | Production implementation of spacing, grids, and clipping |

## Summary

- **Hallmark layout rules** enforce directional bias through mandatory primary axis selection—center is only a fallback
- A **4pt-based, nine-step named spacing scale** replaces all raw pixel values
- **CSS Grid dominates page layout**; Flexbox is restricted to component internals
- **Intentional asymmetry** is required through specific techniques: wide margins, offset grids, hanging headers, and varied spacing
- **Hard bans** eliminate common AI-template patterns: center-aligned everything, identical feature grids, card-in-card, and ad-hoc z-index
- **Global clipping protection** (`overflow-x: clip`) is mandatory for any overflowing decorative elements
- Recovery interventions provide concrete fixes when layouts feel technically correct but visually flat

## Frequently Asked Questions

### Why does Hallmark ban center-aligned layouts?

Center-alignment is the default choice of untemplated AI systems and untrained designers. Hallmark treats it as a lazy fallback that signals absence of directional intent. The system permits center-bias only when no stronger primary axis can be justified.

### What happens if I use raw pixel values instead of the spacing scale?

Raw pixel values violate the Hallmark spacing scale and will fail the slop-test quality gate. The nine-step named scale (`--space-3xs` through `--space-4xl`) ensures consistent rhythm and self-documents spatial intent through semantic naming.

### Can I use Flexbox for page-level layouts in Hallmark?

No—Hallmark explicitly prefers **CSS Grid for page-level layout** and reserves Flexbox for component internals. This architectural separation enables complex two-dimensional arrangements that Flexbox cannot express efficiently.

### How does Hallmark prevent the "three equal cards" anti-pattern?

The system **prohibits static column configurations** entirely. The `auto-fit` fluid grid pattern with `minmax()` constraints replaces fixed column counts, ensuring responsive density without manual breakpoint management.