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

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 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)

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)

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)

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:

: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)

The 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:

.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)

The 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)

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

Asymmetry Techniques in Hallmark

The 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)

These techniques are documented in 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:

: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)

Explicitly Banned Layout Patterns

Hallmark maintains a hard bans list in 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)

The 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:

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)

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)

Key Source Files for Hallmark Layout Rules

File	Purpose
skills/hallmark/references/layout-and-space.md	Definitive layout doctrine and rule definitions
skills/hallmark/references/responsive.md	Responsive grid behavior and image track guidelines
skills/hallmark/references/slop-test.md	Automated quality gates and hard-fail conditions
skills/hallmark/references/structure.md	Left-margin and heading alignment complements
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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}