+one Brand Guidelines

Using this document

These visual directions are based on the +one Component Library, the live design system used to build the app. These recommendations do not replace checking materials directly with the TCCC Legal team before publishing.

01 — Identity

Logo

The +one identity is a lowercase wordmark whose o is a continuous color ring — the same spectrum that runs through the app. Three lockups cover every context, each available in full color and in single-color (mono) form.

A1 — Endorsed lockup

Wordmark with the Powered by The Coca-Cola Company signature. The default for external and partner-facing use, where the Coca-Cola relationship must be explicit.

A2 — Corporate lockup

Wordmark with The Coca-Cola Company signature, without the “Powered by” qualifier. Use where the endorsement is already established in surrounding copy.

A3 — Wordmark

The wordmark alone. Used in-product and anywhere the Coca-Cola endorsement appears elsewhere on the same surface.

Color, mono and inverse

Four finishes for every lockup. Pick by background, not by preference.

Color is the preferred finish, on white, Off White or any light, quiet background. Color inverse keeps the ring and reverses the wordmark to white, for Ink or Black backgrounds. Mono black is single-color Ink, for one-color print, engraving and embossing. Mono white is for dark or busy backgrounds where the color ring would not hold up.

A1 — Endorsed lockup

Color

Color inverse

Mono black

Mono white

A2 — Corporate lockup

Color

Color inverse

Mono black

Mono white

A3 — Wordmark

Color

Color inverse

Mono black

Mono white

Clear space

Recommendation — derived from the artwork

Keep a minimum clear space of x on all four sides, where x is the height of the + symbol in the lockup you are using — 55.5 units in the 313 × 76 wordmark, or about 73% of the wordmark’s height.

x for A3 wordmark0.73 × lockup height
x for A1 / A20.48 × lockup height (the signature line sits inside the lockup)

Nothing enters this zone — no type, rules, image edges, page trim or other logos.

Minimum size

Recommendation — set by the legibility of the smallest element in each lockup

A1 / A2 — 160 px wide · 40 mm print
Below this the Coca-Cola signature stops being legible.

A3 wordmark — 80 px wide · 20 mm print

Do and don’t

Recommendation — authored for this document

Use the supplied artwork at its original proportions, with clear space respected.

Switch to mono white when a background is dark, busy or low-contrast.

Lead with the endorsed A1 lockup in partner and co-branded material.

Don’t

Never stretch, squash or otherwise distort the lockup. Scale proportionally.

Don’t

The color ring belongs to the o only. Never flood the whole wordmark with the gradient.

Don’t

Don’t recolor the wordmark. Mono means Ink or white — nothing else.

Don’t

Don’t rotate or set the logo on an angle. It always sits on the horizontal.

Don’t

No shadows, glows, bevels, outlines or other effects.

Don’t

Don’t place the color logo on saturated or competing color. Use a mono finish instead.

02 — Identity

App icon

The production app icon is a soft mesh gradient — red through orange into teal — carrying the wordmark reversed to white. It is delivered as finished artwork and must not be rebuilt.

Production artwork

Master size1024 × 1024 px, sRGB, no alpha
ArtworkMesh gradient with the +one wordmark in white
Corner maskingApplied by the OS — supply the full square
WordmarkLocked in position and scale; do not re-typeset

Delivery sizes

Export from the 1024 master — never scale a small icon up

1024 px
App Store / Play

512 px
Play listing

180 px
iPhone @3x

120 px
iPhone @2x

87 px
Settings @3x

60 px
Notification

Platform masks

The same square artwork, masked five ways by Android launchers and iOS

Square

Rounded corners

Squircle (iOS)

Circle

Teardrop

Because the mask is out of your control, keep anything essential inside the central 66% of the square. The wordmark in the production artwork already sits inside that safe zone.

03 — Foundations

Colors

+one runs on a near-monochrome palette so that photography, partner brands and the color ring can carry all the energy. There is one brand gradient and one neutral scale — no secondary brand colors.

Color Wave

The brand gradient. Used for the logo ring, brand buttons and accent moments.

Light appearance

#F0191A#F59826#00C9D3

Dark appearance

#7046B4#C82C39#DE9349

The Color Wave is appearance-dependent. In light it runs red through orange into cyan. In dark it shifts to violet through red into amber — cooler at the start, warmer at the end, and lower in chroma so it holds against a black page. It is the same gradient token resolving per appearance, not a second brand gradient, so never use the light values on a dark surface.

