Brand book · v1.0 · 2026

The Lantana Labs brand system.

Live tokens that match the production site — logo, color, typography, iconography, motion and spacing. Designed to keep every surface (web, deck, PR, proposal, product) coherent.

01 — Logo

The flower mark.

Eight petals radiating from a single center — grown, not drawn. Used as a standalone mark, a wordmark companion, and the quiet watermark bleeding through every bento tile.

Primary mark

flower.svg · monochrome · 500×500 viewbox

Lockup · On dark

lantana-labs-dark.svg · flower + wordmark + tagline · use on ink, brand or photography

Lockup · On white

lantana-labs.png · primary horizontal lockup · use on paper, white or light tint

Lockup · On brand

lantana-labs-on-brand.svg · use for badges, stamps and teal surfaces

Clear space

Reserve clear space equal to one petal-height (≈ 20% of mark) on all sides.

Minimum size

24 px web

32 px comfort

48 px signature

Never render below 24px on screen or 8mm in print.

Use the flower mark on brand color, paper, or white surfaces
Pair the mark with the wordmark in primary contexts (hero, footer, brand tiles)
Allow a clear-space equal to the height of one petal around the mark
Rotate the mark slowly on loop when used as an idle decorative element

Don't

Don't place the mark on photography without a solid backing
Don't rotate, skew or stretch the mark beyond the approved slow-rotation loop
Don't reduce the mark below 24px — legibility drops fast
Don't recolor the mark outside brand teal #2EACB6 or #FFFFFF on dark

02 — Color

A two-family system.

Brand teal and ink are the full-strength families. Paper and tint are the quiet grounds. Everything else is restraint.

Brand

Brand 50

#EAF6F7

bg-brand-50

Brand 100

#D4EEF0

bg-brand-100

Brand 200

#A8DEE2

bg-brand-200

Brand 300

#7CCDD3

bg-brand-300

Brand 400

#50BDC4

bg-brand-400

★

Brand 500

#2EACB6

bg-brand

Brand 600

#248A91

bg-brand-600

Brand 700

#1B676D

bg-brand-700

Brand 800

#124548

bg-brand-800

Brand 900

#0B2D2F

bg-brand-900

Ink

Ink 50

#F5F8F8

bg-ink-50

Ink 100

#E7EDED

bg-ink-100

Ink 200

#C8D3D3

bg-ink-200

Ink 300

#9CACAC

bg-ink-300

Ink 400

#6A7C7C

bg-ink-400

Ink 500

#44595A

bg-ink-500

Ink 600

#2D4041

bg-ink-600

Ink 700

#1A3234

bg-ink-700

★

Ink 800

#0F2A2C

bg-ink

Ink 900

#081A1B

bg-ink-900

Neutrals

Paper

#FBFAF7 · bg-paper

Primary page background

Tint

#F2F7F7 · bg-tint

Soft fill for chips & panels

White

#FFFFFF · bg-white

Card surfaces & text on dark

03 — Typography

Manrope. One family, used with confidence.

No display serif. No novelty fonts. A distinctive semi-condensed geometric sans, across five weights, with a careful size scale and tight letter-spacing at large sizes.

Typeface

Manrope

by Mikhail Sharanda

Variable weight 200–800. We ship 400 / 500 / 600 / 700 / 800 to keep page weight lean. Loaded via next/font for optimal performance and CLS-safe layout.

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ¿? & @ # %

Regular · 400

Body copy, paragraphs, blurbs.

font-weight: 400

Medium · 500

Secondary buttons, link labels.

font-weight: 500

Semibold · 600

Headlines, card titles.

font-weight: 600

Bold · 700

Reserved for strong emphasis.

font-weight: 700

Scale

.h1

Brands people recognize.

Display · clamp(1.875rem, 5vw + 0.5rem, 3.75rem) · 600 · leading-[1.08]

.h2

We help ambitious brands grow.

Section head · clamp(1.625rem, 3.5vw + 0.3rem, 2.75rem) · 600 · leading-[1.12]

.h3

A senior team, on the work.

Card head · clamp(1.125rem, 1.4vw, 1.25rem) · 600 · leading-[1.2]

.lede

Lantana Labs is a full-service agency working with ambitious brands worldwide. Based in Nairobi.

Lead paragraph · 15.5px → 16.5px · 400 · leading-relaxed

.eyebrow

What we do

Section eyebrow · 12px · 600 · uppercase · tracking-[0.18em] · text-brand

Meta tracked

№ 001 · Nairobi · Est. 2021

Tile meta · 10.5–11.5px · 600 · uppercase · tracking-[0.2em] · text-ink-500

04 — Iconography

A custom 24px line set.

Built in-house. Single stroke 1.6px, rounded caps and joins, 24×24 viewbox. Sized via Tailwind h-×/w-× utilities. Colored via currentColor — they pick up whatever text color they're in.

Services

IconDigital

IconBrand

IconPR

IconConsult

IconProposal

IconGrant

IconProduct

Process

IconDiscover

IconStrategize

IconExecute

IconDeliver

Industries

IconTech

IconHealth

IconEducation

IconNonprofit

IconRealEstate

IconFinance

Pillars

IconTarget

IconBulb

IconPalette

IconHandshake

IconCheck

IconArrow

IconArrowUpRight

IconStat

IconMail

IconPhone

IconPin

Social

IconLinkedIn

IconTwitter

IconInstagram

