Settings · brand system

Brand assets

Live catalog from @clarkkent/branding. The site header, the app icon and this page all draw the same mark. Product color, type and components are in the style guide.

OutThere
Out There.
Has No LimitThe Sky’s the Limit

Campaign lockup, beside the product wordmark. The ad says Out There. The proverb stays readable, the tally rule deletes it, and Has No Limit is written above the end of the line. Exported as @clarkkent/branding/no-limit-lockup.

After you edit the composition, regenerate rasters with pnpm --filter @clarkkent/branding assets:regen.

Composed lockup

What the sites and the app headers use. Geist Bold, always bold, always OutThere.

OutThere

sm · icon 22×22

OutThere

md · icon 28×28

OutThere

lg · icon 36×36

Brand color

The mark and launch colors. In the product, Weather Company Blue is the single accent and red means live; see the style guide for the full palette.

  • Weather Company BlueSweep, ring, lenses, scarce kickers.#33B1FF
  • InkApp icon ground. Night desk.#0a0a09
  • PaperWordmark on ink.#f2f0eb
  • SplashNative launch ground.#1E242E

Wordmark type

Geist Bold 700. Tracking -0.03em. Always bold. Always OutThere, one word. Product type is Geist.

OutThere

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

React components

  • ScopeMarkLooping radar sweep, one ring, glasses. The still SVG is the reduced-motion mark.@clarkkent/branding/scope-mark
  • ScopeMarkNativeSame sweeping mark for react-native-svg. The still SVG is the reduced-motion mark.@clarkkent/branding/scope-mark-native
  • OutThereLogoWordmarkSweeping mark plus OutThere type.@clarkkent/branding/logo-wordmark

Rasters

Served from this site. iOS and Android install icons are the same composition written to apps/mobile/assets/images/icon.png.

Back to settings