Skip to content

Logo System

Version: V4 (outlined paths, no font dependency)

Usage Rule

Never show the wordmark and icon together.

Context Use
Headers, marketing, documentation Wordmark
Favicons, app icons, social avatars Icon 
CORRECT:
  [SageOx]           or           [OX]

INCORRECT:
  [OX] SageOx        or           [SageOx] [OX]

Wordmark

Primary horizontal logo for headers, marketing, and documentation.

Light Background Dark Background
Wordmark Light Wordmark Dark

Download: Light SVG | Dark SVG

Icon (OX)

Square logo for favicons, app icons, and constrained spaces.

Light Background Dark Background
Icon Light Icon Dark

Download: Light SVG | Dark SVG

Mascot

Friendly ox character for approachable, community-facing contexts.

Light Background Dark Background
Mascot Light Mascot Dark

Download: Light SVG | Dark SVG

When to Use the Mascot

Context Use
GitHub/GitLab bot avatar Mascot (avatar variant with background)
Social media profile Mascot (avatar variant with background)
Community Discord/Slack Mascot
Documentation illustrations Mascot (transparent)
Error states with personality Mascot
Marketing landing pages Wordmark (not mascot)
App headers Wordmark or Icon (not mascot)

Avatar Variants

For platforms requiring solid backgrounds (GitHub, social avatars):

Light Avatar Dark Avatar
Avatar Light Avatar Dark

Download: Light Avatar SVG | Dark Avatar SVG

Design Specifications

Construction

V4 logos use outlined <path> elements extracted from Space Grotesk font files. No font imports, no <text> elements, no runtime font dependency.

Typography

Property Wordmark Icon
Source font Space Grotesk SemiBold (600) Space Grotesk Bold (700)
Rendering Outlined paths Outlined paths
Custom kerning Per-pair adjustments Advance widths only

Color Palette

Element Light Mode Dark Mode
"Sage" / "O" Sage 400 #aebca7 Sage 300 #c4d1c0
"Ox" / "X" Sage 700 #546a54 Sage 500 #7a8f78
Background Sage 50 #f3f6f2 Crater 900 #0b0d0b

Mascot Color Palette

Element Light Mode Dark Mode
Head #87a878 #a8c498
Horns/Hair/Eyes #4a5f3d Sage 500 #7a8f78
Snout/Ears inner #a8c498 Sage 300 #c4d1c0
Eye whites #ffffff Sage 50 #f3f6f2
Avatar background Sage 50 #f3f6f2 Crater 900 #0b0d0b

Available Sizes

Wordmark

Size Light Dark Use
2048px PNG PNG Print
1024px PNG PNG Large displays
512px PNG PNG Web headers
256px PNG PNG Small headers
128px PNG PNG Thumbnails
SVG SVG SVG Scalable

Wordmark (Transparent)

Size Light Dark Use
2048px PNG PNG Print
1024px PNG PNG Large displays
512px PNG PNG Web headers
256px PNG PNG Small headers
128px PNG PNG Thumbnails
SVG SVG SVG Scalable

Icon

Size Light Dark Use
1024px PNG PNG Large icons
512px PNG PNG Standard
256px PNG PNG Medium
192px PNG PNG Android
180px PNG PNG Apple touch
128px PNG PNG Standard
64px PNG PNG Small
32px PNG PNG Favicon
16px PNG PNG Tiny favicon
SVG SVG SVG Scalable

Icon (Transparent)

Size Light Dark Use
1024px PNG PNG Large icons
512px PNG PNG Standard
256px PNG PNG Medium
192px PNG PNG Android
180px PNG PNG Apple touch
128px PNG PNG Standard
64px PNG PNG Small
32px PNG PNG Favicon
16px PNG PNG Tiny favicon
SVG SVG SVG Scalable

Mascot (Transparent)

Size Light Dark Use
512px PNG PNG Large display
256px PNG PNG Standard
128px PNG PNG Medium
64px PNG PNG Small
48px PNG PNG GitHub avatar
32px PNG PNG Tiny
SVG SVG SVG Scalable

Mascot Avatar (With Background)

Size Light Dark Use
512px PNG PNG Large display
256px PNG PNG Standard
128px PNG PNG Medium
64px PNG PNG Small
48px PNG PNG GitHub avatar
32px PNG PNG Tiny
SVG SVG SVG Scalable

Clear Space

Maintain clear space equal to the height of the "O" around all sides of the logo.

        +------------------------------+
        |           ^                  |
        |           | O height         |
        |           v                  |
        |  <------> SageOx <------>    |
        |  O height        O height    |
        |           ^                  |
        |           | O height         |
        |           v                  |
        +------------------------------+

Generating Custom Sizes

# Using rsvg-convert (recommended)
rsvg-convert -w 800 v4/wordmark/sageox-wordmark-light.svg -o custom-800.png

# Using ImageMagick
magick v4/wordmark/sageox-wordmark-light.svg -resize 800x custom-800.png

File Properties

  • Transparent background (PNG/SVG)
  • Cropped to content
  • Anti-aliased edges