Brand

Brand reference

vanityURLs visual system

This page records the current public brand decisions for the website and self-hosted redirector badges. Logo work is still in progress, so treat logo placement as provisional and badge color tokens as the stable reference.

Badge color tokens

The redirected badges use transparent backgrounds. Choose the light badge for light surfaces and the dark badge for dark surfaces.

Redirected, light badge

#111827

vanityURLs

#0F766E

Swoop

#14B8A6

Redirected, dark badge

#FFFFFF

Badge examples

Light surface

Dark surface

Localized badge files

The website mirrors the redirector badge SVGs from the code repository under /static/images/. The source of truth for deployed user instances remains defaults/public/{language}/ in the code repository.

v8s-redirected-en.svg v8s-redirected-en-dark.svg

v8s-redirected-fr.svg v8s-redirected-fr-dark.svg

v8s-redirected-es.svg v8s-redirected-es-dark.svg

v8s-redirected-it.svg v8s-redirected-it-dark.svg

v8s-redirected-de.svg v8s-redirected-de-dark.svg

Typography

Current website fonts

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

Reference typography

The bhdicaire-com implementation uses Red Hat Display, Red Hat Text, Red Hat Mono, and Source Serif 4 with Utopia-style fluid type and spacing tokens. This brand page adopts the fluid token approach only, scoped to .brand-system, so the broader website typography stays stable until the logo refresh lands.

Instance wordmark configuration

Installer-managed instances can store a split-color wordmark in custom/v8s-site-config.json. The green portion should use the vanityURLs brand teal unless the instance has a deliberate local brand system.

{
  "branding": {
    "domain": "example.link",
    "wordmark": {
      "black": "example.",
      "green": "link"
    }
  }
}

Usage notes

Do

Use SVG badges, keep backgrounds transparent, preserve the localized badge text, and run npm run optimize:badges after editing default badge SVGs in the code repository.

Do not

Do not rasterize the badges, add opaque backgrounds, recolor only one language, or treat the current logo set as final while the logo refresh is still underway.