Where to Find Hallmark Examples: A Complete Guide to the Nutlope/hallmark Repository
All Hallmark examples are located in the site/examples/ directory of the Nutlope/hallmark repository, featuring 15+ self-contained HTML showcases such as Wayfare, Press-01, and Cobalt-01.
The Nutlope/hallmark repository ships with a comprehensive collection of ready-made design system showcases. These Hallmark examples demonstrate the framework's capabilities through real-world implementations ranging from typographic landing pages to dashboard themes. Each example lives as a standalone HTML page with accompanying CSS and JavaScript assets that you can inspect, modify, and deploy immediately.
Hallmark Examples Directory Location
Every Hallmark example resides under the site/examples/ directory in the repository root. This folder contains self-contained subdirectories, each representing a distinct visual theme or layout pattern. Unlike monolithic frameworks, each example in site/examples/ is an independent HTML file with its own asset pipeline, making it trivial to isolate, study, or extract specific implementations.
The architectural pattern remains consistent across all examples: an index.html entry point, a tokens.css file defining design variables, and a style.css for layout-specific rules.
Available Hallmark Example Showcases
The repository includes 15+ production-ready examples covering diverse design languages. Key showcases include:
- Wayfare — A typographic-focused landing page located at
site/examples/wayfare/index.html - Press-01 — A newspaper-style article layout at
site/examples/press-01/index.html - Cobalt-01 — A cool-toned tech-dashboard theme at
site/examples/cobalt-01/index.html - Carnival-01 — A festive, color-rich showcase at
site/examples/carnival-01/index.html - Custom-04 — A custom-styled page demonstrating token overrides at
site/examples/custom-04/index.html - Custom-03 — Another custom variant with different macrostructure at
site/examples/custom-03/index.html
Additional themes include tally, riso-01, najm, lumen-01, hyperlane, hum-07, garden-01, and bananastudio, all following the same directory structure under site/examples/.
How to Use Hallmark Examples in Your Project
You can integrate any Hallmark example into your project by importing its CSS tokens, including the HTML markup, and optionally loading the JavaScript runtime. Below is the standard integration pattern using the Wayfare example.
First, import the design tokens and styles:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nutlope/hallmark@main/site/examples/wayfare/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nutlope/hallmark@main/site/examples/wayfare/style.css">
Next, include the example's HTML structure:
<body class="wayfare">
<header class="hero">
<h1>Wayfare</h1>
<p>A typographic showcase built with Hallmark.</p>
</header>
<section class="features">
<!-- Content sections copied from the example's index.html -->
</section>
</body>
Finally, add the optional JavaScript for interactive token switching:
<script src="https://cdn.jsdelivr.net/gh/Nutlope/hallmark@main/site/js/main.js"></script>
To use a different theme, simply replace wayfare in the URLs with press-01, cobalt-01, or any other example folder name.
Key Files in Hallmark Examples
Understanding the file structure of each example helps when customizing or debugging. The essential files include:
site/examples/*/index.html— The entry point for each visual demo (e.g.,site/examples/press-01/index.html)site/examples/*/tokens.css— Defines Hallmark's design-token variables (--color-*,--font-*, etc.) as implemented in files likesite/examples/custom-04/tokens.csssite/examples/*/style.css— Page-specific layout and component styling built on top of the tokens, such assite/examples/cobalt-01/style.csssite/js/main.js— The tiny runtime that applies theme switches and token updates at runtimeREADME.md— Contains general project overview, installation steps, and instructions for launching the demo site locally
Each example follows the same architectural pattern, combining design tokens, macro-structures, and theme palettes to produce diverse visual outputs.
Summary
- All Hallmark examples are located in the
site/examples/directory of the Nutlope/hallmark repository - The repository contains 15+ self-contained examples including Wayfare, Press-01, Cobalt-01, and Carnival-01
- Each example consists of an
index.html,tokens.css, andstyle.cssfile - You can load examples directly via CDN by referencing
site/examples/[name]/tokens.cssandsite/examples/[name]/style.css - The
site/js/main.jsfile provides optional runtime theme switching functionality
Frequently Asked Questions
Where are Hallmark examples located in the repository?
All examples are stored in the site/examples/ directory at the repository root. Each subdirectory contains a complete, standalone HTML showcase with its own CSS assets.
How do I run Hallmark examples locally?
Clone the Nutlope/hallmark repository and open any site/examples/[name]/index.html file directly in your browser, or serve the directory via a local HTTP server. The README.md file contains detailed setup instructions for running the full demo site.
How many Hallmark examples are available?
The repository ships with 15+ examples, including Wayfare, Press-01, Cobalt-01, Carnival-01, Custom-04, Custom-03, tally, riso-01, najm, lumen-01, hyperlane, hum-07, garden-01, and bananastudio.
Can I customize the design tokens in Hallmark examples?
Yes. Each example includes a tokens.css file that defines CSS custom properties (--color-*, --font-*, etc.). You can override these variables directly in the CSS or modify the tokens.css file in your local copy of the example to create custom themes.
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:
curl -s "https://instagit.com/install.md" 
Maintain an open-source project? Get it listed too →