05 — Motion

Motion suggests life — never distraction.

Four repeatable patterns that run the whole site. All via GSAP + ScrollTrigger, cleaned up via gsap.context on unmount.

Principle 01

Page-load stagger

Hero elements enter with a tight timeline — eyebrow → headline words → body → CTAs — using power3.out at 0.5–0.8s each, 0.06–0.1s stagger.

gsap.timeline({ defaults: { ease: 'power3.out' } })

Principle 02

Scroll reveal

Section tiles fade + rise + subtly rotate as they enter the viewport. Always via fromTo + immediateRender:false + clearProps to guarantee rendered state if the trigger never fires.

scrollTrigger: { trigger, start: 'top 85%', once: true }

Principle 03

Idle motion

Poster tiles breathe via slow yPercent + rotation yoyo loops (4–7s). The flower mark rotates 360° every 50–60s. Motion suggests life, never distraction.

yoyo: true, repeat: -1, ease: 'sine.inOut'

Principle 04

Kinetic type

Slot-roll pattern for cycling text (e.g. About hero locations). Absolute positioning inside overflow-hidden, vertical slide, 2.4s hold per phrase.

yPercent: 110 → 0 → -110

06 — Tile system

The bento, in pieces.

Four tile skins that rhythm across every section — ink, brand, paper, white. Each carries a flower watermark bleeding from a corner at 8–15% opacity. Rounded-[22px] corners, consistent padding.

INK

Tile skin

ink tile

bg-ink · rounded-[22px] · flower watermark

BRAND

Tile skin

brand tile

bg-brand · rounded-[22px] · flower watermark

PAPER

Tile skin

paper tile

bg-paper · rounded-[22px] · flower watermark

WHITE

Tile skin

white tile

bg-white · rounded-[22px] · flower watermark

Container

max-w 1240 · px 1.25→2.5rem

Tailwind `container` · centered

Section padding

py-20 md:py-24

Vertical rhythm across sections

Tile radius

rounded-[22px]

Bento tiles · cards · CTAs (28px for outer cards)

Icon chip

h-11 w-11 · rounded-xl

Brand 10% bg · 15% ring

Eyebrow gap

gap-2.5

Flower glyph · 14px mark · uppercase label

Watermark size

-right-8 -bottom-8 · h-32 w-32

Flower at 8–15% opacity, bleeding from corner

07 — Voice

How we talk.

Confident without being cute. Specific without being jargon. Short sentences. We say what we do and who we do it for.

We say

We help ambitious brands grow with purpose and performance.
A full-service agency — Nairobi, working globally.
We help you tell what you do accurately.
Proposals, grant applications and reports — written to win.

We don't say

"Leverage cutting-edge synergies."
"Unlock your full potential with our 360° solutions."
"We are passionate about what we do."
"Revolutionary. Disruptive. Innovative."

Three sentences to keep on hand

01
When describing the work
"We help ambitious brands grow with purpose and performance."
02
When acknowledging a problem
"Thanks for the note — we're on it and will reply inside a working day."
03
When inviting someone to act
"Start a brief →"

08 — Risks & IP

What's ours. What isn't. What not to touch.

Four boundaries that keep the brand — and everyone using it — out of trouble. Read before shipping any external artifact: merch, deck, press release, event asset.

Trademark · Copyright/ 01

Our marks are ours.

The flower mark, the wordmark and the name Lantana Labs are trademarks of Lantana Labs Ltd. The site footer carries the active notice. Use these only under the rules in this brand book.

Don't recolor the mark outside brand teal #2EACB6 or white #FFFFFF on dark surfaces.
Don't alter, crop, rotate or stretch the mark beyond the approved slow-rotation loop.
Don't combine the mark with third-party logos in a shared lockup.
Observe the clear-space and minimum-size rules in §01 Logo.

External IP/ 02

Their logos aren't ours.

Case-study mentions and client logos (e.g. Bdigismat, Zuhura Africa) are shown on-site for attribution only. Do not put third-party logos, wordmarks or taglines on merchandise, apparel, templates or any asset we hand to someone outside the company.

Only Lantana Labs' own marks are cleared for merchandise.
Never re-typeset, redraw or re-color a client logo for brand use.
For a partner co-brand lockup, get written permission from their brand/legal team first.
Remove client logos from sample decks before they leave our drives.

Cultural sensitivity/ 03

Stick to the book.

The brand system doesn't include local, traditional or religious motifs. Don't introduce symbolism — flags, beadwork patterns, adinkra glyphs, tribal marks — that hasn't been specified in this book. The only decorative element we use is the 8-petal flower in §01.

Don't add symbols that aren't already in this brand book.
Don't repurpose a cultural pattern as a texture, watermark or overlay.
If a campaign genuinely needs a cultural reference, commission it properly — with credit, consent and a paid collaborator.
When in doubt, ask the brand lead before it ships.

Copy & content/ 04

Use the approved lines.

All written content on the site is owned by Lantana Labs. Merch, decks and campaign copy should reuse approved slogans wherever possible — or stay neutral. Don't invent new taglines for external assets without sign-off.

Strategy. Story. Growth.Brand worth wearing.Senior people, on the work.Written to win.

Use approved slogans verbatim — don't paraphrase them into near-misses.
Merchandise copy is cleared from this approved list (ask the brand lead for additions).
Long-form: cite Lantana Labs when you quote more than one sentence from the site.

Read alongside