This is the source code of the vanityURLs brand on vanityURLs Brand

Brand & assets

Mon, 01 Jan 0001 00:00:00 +0000

Available now

Item	File	Download
Complete logo pack	`/resources/vanityurls-logo-pack.zip`
Instance redirected image pack	`/resources/v8s-instance-redirected-pack.zip`
Icon pack	`/resources/vanityurls-icon-pack.zip`
Main logo	`/logo.svg`
Slim light header logo	`/vanityURLs-link-logo-slim.svg`
Slim dark header logo	`/vanityURLs-link-logo-dark-slim.svg`
Product logo bundle	`/logo/product-logo/vanityurls-link-logo.svg`
Product logo dark bundle	`/logo/product-logo/vanityurls-link-logo-dark.svg`
Demo instance logo	`/logo/product-logo/v8s-logo.svg`
Website favicon reference	`/logo/website-logos/favicon.png`
Website social preview reference	`/logo/website-logos/social.png`
Instance redirected SVGs	`/logo/instance-logo/v8s-redirected-{language}.svg`
Instance redirected dark SVGs	`/logo/instance-logo/v8s-redirected-{language}-dark.svg`
Instance redirected PNGs	`/logo/instance-logo/v8s-redirected-{language}-1125-721.png`
Instance redirected preview PNGs	`/logo/instance-logo/v8s-redirected-{language}-512-328.png`
Redirected badges	`/images/v8s-redirected-{language}.svg`
Redirected dark badges	`/images/v8s-redirected-{language}-dark.svg`

Needed

Package	Format
Runtime badge pack	ZIP containing localized light and dark SVG badges

Color

Mon, 01 Jan 0001 00:00:00 +0000

Use teal as an accent, not as the whole interface.
Keep status colors semantic and distinct from brand teal.
Preserve badge contrast on light and dark surfaces.
Pair brand accents with neutral gray, white, and dark ink surfaces so pages do not become one-note teal compositions.
Test color combinations against WCAG contrast requirements before publishing.

The vanityURLs palette follows the same intent as the Red Hat color foundation: color is a practical system for brand expression, hierarchy, state, and accessibility. Treat the palette as a set of named decisions, not a drawer of interchangeable decoration.

Common sense

Mon, 01 Jan 0001 00:00:00 +0000

Brand standards should make everyday decisions easier. When a page, badge, redirect screen, or product surface does not have a specific rule, use these common-sense defaults.

Start from the user task

Every surface should help someone do one clear thing: understand a redirect, trust a destination, copy an asset, manage an instance, or learn the system.

If a visual idea makes that task slower, weaker, or less trustworthy, remove it.

Local development

Mon, 01 Jan 0001 00:00:00 +0000

Use this page when you are changing layouts, content, styles, search, or the small Cloudflare Worker that serves the documentation site.

Prerequisites

Tool	Version	Why
Hugo Extended	`0.158.0+`	The site uses Hugo asset pipeline features that require a modern extended build
Node.js	`20+`	npm scripts, Tailwind, PostCSS, Pagefind, Wrangler, and tests
Git	Any modern version	`enableGitInfo` uses commit metadata for last-modified dates
Go	Optional	Only needed if you build Hugo yourself

Use Hugo Extended

Brand personality

Mon, 01 Jan 0001 00:00:00 +0000

The vanityURLs personality is calm, precise, useful, transparent, and quietly technical.

Calm

The system should reduce anxiety around redirects. Use clear states, predictable layouts, and measured language. Avoid dramatic warnings unless there is a real security or availability concern.

Precise

Short links are small, but mistakes can be expensive. Use exact labels for domains, aliases, targets, expiration rules, languages, and blocking behavior.

Useful

Every visual choice should help someone scan, compare, configure, or verify. Decoration is acceptable only when it supports recognition or comprehension.

Content authoring

Mon, 01 Jan 0001 00:00:00 +0000

Use this page when you add or update website content in content/, i18n/, data/, or Hugo layouts/.

