Savi · Brand Identity System

A name rooted in wisdom, a leaf that signals freshness, and a palette that speaks value, trust, and natural goodness.

01Logo Mark

The Savi wordmark on every surface

Two wordmark versions — reversed (golden) for dark surfaces and standard (navy) for light surfaces — each with a transparent background to sit cleanly on any colour.

Reversed wordmark — yellow & green on dark backgrounds

Savi reversed on navy Savi Navy · Primary
Savi reversed on deep forest Deep Forest Green
Savi reversed on mid green Mid Forest Green

Standard wordmark — navy & green on light backgrounds

Savi standard on cream Warm Cream · Primary Light
Savi standard on white White
Savi standard on yellow Brand Yellow
02Lockup Variants

Wordmark + tagline lockups

Two lockup configurations pair the wordmark with “Eat well. Spend wisely.” The reversed version (white tagline) is for dark surfaces; the standard (dark tagline) is for light surfaces.

Savi tagline reversed on navy Reversed · Dark Surface · Primary
Savi tagline standard on cream Standard · Light Surface · Primary
Savi tagline reversed on forest Deep Forest · Dark Surface
Savi tagline standard on white White · Light Surface
03Size Ramp

Scaling from 1024 px to 20 px

The leaf accent crowning the “i” remains legible at large sizes and becomes a refined accent at small sizes, never losing brand identity.

120 px
80 px
56 px
40 px
28 px
20 px
04Mark Anatomy

Every element has a purpose

The mark is composed of intentional elements that together tell the Savi story at a glance.

Savi logo for anatomy

Leaf Accent on the “i”

The forest-green leaf crowns the “i” dot, signalling freshness and real, wholesome food — a visual shorthand for the natural quality Savi champions.

Golden Wordmark

Warm gold (#F0C84A) on dark backgrounds conveys value and reward without cliché imagery. On light surfaces, the wordmark shifts to deep navy for maximum legibility.

Bold Rounded Letterforms

The heavy, rounded strokes feel approachable and trustworthy — a confident partner, never cold or corporate.

Tagline: Two Beats

“Eat well. Spend wisely.” — two short, punchy sentences. The period after each creates a decisive, memorable rhythm at any size.

Wordmark
Savi
Eat well. Spend wisely.
Wordmark font Plus Jakarta Sans 800
Tagline font DM Serif Display Italic
Navy on Cream #1E2E3D → 14.5:1 ✓
Yellow on Navy #F0C84A → 9.2:1 ✓
Green leaf #2F9B72 (constant)
05Clear Space

Give the mark room to breathe

Maintain a minimum clear space equal to the cap-height of the “S” in “Savi” on all sides of any lockup configuration.

1× cap-height 1× cap-height 1× 1× Savi clearspace
06Brand Color Tokens

A palette rooted in nature

Gold lives exclusively on dark surfaces where it clears WCAG AA. On light or cream backgrounds, the wordmark uses deep navy at 14.5:1 contrast.

✓ WCAG AA Wordmark Rule

Light surfaces Wordmark in Savi Navy #1E2E3D → 14.5:1 on white ✓
Dark surfaces Wordmark in Brand Yellow #F0C84A → 9.2:1 on navy ✓
Yellow (#F0C84A) is icon / wordmark-on-dark only — it fails WCAG AA on cream or white.

Brand Yellow
#F0C84A
Wordmark on dark
Yellow Dark
#C9A330
Hover · depth
Fresh Green
#2F9B72
Leaf · tagline · UI
Mid Forest
#236B4F
Logo surface
Deep Forest
#1A3D2B
Logo surface · emphasis
Savi Navy
#1E2E3D
Wordmark on light
Warm Cream
#FAF7EE
Primary background
White
#FFFFFF
Secondary background
07Usage Rules

Protect the mark

Consistent, disciplined use of the logo builds brand recognition. These rules keep the mark clear, legible, and on-brand.

✓ Do

Use the reversed wordmark (yellow #F0C84A) on dark backgrounds: Savi Navy, Deep Forest, or Mid Forest. These are the primary dark surface pairings.

✗ Don’t

Don’t place the yellow wordmark on light surfaces (cream, white, yellow). It does not meet WCAG AA contrast and loses legibility at small sizes.

✓ Do

Use the standard navy wordmark (#1E2E3D) on light surfaces: Warm Cream, White, or Brand Yellow. The dark letterforms achieve 14.5:1 contrast on white.

✗ Don’t

Don’t use the navy wordmark on dark backgrounds. Use only the reversed (yellow) version on any surface darker than 50% grey.

✓ Do

Scale the logo proportionally. Use the SVG file at any size — the vector artwork remains crisp from favicon to billboard without rasterisation artefacts.

✗ Don’t

Don’t stretch, compress, rotate, or distort the wordmark. Never alter the relative size or position of the leaf accent on the “i”.

✓ Do

Maintain a clear space equal to the cap-height of the “S” on all sides. This keeps the mark readable and free from visual clutter in any layout.

✗ Don’t

Don’t recolor the leaf, add drop shadows, outlines, glows, or gradients to the wordmark. The green leaf (#2F9B72) is a non-negotiable brand constant.

08Design Rationale

Why Savi looks the way it does

Every design decision serves the mission: helping people eat well and spend wisely.

🌿

The Leaf

Crowning the “i” with a green leaf grounds Savi in real, fresh, natural food — signalling quality ingredients, not processed shortcuts.

✨

Gold = Value

Warm gold telegraphs “savings done right” — quality, reward, and warmth — without resorting to cliché dollar signs or discount aesthetics.

🤝

Two Wordmark Versions

A reversed (gold) and a standard (navy) version ensure the mark is always legible and on-brand, whether printed on packaging, displayed in-app, or used on signage.

📱

Digitally Versatile

SVG vector files scale from 20 px favicon to 4 K billboard without quality loss — exactly what a modern, multi-platform food-tech brand requires.