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.
  • Composite all film typography and product marks from approved sources after generation.

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/*.
  • Any product outside the fifteen listed pilot products.
  • Em dashes or en dashes in public copy.
  • Overlong marketing paragraphs.
  • Low contrast text.
  • Motion that ignores accessibility settings.
  • Reuse of the rejected 59 second and 24 second films in any form.

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.

Film status

The earlier 59 second film and the 24 second cut made from the same source material were rejected by the Product Owner on quality grounds. Both are withdrawn from public presentation and from the homepage. The source files are retained for the record only, under /videos/bobby-framework/rejected/, and they must never be promoted, recut, upscaled, recoloured, or reused as the approved Bobby Framework film.

  • Rejected/videos/bobby-framework/rejected/bobby-framework-film-1080p.mp4
  • Rejected/videos/bobby-framework/rejected/bobby-framework-film-720p-muted.mp4
  • Rejected/videos/bobby-framework/rejected/bobby-framework-film-720p.webm
  • Rejected/videos/bobby-framework/rejected/bobby-framework-promo-24s.mp4
  • Rejected/videos/bobby-framework/rejected/bobby-framework-promo-24s-muted.mp4
  • Rejected/videos/bobby-framework/rejected/bobby-framework-promo-24s.webm
  • Rejected/videos/bobby-framework/rejected/bobby-framework-promo-music.mp3

The homepage film section stays disabled. It is enabled only when an approved film exists and a real YouTube video ID is set in src/config/film.ts.

New premium film package

Awaiting Product Owner approval

The replacement film is a 20 second BF-01 Prism Signal ident: five shots, deep black foundation, dimensional spectral light, connected paths, and a typography only close. The Product Owner has selected Runway Gen-4.5 image to video as the production route. Generation starts once a paid Runway API key is stored securely as RUNWAYML_API_SECRET. Until then the locked visual bible, the reference frames, the shot prompts, the request specification, and the candidate score are delivered here, and no substitute footage is produced.

Runway production reference frames

Awaiting Product Owner approval
Reference frame, a single intense hot pink point of light igniting in pure black with a soft violet haze
S01, 00:00 to 00:04, Signal awakensMotion: The point of light ignites and breathes, the horizontal flare stretches slowly outward, haze drifts.Camera: Very slow push in, locked centre, no shakePrompt: Slow push in on a single hot pink point of light igniting in a pure black void, volumetric violet haze revealing depth, anamorphic flare, shallow focusContinuity: Ends with the flare at full width, ready for the first line to draw out of it.Accept: Pure black, one light source, calm, no clutterReject: Any second light source, particles, drifting orbs, camera shakeApproved for Runway reference
Reference frame, thin precise pink and blue light lines drawing out of one origin and locking into an ordered geometric structure with small yellow signal points
S02, 00:04 to 00:08, Paths constructMotion: Lines draw outward from the origin one after another and lock into place, yellow signal points snap on at each intersection.Camera: Slow lateral drift left to right with light parallaxPrompt: Thin precise luminous lines in hot pink, violet and electric blue draw outward from a single origin in pure black and lock into a calm ordered architectural structure, small precise yellow signal points at intersections, subtle volumetric haze, extreme negative spaceContinuity: Ends on a settled structure that the next shot re-frames from the far side.Accept: Ordered construction, black dominant, few precise linesReject: Neon highway wallpaper, tangled mesh, rainbow spaghetti, particle dustReplaced, generic network frame rejected
Reference frame, many distinct coloured light streaks converging into a single bright junction against black
S03, 00:08 to 00:12, Product signals convergeMotion: Fifteen streaks travel inward at slightly different speeds, in three overlapping groups of five, and meet in one ordered junction that flares once.Camera: Slow dolly right, the convergence point holds on the right thirdPrompt: Fifteen distinct thin light streaks in hot pink, violet, electric blue, cyan, coral and warm orange curve inward in three overlapping groups and converge into one bright ordered junction in pure black, generous negative space, elegant line workContinuity: Ends on the single bright junction, which becomes the guidance core of S04.Accept: Fifteen readable streaks arriving in three groups, clean junctionReject: Logo wall, product names, name subtitles, cluttered starburst, spheresApproved for Runway reference
Reference frame, one brilliant warm white core with three precise spectral lines running cleanly into it across pure black
S04, 00:12 to 00:16, Guidance layerMotion: The core steadies and brightens, light travels outward along each line in measured pulses, haze lifts.Camera: Almost still, a slow gentle risePrompt: One brilliant warm white core of light in pure black, clean light travelling outward along a few thin precise spectral lines in violet, cyan and hot pink, a sense of quiet intelligence organising order, subtle volumetric hazeContinuity: Ends with the core at peak brightness, cutting into the wide reveal.Accept: One core, restrained, no face, no characterReject: Plexus mesh, glowing orbs, particle field, neural network clicheReplaced, plexus mesh frame rejected
Reference frame, a resolved geometric architecture of thin spectral light lines in the upper half with a clean empty black lower half reserved for typography
S05, 00:16 to 00:20, Reveal and closeMotion: The structure settles, signal points fade up in sequence, everything comes to rest so typography can land.Camera: Slow pull back, then a full stopPrompt: A calm complete architecture of very thin precise luminous lines in hot pink, violet, electric blue and cyan converging into an ordered geometric structure in the upper third of a pure black frame, tiny yellow signal squares at intersections, large clean empty black lower half, faint volumetric hazeContinuity: Final shot, holds still for the typographic close.Accept: Resolved, symmetrical calm, empty lower halfReject: Any motion under the type area, ribbons, smoke, waveform shapesReplaced, mirrored waveform frame rejected

Frames S02, S04, and S05 were reviewed and rejected as generic technology wallpaper, a meaningless connection mesh, and a mirrored waveform. They were replaced so the five frames now read as one premium sequence. Every reference frame is text free and logo free by design. All typography and product marks are composited after generation from approved BF-01 source assets, and the fifteen products are carried by individual approved marks in three short groups of five, never by a caption track, a list of names, or a logo wall.

Timestamped storyboard, 20 seconds

  1. 00:00 to 00:04, Signal awakens

    Black frame, one ignition point, first sub bass hit lands on the flare.

  2. 00:04 to 00:08, Paths construct

    Paths build in time with the pulse, yellow signals mark each new connection.

  3. 00:08 to 00:12, Product signals converge

    Fifteen product signals converge. Marks are composited later in three short groups of five, never as a logo wall and never as a list of names on screen.

  4. 00:12 to 00:16, Guidance layer

    Bobby Guru appears as light and motion only. The line bobby guru, the guidance layer is composited.

  5. 00:16 to 00:20, Reveal and close

    Composited typography: bobby framework, then the exact closing line Many products. One connected framework.

BF-01 action score candidate, awaiting Product Owner approval

The track is a production candidate only. It is not approved and must not be called final until the Product Owner has listened to it.

Proposed sync map

Initial ignition
00:00.0, first sub bass hit, S01 flare
First transition
00:03.0, filter opening into the construction beat, S01 to S02
Framework construction
00:03.0 to 00:08.0, rhythmic layering, one accent per new connection
Bobby Guru guidance moment
00:12.0, suspended lift, the pulse thins and the core brightens
Climactic convergence
00:15.5, full impact, widest spectral energy
Bobby Framework reveal
00:17.0, typography lands on the downbeat
Final resolution
00:19.0 to 00:22.0, elegant resolve with a wide reverberant tail

Music provenance and rights

Provider
ElevenLabs Music, called with the connected paid workspace account
Account tier
Creator, active paid plan
Track title
Prism Signal Ident
Production date
28 August 2026
Generation prompt
Premium electronic cinematic technology brand ident, 22 seconds, instrumental, no vocals, immediate energy, deep controlled sub bass pulse, crystalline spectral shimmer, intelligent rhythmic development, short suspended lift, strong elegant final resolve with a wide reverberant tail
Licence basis
ElevenLabs paid plan terms grant commercial use of generated output to the account holder. Bobby Framework must keep the paid plan record for this generation.
Samples or third party recordings
None, fully generated output
Vocals
None
Duration
22.05 seconds
Audio format
MP3, 44.1 kHz stereo, 192 kbps
Status of the earlier score
The procedurally synthesised Signal Rise track is discarded and archived with the rejected films

Delivered now

Approved production route, Runway Gen-4.5 image to video

Model
Runway Gen-4.5, image to video
Input
The approved BF-01 reference frame listed with each shot, used as the first frame
Duration
Five shots of about four seconds, 18 to 24 seconds assembled
Resolution and ratio
1920x1080, 16:9, 24 fps
Negative constraints, every shot
No text, no letters, no numbers, no logos, no interface screens, no stock footage, no mascots or faces, no floating balls or orbs, no random particle fields, no tunnel flythrough, no rainbow spaghetti, no plexus mesh, no watermark
Continuity rule
Each shot starts from the previous shot's end state, one colour system, one lens character, one haze density
Acceptance criteria
Pure black foundation, precise line work, deliberate camera move, clean end frame for the cut, no generated text
Rejection criteria
Any generated text, drifting orbs, mesh clutter, screensaver feel, colour drift away from BF-01, unstable geometry
Compositing
All typography and all product marks are added after generation from approved BF-01 sources

Credit plan, not yet spent

Credits per second, Gen-4.5 at 1080p
About 12 credits per second on the current Runway price list, to be confirmed against the live rate on the day
One complete five shot pass
5 shots x 4 seconds x 12 credits, about 240 credits
One alternate generation per shot
A second full pass, about 240 credits
Failed generation allowance
About 3 reruns, roughly 150 credits
Upscale or professional output
Optional 4K upscale on the five selected takes, roughly 100 credits
Recommended total allowance
About 750 credits
Maximum authorised production budget
1000 credits, which is the Runway Standard monthly allowance of 625 credits plus one 375 credit top up, about 95 US dollars at current list pricing
Actions that consume credits
Every image to video generation, every rerun or alternate take, and any upscale or extension
Actions that do not consume credits
Reference frame preparation, prompt writing, downloading finished takes, editing, compositing, sound mixing, and every deliverable produced in this project
Credits consumed in this batch
Zero. No Runway request was sent.

One secure action required from the Product Owner

Required secret name
RUNWAYML_API_SECRET
Current status
Not present in this project
Where to add it
Lovable Project Settings, Secrets. Add a new secret named RUNWAYML_API_SECRET and paste the Runway API key there.
Handling
The value is stored encrypted and read only by server side code. It is never committed, never bundled into browser JavaScript, never logged, and never displayed in this brand book.
Never do this
Do not paste the key into chat, into a file, or into any public page.