Brand Guidelines — CreatorCam

01 — Logo

A camera lens with a record dot

The mark is a clean lens ring with a single red record dot at its center — camera and "recording" in one symbol. Paired with the CreatorCam wordmark, where "Cam" always carries the record red.

Wordmark · light

CreatorCam

Wordmark · dark

CreatorCam

Mark

Mark · reversed

✓ Do

Keep clear space around the logo of at least the height of the record dot.
Use the reversed (white) mark on dark or photographic backgrounds.
Keep the record dot red — it is the one fixed element.

✕ Don't

Recolor the dot, stretch the mark, or add effects/shadows to the flat logo.
Recreate the wordmark in another typeface or change the "Cam" color.
Place the light logo on low-contrast backgrounds.

02 — App Icon

App icon

A glowing record dot inside a lens, on near-black — premium and instantly readable on the Home Screen. Export at 1024×1024 as a flat square PNG; iOS applies the rounded mask.

Home Screen

Spotlight

Settings

03 — Color

A near-black canvas, one decisive red

The palette is intentionally restrained: a warm off-white surface, near-black ink for text, and Record Red as the single accent — used like the light on a camera, never as filler.

Record Red

#FF3B30

Primary accent · the dot

Deep Red

#E11D12

Pressed · links on light

Soft Red

#FFE9E7

Tint · tags & chips

Ink

#14131A

Text · dark surfaces

Ink 2

#44424E

Body text

Ink 3

#7A7884

Muted · captions

Canvas

#FBFAF8

Page background

Surface Soft

#F3F1ED

Cards · wells

04 — Typography

Three voices, clearly assigned

A characterful display face, a warm humanist body face, and a monospace for anything technical — labels, timecodes, eyebrows.

Bricolage Grotesque Display · headlines · logo · weights 600–700

Press record. Every angle covered.

Semibold 600Bold 700

Hanken Grotesk Body · UI · paragraphs · weights 400–600

The all-in-one recording studio for creators — pick a mode, tap once, and you're rolling. Clean, friendly, and easy to read at any size.

RegularMediumSemibold

JetBrains Mono Labels · timecodes · eyebrows · weights 500–700

REC 00:00:14 · DUAL · SCREEN · LIB

ABCDEFGHIJKLM · abcdefghijklm · 0123456789

05 — The motif

Record dot & timecode

The pulsing record dot, mono timecodes and small uppercase tags are the brand's connective tissue — they make every surface feel like a viewfinder.

REC

Pulsing record dot

The signature element. Use it sparingly as a live indicator or beside section eyebrows.

00:00:14

Mono timecode

Numbers and status read in JetBrains Mono, evoking a camera HUD.

01 · Front

Uppercase tags

Short mono tags label modes and steps with a tinted red chip.

06 — Voice & tone

Confident, plain-spoken, creator-to-creator

Short sentences. Verbs first. We talk like a fellow creator who respects your time — never salesy, never jargon-heavy.

Headlines

Do“Press record. Every angle covered.”

Don't“The ultimate revolutionary content-creation ecosystem.”

Features

Do“Your script stays out of the recorded file.”

Don't“Leverage advanced compositing pipelines.”

07 — In the app

Build tokens for iOS

Drop these straight into the app. Bundle the three fonts (or fall back to SF Pro Rounded for display / SF Pro for body) and use Record Red as the global tint.

// SwiftUI — CreatorCam color tokens
extension Color {
  static let recordRed  = Color(hex: 0xFF3B30)  // primary tint
  static let deepRed    = Color(hex: 0xE11D12)
  static let softRed    = Color(hex: 0xFFE9E7)
  static let ink        = Color(hex: 0x14131A)
  static let ink2       = Color(hex: 0x44424E)
  static let ink3       = Color(hex: 0x7A7884)
  static let canvas     = Color(hex: 0xFBFAF8)
  static let surfaceSoft = Color(hex: 0xF3F1ED)
}

// Type — bundle the fonts, or use the system fallbacks noted
// Display → Bricolage Grotesque  (fallback: SF Pro Rounded Semibold)
// Body    → Hanken Grotesk       (fallback: SF Pro Text)
// Mono    → JetBrains Mono       (fallback: SF Mono)

window.tintColor = .recordRed   // record button, active states, the “dot”

Web tokens live in css/style.css as CSS custom properties (--rec, --ink, …) so web and app stay in lockstep.

The CreatorCam look