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

Wordmark

LANTANA LABS

Manrope 700 · letter-spacing -0.01em · "LABS" tracked +0.3em at 0.4× size in brand teal

Lockup · Primary

LANTANA LABS

Flower mark + wordmark · 12–16px gap between mark and type · horizontal baseline

On brand

White mark on brand · use for badges & stamps

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 — Downloads