Brand guideline

How Launch Media Studios looks, and why

A working reference for anyone making something with this brand on it. Everything here is what the live site actually uses, so if the two ever disagree, the site is right and this page is out of date.

Two people reviewing footage on a laptop in a daylit studio

The idea

The brand has one job: look like a studio that makes things, not an agency that presents things. Everything below follows from that. The photography is warm and unstaged, the typography is calm, and then a single orange hand-drawn layer goes over the top, as if someone marked up the print on the way past.

That drawn layer is the whole identity. Strip it out and this is a competent minimal brand that looks like forty others. Keep it and the work is recognisable at a glance, at thumbnail size, in a feed. Protect it.

The one rule that matters most

The drawn marks are made by a person, so they must look made by a person. Wobbly, uneven pressure, slightly open circles, arrows that overshoot. The moment they become clean vector shapes with perfect radii, the brand reads as generic SaaS and the whole thing collapses.

Imagery: photoreal base, drawn overlay

Mixed media. A real photograph underneath, flat orange illustration on top. Never illustration alone, never a bare photograph. The two together are the signature.

People at work, unposed

People at work, unposed

The default. A real person doing the actual job, caught mid-task rather than smiling at the lens. Faces stay clear of the drawn layer.

Overhead still life

Overhead still life

For anything about process or craft. Warm off-white surface, real props, generous space between objects.

Evidence of the system

Evidence of the system

Calendars, boards, notes. Shows the discipline the copy claims without needing a chart.

Screens, abstracted

Screens, abstracted

Screen content stays unreadable on purpose. A legible dashboard invites scrutiny of numbers we are not claiming.

The photographic base

  • Warm natural daylight only. No hard flash, no cool blue cast, no heavy colour grade. Window light doing the work.
  • Warm neutral palette in frame. Off-white, sand, oatmeal, pale wood, the occasional plant. The photograph must never fight the orange, because the orange has to win.
  • Generous negative space. Deliberate empty area, usually upper right, because that is where the drawn marks live. Compose for the annotation, not around it afterwards.
  • Real and Singaporean. Real rooms, real props, people who look like they live here. No glass-tower stock, no headset call-centre imagery, no handshake photography.
  • Unposed. Mid-task, looking at the work rather than the camera.

The drawn layer

  • One colour only: #f2681c. No second accent, no gradients, no shadows on the drawn marks.
  • A limited vocabulary: rough circle, curved arrow, underline, bracket or frame, small four-point sparkle. That is the entire set. Adding new mark types dilutes it.
  • Three to five marks per image. More than that and it stops reading as annotation and starts reading as decoration.
  • Never over a face. Never over the primary subject either. The marks point at things, they do not obscure them.
  • Flat and graphic. The drawn layer must never try to look photographic, three dimensional, or lit.

Producing a new image

Images are generated with gpt-image-2 and the shared style block below, then resized and converted to WebP before they go in public/img/. Keep the style block verbatim and change only the scene sentence, or the set drifts.

