The system behind Planet.
A small set of decisions, made once and applied consistently. Touch the tokens — not the components — to retune the brand.
Essence
A different kind of city.
Planet RP is the public face of a custom-built FiveM roleplay city — open foundations, custom systems, shipped in public.
The system is small on purpose. Two display weights. One body face. One mono. Three meaningful colours plus structure. When in doubt, less.
Quieter, but confident.
v0.3 drops v0.2's maximalism — generous whitespace, fewer elements per section, one bold typographic moment at a time.
The real globe.
The Planet logo is the brand's anchor — the geometric reduction is its small-surface stand-in. Use the globe at scale; use the disc at favicon size.
Three colours, sorted.
Gold is the mark. Red is action. Bone is voice. Yellow is reserved. Don't break the order.
The mark
The globe, the disc.
The Planet globe — gold continents on a dark sphere, surrounded by a four-arc orbital ring with cardinal dots. Used wherever it can be seen at scale: hero, footer, brand showcase, social cards.
Lockup
Mark · simplified (favicon scale)
Mark · 32px favicon
Globe at scale.
Use the real globe in any placement ≥56 px. Below that, switch to the simplified disc — the wireframe and continents fall apart.
The disc inherits.
The disc on the mark adapts — bone on dark surfaces, dark on bone. The dot is gold.
Don't recolor.
Don't tint or duotone the globe PNG. If it doesn't fit, pick a different placement.
Colour
Twelve tokens. Strict order.
Three meaningful colours: gold for the mark, red for action, bone for voice. Yellow is reserved — use sparingly for clash or utility. Adding a fourth means a brand-system bump.
#0E0A08
--color-canvas
Primary background. Warm-tinted near-black.
#161210
--color-surface
First-level elevation: cards, sticky bars.
#221C18
--color-surface-2
Second-level: modals, popovers.
#F4F1E9
--color-canvas-inverse
Inverse-treatment sections (Inside flips to bone).
#F4F1E9
--color-ink
Primary foreground. Bone white.
#A09A93
--color-ink-muted
Body copy on dark. 6.0:1 contrast.
#898378
--color-ink-subtle
Eyebrows on dark, supplementary metadata.
#FF2E2E
--color-red
The single action colour. Buttons, the dot, hits.
#FF5A5A
--color-red-bright
Hover for red.
#D4A256
--color-gold
The mark's native colour. Restored in v0.3.
#E6B76B
--color-gold-bright
Hover for gold.
#F2EE2A
--color-yellow
Reserved for rare clash / utility status only.
Type
Heavy display, clean body, technical mono.
Display
Unbounded
LIVE SOMEWHERE NEW.
Used heavy (700–900), almost always uppercase, with negative tracking. Italic 700 is the editorial moment — reserved for emphasis, never decorative.
Body
Plus Jakarta Sans
A roleplay city built around character, consequence, and a place that remembers what you do.
Body 16–19 px, line-height 1.55–1.6. Modern grotesque with character; no Inter.
Mono
JetBrains Mono
connect.planetrp.world:30120 · LIVE · EST. 2026
Eyebrows, addresses, badges, code. Tracked +0.16em uppercase semibold for eyebrows; natural for addresses.
Motion
GSAP. One choreography. Subtle.
v0.3 introduces GSAP. The hero gets one orchestrated entrance — the globe spins in, the headline rises word by word, subhead and CTA settle in. Sections fade up via ScrollTrigger as they enter the viewport. The globe rotates continuously at 240 s/rev — almost imperceptible, just adds life. No bouncy easing; we use power3.out.
Hero timeline
1.6s globe + staggered word reveals + CTA settle
On mount only
ScrollTrigger
Section content fades up at 82% viewport entry
Fires once, doesn't replay
Globe spin
Continuous rotation, 240s/rev, pure CSS
Honors prefers-reduced-motion
Voice
Confident. Quiet. Honest.
Do
- Lead with what's true today.
- Short sentences. Then a longer one for rhythm.
- UPPERCASE for hits. Sentence case for paragraphs.
- Treat the player as an adult.
Don't
- Name the underlying tech in marketing copy. The framework is an implementation detail.
- "Welcome to the next-generation, AAA, immersive RP experience."
- Stack adjectives. Use exclamation marks. Promise unshipped features.
- Lead with the org name. Players don't care.
Stamps
Sticker-coded state.
Sticker-style badges for state markers. Five variants — outline gold, red, ink, plus solid red and solid gold. Optional leading dot for status uses.
Don'ts