Botino 2.0 · Phase 1

Brand & design system

The visual foundation behind Botino 2.0 - built as portable CSS variables so it carries straight into a custom WordPress theme and the Phase 2 application.

01 - Brand overview

Practical, friendly, AI-native

Voice of the brand

Clear, modern and business-focused. Botino speaks plainly about what it does - automate repetitive conversations - without overhyped “AI magic” claims.

Personality

Reliable but approachable. Confident without being corporate. Helpful, like a good assistant - never childish or gimmicky.

Core promise

Create AI voicebots and chatbots that answer customer questions, qualify leads and support your business 24/7 - with your own knowledge base.

03 - Color

A clean light SaaS base with a confident brand spectrum

Brand

Primary scale

Semantic / status

Neutral slate

Primary #3B5BFC on white passes WCAG AA for UI and large text; white text on Primary-600 buttons passes AA (4.5:1+). Body text uses #28324A on white (AAA). Chart palette: blue · teal · violet · warm · mint · slate.
04 - Typography

Plus Jakarta Sans + JetBrains Mono

A geometric, friendly sans for display and body (full Polish / Latin-Extended support), paired with a mono for IDs, API and widget snippets. Both are on Google Fonts.

Display · 800Zażółć gęślą
H2 · 700Voice and chat, one platform
H4 · 700Knowledge base integration
Body · 400Automate repetitive conversations and support customers faster, in English and Polish.
Small · 500Labels, captions and helper text
Mono · 400data-bot-id="tv-store-9f2a"
05 - Design tokens

Radius, shadow & spacing

Radius

--r-sm · 10
--r-md · 14
--r-lg · 20
--r-xl · 28

Shadow

--shadow-sm
--shadow-md
--shadow-lg
--shadow-brand

Spacing (4px base)

--space-2 · 8
--space-4 · 16
--space-6 · 32
--space-8 · 48
06 - Component library

Buttons, badges, forms & states

Buttons

Badges & status

BrandIndexedBetaOutline LiveDraft

Form fields & states

Please enter a valid email address.
Saved successfully
Full component set - header, mobile menu, language switcher, hero, feature / use-case / demo / pricing cards, FAQ accordion, tabs, integration grid, dashboard preview, widget preview, code block, modal and cookie notice - is demonstrated live on the landing page.
07 - Brand deliverables

Production-ready brand assets

The fonts actually in use, a full type scale, and the icon & social assets - framed as hand-off artboards for engineering.

Typography · fonts in use 2 families · Google Fonts
Aa
Display + Body
Plus Jakarta Sans
font-family: var(--font-display) · var(--font-body)
Regular 400 Medium 500 Semibold 600 Bold 700 Extra 800

Zażółć gęślą jaźń - voice & chat, 24/7.

Every headline, UI label and paragraph. Geometric and friendly, with full Polish / Latin-Extended coverage.

Aa
Mono · accent
JetBrains Mono
font-family: var(--font-mono)
Regular 400 Medium 500

data-bot-id="tv-store-9f2a"

Bot IDs, API keys, embed snippets and code blocks. Technical accents only - never body prose.

Type scale - Display → Label

Display--fs-display · 800Talk, answer, support
Heading 1--fs-h1 · 700Voicebots & chatbots
Heading 2--fs-h2 · 700One platform for voice
Heading 3--fs-h3 · 700Knowledge base sync
Heading 4--fs-h4 · 700Website widget embed
Body Large--fs-lg · 400Automate repetitive conversations.
Body--fs-body · 400Answers grounded in your own content.
Small--fs-sm · 500Captions, helper and meta text.
Label--fs-xs · 600Eyebrow / label

Google Fonts import

index.html · <head> 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap">

Self-hosting? See the font-export/ package - real .woff2 (latin + latin-ext) with @font-face and font-display: swap.

Favicons · app icons from icon.svg

Favicon - legibility check

16
32
48
64
96

Maskable app icon - gradient ground

180 · apple-touch
192 · maskable
512 · PWA

In context - browser tab

Botino - AI voicebots & chatbots
Ship as favicon.svg + PNG fallbacks at 16/32/48, apple-touch-icon 180, and a maskable 512 in site.webmanifest. Clear space ≥ one waveform bar; never recolour the gradient.
OG image · social share 1200 × 630
Botino
AI voicebot + chatbot

Assistants that talk, answer & support 24/7

Built on your knowledge base. Embedded on your website. Voice and chat in one platform.

Voice + chatKnowledge baseMultilingual

In context - link preview

Botino
AI voicebot + chatbot

Assistants that talk, answer & support 24/7

Built on your knowledge base. Embedded on your website.

Voice + chatKnowledge base
botino.eu
Botino - AI voicebots & chatbots for customer conversations

Create AI voicebots and chatbots that answer customer questions, qualify leads and support your business 24/7.

08 - WordPress + WPML notes

Built for a lightweight custom theme

Theme structure

  • Each section maps to a template part / Gutenberg block - header, hero, features, use cases, demos, how-it-works, integrations, preview, pricing, comparison, security, FAQ, CTA, footer.
  • Repeating content (features, pricing, FAQ) maps to ACF repeaters - see content.js as the field model.
  • Tokens live in tokens.css → mirror into theme.json. No Elementor.

WPML / EN · PL

  • Header, mobile menu and footer all carry the EN / PL switcher.
  • Translatable strings use data-i18n keys - the demo PL dictionary in botino.js mirrors how WPML String Translation keys map.
  • No text baked into images; layouts use text-wrap:balance/pretty so longer Polish strings don't break.