Copied!
Brand Style Guide — v1.0

A 2D space mining game about fuel management, asteroid salvage, and upgrading your ship for longer runs into the unknown.

Brand Palette

Rooted in a retro-70s warmth with deep space contrast. The stripe gradient is the brand's most recognizable visual motif. Click any swatch to copy its hex code.

The signature stripe gradient — always in this order: Amber → Orange → Burnt Orange → Maroon. Used on the logo, ship livery, and UI accents.

Primary — The Stripe
COPIED
Amber
#E8A628
COPIED
Orange
#D4752E
COPIED
Burnt Orange
#B84422
COPIED
Maroon
#8B1A1A
Neutrals — Text & Backgrounds
COPIED
Cream
#E8D5B5
COPIED
Tan
#C4A87A
COPIED
Dark Brown
#2A1F17
COPIED
Deep Space
#0F0E0C
Accents — Environment & Effects
COPIED
Teal
#2D5A50
COPIED
Space Green
#1A3A35
COPIED
Laser Pink
#D94FA0
COPIED
Ship Salmon
#C97070

Outfit

A clean geometric sans-serif with warmth. Versatile across display and body text. Used at heavy weights for titles and light weights for body copy.

Typeface Google Fonts — Outfit
Starlode
Salvage Co.
Mine asteroids. Manage fuel. Upgrade everything.
The deeper you venture into uncharted asteroid belts, the greater the lode — but fuel doesn't last forever. Every run is a gamble between greed and survival. Upgrade your ship, push further, and bring back the haul of a lifetime.
Aa
Light · 300
Aa
Regular · 400
Aa
Medium · 500
Aa
Semi · 600
Aa
Bold · 700
Aa
Extra · 800
Aa
Black · 900

Logo Usage

The wordmark features the signature stripe motif integrated into the letterforms. A mono (solid black) variant and a shortcut icon are available for contexts requiring simplified marks. All versions should maintain adequate clear space and never be recolored outside approved treatments.

Logo on dark
Primary — On Dark
Logo on space green
Primary — On Space Green
Logo on dark brown
Primary — On Dark Brown
Logo on gradient
Primary — On Gradient
Mono logo on cream
Mono — On Light
Mono logo on white
Mono — On White
Shortcut icon on dark
Shortcut Icon — On Dark
Shortcut icon on cream
Shortcut Icon — On Light

Store Capsule

The main capsule image used for the store listing. This is the primary hero art players see when browsing — it should always be presented uncropped and without overlaid text.

Store capsule — main hero image
Main Capsule — 1232 × 706
Store Listing Social Embeds Press Kit

Brand Personality

Starlode Salvage Co has the feel of a well-worn work vessel — functional, gritty, but with character. The brand should feel like a retro space trucking company that's been around the belt a few times.

Retro-Industrial Cozy but Gritty Blue-Collar Space Not Military Sci-Fi Not Sleek/Corporate Not Cutesy/Cartoon

🔧 Working Class

This isn't a warship — it's a salvage rig. Language should feel practical, worn-in, and a little rough around the edges. Think space trucker, not space admiral.

📻 Retro-Analog

Lean into 70s industrial aesthetics: dials over digital, chunky over sleek, analog grain over clean vector. The visual language should feel like a faded NASA manual.

⛽ Risk & Reward

The core tension is fuel vs. greed. Marketing and UI copy should play on this: "How far will you push it?" The further you go, the bigger the haul — but also the bigger the risk.

☕ Cozy Gathering

Despite the danger, there's comfort in the loop. Coming back to upgrade, planning the next run, watching your ship improve. It's satisfying, not stressful.

Do's and Don'ts

Keep the brand consistent — these ground rules apply across store pages, social media, UI, and marketing materials.

✓ Do

  • Use the stripe gradient in the correct order (amber → maroon)
  • Use Outfit font for all text — heavy for display, light for body
  • Place the logo on dark backgrounds for maximum contrast
  • Apply film grain or noise textures for retro feel
  • Use warm, analog color treatments on screenshots
  • Reference the ship's "SM-01" designation in marketing

✗ Don't

  • Reorder or omit colors from the stripe gradient
  • Place the logo on busy or light backgrounds without treatment
  • Use neon, cyberpunk, or overly futuristic aesthetics
  • Mix in non-Outfit typefaces for headings
  • Apply the stripe as a vertical gradient
  • Make the brand feel militaristic or overly polished

Copy & Paste

CSS variables ready to drop into any project. Click the block to copy.

CSS Variables Click to copy
/* Primary — The Stripe */
--amber:        #E8A628;
--orange:       #D4752E;
--burnt-orange: #B84422;
--maroon:       #8B1A1A;

/* Neutrals */
--cream:        #E8D5B5;
--tan:          #C4A87A;
--dark-brown:   #2A1F17;
--deep-space:   #0F0E0C;

/* Accents */
--teal:         #2D5A50;
--space-green:  #1A3A35;
--laser-pink:   #D94FA0;
--ship-salmon:  #C97070;