Skip to content
Esc
↑↓navigate↵open⌘Jpreview
On this page

Quickstart

Link the SHAUGHV CDN from any web project in a few minutes.

Every consumer path is a normal HTTPS URL. You do not copy licensed font files or brand originals into each project.

Pick the origin

Use https://cdn.shaughv.com/ for current assets.

Link what the page needs

Fonts take a stylesheet. Marks and loaders take a custom-element tag plus a script. Images take an src.

Leave binaries on the CDN

Prefer CDN links for shared project assets. Makira and brand assets have restricted redistribution; Paper Mono is available under its included OFL license.

Fastest useful paste

The standard pair in one line:

<link rel="stylesheet" href="https://cdn.shaughv.com/fonts/fonts.css" />

Then in CSS:

:root {
  --font-makira: "Makira", system-ui, sans-serif;
  --font-paper: "Paper Mono", ui-monospace, monospace;
}
body { font-family: var(--font-makira); }
code, pre {
  font-family: var(--font-paper);
  font-feature-settings: "zero" 1;
}

Light and dark icons that follow the visitor’s color scheme:

<link rel="icon" href="https://cdn.shaughv.com/brand/shaughv/favicons/SHAUGHV-Favicon-Dark.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="https://cdn.shaughv.com/brand/shaughv/favicons/SHAUGHV-Favicon-Light.svg" media="(prefers-color-scheme: dark)">
<shaughv-mark style="display:block;width:96px;height:96px;color:currentColor" aria-label="SHAUGHV"></shaughv-mark>
<script src="https://cdn.shaughv.com/js/animated-brand-mark.js"></script>

Local preview of this website

This repository can show the public pages without uploading anything:

npm ci
npm run docs:check
bash scripts/deploy.sh --dry-run
python3 scripts/serve-site.py

Then open:

  • / — documentation homepage
  • /fonts — font documentation
  • /showcase — interactive brand and motion previews
  • /footer-lockup — two reusable footer examples

Discover files instead of memorizing them

curl -s https://cdn.shaughv.com/tree.json | python3 -m json.tool | head

Agents should read /tree.json and use each leaf’s url, embed, or a family’s css_url. Do not hardcode a private inventory of paths.

Was this page helpful?