# Where to Find Hallmark Examples: A Complete Guide to the Nutlope/hallmark Repository
> Find all Hallmark examples in the Nutlope/hallmark repository site examples directory. Explore 15+ HTML showcases like Wayfare, Press-01, and Cobalt-01.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: getting-started
- Published: 2026-07-28
---
**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`](https://github.com/Nutlope/hallmark/blob/main/index.html) entry point, a [`tokens.css`](https://github.com/Nutlope/hallmark/blob/main/tokens.css) file defining design variables, and a [`style.css`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/examples/wayfare/index.html)
- **Press-01** — A newspaper-style article layout at [`site/examples/press-01/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/examples/press-01/index.html)
- **Cobalt-01** — A cool-toned tech-dashboard theme at [`site/examples/cobalt-01/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/examples/cobalt-01/index.html)
- **Carnival-01** — A festive, color-rich showcase at [`site/examples/carnival-01/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/examples/carnival-01/index.html)
- **Custom-04** — A custom-styled page demonstrating token overrides at [`site/examples/custom-04/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/examples/custom-04/index.html)
- **Custom-03** — Another custom variant with different macrostructure at [`site/examples/custom-03/index.html`](https://github.com/Nutlope/hallmark/blob/main/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:
```html
```
Next, include the example's HTML structure:
```html
Wayfare
A typographic showcase built with Hallmark.
```
Finally, add the optional JavaScript for interactive token switching:
```html
```
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`](https://github.com/Nutlope/hallmark/blob/main/site/examples/press-01/index.html))
- **`site/examples/*/tokens.css`** — Defines Hallmark's design-token variables (`--color-*`, `--font-*`, etc.) as implemented in files like [`site/examples/custom-04/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/custom-04/tokens.css)
- **`site/examples/*/style.css`** — Page-specific layout and component styling built on top of the tokens, such as [`site/examples/cobalt-01/style.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/cobalt-01/style.css)
- **[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)** — The tiny runtime that applies theme switches and token updates at runtime
- **[`README.md`](https://github.com/Nutlope/hallmark/blob/main/README.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`](https://github.com/Nutlope/hallmark/blob/main/index.html), [`tokens.css`](https://github.com/Nutlope/hallmark/blob/main/tokens.css), and [`style.css`](https://github.com/Nutlope/hallmark/blob/main/style.css) file
- You can load examples directly via CDN by referencing `site/examples/[name]/tokens.css` and `site/examples/[name]/style.css`
- The [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) file 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/tokens.css) file in your local copy of the example to create custom themes.