<one sentence describing the scene>. Editorial photograph, warm natural daylight, shot on 35mm, shallow depth of field, generous negative space, muted warm-neutral colour grade, soft off-white background. Layered ON TOP: loose hand-drawn marker illustration in one vivid orange (#f2681c), as if a creative director annotated the print by hand. Imperfect energetic marks: a rough circle, a curved arrow, a quick underline, small doodle sparkles. The drawn layer is flat graphic illustration, never photorealistic, never over a face. IMPORTANT: absolutely no text, no letters, no words, no numbers, no logos, no watermarks.

Why the prompt forbids text and logos

Image models garble lettering and invent logo shapes. Every word and every mark on our assets is typeset afterwards in real type, never generated. If an image comes back with text in it, regenerate rather than crop around it.

Colour

One accent, one near-black, three greys, two grounds. The restraint is the point: because there is only one colour, the orange means something wherever it appears.

#f2681c

Orange

Primary accent

Every drawn mark, every primary button, one highlighted phrase per headline. Never a background for body text.

#d4550e

Orange deep

Accent on tint

Text and icons sitting on Orange soft, where plain Orange would not pass contrast.

#fff3ec

Orange soft

Tint

Eyebrow pills, callouts, number badges. The only orange allowed behind text.

#0e0e0e

Ink

Primary text

Headlines, the dark CTA panel, the footer mark. Not pure black, deliberately.

#4d4d4d

Body

Body text

All running copy at weight 300. Never for headlines.

#6b6b6b

Muted

Secondary text

Captions, source lines, metadata, footer copy.

#e6e6e2

Line

Borders

Card borders, table rules, section dividers. One pixel, never heavier.

#f4f5f4

Paper soft

Alternate ground

Alternating section backgrounds and table headers. Creates rhythm without a second colour.

Colour rules

  • Orange never exceeds roughly a tenth of any layout. It is punctuation, not paint.
  • Body text is never orange. One phrase per headline may be, and only one.
  • Never use pure black or pure white. Ink and Paper are the extremes.
  • No gradients anywhere, including on text. No second accent colour, ever.

Typography

Poppins throughout, at three weights: 700 for headlines, 600 for labels and buttons, 300 for everything you actually read. The 300 is deliberate. It is what keeps a page dense with information from feeling heavy.

Most brands do not have a marketing problem.

They have a publishing problem.

This is the lede. It runs at 300 weight and sits between the headline and the body, carrying the argument in one or two sentences before the reader commits to the rest.

And this is body copy, capped at roughly seventy-two characters a line so the eye can find the next line without effort. Long-form pages on this site run to several thousand words, so the measure and the line height do more work here than on a page that is mostly headings.

RoleSizeWeightTracking
Display / H1clamp(36px, 5.4vw, 60px)700-1.9px
Section / H2clamp(26px, 3.6vw, 38px)700-1.1px
Subsection / H320.5px600-0.4px
Lede18.5px300normal
Body16.5px300normal
Caption13.5px300 to 600normal
  • Headlines carry negative tracking. At display sizes Poppins opens up, and it needs pulling back in.
  • Body copy never goes below 15px or above 17px. Long documents live or die on this.
  • Sentence case everywhere. Never all caps except the small uppercase labels, which carry 0.06em tracking.
  • No em dashes in any copy, anywhere. Commas, colons, semicolons, full stops or brackets.

The mark

A capital L inside a hand-drawn circle. The circle is the same loose marker stroke that annotates every image on this site, so the logo is not decoration bolted onto the identity, it is the identity at its smallest size. It does not quite close, and it is not meant to.

It survives being small, which is the only test a mark has to pass. At sixteen pixels it still reads as a circled L rather than an orange smudge, and that is why this one was chosen over the alternatives.

The Launch Media Studios mark in orange
The mark reversed to white on ink

Orange on light, white on ink. There is no third colourway. Download the orange SVG or the white SVG.

The lockup

Mark plus wordmark, set in Poppins 600, sentence case. The gap between them is roughly a third of the mark height, and the two are optically centred rather than mathematically aligned.

Launch Media Studios

Clear space and minimum size

  • Clear space: keep a margin of at least half the mark height on every side. Nothing enters that box, including the wordmark of another brand.
  • Minimum size: 16px for the mark on screen, 8mm in print. Below that the counter inside the L fills in and it stops reading.
  • On photography: place it in the negative space the image was composed to leave. Never over a busy area, and never inside a drawn annotation.

Icons and favicons

Two treatments, chosen by context. The bare mark is used wherever a transparent background is possible, because it stays legible smaller. The filled orange tile is used only where the platform demands a solid square, which is app icons and home-screen bookmarks.

favicon.svg

20px

16px

apple-touch

icon-192

maskable

Always ship the SVG

The mark is a two-path SVG under a kilobyte with no CSS classes and no gradient ids, so it can be inlined anywhere without colliding with another SVG on the page. Use the vector everywhere it is accepted. The PNGs exist only for platforms that refuse SVG.

Shape and depth

  • Radii are generous and consistent: 999px for pills and buttons, 22 to 28px for cards and panels, 16 to 20px for small tiles.
  • Depth comes from one-pixel borders and the alternate ground, never from drop shadows. There is not a single box-shadow on this site.
  • Sections alternate Paper and Paper soft to create rhythm down a long page.
  • No glassmorphism, no gradient fills, no coloured left borders on cards.

Voice

Plain, specific, and willing to say the unhelpful thing. The brand's whole competitive position is that it tells buyers what other agencies will not, so the writing has to earn that in every paragraph.

  • Say the number. If a price band is known, print it. Vagueness reads as evasion here.
  • Include what costs us money. Every service page names a case where we are the wrong choice. That is not modesty, it is the reason the rest is believable.
  • No invented proof. No client names, case studies, testimonials or results percentages until they are real. This is not negotiable and it is not temporary.
  • No hype vocabulary. Nothing is game-changing, cutting-edge, best-in-class or revolutionary. No exclamation marks.
  • Date and source any third-party fact, and link it so a reader can check it in under a minute.

What breaks the brand

Clean vector doodles

The drawn layer must look hand-made. Perfect geometry kills it.

Stock business photography

Handshakes, headsets, glass towers, laptop-and-coffee cliches.

A second accent colour

One orange. Adding a blue or a green makes it a template.

Drop shadows and glass

Depth comes from borders and grounds. Nothing floats.

Text baked into a generated image

Every word is typeset afterwards in real Poppins.

Marks over faces

Annotation points at the subject, it never covers it.

Gradient text

Emphasis comes from weight, size or the accent colour.

Fake proof

No invented clients, numbers or testimonials. Ever.

Redrawing the mark

It is a traced hand-drawn stroke. A perfect circle with a perfect L is a different logo.

Recolouring the mark

Orange on light, white on ink. Never a third colour, never a gradient, never an outline.

Making something with this brand on it?

If anything here is ambiguous, ask before you ship it. It is faster than a redo, and the consistency is most of the value.

Message the studio