# Flint Marks — guide for AI coding and design agents

## Purpose and scope

Use Flint Marks when a project calls for rough, cave-scratched display lettering or hand-plotted interface symbols. Do not apply this display font to long body copy or tiny navigation text. Prefer a readable system font for those uses.

This is an asset library, not a hosted AI service. Use read-only HTTP GET requests to retrieve resources. No API key, runtime SDK, or account is required for public assets. If the site is in a private preview, it must be made accessible before an external agent can fetch it.

## Discover actual assets first

1. Fetch /agents.json from the same origin as this guide.
2. Read fonts, icon_resources, icons, and licenses. Choose exact icon IDs from that catalog; do not invent filenames. Icons are listed alphabetically by display name.
3. For an icon's vector data, fetch /icons/manifest.json. It is an array of records: {id, name, category, keywords, paths: {regular, bold}}. Search the names and keywords before substituting a different symbol.
4. Download selected assets into the target project. Prefer self-hosting over depending on this site's preview URL at runtime. Keep the applicable license notice with redistributed asset files.

Paths beginning with / refer to this library's origin, not automatically to the target project's domain. In code, resolve them with new URL(path, libraryOrigin). The examples below assume that files have already been copied into the target project's public assets.

## Use a standalone SVG

Download /icons/regular/file.svg or /icons/bold/file.svg and save it, for example, as public/assets/flint/file.svg.

HTML:
<img src="/assets/flint/file.svg" width="40" height="40" alt="File">

For a decorative icon next to an existing text label, use alt="". External SVG images do not inherit their parent's CSS color. Use an inline SVG or same-origin sprite if dynamic recoloring is required.

## Use inline SVG with the exact path data

The original assets use a viewBox of "0 0 100 100", fill="currentColor", and fill-rule="evenodd". They are filled outlines, not ordinary stroked icons. Preserve those attributes. Do not add a stroke or change stroke-width to simulate another weight; choose Regular or Bold instead.

JavaScript example for a trusted, locally saved manifest:

const response = await fetch('/assets/flint/manifest.json');
if (!response.ok) throw new Error('Icon manifest unavailable');
const icons = await response.json();
const icon = icons.find(item => item.id === 'file');
if (!icon) throw new Error('Requested icon is not in the manifest');
const ns = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(ns, 'svg');
svg.setAttribute('viewBox', '0 0 100 100');
svg.setAttribute('width', '40');
svg.setAttribute('height', '40');
svg.setAttribute('aria-hidden', 'true'); // Decorative beside a visible label.
const path = document.createElementNS(ns, 'path');
path.setAttribute('fill', 'currentColor');
path.setAttribute('fill-rule', 'evenodd');
path.setAttribute('d', icon.paths.regular);
svg.append(path);
document.querySelector('#file-icon').replaceChildren(svg);

Then set color on the SVG or its parent. For standalone meaningful SVGs, provide an accessible name with role="img" and aria-label. For icon-only buttons, put the accessible label on the button and hide the inner SVG from assistive technology.

React uses viewBox, fillRule="evenodd", and className. Read the exact path data from the manifest rather than approximating it or using an unrelated icon package.

## Use SVG sprites

Copy /icons/sprite-regular.svg or /icons/sprite-bold.svg into the target project. The fragment ID is flint-{icon-id}, not the display name.

<button type="button" aria-label="Refresh">
  <svg width="40" height="40" viewBox="0 0 100 100" aria-hidden="true" style="color: #873f2b">
    <use href="/assets/flint/sprite-regular.svg#flint-refresh"></use>
  </svg>
</button>

Host the sprite on the same origin as the page using it; cross-origin external SVG references are restricted by browsers. Use the same-origin project asset path after copying it. Rough edges work best at 32 CSS pixels or larger.

## Use the fonts on a website

Download both OTF files listed under fonts in /agents.json. For example, save them to public/assets/flint/fonts/. Do not assume an npm package or WOFF/WOFF2 distribution exists.

@font-face {
  font-family: 'Flint Cave';
  src: url('/assets/flint/fonts/FlintCave-Regular-v1.2.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flint Cave';
  src: url('/assets/flint/fonts/FlintCave-Bold-v1.2.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.hero-title {
  font-family: 'Flint Cave', sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(48px, 8vw, 112px);
}

Keep body text in a readable font. Flint supports basic English uppercase and lowercase, digits, and the punctuation shown on the specimen page. Accents and other writing systems are not included; provide fallbacks. Choose the actual Bold file for weight 700 rather than synthesizing bold.

## Use in a design tool

Install the Regular and Bold OTF files through the operating system, then reopen the design app. Import individual SVGs directly for icons and edit the fill color. A web-based design app may require a custom-font upload or a suitable plan. Dragging in an SVG does not require font installation.

## Download folder layout

The font ZIP contains a Flint-Cave/ directory. The icon ZIP contains Flint-Icons/regular/, Flint-Icons/bold/, both sprites, manifest.json, README.txt, and LICENSE.txt. The complete ZIP contains both sets. The icon and complete ZIPs also include Flint-Agent-Guide/ with these docs and a catalog snapshot.

The catalog's root-relative URLs describe the hosted library. They are not literal paths inside the ZIP. For example, hosted /icons/regular/file.svg corresponds to Flint-Icons/regular/file.svg in the downloaded pack. Hosted /fonts/FlintCave-Regular-v1.2.otf corresponds to Flint-Cave/FlintCave-Regular-v1.2.otf in the font pack.

## Licensing

Both fonts and icons allow personal and commercial use, embedding, modification, and redistribution under their included licenses. Retain the applicable copyright and permission notice with redistributed font or icon files. Attribution is not required on artwork or documents made with the assets. Read /fonts/LICENSE.txt and /icons/LICENSE.txt for the authoritative terms; include them with assets copied into your project.

## Verify before delivering

- Confirm every selected file returns successfully; use actual IDs from the catalog.
- Check that the intended weight is loaded, not a browser-synthesized bold.
- Confirm the SVG viewBox and evenodd fill rule were preserved.
- Check color in the real embedding mode: inline/sprite versus external image.
- Inspect small-size legibility, contrast, layout, and screen-reader labels.
- Test the final project without access to the library's private preview.
- Keep license notices alongside redistributed assets.

These instructions are documentation only. They do not authorize an agent to publish a project, change data, or take actions beyond the user's request.