Repository areas

Path	Purpose
`content/`	Pages, blog posts, showcase entries, and documentation
`layouts/`	Hugo templates, partials, and shortcodes
`assets/`	Processed CSS and JavaScript that Hugo fingerprints
`static/`	Files copied as-is with stable public URLs
`data/`	Structured page data such as home, FAQ, glossary, trust, and audits
`i18n/`	UI strings used by templates and shortcodes

Content files

Use language-specific filenames:

Fonts and typography

Mon, 01 Jan 0001 00:00:00 +0000

The website self-hosts Inter Variable for interface and prose text, plus JetBrains Mono for code. Font files live under static/fonts/ and are declared in assets/css/main.css.

The typographic model takes inspiration from the Red Hat font-family foundation: use one family for expressive and readable text, and one monospaced family for code and technical identifiers. vanityURLs uses Inter instead of Red Hat Display/Text, but keeps the same separation between human-readable prose and technical material.

Typeface samples

Inter Variable

Aa vanityURLs

Instance logo and redirected images

Mon, 01 Jan 0001 00:00:00 +0000

Instance redirected images

The instance redirected images are page-local assets for documenting how an instance communicates a localized redirect. They stay in this Hugo page bundle so they are available to the brand site without being copied into the shared static/images/ output used by the main site.

Light surface

Dark surface

Localized redirected files

Language	SVG light	SVG dark	PNG light	PNG dark
English	`v8s-redirected-en.svg`	`v8s-redirected-en-dark.svg`	`v8s-redirected-en-1125-721.png`	`v8s-redirected-en-dark-1125-721.png`
French	`v8s-redirected-fr.svg`	`v8s-redirected-fr-dark.svg`	`v8s-redirected-fr-1125-721.png`	`v8s-redirected-fr-dark-1125-721.png`
Spanish	`v8s-redirected-es.svg`	`v8s-redirected-es-dark.svg`	`v8s-redirected-es-1125-721.png`	`v8s-redirected-es-dark-1125-721.png`
Italian	`v8s-redirected-it.svg`	`v8s-redirected-it-dark.svg`	`v8s-redirected-it-1125-721.png`	`v8s-redirected-it-dark-1125-721.png`
German	`v8s-redirected-de.svg`	`v8s-redirected-de-dark.svg`	`v8s-redirected-de-1125-721.png`	`v8s-redirected-de-dark-1125-721.png`
Preview	n/a	n/a	`v8s-redirected-{language}-512-328.png`	`v8s-redirected-{language}-dark-512-328.png`

All supplied SVG files use a 1125 x 721 viewBox. The canonical PNG exports are 1125 x 721; preview PNG exports are 512 x 328.

Social media

Mon, 01 Jan 0001 00:00:00 +0000

Current files

Asset	File	Size
Social preview	`/social.png`	Existing raster
Open Graph default	`/og-default.png`	Existing raster
Open Graph profile	`/og-profile.png`	Existing raster

Needed

Asset	Format	Size
Social avatar	PNG	1024 x 1024
Open Graph image	PNG or JPG	1200 x 630
GitHub/social banner	PNG or JPG	1500 x 500
LinkedIn banner	PNG or JPG	1584 x 396
Square post template	PNG or editable source	1080 x 1080
Landscape post template	PNG or editable source	1600 x 900

Documentation contribution

Mon, 01 Jan 0001 00:00:00 +0000

The main site has a short Contribution Guide for code, documentation, bug reports, and community help. This page adds the brand-site expectations for documentation contributors.

Where to contribute

Work	Repository
Redirector code	`github.com/vanityURLs/vanityURLs`
Main website docs	`github.com/vanityURLs/website`, under `content/`
Brand standards docs	`github.com/vanityURLs/website`, under `brand-content/`
Website templates	`github.com/vanityURLs/website`, under `layouts/`
CSS and JavaScript	`github.com/vanityURLs/website`, under `assets/`
Stable public downloads	`github.com/vanityURLs/website`, under `static/`

