A new identity.
Your existing website.

01. Start with a clear idea.

A useful brand identity is a relationship between a mark, typography, color, and spacing. Choose a system for the feeling and structure your project needs, rather than one accent color in isolation.

Explore an identity’s palette and type pairing, try your own words in the playground, and open its working website reference. Our templates keep the presentation simple: a clear heading, one focal visual, and comfortably readable sections. The downloadable applications show how the same decisions can work in print and on screen.

For this example, we’ll use moss, our botanical identity. Download its complete kit and extract it into a folder you can work from. The original font files, SVGs, stylesheet, installer, and license notices stay together.

02. Put the actual files in place.

The portable installer requires Node.js 18 or newer and no npm dependencies. From the extracted kit folder, run:

node install-theme.mjs --target "/path/to/your/project"

The default destination is public/themes/moss/. If your framework uses a different static-assets root, use --public-dir static or the folder it serves. For a plain static site served directly from its project root, use --public-dir ..

For an existing Vite or plain HTML document, the installer can also attach the stylesheet and root attribute:

node install-theme.mjs --target "/path/to/project" --html index.html

It keeps the original HTML in a one-time .openform-backup file and avoids duplicate stylesheet links when you run it again. Add --react if you want the optional typed component primitives copied into your source tree.

03. Give your components the same language.

Load the stylesheet after broad resets and framework styles. Add the identity’s exact data-openform attribute to your existing document root or the intended wrapper. Keeping the theme scoped lets you apply it to a whole website or one chosen area.

<link rel="stylesheet" href="/themes/moss/theme.css">

<div data-openform="moss" class="of-theme">
  <h1 class="of-display">Your real headline.</h1>
  <p class="of-body">Your real project description.</p>
  <a class="of-button" href="/your-route">Get started</a>
</div>

Use reference.html for the page structure and components.html for controls, cards, forms, and information. The exact class map, numbers, fonts, and paths live in theme.json. Keep your existing navigation, routes, state, data requests, and form handlers; the theme supplies their visual system.

In Next.js, Vue, Svelte, or Astro, attach the link and attribute in the existing document or root layout. The supplied installation guide includes framework-specific instructions. Keep the fonts next to the stylesheet so their local URLs continue to resolve.

04. Check the quiet details.

Compare the real page to the working reference at phone, tablet, and desktop widths. A system is only useful if it reads well and behaves properly in your actual application.

• The CSS, local fonts, and images load without missing requests.
• The heading and reading faces match the supplied type specification.
• Reading text has enough contrast, a comfortable line length, and room to breathe.
• There is no horizontal page overflow at narrow widths.
• Navigation, routes, forms, and real application state still work.
• Keyboard focus is visible and reduced-motion preferences are respected.

The ink-on-paper and ink-on-accent pairs are checked for WCAG AA normal text. Support colors are decorative until a specific text pairing has been verified. Avoid adding extra effects or low-contrast details simply because the assets make it possible.

05. Give your assistant concrete instructions.

You can ask a coding assistant to apply the system. Put the extracted kit where it can read the files and give it the identity’s one-line request:

Install the Openform moss theme in this project. Read AI-PROMPT.md and theme.json, run install-theme.mjs against this project’s root, and follow the supplied working references. Preserve the existing content, routes, data, and functionality.

The full prompt is deliberately ordered. It specifies the framework root, exact paths, numerical design decisions, component classes, and acceptance checks. A smaller model has executable CSS and real examples to follow rather than a vague request to make a page “more modern.”

The installer places the files; the assistant or developer finishes the component mapping. Ask for the files changed and the checks actually performed. Keep the MIT code notice and original font notices when redistributing those files. The original design artwork and information are CC0.