Orientation is set per application, not fixed. The Brand button runs the spectrum left to right; the Dot Wave brand graphic reverses it; the logo applies it conically around the o and does not change between appearances. Always take the gradient from the supplied artwork rather than rebuilding it.

Neutral palette

Click any swatch to copy its hex

Light and dark

The same palette, reassigned. Both appearances ship in the app.

Light

Give a little, change a lot

Secondary copy sits in Graphite.

Card surface — White on an Off White page

Page#FAFAFA
Card surface#FFFFFF
Subtle fill#F2F2F2
Primary text#141414
Secondary text#3F3F3F
Disabled#C6C6C6

Dark

Give a little, change a lot

Secondary copy sits in Silver.

Card surface — Ink on a Black page

Page#000000
Card surface#141414
Subtle fill#353535
Primary text#FAFAFA
Secondary text#C6C6C6
Disabled#6E6E6E

04 — Foundations

Typography

+one sets everything in TCCC Unity, the Coca-Cola Company’s proprietary typeface. Two cuts do all the work: Headline for titles, Text for everything you read.

TCCC Unity is licensed, not open

TCCC Unity is owned by The Coca-Cola Company and protected by copyright. The right to use it is granted free of charge, with no separate font license required — but only for work destined for The Coca-Cola Company. Making the font available to third parties outside that need is not permitted, and you must take reasonable measures to protect it from unauthorized access.

TCCC Unity Headline

“TCCC Unity Head”

Titles, section headings, tab-bar labels. Tighter and more assertive than Text.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@+

Light 300Give a little

Regular 400Give a little

Medium 500Give a little

Bold 700Give a little

Black 900Give a little

TCCC Unity Text

“TCCC Unity”

Body copy, captions, buttons, form fields — anything read at length or at small sizes.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@+

Light 300Give a little

Regular 400Give a little

Medium 500Give a little

Bold 700Give a little

Black 900Give a little

Type scale

The styles used across the app, straight from the component library

Style	Specimen	Family	Weight	Size / line	Tracking
Title 1	Give a little	Headline	Bold 700	24 / 32	0
Title 2	Give a little	Headline	Regular 400	24 / 32	0
Title 3	Give a little	Headline	Bold 700	18 / 24	0
Body	Give a little, change a lot	Text	Medium 500	16 / 24	0
Callout	Give a little, change a lot	Text	Regular 400	16 / 28	0
Subhead	Give a little	Text	Bold 700	12 / 16	+1.5
Caption 1	Give a little, change a lot	Text	Medium 500	12 / 20	0
Caption 2	Give a little, change a lot	Text	Regular 400	10 / 16	0
Navigation title	Give	Text	Medium 500	16 / 24	0
Navigation accessory	Cancel	Text	Regular 400	16 / 28	0
Tab bar item	Rewards	Headline	Medium 500	10 / 20	0
Tab bar item · selected	Rewards	Headline	Bold 700	10 / 20	0

Sizes are in points at the device’s default text size. The app supports OS-level dynamic type, so every style scales up and down — never hard-code a pixel height that assumes the default. The library also reserves Large Title, Headline and Footnote for future use; they are not applied in the shipped UI and are omitted here rather than guessed at.

05 — Foundations

Icons

One line-drawn set, drawn on a 24 × 24 grid with a consistent stroke. Icons carry the current text color — Ink on light, Off White on dark — and are never recolored to sit outside the palette.

Info SVG More SVG Question SVG Add SVG Less SVG Check SVG Close SVG Selector SVG Error SVG FAQ SVG Transcript SVG Barcode SVG Left SVG Up SVG Down SVG Right SVG Rotate SVG Arrow Left SVG Arrow Up SVG Arrow Down SVG Arrow Right SVG Notification SVG Pin SVG Like SVG Favorite SVG Share SVG Home SVG Give SVG Rewards SVG Freestyle SVG Profile SVG Settings SVG Edit SVG Delete SVG Search SVG Lock SVG Play SVG Pause SVG Volume Up SVG Mute SVG Show SVG Hide SVG Copy SVG Download SVG Save SVG Open in New Tab SVG Login SVG Logout SVG Map SVG

Grid and safe area

From the component library

46 × 46 safe area