Brand documentation rules

Keep pages practical and source-of-truth oriented.
Base standards on existing implementation before inventing a new rule.
Add English and French pages together when the section is bilingual.
Use brand-content/ for brand standards and content/ for the main product site.
Link back to the main site when a visitor needs product documentation, legal pages, trust pages, or community entry points.
Use conventional commits so release-please can classify changes.

Before opening a pull request

Run:

Voice

Mon, 01 Jan 0001 00:00:00 +0000

Use direct, operational language. The reader should feel that vanityURLs is careful with redirects, clear about system behavior, and respectful of their time.

Voice qualities

Quality	Means	Avoids
Direct	Say what the system does	Vague promises or abstract benefits
Precise	Use exact domains, states, paths, and time	Approximate language when details matter
Calm	Explain problems without drama	Alarmist wording for routine states
Operational	Help the reader act or verify	Copy that sounds polished but says little
Honest	Describe implemented behavior	Implying features or guarantees not present

Preferred verbs

Use concrete verbs such as create, redirect, expire, block, audit, deploy, verify, copy, download, and configure.

Grid

Mon, 01 Jan 0001 00:00:00 +0000

Use a centered content column for documentation and reference pages. Keep long-form reading surfaces narrow enough to scan comfortably.

The standard documentation layout uses a left navigation, a main reading column, and an optional table of contents. Brand pages should reuse that layout unless the page is a special-purpose asset preview.

The grid approach is based on the Red Hat grid foundation: a predictable structure with responsive columns, margins, gutters, and constrained line length. vanityURLs keeps the same discipline but adapts it to a compact documentation site and generated redirect pages.

Hosting and deployment

Mon, 01 Jan 0001 00:00:00 +0000

The documentation site runs on Workers Static Assets with Cloudflare Workers. It is not a Cloudflare Pages project. One Worker serves the Hugo-generated static site and handles server-side analytics for HTML page views.

Architecture

flowchart LR
A[GitHub
main branch]
B[Cloudflare GitHub
integration]
C[build.sh]
D[Hugo build
and Pagefind index]
E[wrangler deploy]
F[Worker
vanityurls-website]
G[Static Assets binding
./public]
H[Custom domain
vanityurls.link]

A --> B
B --> C
C --> D
D --> E
E --> F
F --> G
F --> H

The Worker is configured so HTML requests pass through src/worker.mjs; and everything else is cheap static asset traffic such as CSS, fonts, JavaScript bundles, images, Pagefind files, and sitemaps that bypass Worker code.

Naming and terms

Mon, 01 Jan 0001 00:00:00 +0000

Use consistent names so readers can tell the product, public site, brand site, and generated redirect surfaces apart.

Project and domains

Name	Use
`vanityURLs`	The project and product name
`vanityURLs.link`	The public documentation and product domain
`brand.vanityURLs.link`	The brand standards and design-system domain
`v8s.link`	Demo instance, badge examples, and compact-link examples

Keep the lowercase vanity and uppercase URLs styling in prose. In URLs and hostnames, use the actual domain casing only when it helps recognition; DNS remains case-insensitive.

Wallpapers and backgrounds

Mon, 01 Jan 0001 00:00:00 +0000

Needed

Asset	Format	Size
Desktop wallpaper	PNG or JPG	3840 x 2160
Desktop wallpaper	PNG or JPG	2560 x 1440
Mobile wallpaper	PNG or JPG	1290 x 2796
Presentation background	PNG or JPG	1920 x 1080
Video-call background	PNG or JPG	1920 x 1080
Abstract texture source	SVG, PNG, or editable source	Vector or 3840 x 2160

Use backgrounds sparingly. They should support brand recognition without reducing legibility.

Spacing

Mon, 01 Jan 0001 00:00:00 +0000

Spacing should make the interface easy to scan. Use tighter spacing for operational tools and more generous spacing for page openings, brand summaries, and asset previews.

