Get Started

Brand & Build Guidelines

Rocket Launch Media · Internal

Brand and build guidelines

One reference for how pages on rocketlaunchmedia.com look, move, and get built. Every example on this page is rendered live in the system it describes. When something here conflicts with an old page, this page wins.

01 — Color

Six values. Nothing else.

Dark base, one card tone, one border tone, two text tones, one gradient. Do not introduce new colors per page.

Background#0B0B11Every section background
Card#13131FCards, panels, inputs
Border#2A2A35All borders and dividers, 1px
Aa
Text#F5F5F7Headings and primary text
Aa
Muted#9CA3AFSupporting text. Never lighter than this on dark — grey below this fails readability
Gradient#ec4899 → #8b5cf6 → #3b82f690deg. CTAs, highlights, one accent per section

02 — Typography

Inter Tight for headings, Inter for everything else

Two families, one voice. Inter Tight at 700 and 800 for H1 to H3. Inter 400 to 600 for body, labels, and buttons. No other fonts, no monospace outside code. Minimum body size on mobile is 16px.

H1Inter Tight 800 · clamp(30px, 3.6vw, 46px) · line-height 1.15 · letter-spacing -0.02em
Aa Bb Cc
H2Inter Tight 700 · clamp(24px, 2.6vw, 34px) · line-height 1.2
Aa Bb Cc
H3Inter Tight 700 · 19px · line-height 1.3
Aa Bb Cc
EyebrowInter 600 · 13px · uppercase · letter-spacing 0.1em · color #8b5cf6
Section label
BodyInter 400 · 17px desktop, 16px mobile · line-height 1.6
The quick brown fox jumps over the lazy dog.
SupportingInter 400 · 16.5px · color #9CA3AF
The quick brown fox jumps over the lazy dog.

03 — Buttons and cards

Two buttons, one card

Primary is the gradient pill. Secondary is the outline pill. Minimum touch target 48px tall. Cards are #13131F with a 1px #2A2A35 border and 16px radius.

Card title

Card body text in muted. Padding 24 to 28px, radius 16px, border #2A2A35. On hover: lift 4px and border shifts toward #8b5cf6.

04 — Motion and 3D

Animation rules

Live specimens below. These are the approved mechanics — reuse them before inventing new ones.

  • Pure CSS only. No animation libraries, no GSAP, no Lottie. Keyframes and transforms cover everything we do.
  • Loops run 8 to 12 seconds with a visible hold at the resolved state. Pin pulses run 3 to 5 seconds.
  • 3D limits: perspective 1100 to 1500px. Tilt panels no more than 15deg on Y, 6deg on X. Push highlights forward with translateZ 30 to 100px.
  • One animated element per section. The rest of the section stays still.
  • Every animation dies under prefers-reduced-motion, and the resolved state must read fine as a static image.
  • The highlighted element is always the firm — gradient-tinted card, purple-leaning border, purple shadow. Grey is everyone else.

Card flip

Front
Back

3D orbit

query
query
query
Your firm

Pulse

Reveal

Blocks fade up 8 to 12px with 0.3 to 0.5s ease, staggered 70 to 200ms. Used for skeleton builds and answer lines.

05 — Mobile rules

Mobile first, learned the hard way

  • Heroes always stack. Text, buttons, then visual underneath. Never put a hero in a swipe slider.
  • Swipe sliders are for card grids of 3 or more only, with the animated SWIPE indicator. Scope the selector to those grids — a blanket .grid rule is what broke the ChatGPT Ads hero.
  • Card grids stack on scroll on phones. Under 620px, service and feature card grids become a sticky pile: each card pins below the header and the next one scrolls over it, deck-style. Grid on desktop, stack on phone. Cards must have solid backgrounds for this. Keep it to grids of 4 or more cards.
  • Breakpoints: 1000px for layout collapse, 620px for phone sizing. Two-column grids go to one column, three-column card grids go to one.
  • Section padding: 88px desktop, 64px mobile. Hero top padding must clear the fixed header.
  • Buttons full-comfort: 15px vertical padding minimum, text 15px+, and stacked CTAs get 14px gap.
  • 3D scenes shrink, not scroll: reduce card widths and translateZ radii under 620px. Nothing horizontal-scrolls except intentional card sliders.

06 — Build rules

How pages get built on this site

  • All custom sections are Elementor HTML widgets inside the page’s main container, section fully self-contained: markup, scoped style, optional script in one block.
  • Namespace everything. Each section gets a unique wrapper class and all selectors hang off it. Unique keyframe names per section.
  • Never leave a blank line inside a style block in post content. WordPress wpautop injects paragraph tags at blank lines and silently breaks the CSS. Elementor HTML widgets are safe; raw page content is not.
  • Use !important on layout-critical rules — display, grid columns, padding on buttons — because theme and Tailwind resets will fight them.
  • After any edit, purge LiteSpeed cache. The site serves stale pages otherwise and the edit looks like it failed.
  • No real logos or marks we do not own. Platform names as plain text only. No Google badge reproductions, no government-style seals.
  • No invented numbers anywhere. If a stat is on the site, Ed says it out loud on sales calls. Structural claims only unless a figure is verified.
  • Plain copy. Say what the thing is. One idea per sentence. No rhetorical flourishes.

07 — Starter tokens

Paste this into any new section

Swap SCOPE for the section’s unique class and build inside it.

.SCOPE{
  --bg:#0B0B11; --card:#13131F; --bd:#2A2A35;
  --pk:#ec4899; --pu:#8b5cf6; --bl:#3b82f6;
  --txt:#F5F5F7; --mut:#9CA3AF;
  --grad:linear-gradient(90deg,var(--pk),var(--pu),var(--bl));
  background:var(--bg); color:var(--txt);
  font-family:'Inter',-apple-system,sans-serif;
  display:block; width:100%; padding:88px 0;
}
.SCOPE *{box-sizing:border-box}
.SCOPE .w{max-width:1180px;margin:0 auto;padding:0 28px}
@media(max-width:1000px){.SCOPE{padding:64px 0}}
@media(prefers-reduced-motion:reduce){.SCOPE *{animation:none!important}}