Rune Project

Appearance

Rune Brand Toolkit ​

Use the official Rune Project, Rune Engine, and Rune Story marks in product UI, documentation, presentations, integrations, and community material.

Source, font, and license

Brand source JSONGeometry, color, and typography authoritySora variable fontOfficial Rune wordmark source fontSora OFL licenseSIL Open Font License 1.1Asset READMERepository asset inventory and generation notes

Which asset should I use? ​

SituationAsset
Product name must be visibleLight or dark lockup
Standalone mark at 32px or largerColor display mark
Navigation or favicon at 24px or smallerLight or dark 16px optical mark
Single-ink artwork or inline SVGMonochrome mark
A custom composition already names the productGlyph-only asset

The 16px asset is independently drawn for optical clarity. Do not shrink the 64px master and treat it as the small mark.

Colors and contrast ​

ProductStone colorWhite-rune contrast
Rune Project#15499D8.50:1
Rune Engine#A62C2D6.95:1
Rune Story#0B7F914.71:1

Canonical display marks use one flat stone color and a white rune. Do not add gradients, texture, facets, highlights, or shadows to the official SVG.

For dark UI chrome, use the fixed-white -16-dark.svg optical mark. The currentColor monochrome assets work best when embedded inline; an external <img> does not inherit the host element's text color.

Typography ​

Rune wordmarks use Sora:

  • Rune uses weight 700.
  • Project, Engine, and Story use weight 400.
  • Product lockups use -0.035em tracking and the proportions generated from rune-brand.json.

Official lockup SVGs embed the pinned Sora bytes and do not require a platform font. The downloadable font remains licensed under the included SIL Open Font License.

Use the marks well ​

Do ​

  • Use an asset generated from the canonical brand source.
  • Choose the product-specific mark: Project, Engine, or Story.
  • Choose the optical asset for small UI.
  • Match light/dark lockups to their background.
  • Preserve the SVG's proportions, flat color, stone, and rune.
  • Keep the mark legible with strong contrast and uncluttered placement.

Don't ​

  • Don't edit generated SVG paths directly.
  • Don't stretch, skew, crop, rotate, or redraw the mark.
  • Don't recolor the canonical product stones.
  • Don't add gradients, texture, glow, bevels, or drop shadows.
  • Don't substitute the scaled master for the 16px optical drawing.
  • Don't combine the mark with a different wordmark typeface or weight.
  • Don't imply products or brand families that are not in rune-brand.json.

Developer integration ​

Use the stable site URLs when linking from web content:

html
<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="/brand/rune-engine-lockup-dark.svg">
  <img
    src="/brand/rune-engine-lockup-light.svg"
    alt="Rune Engine">
</picture>

Use responsive optical marks in navigation:

html
<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="/brand/rune-project-16-dark.svg">
  <img
    src="/brand/rune-project-16.svg"
    width="24"
    height="24"
    alt="Rune Project">
</picture>

Repository contributors should edit assets/brand/rune-brand.json, run eng/Generate-BrandAssets.ps1, and commit the generated assets together. Do not hand-edit an SVG.

Scope of this guide ​

This toolkit explains visual usage and provides the assets Rune publishes today. It does not define a separate trademark, endorsement, merchandise, or commercial licensing policy. Rune currently distributes canonical SVG assets and the Sora source font; it does not publish PNG/print bundles or an npm brand package.

Normative detail ​

Rune Project brings Rune Story authoring together with the Rune Engine rendering foundation.

MIT License