Brand guidelines

How to use Bravo’s name, logo, colors and type. Download what you need, and follow the rules below so Bravo looks the same everywhere.

Download brand kit

Logo

Bravo’s logo is the lowercase wordmark and the abstract B symbol. Use the supplied files only, in full color, on White or Sky.

Full color on White or Sky only. There is no reversed or one-color version.
Arabic layouts use the Arabic lockup. It has the same height as the English one, so the two swap at the same size.

Horizontal

The default, for headers, footers and most layouts.

EnglishSVG PNG
ArabicSVG PNG

Stacked

When the space is narrow.

EnglishSVG PNG
ArabicSVG PNG

Wordmark

Where the symbol cannot fit.

EnglishSVG PNG
ArabicSVG PNG

Symbol

Only where Bravo is already named, such as an app icon or a favicon.

Both languagesSVG PNG

Clear space and size

Keep clear space on every side at least as tall as the symbol’s lower stroke. Nothing else enters it.

Smallest sizes on screen

Horizontal: 132 px wide
Stacked: 90 px wide
Wordmark: 96 px wide
Symbol: 24 px high

Logo misuse

Each of these breaks the logo. Use the supplied files as they are.

Don’t retype the wordmark in a font.
Don’t stretch or squash it.
Don’t rotate it.
Don’t recolor it.
Don’t place it on Cobalt, Ink or any dark color. There is no reversed version.
Don’t add shadows, glows or outlines.
Don’t place it on a busy background.
Don’t join it with the Tafra logo into one mark.

Color

Six colors. Let White and the neutrals lead, use Sky for supportive surfaces and Cobalt for recognition and the main action. Yellow is for small moments of warmth only.

Select a color to copy its hex value.

Recognition and primary actions
Breathing room and supportive surfaces
Small moments of warmth only
Text
Secondary text
The canvas

Text and background pairs

Use only these pairs for text. Ratios follow WCAG 2.2.

Pair	Contrast	Use
White on Cobalt	5.68:1	Normal text and buttons
Cobalt on White	5.68:1	Links and normal text
Cobalt on Sky	4.80:1	Links and normal text
Ink on White	15.94:1	Any text
Ink on Sky	13.47:1	Any text
Ink on Yellow	11.56:1	Any text
Muted on White	6.35:1	Secondary text
Muted on Sky	5.37:1	Secondary text
Cobalt on Yellow	4.12:1	Large text only
White on Yellow	1.38:1	Never for text
White on Sky	1.18:1	Never for text

Typography

Manrope sets Latin text and Noto Sans Arabic sets Arabic. Both are open-source fonts, served from the site itself.

Latin: Manrope

Campaign headline48–64 px · 800 · 1.08: Agent-first software for small businesses.
Section title32–40 px · 700 · 1.15: How Bravo works
Card title24 px · 700 · 1.3: Sell through agents
Body16–18 px · 400 · 1.5: Tell an AI agent what your business needs, and Bravo does the work.
Labels and buttons14–16 px · 600: Get early access

Arabic: Noto Sans Arabic

Campaign headline36–52 px · 700 · 1.35: برمجيات للأعمال الصغيرة، مصمَّمة لوكلاء الذكاء الاصطناعي أولاً.
Section title32–40 px · 700 · 1.4: كيف يعمل برافو
Card title24 px · 700 · 1.5: بِع عبر الوكلاء
Body16–18 px · 400 · 1.8: أخبر وكيل ذكاء اصطناعي بما يحتاجه عملك، وبرافو ينجز المهمة.
Labels and buttons14–16 px · 600: احصل على وصول مبكر

At most three prominent sizes in one view.
Sentence case for every heading, button and title.
Arabic sets a step smaller, with more line height, and is never letter-spaced.

Voice

Bravo sounds like a helpful, capable person. Lead with the owner’s goal, explain concretely, and end with one clear next step.

Short sentences. “You” for the owner, “we” for Bravo.
No hype or superlatives. No emoji, and no exclamation marks in headlines.
Never claim pricing, payments, features, integrations or dates without current evidence.
Label every example as an example, and every plan as planned.

Layout and motion

An 8 px rhythm, with 4 px for fine adjustments.
Corners: 8 px on controls, 16 px on cards and panels, pills only for small tags.
One primary action per view: a white label on Cobalt. Secondary actions are outlined.
Visible focus everywhere: a Cobalt ring with a White offset.
Motion: 120 to 180 ms for small changes, 200 to 300 ms for transitions, easing out. Nothing loops, and reduced motion shows the final state.

Primary actionGet early access

Secondary actionSee how it works

Graphics and icons

Simple rounded geometry, open space and occasional upward movement.
Never cut the B symbol into illustrations or patterns.
No glossy 3D, stock rockets, cartoon characters or generated people.
No fake stores, screenshots or testimonials presented as real.
Icons come from one family, Lucide, on a 24 px grid with 2 px rounded strokes. Label any icon whose meaning is not obvious.

Icons from the Lucide family, in Cobalt

Bravo and Tafra

Bravo is the identity. Tafra is the company that builds it.
Credit Tafra with “Powered by” and Tafra’s mono-black wordmark, on its own row, apart from the Bravo logo.
Never join the two logos into one mark.

The credit as it appears in Bravo’s footer

Downloads

The brand kit holds every logo as SVG and PNG, the app icons, the color tokens, the web fonts with their licenses, and the full guidelines.