Artwork grid24 × 24 px
Safe area46 × 46 px — the minimum tappable and layout box
ColorInherits text color; never a brand or accent color
StylesOutline is the default; Filled marks a selected or active state
Set size49 icons

Draw at 24 × 24 but always place inside the 46 × 46 safe area, so icons align optically and meet minimum target size. Don’t crop, rotate or add fills to an outline icon.

Icons need words

Accessibility guidance from the component library

Icon meaning is not universal — it shifts across cultures, ages and abilities. Pair any icon that carries meaning with a text label, and give it a description that names the action (“Close”, “Search”, “Menu”) rather than the picture (“x”, “magnifying glass”, “icon”).

06 — Components

Buttons

Four hierarchies, two sizes, four states. Every button is a full pill. The Brand button — white with a Color Wave border — is the one place the gradient appears in the interface, so there is only ever one per screen.

Specified for the light appearance. In dark, surfaces and labels swap to their inverse values.
Hierarchy	Default	Pressed	Disabled	Loading
Brand
Primary
Secondary
Tertiary

Sizes

Large for primary page actions, medium inside cards and rows

HeightLarge 56 px · Medium 40 px
Corner radius44 px — renders as a full pill at both heights
Horizontal paddingLarge 32 px · Medium 20 px
Large labelSubhead — Text Bold 12/16, +1.5 tracking, uppercase
Medium labelText Bold 11, +1 tracking, sentence case
Brand border4 px, Color Wave, inside the pill
Secondary border2 px Ink

Icon buttons

44 × 44, square or round, for single-action controls with no label

Variant	Default	Pressed	Disabled
Square · outline
Square · inverse
Round · outline
Round · inverse

Rules

How to pair and when not to reach for the Brand button

One Brand buttonAt most one per screen, on the single most important action.
Pair by hierarchyPrimary with Secondary; Tertiary for dismiss and low-stakes actions.
Full width on mobileLarge buttons stretch to the layout margin in the app.
Keep labels shortTwo or three words. Lead with a verb.

Don’t

No gradient fillsThe Color Wave is a 4 px border, never the button’s fill.
No new colorsDon’t tint buttons to match a partner brand or a campaign.
No square cornersButtons are always full pills.
Don’t stack Brand buttonsTwo gradients side by side cancel each other out.

Shape and elevation

The radii and shadow that shape every +one surface

Radius — small8 px — inputs, chips, small tiles
Radius — medium16 px — icon buttons, inner tiles
Radius — large20 px — cards and sheets
Radius — pill44 px — buttons and tags
Border widths1 px hairline · 2 px emphasis · 4 px Brand button
Elevation0 5px 15px rgba(20, 20, 20, 0.10) — the single shadow in the system

07 — In the product

Screens

The foundations working together across the app’s main tabs, in both appearances. Each screen scrolls inside its frame — the tab bar stays pinned, as it does in the app.

These are design renders from the +one Component Library, not live screenshots. Use them to see how the palette, type scale, iconography and buttons combine — not as a specification for any individual screen.

Home

The feed and the onboarding survey that shapes it

For You — Survey, light appearance — **For You — Survey**Light

For You — Survey, dark appearance — **For You — Survey**Dark

For You, light appearance — **For You**Light

For You, dark appearance — **For You**Dark

Give

Cause discovery and a single cause in detail

Main — no preferences set, light appearance — **Main — no preferences set**Light

Main — no preferences set, dark appearance — **Main — no preferences set**Dark

Causes — National Parks, light appearance — **Causes — National Parks**Light

Causes — National Parks, dark appearance — **Causes — National Parks**Dark

Arcade

Game entry and the level-up modal

New game, light appearance — **New game**Light

New game, dark appearance — **New game**Dark

Modal, light appearance — **Modal**Light

Profile & Rewards

Account settings and a rewards tier

Guest users — settingsLight

Guest users — settingsDark

Rewards — Bubble Seeker, light appearance — **Rewards — Bubble Seeker**Light

Rewards — Bubble Seeker, dark appearance — **Rewards — Bubble Seeker**Dark

08 — Assets

Downloads

Every asset on this page, ready to use. Logos ship as SVG for scalable use and PNG at 1×/2×/3× — all with transparent backgrounds.

Logo pack

12 lockup variants · SVG + PNG @1–3× · 0.8 MB

App icon pack

1024 master plus 512, 256, 180, 120, 87, 60 px · 0.9 MB