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

> Integrate Hallmark's framework-agnostic assets into React, Vue, and Svelte easily. Import CSS tokens and copy HTML snippets for seamless design system implementation.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-07-31

---

**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](https://github.com/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/examples/wayfare/tokens.css) and [`site/examples/custom-04/styles.css`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/tokens.css) file to [`public/hallmark/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/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.

```tsx
// 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>
);

```

```tsx
// 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`](https://github.com/Nutlope/hallmark/blob/main/site/examples/wayfare/index.html).

### Vue 3 (Composition API)

For Vue 3, import the CSS in [`main.js`](https://github.com/Nutlope/hallmark/blob/main/main.js) and paste the HTML directly into your `<template>` block. The scoped style block allows local token overrides.

```javascript
// 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");

```

```vue
<!-- 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`](https://github.com/Nutlope/hallmark/blob/main/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.

```javascript
// 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;

```

```svelte
<!-- 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`](https://github.com/Nutlope/hallmark/blob/main/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:

```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`](https://github.com/Nutlope/hallmark/blob/main/site/examples/wayfare/tokens.css) for design tokens and [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/examples/wayfare/index.html) and [`site/examples/custom-04/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/examples/custom-04/index.html).
- **Vanilla JS helpers** in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/examples/wayfare/index.html) and [`site/examples/custom-04/index.html`](https://github.com/Nutlope/hallmark/blob/main/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.