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
Fermentation Stages
Semantic colors for brew status. Functional, not decorative.
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