Back to the workbench
Appearance
Compose with Bubba’s
Bold, illustrated public experiences and calm tools share the same recognizable identity.
One message. A real next step.
Start with the customer’s or operator’s task. Preserve original identity, use space to establish a clear hierarchy, and let illustration carry energy. Keep navigation, forms, editing, and long reading calm. A fixed marketing appearance can sit inside an app that follows the user’s Light/Dark/System preference.
Brand opening
Open on white with the full-color original logo, the current red-cap mascot, a short licensed display headline and one red action. A thin red–white–blue civic stripe frames the opening. Keep the figure proportional and preserve its entire silhouette. Move artwork above the copy on narrow screens when a side column would shrink it too far.
Stand finder section
Keep the invitation beside the stand’s verified facts. Show address, directions, published seasonal hours and local timezone, then separate reported status. Use an explicit missing-data state. The illustration supports the invitation; readable facts and the next action remain the focus.
Category and product sections
Place existing category illustrations in circular fields with genuine text labels and destinations. Product panels keep original product artwork, identity, qualified retail price and availability together. Use a readable information surface; illustrations are never evidence of current stock or product specifications.
Campaign band
One headline and one next step. Use the original logo blue with the full-color original logo. Put small copy on white or charcoal; inspect contrast across the complete gradient region. Keep gold subordinate. A campaign’s terms, dates/timezone, destination and source must be current before distribution.
Operational page
Use a quiet page header, task navigation, generous field labels and a small number of independent information groups. Keep red for the decisive action. Show connection health, source and freshness where decisions depend on them. Mobile, HQ, Bulk, Social and Studio share the foundations while retaining their own platform and service boundaries.
Policy and campaign details
Give long text a 720 px reading measure, ordered headings and visible navigation. Use the source’s approved wording and effective dates. Keep policy content separate from campaign urgency. Ended or unavailable destinations retain an honest explanation and a useful fallback.
Select an asset deliberately
Use Brand Studio’s catalog ID, version, SHA256, approval evidence, and distribution rights. Approved identity, a proposed working asset, a generated draft, and a deprecated historical reference remain distinct. Select the current mascot family; avoid mixing generations. Preserve original logo geometry and inks. Never retype, stretch, recolor, crop away essential detail, or regenerate the logo.
Private preview access is separate from public distribution. The package carries no artwork or font binaries. The public docs have separately cleared original logo geometry and Montserrat/OFL. Eurostile’s binary stays excluded; consumers use a licensed local font or a clearly identified fallback.
Public asset notice
Social and print handoff
Use Studio’s maintained social and print templates, select the intended format, and keep text and original artwork editable. Preserve one message, an appropriate logo, a proportional figure, clear qualified details and a verified destination. Keep important content within the template’s safe region; export each platform size deliberately.
For print, specify physical dimensions, bleed, printer profile, approved color conversion and a proof for the actual job. Screen HEX values and CSS shadows are not CMYK or spot-color production specifications. A sample template is not an approved campaign or print run.
Brand-aware generation
Find a suitable approved asset before generating. Brief the message, audience, medium, composition, approved source IDs, current mascot family and forbidden changes. Generate the mascot and scene together when coherence depends on it; overlay original logo geometry and editable text afterward. Use fictional sample content while live facts are unverified.
Record tool/model/version, seed when available, prompt, source assets, edit lineage and output hash. Mark unknown metadata as unavailable. Generated work remains a private draft until independent review and explicit identity/campaign approval. Generation never grants artwork or font distribution rights.
Shared web examples
These examples use the same reusable components as consumers, including the previously approved campaign marquee and metallic offer badge. Proposed header and directory refinements await their own owner review. Content below is synthetic; apps supply real content, cleared artwork and actions.
Button
Local demonstration fixture · simulated actions
Try the action
Public marketing actions · simulated examples
SiteHeader
AnnouncementEditor
Promotional announcement
Select words, then choose Make yellow or Make white. Keep the message short for phones.
37 / 160 characters
Banner preview
HeroSection
ProductGrid
Example label
Example ExtraordinarilyLongProductName (782 shots)
Presentation fixture · no real retail facts.
Price unavailable
Icon
CampaignSection
250
Example campaign
Synthetic composition for review; not a live promotion.
Example: 16 DFW locations
Example: price beat guarantee
Example: free pop-its with follow
Example: open daily through July 5th
SocialSection
Example social links
Example destinations only.
FlagTicker
Motion on
FocusMarquee
Selected campaign preset · 1.64 seconds per pill
1.1s standing · .25s leaving · .25s entering · .04s settling. Synthetic example facts.
Example: 16 DFW locations
Example: price beat guarantee
Example: free pop-its with follow
Example: open daily through July 5th
Generic cadence comparison · 2.3s shared default
Seconds per pill
0.8–3 seconds. Applies on next handoff.
Preview: 2.3 seconds per pill
Example: 16 DFW locations
Example: price beat guarantee
Example: free pop-its with follow
Example: open daily through July 5th
Linear preset · optional comparison
Example custom direction
Synthetic caller-owned content
Motion on
PromotionBanner
Example offer
Sample Campaign
Synthetic campaign content. No live promotion or expiry is implied.
ProductDetail
Example ExtraordinarilyLongProductName (782 shots)
Example label
Price unavailable
Presentation fixture · no real retail facts.
Watch product video
SiteFooter
Proposed website page sections
These proposed directory, safety, product and offer compositions use the actual shared package. Every example is synthetic. New designs require owner review before publication or consumer adoption.
LocationSearch
Find a Bubba’s near you
Example results · simulated search only
LocationMap
All locations
Synthetic map preview · exact-coordinate red dots, local grid tiles and simulated directions.
Use the location cards below for directions. The interactive map requires JavaScript.
LocationCard
Example location
Example feature
Example status
Example address · not a real stand
Published hours unavailable
Example phone
LocationGrid
Example location 1
Example feature
Example status
Example address · not a real stand
Published hours unavailable
Example phone
Example location 2
Example feature
Example status
Example address · not a real stand
Published hours unavailable
Example phone
Example location 3
Example feature
Example status
Example address · not a real stand
Published hours unavailable
Example phone
Example location 4
Example feature
Example status
Example address · not a real stand
Published hours unavailable
Example phone
LocationHours
Store hours
Example day 1
Today
Published hours unavailable
Example day 2
Published hours unavailable
Example day 3
Published hours unavailable
Example day 4
Published hours unavailable
Example day 5
Published hours unavailable
Example day 6
Published hours unavailable
Example day 7
Published hours unavailable
Example day 8
Published hours unavailable
Example day 9
Published hours unavailable
Example day 10
Published hours unavailable
Synthetic dates and hours · not a business schedule
FAQSection
Frequently asked questions
Example answers for presentation review.
Choose a question to reveal its answer. These are synthetic examples, not actual business policies.
The complete question stays readable, the disclosure retains a full target, and the answer follows it in reading order.
SafetySection
Example safety layout
Synthetic rules for reviewing hierarchy and spacing.
01
Example rule 1
Caller supplies reviewed instructions. This sample does not establish a safety policy.
02
Example rule 2
Caller supplies reviewed instructions. This sample does not establish a safety policy.
03
Example rule 3
Caller supplies reviewed instructions. This sample does not establish a safety policy.
04
Example rule 4
Caller supplies reviewed instructions. This sample does not establish a safety policy.
Example supporting information and actions.
FeaturedProductRow
Featured favorites
OfferGrid
Synthetic review content
Example social offer
Caller supplies the actual offer, conditions and destination. No live promotion is implied.
Synthetic review content
Example guarantee offer
Caller supplies the actual offer, conditions and destination. No live promotion is implied.
Synthetic review content
Example review offer
Caller supplies the actual offer, conditions and destination. No live promotion is implied.
ReviewLocationLinks
Example review destinations
The host supplies verified store coordinates, provider attribution, ten calendar dates from Core, reviewed safety wording, featured-product selection and offer terms. The actual map uses labelled synthetic pins and local grid tiles; it establishes no live store data. Browser automation stubs provider imagery.
Reusable section contract
Product and category layouts support the shared wide container with two, three or four columns as space permits; full product names wrap safely. Transparent action regions use ContentSection and ThemeProvider surface="transparent". Hero action pairs keep one compact row and 48px targets.
The static announcement accepts safe white/yellow text sections and an optional concise phone message. AnnouncementEditor formats selected words and previews the actual banner, with phone-fit warnings. Hosts own Core publication, revisions, enable and save; the shared editor never fetches. Gold reflections and continuous gold-only twinkles obey the same Motion and reduced-motion preferences as the ticker.
A shared section declares its heading level, content fields, source IDs, layout widths, image treatment, actions, missing/error/offline behavior, appearance, accessibility and acceptance evidence. Add a real consumer example when extending it. Keep live product facts in Core’s interface and approved identity in Brand Studio.
Task pattern implementations
Complete interface contract