Visual identity.
Everything you need to represent Tiny Bottle AI consistently. Colors, type, logos, voice.
Color Palette
Core colors.
Background
#FAFAFA
var(--background)
bg-background
Foreground
#0A0A0A
var(--foreground)
bg-foreground
Accent
#D4622B
var(--accent)
bg-accent
Accent Light
#E8845A
var(--accent-light)
bg-accent-light
Accent Dark
#B8521F
var(--accent-dark)
bg-accent-dark
Success
#2D6A4F
var(--success)
bg-success
Error
#C1292E
var(--error)
bg-error
Neutral scale.
Typography
Two fonts. Clear hierarchy.
Plus Jakarta Sans for headings and labels. Satoshi for body copy. Both are variable-weight, open-source typefaces.
Plus Jakarta Sans
Bold, Extra Bold. Tight tracking.
Satoshi
Regular, Medium. Generous line-height.
Logo & Assets
The bottle mark.
The line-drawn bottle is our primary mark. Use the appropriate variant for background contrast. Always maintain clear space equal to the bottle width on all sides.
Clear Space
Maintain minimum clear space equal to the width of the bottle on all sides. No text or graphics should encroach on this space.
Minimum Size
The bottle mark should never be rendered smaller than 24px wide in digital or 10mm in print. The full logo (bottle + wordmark) should not be smaller than 120px wide.
Don't
Don't rotate, stretch, add effects, change colors outside the approved palette, or place on low-contrast backgrounds.
Illustration & Icons
Line-drawn. Purposeful.
Our illustration style follows the bottle mark: single-weight line art with selective accent fills. No gradients, no 3D effects, no stock illustration styles.
- •1.5px stroke weight at standard sizes
- •Round line caps and joins
- •Foreground strokes, accent fills for emphasis
- •Geometric construction, not hand-drawn
- •Minimal detail. Every line earns its place.
For UI icons, we use Lucide (lucide-react). These match our line weight aesthetic and provide consistency across the interface.
- •Lucide icon set, 1.5 stroke weight
- •Accent color for decorative/hero icons
- •Foreground color for functional/nav icons
- •12x12 size range: w-4 to w-12
- •Never use filled icon variants
Photography
Real people. Real work.
Tone
Candid over posed. Working environments over staged offices. Natural light preferred. Warm but not oversaturated.
Treatment
Minimal post-processing. Slight desaturation to match the muted palette. High contrast. No filters, no color overlays.
Subjects
Practitioners at work. Whiteboards, screens, conversations. Avoid generic stock: no handshakes over conference tables, no floating holographic UIs.
Voice & Tone
How we sound.
Direct
No corporate filler, no buzzword padding. Say what you mean.
Confident
Lead with a point of view. We have experience and we share it.
Anti-corporate
Conversational, not polished. The friend test: would you say it this way?
Sharp but not arrogant
Challenge status quo without punching down.
Messaging Pillars
Guidelines
Dos and Don'ts.
Do
- ✓Use first person plural ("we") for the company
- ✓Keep sentences short and direct
- ✓Lead with the business outcome, not the technology
- ✓Use specific numbers over vague claims
- ✓Sharp-edged aesthetic: no rounded corners on UI elements
- ✓Grid-based layouts with clear hierarchy
- ✓High contrast: near-black on off-white, or reversed
Don't
- ✗Don't use "intersection of", "leverage synergies", "digital transformation"
- ✗Don't use "crawl-walk-run" or maturity models
- ✗Don't use em dashes (use periods or commas instead)
- ✗Don't use rounded corners (except avatars, which are circular)
- ✗Don't soften the message with hedging language
- ✗Don't use gradients or drop shadows on UI elements
- ✗Don't place the logo on busy backgrounds without contrast
Social Media
Platform standards.
Profile Image
400x400px
Bottle mark on solid background. Dark mark on light, or light mark on dark.
LinkedIn Cover
1584x396px
Tagline + bottle mark. Off-white background with foreground text.
YouTube Thumbnail
1280x720px
Bold title text, accent highlight on key word. Foreground background.
Post Image
1200x1200px
High-contrast. One idea per image. Accent color for emphasis only.
Story / Reel
1080x1920px
Vertical. Same typographic hierarchy. Bottom-third for text.
Podcast Cover
3000x3000px
Use approved podcast cover SVGs. Dark or orange variant.
Documents & Slides
Deck and document direction.
Slide Decks
- •16:9 format. Maximum 30 words per slide.
- •Dark slides (foreground bg) for section openers. Light slides (background bg) for content.
- •Accent color for one key number or word per slide. Never more.
- •Bottle mark in bottom-right corner. 24px from edge.
Documents
- •Full logo in document header. Accent-colored rule below.
- •Plus Jakarta Sans for headings. Satoshi for body text.
- •Left-aligned. No justified text. Generous margins.
- •Footer: company name, page number, date. Uppercase, small, tracked.