bobby framework

Bobby Framework brand book

The canonical Bobby Framework identity, the two historical exploratory candidates, usage guidance, and the production package for the Bobby Framework films.

BF-01 Prism Signal is selected by the Product Owner. It is the canonical Bobby Framework visual system and is approved for production use. BF-02 Aurora Lattice and BF-03 Solar Circuit remain published as historical exploratory candidates and are marked not selected.

Canonical production assets

The live site now serves the BF-01 Prism Signal family. Every production image stays under /images/*, and the typography first homepage identity is unchanged: no symbol or icon sits beside the large bobby framework wordmark.

Canonical Bobby Framework Prism Signal Open Graph artwork, the bobby framework wordmark on a near black field with pink to violet to blue refraction
Production social image, 1200 x 630
Canonical Bobby Framework favicon 32
favicon 32
Canonical Bobby Framework app icon 192
app icon 192
Canonical Bobby Framework avatar 512
avatar 512

Candidate systems

BF-01Selected by Product OwnerCanonical, approved for production

Prism Signal

Selected by the Product Owner. Canonical Bobby Framework visual system, approved for production use.

One beam of white light entering a prism and leaving as a full spectrum. It says, in a single idea, that Bobby Framework is one shared foundation that becomes many focused products. The system stays almost entirely black so every colour reads as deliberate signal rather than decoration.

Typographic treatment

bobby framework

Lowercase Space Grotesk at light weight, tight negative tracking, generous space between the two words. No mark sits next to the wordmark. Typography is the identity.

Colour and gradient

  • Void black #0a0812
  • Hot pink #ff2d9b
  • Vivid violet #a855ff
  • Electric blue #2f7bff
  • Signal yellow #ffd83d

Near black field, hot pink to violet to electric blue refraction, one yellow signal line. Colour is concentrated in a single event in the frame and never spread evenly across a surface.

Open Graph and embed image, 1200 x 630

Open Graph candidate BF-01, Prism Signal, showing the bobby framework wordmark on a dark spectral field
/images/bobby-framework/social/candidate-01/og-1200x630.jpg
Shared link preview at small size for candidate BF-01

Bobby Framework, one connected framework of Pilot products

bobbyframework.com

Shared link preview

Messaging preview at small size for candidate BF-01

Bobby Framework, one connected framework of Pilot products

bobbyframework.com

Messaging preview

Social card adaptations

Landscape 1200x630 social card for candidate BF-01
Landscape 1200x630
Square 1080x1080 social card for candidate BF-01
Square 1080x1080
Portrait 1080x1350 social card for candidate BF-01
Portrait 1080x1350
Story cover 1080x1920 social card for candidate BF-01
Story cover 1080x1920

Favicon and app icon family

App icon at 16 pixels for candidate BF-01
16
App icon at 32 pixels for candidate BF-01
32
App icon at 48 pixels for candidate BF-01
48
App icon at 180 pixels for candidate BF-01
180
App icon at 192 pixels for candidate BF-01
192
App icon at 512 pixels for candidate BF-01
512
Maskable preview for candidate BF-01
Maskable preview
Dark background for candidate BF-01
Dark background
Light background for candidate BF-01
Light background
Small size legibility for candidate BF-01
Small size legibility

Avatar family

Circular avatar for candidate BF-01
Circular
Square avatar for candidate BF-01
Square
Dark background avatar for candidate BF-01
Dark background
Light background avatar for candidate BF-01
Light background
Transparent avatar for candidate BF-01
Transparent
Large profile avatar for candidate BF-01
Large profile
Avatar at profile size, 48 pixels, for candidate BF-01Social profile mockup using the candidate BF-01 avatar
Desktop preview of candidate BF-01 applied to a full width hero
Desktop preview
Mobile preview of candidate BF-01 applied to a phone sized hero
Mobile preview

Strengths

  • Communicates one framework and many products in a single image
  • Very high contrast, so the wordmark stays legible at embed size
  • Cheap to reproduce as a still, as motion, and as an icon

Risks

  • Prism imagery is familiar and needs precise execution to feel premium
  • Concentrated highlight can clip on low quality displays

Appropriate use

  • Open Graph and link previews where the wordmark must survive heavy scaling
  • Dark product surfaces and cinematic hero backgrounds
  • App icon on a dark home screen

Inappropriate use

  • Light or white page backgrounds without the dark containing field
  • Stretching the refraction across a full page as a wallpaper
  • Placing the icon next to the homepage wordmark as a logo lockup

Asset listing and downloads

BF-02Not selected

Aurora Lattice

Not selected. Kept as a historical exploratory candidate.

Soft spectral ribbons drifting over a visible lattice of connected nodes. The ribbons carry the emotion and the lattice carries the logic, so the identity reads as intelligent and warm at the same time. It suits a framework that is still growing, because the lattice can gain nodes without redrawing the system.

Typographic treatment

bobby framework

Lowercase Space Grotesk at regular weight with slightly open tracking, set against calm dark space so the ribbons never touch the letterforms.

Colour and gradient

  • Deep base #08070f
  • Magenta #ff3d8f
  • Violet #8b5cf6
  • Electric blue #3b82f6
  • Cyan #2fd4ff

Deep black base with pink, violet, blue and cyan ribbons layered at low opacity, plus small yellow nodes at path intersections. Contrast is protected by keeping ribbons away from text areas.

Open Graph and embed image, 1200 x 630

Open Graph candidate BF-02, Aurora Lattice, showing the bobby framework wordmark on a dark spectral field
/images/bobby-framework/social/candidate-02/og-1200x630.jpg
Shared link preview at small size for candidate BF-02

Bobby Framework, one connected framework of Pilot products

bobbyframework.com

Shared link preview

Messaging preview at small size for candidate BF-02

Bobby Framework, one connected framework of Pilot products

bobbyframework.com

Messaging preview

Social card adaptations

Landscape 1200x630 social card for candidate BF-02
Landscape 1200x630
Square 1080x1080 social card for candidate BF-02
Square 1080x1080
Portrait 1080x1350 social card for candidate BF-02
Portrait 1080x1350
Story cover 1080x1920 social card for candidate BF-02
Story cover 1080x1920

Favicon and app icon family

App icon at 16 pixels for candidate BF-02
16
App icon at 32 pixels for candidate BF-02
32
App icon at 48 pixels for candidate BF-02
48
App icon at 180 pixels for candidate BF-02
180
App icon at 192 pixels for candidate BF-02
192
App icon at 512 pixels for candidate BF-02
512
Maskable preview for candidate BF-02
Maskable preview
Dark background for candidate BF-02
Dark background
Light background for candidate BF-02
Light background
Small size legibility for candidate BF-02
Small size legibility

Avatar family

Circular avatar for candidate BF-02
Circular
Square avatar for candidate BF-02
Square
Dark background avatar for candidate BF-02
Dark background
Light background avatar for candidate BF-02
Light background
Transparent avatar for candidate BF-02
Transparent
Large profile avatar for candidate BF-02
Large profile
Avatar at profile size, 48 pixels, for candidate BF-02Social profile mockup using the candidate BF-02 avatar
Desktop preview of candidate BF-02 applied to a full width hero
Desktop preview
Mobile preview of candidate BF-02 applied to a phone sized hero
Mobile preview

Strengths

  • Shows connection literally, which matches the product story
  • Scales to many products without losing structure
  • Softest and most human of the three systems

Risks

  • Low opacity ribbons can look muddy on poor displays
  • Needs discipline to avoid drifting into generic gradient artwork

Appropriate use

  • Section backgrounds behind long form reading
  • Square and portrait social cards where the lattice can breathe
  • Avatar use where a softer tone is preferred

Inappropriate use

  • Behind small body text without a dark scrim
  • As a light theme surface
  • Recoloured into pastel or desaturated variants

Asset listing and downloads

BF-03Not selected

Solar Circuit

Not selected. Kept as a historical exploratory candidate.

A single warm core radiating along violet and pink circuit paths. It puts the guidance idea at the centre of the identity and treats every product as a destination on a live path. The warmest and most confident of the three, and the most distinct from typical dark technology branding.

Typographic treatment

bobby framework

Lowercase Space Grotesk at medium weight, aligned to the same baseline grid as the circuit paths, with a small yellow signal point used only once per layout.

Colour and gradient

  • Carbon black #0b0710
  • Solar yellow #ffe066
  • Warm orange #ff7a3d
  • Coral red #ff2d6b
  • Vivid violet #a855ff

Black field, coral to orange to yellow core, violet and hot pink paths. Warm light is limited to the core so the rest of the frame stays calm.

Open Graph and embed image, 1200 x 630

Open Graph candidate BF-03, Solar Circuit, showing the bobby framework wordmark on a dark spectral field
/images/bobby-framework/social/candidate-03/og-1200x630.jpg
Shared link preview at small size for candidate BF-03

Bobby Framework, one connected framework of Pilot products

bobbyframework.com

Shared link preview

Messaging preview at small size for candidate BF-03

Bobby Framework, one connected framework of Pilot products

bobbyframework.com

Messaging preview

Social card adaptations

Landscape 1200x630 social card for candidate BF-03
Landscape 1200x630
Square 1080x1080 social card for candidate BF-03
Square 1080x1080
Portrait 1080x1350 social card for candidate BF-03
Portrait 1080x1350
Story cover 1080x1920 social card for candidate BF-03
Story cover 1080x1920

Favicon and app icon family

App icon at 16 pixels for candidate BF-03
16
App icon at 32 pixels for candidate BF-03
32
App icon at 48 pixels for candidate BF-03
48
App icon at 180 pixels for candidate BF-03
180
App icon at 192 pixels for candidate BF-03
192
App icon at 512 pixels for candidate BF-03
512
Maskable preview for candidate BF-03
Maskable preview
Dark background for candidate BF-03
Dark background
Light background for candidate BF-03
Light background
Small size legibility for candidate BF-03
Small size legibility

Avatar family

Circular avatar for candidate BF-03
Circular
Square avatar for candidate BF-03
Square
Dark background avatar for candidate BF-03
Dark background
Light background avatar for candidate BF-03
Light background
Transparent avatar for candidate BF-03
Transparent
Large profile avatar for candidate BF-03
Large profile
Avatar at profile size, 48 pixels, for candidate BF-03Social profile mockup using the candidate BF-03 avatar
Desktop preview of candidate BF-03 applied to a full width hero
Desktop preview
Mobile preview of candidate BF-03 applied to a phone sized hero
Mobile preview

Strengths

  • Immediately recognisable at thumbnail size
  • Warm palette separates Bobby Framework from cold blue technology brands
  • Strong single focal point for icons and avatars

Risks

  • Warm core can dominate a layout if used more than once per screen
  • Needs care so the radial burst does not read as a generic energy graphic

Appropriate use

  • Icon and avatar contexts that need one strong focal shape
  • Story and reel covers where a centred core survives cropping
  • Cover frames for the framework film

Inappropriate use

  • Repeating the core several times in one layout
  • Placing body copy over the bright core area
  • Using the warm palette alone without the black field

Asset listing and downloads

Do and Don't

Do

  • Feel vivid, intelligent, cinematic, and premium.
  • Use saturated spectral colour with controlled contrast.
  • Preserve legibility and accessibility in every context.
  • Use bobby framework as a typography first identity.
  • Use Space Grotesk consistently unless a future approved system replaces it.
  • Keep product identities distinct while visually connected.
  • Use real approved product assets only.
  • Serve all website images from /images/*.
  • Mark every currently listed product as Pilot.
  • Use concise, factual, human language.
  • Respect reduced motion preferences.

Don't

  • Washed out grey or nearly white visual systems.
  • Generic SaaS card template styling.
  • Serif display typography for the primary identity.
  • BF, B/F, or any other monogram.
  • Random stock imagery.
  • Unapproved mascots or faces.
  • Fake screenshots, statistics, customers, partnerships, awards, or capabilities.
  • Unsupported security, AI, launch, or integration claims.
  • External or temporary image hosting.
  • Images served from outside /images/*.
  • Bobby Wallet or Bobby Vault anywhere in this project.
  • Em dashes or en dashes in public copy.
  • Overlong marketing paragraphs.
  • Low contrast text.
  • Motion that ignores accessibility settings.

Punctuation rule: public Bobby Framework copy never uses the em dash or the en dash. A repository check runs with validation so the rule cannot regress quietly.

Short promotional cut

A 24.4 second promotional cut re-edited from the strongest material in the extended original. It opens on spectral ribbons, moves quickly through the ten Pilot products, gives Bobby Guru a clear guidance layer moment, resolves on a typography only bobby framework reveal, and closes on the line Many products. One connected framework.

Short promotional cut, 24.4 seconds, with the original Bobby Framework score.

Why 24.4 seconds

Every slow ignition and repeated drift shot was removed. The product sequence runs at 1.25 times speed so all ten names still read clearly in about eight seconds, and each remaining beat carries new information. Shorter cuts lost the guidance layer moment, longer cuts reintroduced dead frames.

Music provenance and rights

Provider
Generated in project with a custom synthesis script, no external provider
Track title
Signal Rise
Original or licensed
Original, written for Bobby Framework
Commercial use
Cleared, Bobby Framework owns the recording outright
YouTube use
Cleared, no third party rights and no sample library involved
Provenance
Fully synthesised from generated waveforms, no samples, loops, stems, or third party recordings
Generation note
Modern electronic cinematic score in A minor at 120 BPM, sub bass foundation, eighth note plucks on the product beats, a warm pad under the guidance layer, one rise into the peak, and a resolving chord under the closing line
Duration
24.6 seconds source, trimmed to 24.4 seconds in the mix
Audio format
48 kHz stereo, delivered as AAC in MP4, Opus in WebM, and MP3 standalone
Final mix
Peak normalised for headphones, laptops, tablets, and phones

Short cut structure

  1. 00:00 to 00:03, Opening

    Spectral ribbons sweep across black at full energy.

  2. 00:03 to 00:10, Ten Pilot products

    Nodes light in sequence as each product name attaches.

  3. 00:10 to 00:14, Guidance layer

    One brighter node reads as bobby guru, the guidance layer.

  4. 00:14 to 00:17, Peak

    The constellation flares and resolves as one connected structure.

  5. 00:17 to 00:21, Wordmark

    Typography only reveal of bobby framework.

  6. 00:21 to 00:24, Closing line

    Many products. One connected framework.

Desktop preview frame from the short Bobby Framework promotional cut showing a bright spectral core
Desktop preview
Mobile safe poster from the short Bobby Framework promotional cut cropped to a vertical frame
Mobile preview

YouTube usage guidance

The Product Owner uploads the short cut to the official Bobby Framework YouTube channel. No YouTube URL, channel, or video identifier is invented here. To activate the homepage embed, set youtubeVideoId in src/config/film.ts to the real video ID. That single value is the only change required. Until then the homepage shows the approved poster and the note that the YouTube film link will be added after publication, and no YouTube resource, cookie, script, or thumbnail is requested before a visitor clicks to play.

Homepage film placement

The film section sits after the Bobby Guru section and before the principles section, so the guidance layer story leads straight into the film and the principles close the argument. The native motion hero remains approved and unchanged, and the film never replaces it. The frame is responsive 16:9, keyboard operable, free of layout shift, and it respects reduced motion preferences.

Extended original version

The extended original film of about 59 seconds presenting Bobby Framework as an expanding ecosystem of focused connected products, with Bobby Guru as the guidance layer and a typography only closing reveal. It stays available and downloadable here.

Controlled preview only. Homepage use requires separate Product Owner approval, and the native motion hero stays in place until then.

Concept and motion language

Deep black foundation, spectral light in hot pink, electric blue, violet, coral, orange and yellow. Camera moves stay slow and continuous, energy travels along paths between nodes, and light behaves as signal rather than decoration. No product interfaces, no stock footage, no mascot, and no invented claims.

Sound direction

Low sub bass swell, rhythmic ticks on each product beat, a sustained pad under the guidance section, then near silence for the wordmark. The muted version is provided for autoplay contexts.

Production settings

Provider: Lovable video generation, Google Veo. Six generated segments at 1080p, assembled and graded with FFmpeg at 24 frames per second, typography composited in Space Grotesk. On screen text uses only product names, bobby guru, the guidance layer, bobby framework, and the closing line.

Storyboard and shot list

  1. 00:00 to 00:08, Ignition

    Black. A single point of light opens and haze reveals depth.

  2. 00:08 to 00:18, First paths

    Spectral paths draw outward, energy travels between early nodes.

  3. 00:18 to 00:30, Products emerge

    Nodes light in sequence as the ten Pilot product names attach.

  4. 00:30 to 00:40, Guidance layer

    One brighter node reads as bobby guru, light radiates along every path.

  5. 00:40 to 00:49, Framework

    Camera pulls back, the constellation resolves as one connected structure.

  6. 00:49 to 00:55, Wordmark

    Typography only reveal of bobby framework on black.

  7. 00:55 to 00:59, Closing line

    Many products. One connected framework. Fade to black.

Desktop preview frame from the Bobby Framework film showing connected nodes of light
Desktop preview
Mobile preview frame from the Bobby Framework film cropped to a vertical safe area
Mobile preview