inzozi

Brand Guide v1.0

Inzozi Solutions
Visual Identity

This guide defines how Inzozi Solutions looks, sounds, and behaves across every touchpoint. Follow it consistently, identity only works when applied the same way every time.

01 · Logo

The concept

The logo is a pure Fraunces wordmark — inzozi in the brand's own display typeface, set bold and lowercase. No separate symbol. The typeface itself is the identity.

Fraunces is already the brand's signature moment, the italic gold word in every hero headline. Setting the name in Fraunces upright creates continuity between the logo and the site's most distinctive typographic element. Lowercase is deliberate: confident without needing to shout.

The standalone mark is the lowercase “i”, the first letter of inzozi — rendered in Fraunces Bold in gold. It scales from 10px (favicon) to any size.

Wordmark typeface: Fraunces 700 (upright, not italic)

Descriptor: DM Mono 400, uppercase, tracked wide

Mark:Fraunces 700 “i” in gold (#C89520)

Minimum width: 80px for full wordmark

64px
32px
20px
12px

Full wordmark on light

inzozisolutions

Full wordmark on dark

inzozisolutions

Size range

inzozisolutionsxl
inzozisolutionslg
inzozisolutionsmd
inzozisolutionssm

Compact, tight spaces (mobile nav, app icons)

inzozi
inzozi

Favicon, 32 × 32

32px
2× preview

Geometric interpretation of the “i” mark, dot and stem in gold on void. Generated via app/icon.tsx using Next.js ImageResponse. Served as /icon.png at 32×32.

Don'ts

✕

Never set "inzozi" in italic, the wordmark uses Fraunces upright only

✕

Never use all-caps, the wordmark is always lowercase

✕

Never change the mark "i" to any colour other than gold (#C89520)

✕

Never add effects to the wordmark: no shadows, glows, outlines, or gradients

02 · Colour

Monochrome with one moment

The palette is warm near-blacks and warm off-whites. Gold appears exactly twice per page: the logo mark (“i”) and the hero headline's italic word. The more rarely an accent appears, the more power it carries.

Click any swatch or hex value to copy

Void

--color-void

Hero, navigation, and CTA section backgrounds.

Ink

--color-ink

All body text. Warmer than pure black, no blue cast.

Gold

--color-gold

The one accent. The logo dot, and the italic hero word. Nowhere else.

Paper

--color-paper

Main light background. Barely-warm off-white.

Surface

--color-surface

Alternate section background.

Dim

--color-dim

Secondary text. Warm-grey, no blue or purple undertone.

Seam

--color-seam

Dividers on light backgrounds.

Ghost

--color-ghost

Dividers on dark backgrounds.

03 · Typography

DM Sans

Body & UI

Every paragraph, label, nav link, and general text, including the logo wordmark. Clean humanist grotesque that reads well at all sizes.

--font-sans

700 Headings

Digital work, done right.

600 Subheadings

We build things that last.

400 Body

We scope carefully before agreeing to anything. If we can't do it well, we say so.

Fraunces

Display accent

Used for exactly one moment: the final italic word of the hero headline. Never in body copy or UI. Its restraint is what gives it power.

--font-heading

Italic 400, Hero accent only

last.

DM Mono

Labels & metadata

Section eyebrows, form labels, credentials, metadata. Always uppercase and tracked wide. Never in running copy.

--font-mono

Section label

Services

Credential

DPO Certified · .rw Registrar · Kigali, Rwanda

Type scale

Hero clamp(2.75rem, 7.5vw, 8rem)We build things
Page H1, text-5xlWhat we offer
Section H2, text-2xlA process you can follow.
Item H3, text-lgWeb & App Development
Body, text-smWe scope carefully before agreeing to anything. If we cannot do it well, we say so rather than take the money and underdeliver.
Label, DM Mono 10pxDPO CERTIFIED · .RW REGISTRAR

04 · Voice

How we sound

Direct. Specific. Confident without needing to perform confidence. Like an experienced practitioner, not a startup pitching growth.

Specific over general

Do

“We respond within 24 hours.”

✕

“We respond quickly.”

Active over passive

Do

“We scope the project before writing code.”

✕

“Projects are scoped before code is written.”

Confident, not loud

Do

“We build it once, properly.”

✕

“We build the BEST digital products that will TRANSFORM your business!”

Name what happens

Do

“Send message”

✕

“Submit”

05 · UI Patterns

Buttons

On light

On dark

Always outlined, never solid fill. The border inverts to fill on hover. No rounded corners. Square edges match the wordmark's character.

Section anatomy

Section label

01

Row title one

Supporting description in plain, direct language.

02

Row title two

Supporting description in plain, direct language.

06 · Spacing & layout

Page layout

Max content width: 72rem (max-w-6xl)

Horizontal padding: 1.5rem (px-6) / 2rem (lg:px-8)

Section vertical padding: 6rem (py-24)

Section label → content gap: 4rem (mb-16)

Row divider padding: 2.5rem (py-10)

Logo clear space

Minimum clear space: equal to the dot diameter on all four sides of the full wordmark.

For the dot mark alone: equal to half the dot diameter on all sides.

Never place text or graphic elements inside the clear space zone.