The website uses fluid documentation spacing tokens in assets/css/main.css, from --docs-space-2xs through --docs-space-l. Use those token relationships when adding new documentation components.

The spacing model follows the Red Hat spacing foundation: a small, named scale keeps rhythm consistent across components, patterns, and layouts. vanityURLs maps that idea to documentation prose, compact product UI, generated pages, and asset previews.

Website analytics

Mon, 01 Jan 0001 00:00:00 +0000

The website uses Umami for visitor analytics. Events are sent server-side from the Cloudflare Worker instead of through a browser JavaScript snippet.

Privacy model

The website analytics setup is intentionally small:

no analytics cookies
no client-side analytics script
no localStorage or sessionStorage for tracking
no browser fingerprinting
no full visitor IP address sent to Umami

The Worker truncates visitor IP addresses before forwarding analytics data: IPv4 to /24 and IPv6 to /48. That preserves coarse geography while removing household-level precision.

White space and text flow

Mon, 01 Jan 0001 00:00:00 +0000

White space is part of the interface, not decoration. It helps readers understand what belongs together, where a section starts, and which action is most important.

Prose flow

The documentation uses content-flow and docs-flow patterns to create steady spacing between paragraphs, headings, lists, code blocks, tables, and callouts.

Use that rhythm for long-form pages. Avoid manually stacking ad hoc margins unless a reusable component needs a new spacing rule.

Flow pattern rules

Use content-flow on Markdown-style content containers that need readable prose spacing. It sets the shared body size, line height, child spacing, heading rhythm, and list-item rhythm for paragraphs, lists, quotes, tables, code blocks, highlighted code, and non-prose inserts.

A11Y

Mon, 01 Jan 0001 00:00:00 +0000

Accessibility is part of the brand system, not an afterthought.

The main website publishes an Accessibility Statement and a Trust Center with the current conformance target, known gaps, and reporting channels. Brand work should preserve those commitments instead of treating them as a separate compliance page.

Requirements

Preserve visible focus states.
Use meaningful link text.
Keep color contrast readable.
Provide localized alternative text for badges and images.
Avoid layouts where text overlaps, clips, or becomes too small to read.

Site standards

The current website targets WCAG 2.1 Level AA and documents partial conformance publicly. That standard applies to brand pages, documentation, generated redirect pages, badges, and operator-facing product surfaces.

Components and patterns

Mon, 01 Jan 0001 00:00:00 +0000

The brand system should reuse existing components before creating new ones. Shared patterns keep pages predictable and reduce CSS drift.

Documentation patterns

Use existing Hugo shortcodes and CSS components for:

Callouts and notices.
Steps and ordered setup flows.
File trees and repository structure.
Code blocks with copy buttons.
Tables for tokens, assets, and compatibility notes.
Details sections for secondary explanation.
Cards for repeated navigation items or downloads.

Product patterns

Generated redirect and operator-facing surfaces should feel related to the documentation without becoming documentation pages.

Releases

Mon, 01 Jan 0001 00:00:00 +0000

The website repository uses release-please through GitHub Actions. Releases are driven by commit history and release-please metadata, not by hand-editing package versions.

flowchart LR
A[Conventional
commits]
B[GitHub
Actions]
C[release-please]
D[Release PR]
E[CHANGELOG.md]
F[package
versions]
G[release
manifest]
H[GitHub
release]

A --> B
B --> C
C --> D
D --> E
D --> F
D --> G
D --> H

Before merging a release-facing website change:

Run npm run build.
Run npm run lint or the relevant narrower check.
Confirm .release-please-manifest.json still matches the intended current release.
Avoid manual edits to generated release notes unless you are correcting release metadata.

Changelog handling

Iconography

Mon, 01 Jan 0001 00:00:00 +0000

Iconography should clarify meaning, not decorate empty space. The vanityURLs system follows the practical shape of the Red Hat iconography foundation: choose icons from a known set, use them consistently, and make their purpose clear in context.

