getbolla
Brand Guidelines
Drop it in your brew. Forget about it. Get a notification when it’s time to bottle.
Essence
GetBolla goes in your brewing jar and watches over your kombucha while you get on with your life. When it’s time to bottle, you get a notification. No checking, no guessing.
The name comes from bolla — bubble in Italian. Carbonation is the sign of life in fermentation — every bubble is proof that transformation is happening.
Brand concept
Living Precision
We watch over a living process so you don’t have to. The precision is ours. The peace of mind is yours.
Alive
Organic, warm, breathing
Precise
Measured, confident, clear
Opinionated
Helpful, direct, not neutral
Crafted
Considered, intentional, Italian
Messaging hierarchy
Every product string, ad, and onboarding screen should ladder up to one of these three levels. Lead with primary. Support with secondary. Use proof points only when credibility is needed.
“Put it in your jar, set up the app, and forget about it. GetBolla tells you when your kombucha is ready to bottle.”
This is the single thing anyone on the team should be able to say. The complete user journey in two sentences.
- — It understands fermentation so you don't have to.
- — It speaks in plain language, not numbers.
- — You only hear from it when it matters.
- — Tracks pH and temperature continuously.
- — Interprets fermentation stages automatically.
- — Engineered and made in Italy.
Words we use
Words we avoid
Logo
The Mark
Three ascending bubbles — representing carbonation, transformation, and the rising quality of a well-monitored brew. The mark works on dark, light, and brand backgrounds.
Wordmark
Set in Fraunces SemiBold, always lowercase. The optical sizing and soft axis give the wordmark an organic, crafted feel.
Lockup
Horizontal lockup. Mark and wordmark are vertically centered. The mark uses the brand amber; the wordmark uses the contextual foreground color.
Clear Space
Maintain a minimum clear space of x around the mark, where x equals the radius of the smallest bubble.
Don’t
Skew or distort
Low contrast
Add effects
Rotate the mark
Download
SVG assets, ready to use. Lockups require Fraunces for correct wordmark rendering.
Mark
Lockup
Con alone
Color
Ambra
Primary brand color. The warm amber of brewed kombucha.
On pietra-950 bg: 50–300 → AA text (≥ 4.5:1) · 400 → AA large/UI (≥ 3:1) · 500 → brand accent, UI components only · 600–900 → insufficient contrast, backgrounds and decorative use only
Salvia
Secondary. Represents the living culture, freshness, readiness.
On pietra-950 bg: 50–200 → AA text (≥ 4.5:1) · 300–400 → AA large/UI (≥ 3:1) · 500–900 → insufficient contrast, backgrounds and decorative use only
Pietra
Neutral scale. Warm-leaning for text, backgrounds, and borders.
On pietra-950 bg: 50–300 → AA text (≥ 4.5:1) · 400 → AA large/UI (≥ 3:1) · 500 → secondary text, verify per context · 600–950 → borders, surfaces, and decorative use only
05 — Usage
Fermentation Stages
Semantic colors for brew status. Each maps to a pH range and carries a single meaning. Always pair with a text label — never rely on color alone.
FRESH
pH ≥ 4.0
"Beginning — trust the process"
✓ Use for status indicators, empty states, and brew-start badges.
✕ Never use as a progress color or positive confirmation.
ACTIVE
pH 3.5 – 4.0
"Fermenting actively"
✓ Use for in-progress indicators, app badges, notification accents.
✕ Never use as background for body text — fails WCAG AA at any size.
ALMOST
pH 3.0 – 3.5
"Almost there"
✓ Use for near-ready states and approaching-target progress steps.
✕ Never substitute for Salvia — this is semantic, not decorative.
READY
pH 2.5 – 3.0
"Ready to bottle"
✓ Use for success states, bottling prompts, and completion confirmations.
✕ Never use interchangeably with Salvia-500 — different semantic meaning.
ALERT
pH < 2.5
"Bottle now — do not wait"
✓ Use exclusively for out-of-range, error, and urgent-action states.
✕ Never use for progress, emphasis, or anything other than a critical alert.
The arc is intentional: cool and neutral at rest (Fresh), warming through active fermentation (Active), shifting to olive as pH approaches equilibrium (Almost), resolving to green when ready to bottle (Ready). Red is reserved exclusively for out-of-bounds states (Alert) — never used for progress or emphasis.
Typography
Display
Aa
Fraunces
Variable · Optical sizing · 100–900
Headlines, wordmark, display text. An old-style variable font with optical sizing and a soft axis that gives warmth to precision.
Body
Aa
Outfit
Variable · 300–700
Body text, UI elements, descriptions. A geometric sans-serif that balances warmth and clarity. Highly readable at all sizes.
Mono
Aa
JetBrains Mono
400 · 500
Labels, data values, technical content, section markers. Adds precision and a technical edge when paired with the warmer display and body fonts.
Scale
Living Precision
Forget about it
We'll tell you when it's ready
Set it up once
Put it in your jar, open the app, and that's it. You'll get a notification when your kombucha is ready to bottle.
Your kombucha is doing its thing. We'll let you know when it's done.
Engineered in Italy. Made for home brewers.
Fermentation stage
Fraunces opsz axis: 144 at display scale, 36 at h1, 24 at h2–h3, 18 default.
Apply via opsz-display / opsz-heading / opsz-subheading utilities.
Voice
Opinionated, not neutral
GetBolla has a point of view. We don't say "the pH is 3.2" — we say "your kombucha is ready to bottle." We interpret so the brewer never has to.
Warm, not clinical
We're the knowledgeable friend in the kitchen, not a lab instrument. Conversational, empathetic, direct. Second person. Short sentences.
Italian first
Primary language is Italian. English as a secondary locale. The brand's origin is part of its identity — "Engineered in Italy" is a trust signal, not decoration.
Quiet until it matters
The product's job is to stay out of the way. No unnecessary pings, no ambient noise. When GetBolla speaks, it's because something worth knowing has happened.
Do
Italian — primary language
“La tua kombucha sta fermentando bene.”
Direct, reassuring, personal
“Pronta da imbottigliare.”
Clear action, no jargon
“Troppo acida — ma non buttarla.”
Honest + helpful
Don’t
“The current pH level indicates optimal fermentation parameters.”
Clinical, impersonal — user doesn't know what pH means
“Your brew might be ready, maybe check it?”
Hedge language, defeats the purpose
“Real-time monitoring of your fermentation data.”
Sells the feature, not the freedom
Iconography
Stroke
1.5px
Caps & Joins
Round
Grid
24 × 24
Corner radius
2px min
Examples
Icons follow the outlined style with rounded terminals. Consistent 1.5px stroke weight ensures visual harmony across all sizes. At 16px and below, simplify paths and increase stroke weight to 2px for legibility.
Motion
Alive, not animated
Motion should feel organic — like bubbles rising, not mechanical transitions. Breathing, floating, easing into place.
Purposeful
Every animation communicates something. Entrance reveals hierarchy. Stage transitions show progress. Idle motion shows the system is alive.
Restrained
One well-orchestrated entrance beats ten scattered micro-interactions. Focus motion budget on high-impact moments.
Organic
cubic-bezier(0.16, 1, 0.3, 1) Primary easing. Quick start, gentle settle. Used for entrances, reveals, layout shifts.
Bounce
cubic-bezier(0.34, 1.56, 0.64, 1) Playful overshoot. Use sparingly for moments of delight — successful actions, celebrations.
Duration
--duration-micro --duration-normal --duration-emphasis --duration-dramatic Live Examples
Breathe
Idle state, system alive
Float
Gentle vertical drift
Spacing
Hierarchy through space
More space above a heading than below it. The gap between sections is larger than the gap between paragraphs. Space signals importance — use it deliberately.
Warmth through density
Artisan objects are not sparse. Content sits close but not crowded. Avoid both the clinical (too much air) and the anxious (too little). 24px is the minimum breathing room between unrelated elements.
4pt base unit
All spacing values are multiples of 4px. This creates perceptible, consistent rhythm without prescribing a rigid 8pt jump. The 12px step is available and frequently useful.
Scale
4px p-1 / gap-1 8px p-2 / gap-2 12px p-3 / gap-3 16px p-4 / gap-4 24px p-6 / gap-6 32px p-8 / gap-8 48px p-12 / gap-12 64px p-16 / gap-16 96px p-24 / gap-24 Application
Section vertical padding
96px (section-pad) Top and bottom of every full-width section
Section horizontal padding
32px Side padding; max-w-4xl contains the content
Card internal padding
32px standard, 20px compact Use compact only in dense data contexts
Between heading and body
8px Keep heading and its content tightly bound
Between body paragraphs
16px Standard paragraph gap
Between sub-sections
48–64px Within a section, before a new sub-group label
Grid column gap
24px standard, 16px tight Use tight only in palette / icon grids
Max content width
896px (max-w-4xl) All sections share this container constraint
Hierarchy Demo
Section label
Heading sits close
Put it in your jar, open the app, and forget about it. GetBolla watches over your kombucha and tells you when it’s ready to bottle.
No checking, no guessing. The precision is ours. The peace of mind is yours.
After a divider, 32px top margin signals a new thought within the same section.
Card footer — 16px vertical padding, visually separated from content above
Photography
Photography is the primary way getbolla communicates warmth and craft. Every image should feel like it was taken in a real kitchen by someone who brews — not a product studio. Until a physical shoot is complete, approved 3D renders serve as placeholders and follow the same lighting and background spec.
Approved Shot Types
Hero in-jar
Sensor submerged in a 1L jar of amber kombucha, OLED visible showing fermentation stage. Kitchen counter, warm backlighting from behind the jar.
Use: Primary marketing, homepage hero, OG image.
Top-down flat lay
Sensor + USB cable + jar lid arranged on dark slate surface, shot from slight angle. Clean, deliberate composition.
Use: "What's in the box" photography and social posts.
OLED close-up
Extreme macro of the display showing pH reading and stage name. Dark surround. Amber glow from the screen bleeds into the frame.
Use: Feature callouts, app store screenshots, detail shots.
In-hands
Hands — slightly wet or stained from brewing — holding the sensor. Shows scale and human warmth. Not a sterile product shot.
Use: Lifestyle, editorial, social storytelling.
Lighting Specification
Key light
Warm tungsten or amber gel. 45° from left. Color temp ~3200 K. The dominant light source — everything else defers to it.
Fill
None, or very weak ambient. High contrast shadows are acceptable — preferred over a lit, even look.
Background
#110F0D (pietra-950) or
dark slate / wood surface. No white cyclorama. No gradients.
Do / Don't
Do
- Amber liquid visible in frame
- OLED on and lit — never blank screen
- Contextual props: jar, tea, hands
- Dark surfaces — slate, wood, linen
- Warm practical light from behind or side
- High contrast; deliberate deep shadows
Don't
- White or grey studio background
- Ring light or flat flash
- Device floating on gradient
- Product on phone or device mockup
- Bright clinical / commercial look
- Blank or off OLED display
Resolution & Export Specs
| Use | Dimensions | Max size |
|---|---|---|
| Hero | 1200 × 800 px min | ≤ 200 KB |
| OG / Social | 1200 × 630 px | ≤ 200 KB |
| Product detail | 800 × 800 px | ≤ 200 KB |
Product detail images: pietra-950 (#110F0D) or transparent background only.
No other background colours.
3D Render Interim Policy
Until a physical photo shoot is complete, 3D renders produced from the STEP file serve as
approved placeholders. Renders must follow the same lighting and background specification
as the photography guidelines above. All render images in HTML must carry
data-render="true"
so they can be found and replaced when real photography is available.
3D Render Standards
Renders are produced from the hardware STEP file and must be visually consistent with the brand's dark, warm aesthetic. The pipeline below is the single approved workflow.
STEP → glTF Pipeline
Import STEP
Open docs/asm_kombucha_measurer_01_R01.step in FreeCAD or Blender via StepImporter addon.
Apply materials
Enclosure → matte dark plastic (#1a1816). OLED bezel → gloss black. Probe → brushed stainless.
Set up lighting
Dark studio HDRI (low exposure). Key: warm point ~3200K (#FFB347), 45° left-above, intensity 3.0. Rim: cool faint (#8CA3B8), opposite side, intensity 0.5. No fill.
Frame camera
FOV 45°. Hero: 15° elevation, 30° left rotation. Top-down: 90° elevation. OLED close-up: 5° elevation, straight on.
Export glTF
glTF Binary (.glb). Geometry + Materials + Textures. Draco mesh compression enabled. Max texture 1024 × 1024. Background transparent.
Camera Angles
Hero
- FOV
- 45°
- Elevation
- 15°
- Rotation
- 30° left
Top-down
- FOV
- 45°
- Elevation
- 90°
- Rotation
- —
OLED close-up
- FOV
- 45°
- Elevation
- 5°
- Rotation
- Straight on
Lighting Rig (Blender / three.js)
Environment
Dark studio HDRI, low exposure. Provides ambient fill without washing out shadows.
Key light
- Color
- #FFB347 (~3200 K)
- Position
- 45° left-above
- Intensity
- 3.0
Rim light
- Color
- #8CA3B8 (cool)
- Position
- Opposite key
- Intensity
- 0.5
No fill light. Let shadows fall naturally.
Export Settings (glTF)
| Setting | Value |
|---|---|
| Format | glTF Binary (.glb) |
| Include | Geometry, Materials, Textures |
| Compression | Draco mesh compression — enabled |
| Max texture size | 1024 × 1024 px |
| Background | Transparent (alpha) |