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

> Explore Nutlope/hallmark default settings: editorial genre, 20 themes, responsive breakpoints, and CSS custom properties. Discover the enforced quality checklist for seamless integration.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: api-reference
- Published: 2026-07-15

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) establishes the reference system:

```css
: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`](https://github.com/Nutlope/hallmark/blob/main/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):

```html
<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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) (lines 78-80), each state requires both pseudo-class and `.is-*` helper class implementations to enable simultaneous demo display:

```css
.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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/README.md) (lines 94-99):

```bash
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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md).