# What Technologies Are Used in the Nutlope/hallmark Project? A Complete Tech Stack Breakdown

> Explore the Nutlope/hallmark tech stack. Discover a browser design tool built with HTML5, native CSS OKLCH, ES Modules JavaScript, and Node/npm for efficient distribution.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: getting-started
- Published: 2026-08-03

---

**The Nutlope/hallmark project is a browser-based design skill built with HTML5, native CSS with OKLCH color variables, ES Modules JavaScript, and Node/npm for distribution—requiring no build step or runtime dependencies.**

Hallmark is a lightweight, static-site design skill that AI coding assistants can invoke to generate unique, non-templated web pages. According to the Nutlope/hallmark source code on GitHub, its architecture deliberately avoids heavy frameworks in favor of modern web standards. This article examines every layer of its technology stack, with direct references to the source files that implement each one.

## Package Management and Distribution

### Node.js and npm

The project uses **Node.js with npm** as its distribution mechanism. The [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) file declares the package as an ES module (`"type": "module"`) and defines the skill entry point.

```json
{
  "name": "@nutlope/hallmark",
  "type": "module",
  "scripts": {
    "serve": "python3 -m http.server 4173 --directory site"
  }
}

```

This configuration enables one-line installation via `npx skills add nutlope/hallmark`, the command prominently displayed in the project's UI.

## Development Server

### Python 3 HTTP Server

For local development, Hallmark uses **Python 3's built-in HTTP server** rather than a JavaScript-based dev server. The `npm run serve` command in [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) launches:

```bash
python3 -m http.server 4173 --directory site

```

This serves the static `site/` folder on port 4173 with zero additional dependencies.

## Core Frontend Technologies

### HTML5

The main page in [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) is a standards-compliant HTML5 document. It includes:
- Meta tags for viewport and charset configuration
- Theme handling via `data-theme` attributes
- Font preloading from Google Fonts
- Script loading with `type="module"`

The file structure emphasizes semantic markup with no framework-specific templating.

### Native CSS with Modern Features

Hallmark's styling system in `site/css/` uses **vanilla CSS** with advanced features rather than preprocessors or CSS-in-JS:

- **CSS custom properties (variables)** for theming
- **OKLCH color space** for perceptually uniform colors (e.g., `--dot: oklch(70% 0.15 250)`)
- **Custom token files** ([`tokens.css`](https://github.com/Nutlope/hallmark/blob/main/tokens.css), [`base.css`](https://github.com/Nutlope/hallmark/blob/main/base.css), [`components.css`](https://github.com/Nutlope/hallmark/blob/main/components.css), [`sections.css`](https://github.com/Nutlope/hallmark/blob/main/sections.css))

The design system defines spacing, typography, and motion through these token files, creating a deterministic visual language that AI agents can reference.

### ES Modules JavaScript

All JavaScript in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) runs as **native ES Modules** in the browser—no bundler required. Key responsibilities include:
- Theme selection and persistence
- Font-ready detection
- Analytics injection
- Interactive UI (theme picker, randomizer, easter egg)

The theme-switching logic, found in both the inline script of [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) (lines 64-71) and [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js), demonstrates the zero-dependency approach:

```javascript
// Load a theme before paint: ?theme= → localStorage → default
try {
  const url = new URL(location.href);
  const q = url.searchParams.get('theme');
  const t = q || localStorage.getItem('hallmark-theme');
  if (t) document.documentElement.dataset.theme = t;
} catch (_) {}

```

## External Services and Assets

### Google Fonts

Multiple font families load via standard `<link rel="stylesheet">` tags in [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html). This provides typographic variety without bloating the repository with font files.

### Plausible Analytics

Privacy-friendly analytics arrive through a lightweight async script:

```html
<script async data-domain="hallmark.dev" src="https://plausible.io/js/script.js"></script>

```

This cookie-free tracking matches the project's minimal-dependency philosophy.

## Skill Definition and Documentation

### Markdown-Based Skill Interface

The AI-facing interface lives in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), written in **Markdown**. It declares four verbs that agents can invoke:

```markdown

## Build (default)

Ask for a page. Get a page that doesn't look generated. Hallmark picks a macrostructure first, then dresses it — and refuses to repeat the same shape twice.

```

Other verbs documented include `study`, `audit`, and `redesign`. The [`README.md`](https://github.com/Nutlope/hallmark/blob/main/README.md) and `docs/*.md` files provide additional human-readable guidance.

### Design System Tokens

The project implements a **custom design system** through:
- [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) — Core variables for colors, spacing, and typography
- `site/_tests/*.json` — Theme definitions in JSON format

These files supply the deterministic design language that makes Hallmark's output consistent yet varied.

## Version Control and Deployment

### Git and GitHub

Source control uses **Git**, with the repository hosted on GitHub. A [`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json) file indicates deployment configuration for Vercel hosting, though the static site can run on any static host.

## Complete File Architecture

| File Path | Technology Purpose |
|-----------|------------------|
| [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) | npm metadata, skill entry point, development scripts |
| [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) | HTML5 document root, asset loading, UI structure |
| [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) | CSS custom properties, design tokens |
| [`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css) | Base styles and CSS resets |
| [`site/css/components.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css) | Reusable component styles |
| [`site/css/sections.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/sections.css) | Page section layouts |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | ES Module application logic |
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | AI skill definition in Markdown |
| [`README.md`](https://github.com/Nutlope/hallmark/blob/main/README.md) | Project documentation |
| `docs/*.md` | Extended usage guides and examples |
| [`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json) | Deployment configuration |

## Summary

- **Hallmark technologies center on web standards**: HTML5, native CSS with OKLCH and variables, and ES Modules—no React, Vue, or build tools required.
- **Distribution happens through npm**: The [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) enables `npx skills add` installation for AI agents.
- **Development uses Python 3**: `python3 -m http.server` provides a zero-dependency dev server.
- **Design system is token-based**: CSS custom properties and JSON theme files create a deterministic yet flexible visual language.
- **AI interface is Markdown-defined**: [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) declares verbs that coding assistants like Claude Code, Cursor, and Codex can invoke.

## Frequently Asked Questions

### Is Hallmark built with React or another frontend framework?

No. Hallmark deliberately avoids frontend frameworks. The source code in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) uses vanilla ES Modules, and the UI is rendered through standard HTML and CSS. This zero-dependency approach keeps the skill lightweight and ensures generated pages require no runtime overhead.

### Why does Hallmark use Python for the development server instead of Node.js?

The [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) script `serve` calls `python3 -m http.server` because Python's built-in HTTP server requires no `node_modules` installation. This aligns with Hallmark's philosophy of minimal dependencies—any developer with Python 3 installed can run the site immediately after cloning.

### What makes Hallmark's CSS "modern" compared to other approaches?

According to [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) and related files, Hallmark uses **OKLCH color space** for perceptually uniform colors, **CSS custom properties** for theming without preprocessors, and **nesting-free, layer-organized** selectors. These features are native to modern browsers and eliminate the need for Sass or PostCSS.

### How do AI coding assistants interact with Hallmark?

Assistants interact through the **Markdown-based skill definition** in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md). This file declares verbs (`build`, `study`, `audit`, `redesign`) with descriptions and examples. When a user runs `npx skills add nutlope/hallmark`, their AI agent gains access to this structured documentation and can invoke the appropriate behavior based on user requests.