How to Use Hallmark Output with React, Vue, and Svelte: A Complete Integration Guide

Hallmark generates framework-agnostic static assets—CSS design tokens, HTML component markup, and vanilla JavaScript helpers—that integrate into React, Vue, or Svelte by simply importing the token CSS and copying HTML snippets into your components.

Hallmark is a design-system generator that exports pure static assets rather than framework-specific components. Whether you're building with React, Vue, or Svelte, you can consume Hallmark's output—which lives in the site/ directory of the Nutlope/hallmark repository—without installing a runtime library or configuring complex build plugins.

What Hallmark Generates

Hallmark outputs static assets that encode your visual language through standard web technologies. According to the source code, the generator produces the following file types in the site/ directory:

• site/index.html – A minimal HTML entry point that loads the generated CSS and demonstrates example components.
• CSS token files – Located at paths like site/examples/wayfare/tokens.css and site/examples/custom-04/styles.css, these files contain CSS custom properties (e.g., --color-primary, --spacing-lg) and utility classes that define your design tokens.
• Component markup – Found in site/examples/**/index.html, these files contain ready-made HTML snippets (quotes, logo walls, stat strips) that you can copy directly into framework components.
• JavaScript helpers – The site/js/main.js file provides optional vanilla-JS utilities for smooth scrolling and navigation toggling that work independently of any framework.

Because all styling is expressed via CSS custom properties resolved at runtime by the browser, these assets work identically whether the markup lives inside a React JSX file, a Vue template, or a Svelte component.

Integration Workflow for Any Framework

The process for consuming Hallmark output remains consistent across React, Vue, and Svelte:

1. Copy the CSS token file (e.g., site/examples/wayfare/tokens.css) into your project's static assets folder (such as public/hallmark/ or src/assets/).
2. Import the token CSS in your application entry point to load the design tokens globally.
3. Paste the HTML snippets from site/examples/**/index.html into your component files, translating attributes into your framework's syntax where necessary (for example, class= works universally, while event handlers use framework-specific syntax).
4. Optionally include the vanilla helper script (site/js/main.js) if you want Hallmark's default interactive behaviors without reimplementing them.

Since Hallmark uses CSS custom properties, you can override any token locally (for example, style="--color-primary: #ff6600") to implement per-page theming without modifying the source files.

Framework-Specific Implementation Examples

The following examples assume you have copied the generated tokens.css file to public/hallmark/tokens.css in your project.

React

In React applications, import the token CSS in your entry file and use standard className attributes to apply Hallmark utility classes.

// src/index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import "./hallmark/tokens.css";               // ← import the Hallmark tokens

import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// src/App.tsx
export default function App() {
  return (
    <section className="t4-numbered-stat-strip">
      {/* Hallmark component markup – copy from site/examples/wayfare/index.html */}
      <h2 className="stat-number">42</h2>
      <p className="stat-label">Projects shipped</p>
    </section>
  );
}

The raw markup for the t4-numbered-stat-strip component lives in site/examples/wayfare/index.html.

Vue 3 (Composition API)

For Vue 3, import the CSS in main.js and paste the HTML directly into your <template> block. The scoped style block allows local token overrides.

// src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./hallmark/tokens.css";   // ← import the Hallmark token CSS

createApp(App).mount("#app");

<!-- src/App.vue -->
<template>
  <section class="t3-single-huge-quote">
    <!-- Hallmark example from site/examples/custom-04/index.html -->
    <blockquote>
      “Design is not just what it looks like and feels like. Design is how it works.”
    </blockquote>
    <cite>– Steve Jobs</cite>
  </section>
</template>

<script setup>
// No extra script needed – Hallmark styles handle everything
</script>

<style scoped>
/* Optional local overrides */
:root {
  --color-primary: #0066ff;
}
</style>

The component markup for t3-single-huge-quote is defined in site/examples/custom-04/index.html.

Svelte

In Svelte, import the token CSS in your entry point and use the markup in your component file. Svelte's scoped styles coexist with Hallmark's global CSS custom properties.

// src/main.js
import "./hallmark/tokens.css";   // import token CSS globally
import App from "./App.svelte";

const app = new App({
  target: document.body,
});

export default app;

<!-- src/App.svelte -->
<section class="t1-pull-quote-with-marginalia">
  <!-- Pull-quote markup from site/examples/wayfare/index.html -->
  <blockquote>
    “Good design is as little design as possible.”
  </blockquote>
  <p class="marginalia">— Dieter Rams</p>
</section>

<style>
  /* you can still write local CSS here if you want */
</style>

The markup for t1-pull-quote-with-marginalia resides in site/examples/wayfare/index.html.

Customizing Tokens and Theming

Because Hallmark encodes its visual language in CSS custom properties, you can override tokens at any level of your component tree. For example, to change the primary color for a specific section, apply an inline style or scoped CSS:

.my-custom-section {
  --color-primary: #e74c3c;
  --spacing-lg: 2rem;
}

This approach works identically in React, Vue, and Svelte since the browser resolves these values at runtime regardless of how the HTML is generated.

Summary

• Hallmark outputs static assets located in the site/ directory, including site/examples/wayfare/tokens.css for design tokens and site/js/main.js for optional utilities.
• No framework-specific runtime is required; integration involves importing CSS and copying HTML markup.
• CSS custom properties enable runtime theming and work identically across React, Vue, and Svelte.
• Source component markup lives in files like site/examples/wayfare/index.html and site/examples/custom-04/index.html.
• Vanilla JS helpers in site/js/main.js can be included for default interactivity or replaced with framework-native implementations.

Frequently Asked Questions

Does Hallmark require a specific framework runtime to work?

No. Hallmark generates framework-agnostic static assets—HTML, CSS, and vanilla JavaScript—so you can drop the output into React, Vue, Svelte, or plain HTML without installing a Hallmark-specific npm package or runtime library.

How do I update Hallmark styles after the initial integration?

Regenerate the assets using Hallmark, then replace the token CSS file (e.g., site/examples/wayfare/tokens.css) in your project's static folder. Since the components reference CSS custom properties defined in these tokens, updating the file automatically propagates changes throughout your application.

Can I use Hallmark with CSS-in-JS libraries like Styled Components or Emotion?

Yes. While Hallmark outputs standard CSS files containing custom properties, you can import site/examples/wayfare/tokens.css at your application root to load the variables globally, then reference those custom properties within your CSS-in-JS templates (for example, color: var(--color-primary)).

Where are the source HTML components located in the Hallmark repository?

The example component markup is stored in site/examples/wayfare/index.html and site/examples/custom-04/index.html, which contain the raw HTML for components like t4-numbered-stat-strip and t3-single-huge-quote that you can copy into your framework components.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}