Default Settings and Configurations in Nutlope/hallmark: A Complete Reference

Hallmark applies tightly controlled defaults including an editorial genre, a catalog of 20 themes, content-driven responsive breakpoints, and mandatory CSS custom properties, all enforced by a 58-gate quality checklist.

Hallmark is an opinionated design skill that encapsulates a disciplined set of defaults to prevent AI-generated "default" UI patterns. According to the source code in skills/hallmark/SKILL.md, these configurations are applied automatically unless explicitly overridden, ensuring every build starts from a baseline that avoids common AI slop.

Core Default Behaviors

Default Verb Dispatch

The skill’s entry point treats any invocation without a specific verb as the default verb. As implemented in skills/hallmark/SKILL.md (lines 21-22), this default verb selects a macrostructure, applies a theme, runs the slop-test, and emits the final page. Running hallmark without arguments triggers this complete design flow automatically.

Genre and Theme Defaults

The editorial genre serves as the default voice when no signal is detected in the brief. This canonical anti-AI-slop voice is loaded automatically from skills/hallmark/references/genres/editorial.md (lines 30-33). For visual styling, Hallmark ships a catalog of 20 named themes that serves as the default theme route; custom themes are engaged only when explicitly requested (lines 40-45).

Macrostructure Selection

Page shape selection draws from 21 macrostructures defined in skills/hallmark/references/macrostructures.md. Notably, the Specimen macrostructure is no longer a default and is reserved for explicit editorial briefs only, as detailed in the macrostructure selection rules (lines 64-73).

Design System Constraints

Token Discipline and CSS Variables

All color and font values must reference CSS custom properties. Inline values are prohibited. The default token block in site/css/tokens.css establishes the reference system:

:root {
  --color-primary: var(--color-accent);
  --color-paper: oklch(95% 0 210);
}

Components must use var(--color-primary) and var(--font-display) rather than hard-coded hex values, as enforced by the token rules in SKILL.md (lines 50-51).

Navigation and Footer Archetypes

Hallmark actively avoids the AI-fingerprint defaults N1a (wordmark + 2 links) and Ft3 (four-column link footer). Instead, the default selection picks richer archetypes such as N1b, N5, N11, or N13 unless the brief truly has only two destinations (lines 185-192).

Default navigation markup (N1b archetype):

<header class="nav">
  <a href="/" class="logo">Brand</a>
  <nav class="links">
    <a href="/features">Features</a>
    <a href="/pricing">Pricing</a>
    <a href="/docs">Docs</a>
    <a href="/about">About</a>
  </nav>
  <a href="/signup" class="cta">Sign up</a>
</header>

Motion and Animation Defaults

According to skills/hallmark/references/motion.md (lines 27-28), the only permitted easing function is ease-in-out. The plain ease curve is explicitly banned as an "un-crafted" default.

Responsive Breakpoints

Unlike standard Tailwind defaults, Hallmark uses content-driven breakpoints (typically 3-4) defined in responsive.md (lines 22-27). These adapt to the specific content layout rather than device categories.

Quality Assurance and Component Standards

Component State Requirements

Every interactive element must implement all eight states: default, hover, focus-visible, active, disabled, loading, error, and success. As defined in SKILL.md (lines 78-80), each state requires both pseudo-class and .is-* helper class implementations to enable simultaneous demo display:

.btn {
  background: var(--color-primary);
}
.btn:hover, .btn.is-hover { background: var(--color-primary-hover); }
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--color-focus); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn.disabled, .btn.is-disabled { opacity: 0.5; pointer-events: none; }
.btn.loading, .btn.is-loading { cursor: wait; }
.btn.error, .btn.is-error { background: var(--color-error); }
.btn.success, .btn.is-success { background: var(--color-success); }

The Slop-Test Validation

Before final output, Hallmark runs a 58-gate post-emit checklist defined in skills/hallmark/references/slop-test.md (lines 1-3). This enforces the default constraints, checking for prohibited patterns like italic headings, default-width focus shifts, and improper contrast on dark sections.

Installation and Quick Start

The repository requires no additional configuration beyond the installation command documented in README.md (lines 94-99):

npx skills add nutlope/hallmark
hallmark  # invokes the default verb → design flow

This pulls in the skill files and immediately applies all standard default settings and constraints.

Summary

• Default verb: Automatically triggers the complete design flow (macrostructure, theme, slop-test) when invoked without arguments.
• Genre and theme: Defaults to the editorial genre and a catalog of 20 themes unless explicitly overridden.
• Token discipline: Mandates CSS custom properties (var(--color-accent)) and prohibits inline values.
• Navigation: Avoids AI fingerprints (N1a/Ft3) in favor of richer archetypes like N1b or N5.
• Motion: Restricts easing to ease-in-out only.
• Responsive: Uses content-driven breakpoints rather than standard device-based defaults.
• Quality gates: Enforces eight component states and validates via a 58-gate slop-test.

Frequently Asked Questions

What is the default genre in Hallmark?

The default genre is editorial, which serves as the canonical anti-AI-slop voice. This is automatically loaded from skills/hallmark/references/genres/editorial.md when no specific genre signal is detected in the brief, ensuring a sophisticated baseline tone.

How does Hallmark handle responsive breakpoints?

Hallmark uses content-driven breakpoints (typically 3-4) rather than the standard Tailwind defaults. As defined in responsive.md, these breakpoints adapt to the specific content layout rather than device categories, ensuring the design responds to actual content needs.

What makes Hallmark's default navigation different from typical AI-generated UI?

Hallmark explicitly avoids the AI-fingerprint patterns N1a (wordmark + 2 links) and Ft3 (four-column footer). Instead, it defaults to richer archetypes like N1b, N5, N11, or N13 unless the brief specifically requires minimal navigation, as documented in the component cookbook.

Is there any configuration required after installing Hallmark?

No. According to the README.md, the only required command is npx skills add nutlope/hallmark. The skill files are pulled in without additional configuration, and the default verb automatically applies all standard settings and constraints from SKILL.md.

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