Skip to main content

Design

Puber Brand System

A trail-running brand: the jackrabbit, the palette, the voice

Puber

Brand system for the long miles

Puber is an ultramarathon support app that connects 100-mile trail runners with pacers and crew through per-race community boards and real-time coordination. It is targeting iOS and Android for the 2026 100-mile season.

The name is a deliberate brand-reclamation play in the running world: it lands funny, sticks immediately, and clears a wide lane. The brand needed to match that energy: confident, a little wild, but earned through miles.

The jackrabbit

The logomark is a stylized jackrabbit mid-bound: lean, athletic, ears swept back, body fully extended. Confident and a little wild, not cute, not cartoon. In ultrarunning, the hare is the pacer who sets the pace, so the mark carries a real connotation before anyone reads the wordmark.

Puber app icon: white running-jackrabbit logomark on Elevation Blue
Puber logomark: white running hare on transparent background

The current marks are AI-generated rasters awaiting a designer-redrawn SVG. iOS-18 tinted icon variants and App Store screenshots are still to come.

Color system

Six stops calibrated for trail-running contexts: high-contrast readability at altitude, in direct sun, and on sweat-smudged screens.

Elevation Blue

#007AFF

Primary

Summit Navy

#0B1D2A

Dark base

Trail Orange

#FF6B00

Energy

Peak Yellow

#FFC107

Finisher gold

Alpine Mint

#00D1B2

Success

Snow White

#FFFFFF

Neutral

Typography

Inter

UI type

Regular / Medium / SemiBold

The long miles start here.

Geometric Display Grotesque

Wordmark

Heavy lowercase

puber

Space Mono

Race data

Regular

14:32:07 / Mile 87.4 / +2,340 ft

The brand system board

One board that captures logo system, color system, typography, photography style, UI elements, and app-icon variants at a glance.

Puber brand system board: brand overview, logo system, color system, typography, photography style, UI elements, and app-icon variants

The icon system

Logomark, wordmark, tagline lockup, app-icon variants at every density, and the icon set that carries through the mobile UI.

Puber icon system board: logomark, wordmark, tagline, app-icon variants, icon sets, and UI mockup

Voice and energy

Rugged but refined. Calm confidence. Dawn on the trail. Soul sport. Earns trust. Community-first. Built for the hard parts of a 100-miler.

The voice never shouts and never begs. It speaks to runners the way a good pacer talks at mile 82: steady, present, matter-of-fact about what comes next.

“Built for the long miles.”

“Real Connections. Real-Time Support. Real Results.”

Energy comps (not aesthetic):

PatagoniaCotopaxiOn RunningTracksmithBlack Diamond

What ships next

  • Designer-redrawn SVG logomark to replace the AI-generated raster
  • iOS 18 tinted and monochrome icon variants
  • App Store screenshots and marketing asset suite
  • Full motion-identity guidelines (loading states, transitions, micro-interactions)

Want to talk through a design system or a brand?

Get in Touch
Puber Brand System — Jeffrey Johnson