Icon roles

Role	Use	Guidance
Navigation	Section identity, previous/next cues, external links	Pair with text unless the icon is universally understood and labelled for assistive technology.
Actions	Copy, download, search, open, close, theme toggle	Use familiar symbols and preserve hover, pressed, and focus states.
Status	Success, warning, danger, blocked, expired, maintenance	Pair with visible text. Do not rely on color or icon shape alone.
Metadata	GitHub, RSS, social, file type, language	Keep small and subordinate to the label or value.
Illustration	Product concepts or brand storytelling	Use sparingly; documentation should remain useful before it becomes expressive.

Style

Prefer a consistent outline style for interface icons.
Use filled icons only when the state or icon set requires it, such as selected status or social marks.
Keep icon stroke, size, and optical weight balanced with adjacent text.
Use 1em icons inside inline text and stable square dimensions for icon buttons.
Do not mix unrelated icon libraries in the same control group.

Accessibility

Decorative icons should be hidden from assistive technology. Informative icons need an accessible name or nearby text that carries the same meaning.

Diagrams and code

Mon, 01 Jan 0001 00:00:00 +0000

vanityURLs is a technical product, so diagrams and code examples are part of the brand language. They should clarify behavior, not decorate the page.

Mermaid diagrams

Use Mermaid for redirect flows, deployment paths, routing decisions, and lifecycle diagrams.

Keep diagrams small enough to understand without zooming.
Label edges with real conditions such as alias found, blocked, expired, or fallback.
Prefer left-to-right flow for request pipelines.
Use diagrams to explain behavior that would be harder to parse as prose.

Code blocks

Code blocks use Chroma class-based highlighting and copy buttons. Keep examples complete enough to run or recognize.

Interaction

Mon, 01 Jan 0001 00:00:00 +0000

Interactions should be predictable, quick to understand, and visibly reversible when the action is local.

The interaction guidance builds from the Red Hat links foundation: links connect users to pages, sections, and resources; buttons perform actions on the current surface. That distinction matters on vanityURLs because generated pages often ask visitors to decide whether to continue, inspect, or report a link.

The documentation uses active sidebar states, mobile navigation, anchor links, previous and next links, and an optional table of contents. Preserve those patterns so users can move through reference content without relearning the site.

Dark mode and themes

Mon, 01 Jan 0001 00:00:00 +0000

The website uses Tailwind’s class-based dark mode. Theme changes should feel like the same system under different lighting, not like a separate brand.

Theme behavior

Initialize the selected theme before paint when possible.
Preserve active navigation, focus, hover, and selected states in both themes.
Keep code highlighting readable on light and dark backgrounds.
Avoid theme-specific content unless the asset itself requires a light or dark version.

Color in dark mode

Use teal accents sparingly on dark surfaces. Brand teal should identify links, selected states, and important accents; it should not become the background for every panel.

This is the source code of the vanityURLs brand on vanityURLs Brand

Brand & assets

Available now

Needed

Color

Common sense

Start from the user task

Local development

Prerequisites

Brand personality

Calm

Precise

Useful

Content authoring

Repository areas

Content files

Fonts and typography

Typeface samples

Inter Variable

Instance logo and redirected images

Instance redirected images

Light surface

Dark surface

Localized redirected files

Social media

Current files

Needed

Documentation contribution

Where to contribute

Brand documentation rules

Before opening a pull request

Voice

Voice qualities

Preferred verbs

Grid

Hosting and deployment

Architecture

Naming and terms

Project and domains

Wallpapers and backgrounds

Needed

Spacing

Website analytics

Privacy model

White space and text flow

Prose flow

Flow pattern rules

A11Y

Requirements

Site standards

Components and patterns

Documentation patterns

Product patterns

Releases

Iconography

Icon roles

Style

Accessibility

Diagrams and code

Mermaid diagrams

Code blocks

Interaction

Navigation

Dark mode and themes

Theme behavior

Color in dark mode