how-to-guide

Where to Find Nutlope/Hallmark Usage Examples: Complete Guide

July 15, 2026 Nutlope/hallmark ↗

You can find Hallmark usage examples in the site/examples/ directory of the repository, view them live at usehallmark.com/examples, or inspect the source files for themes like Tally, Wayfare, and Cobalt.

The Nutlope/hallmark repository ships with a comprehensive collection of demo pages that showcase every theme variant and macro-structure the framework can generate. These examples demonstrate the token-driven design system through both fully rendered web pages and complete, editable source code. Whether you prefer browsing live sites or analyzing raw files, the repository provides concrete implementations for every Hallmark capability.

Live Demo Website

The fastest way to explore Hallmark usage examples is visiting the hosted gallery at https://www.usehallmark.com/examples/. This live site displays fully rendered HTML and CSS pages for every built-in theme, including Tally, Wayfare, Hum, Cobalt, and Riso. Each demo illustrates distinct macro-structures such as Stat-Led, Marquee Hero, and Quote-Led layouts with complete styling applied.

Repository Source Files

For developers who want to inspect the underlying markup or run examples locally, all source files live in the site/examples/ directory at the repository root. Each example is self-contained in its own subfolder with a consistent file structure.

Tally (SaaS Product Page)

The Tally example demonstrates a modern-minimal theme using the Stat-Led macrostructure. You can examine the complete implementation across these files:

Wayfare (Travel Booking Hero)

The Wayfare example showcases an atmospheric design with the Marquee Hero macrostructure. Source files are located at:

Hum-07 (Sourdough App)

The Hum-07 example presents a playful interface using the Quote-Led macrostructure for a bubble-guided sourdough application. Review the source in:

Cobalt-01 (API Documentation)

The Cobalt-01 example illustrates the Cobalt theme with modern-minimal styling for a content-extraction API. Key files include:

Custom-04 (Repair Café Broadsheet)

The Custom-04 example demonstrates custom-theme generation with a tuned palette for a repair-café broadsheet. This variation includes optional JavaScript:

Code Structure and Patterns

Every Hallmark example follows a consistent "token-first, component-later" architecture that allows themes to rotate while maintaining a cohesive design system. Each demo contains:

  1. index.html – Entry point with semantic markup
  2. tokens.css – CSS custom properties defining the design system (colors, typography, spacing)
  3. styles.css – Component styles that reference the tokens
  4. script.js (optional) – JavaScript powering interactive elements

Here is the structural pattern used across all examples:

<!-- index.html (excerpt) -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="tokens.css" />
  <link rel="stylesheet" href="styles.css" />
  <title>Hallmark Example – Tally</title>
</head>
<body>
  <section id="hero">
    <h1>All‑in‑one SaaS dashboard</h1>
    <p>Track, analyse, and act in real time.</p>
    <a class="cta" href="#">Get started</a>
  </section>

  <!-- other sections … -->
  <script src="app.js"></script>
</body>
</html>

/* tokens.css – defines the design‑system tokens */
:root {
  --color-paper-1: oklch(97% 0 0);
  --color-accent: oklch(56% 0.15 250);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  /* …more tokens used throughout the page */
}

/* styles.css – uses the tokens */
body { background: var(--color-paper-1); color: var(--color-paper-9); }
h1   { font-family: var(--font-display); }
.cta  { background: var(--color-accent); color: #fff; }

Documentation and Recipes

Beyond the live examples, the repository includes detailed documentation explaining how each demo was generated. The docs/recipes.md file contains human-readable worked-example briefs that walk through the creation process for each theme and macro-structure.

For custom-theme workflows, refer to docs/study-examples.md, which contains sample study runs that extract design DNA from external sources. The README.md at the repository root also provides quick links to live examples and screenshot previews for rapid visual reference.

Summary

Frequently Asked Questions

What file formats are used in Hallmark examples?

Each example consists of standard web files: an index.html entry point, a tokens.css file containing CSS custom properties for the design system, a styles.css file for component-specific styling, and an optional script.js or app.js file for interactive functionality.

Can I copy the examples to start my own project?

Yes. The site/examples/ directory contains self-contained, runnable code that you can copy and modify. Each folder is independent and includes all necessary assets to render the page locally or deploy to a static host.

How do the examples demonstrate different themes?

Examples like Tally, Wayfare, and Hum-07 showcase distinct macro-structures (Stat-Led, Marquee Hero, Quote-Led) while Custom-04 demonstrates how to generate entirely custom themes. Each variation uses the same token-based architecture but with different values in tokens.css to create unique visual identities.

Where can I learn how the examples were generated?

The docs/recipes.md file in the repository contains worked-example briefs explaining the generation process for each demo. For understanding how to extract design patterns from existing websites, see docs/study-examples.md.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →