Logo
01The mark is the default. Switch to the symbol below 24px tall or wherever a square fits better: avatars, favicons, badges. It ships in exactly three colors:
Do
- Use the black or blue mark on light backgrounds, white on dark
- Use the symbol or app icon when space is tight: avatars, favicons, badges
- Keep clear space around the logo of at least half its height
- Switch from mark to symbol below 24px tall
Don't
- Recolor the logo outside black, white, and Kiblue
- Stretch, rotate, outline, or add effects to it
- Set “kibu” in another typeface to fake the mark
- Place the blue mark on busy photos. Use white on a dark overlay
Naming
02"Kibu" is a single word, always spelled with a capital "K". The lowercase “k” only lives in the logo. It's not KIBU either... there's nothing to shout!
Voice
03How Kibu communicates across product copy, docs, and marketing.
Warm, not clinical
Kibu is healthcare software people actually like using. The AI assistant has a name, a face, and glasses. Emojis carry the warmth other systems get from illustration 🎉
Say what happened
“Contact saved,” not “Your contact has been successfully saved!” The verb matches the button. No filler, no trailing period.
Plain English
Many of the staff who use Kibu speak English as a second language. Short sentences, everyday words: Members, Admins & Staff, Care Tasks. If a simpler word exists, the acronym or clinical term loses.
Written by a human
No em dashes, no “seamless,” no “empowering outcomes.” If a sentence could have fallen out of a machine, rewrite it until a person would say it out loud.
Foundations
04Color
Two blues, on purpose: Kiblue is the logo and marketing accent, Primary is the app's action color. Click a swatch to copy its hex.
Status accents
Typography
Asap for product UI, Inter for marketing body copy.
Radius
4px base. Controls sit at 6px, cards at 8px. Never mix pill and square controls in one view.
Flat Design
No shadows anywhere. Hierarchy comes from borders and tonal surfaces instead.
Motifs
05Components
06Buttons
One primary action per view; labels are verb + noun in Title Case. Hover them: these are the app's real hover states.
Badges
Status recipes, always paired with a label. Never color alone.
Inputs
36px, pure white fill. Inputs never inherit the warm canvas.
Banners
Inline prompts: blue informs, amber warns, red blocks.