RAISE THE LEVEL
Design System · Blood Donation Campaign
Animated Raise the Level mark

RAISE
THE LEVEL

An identity system built around a single gesture: filling the bag. Solid typography, signal red and line illustration turning blood donation into an urgency worth looking at.

ApplicationWeb, print, mobile, motion
01 Construction

LOGO
DESIGN

The symbol is built from six pure geometric shapes: a circle, a line, a rounded outline, a wave, a capsule and a dash. Each piece stands for a real functional part of an IV bag: the hook, the tube, the reservoir, the liquid level, the clamp and the level marking.

Drawn apart, these shapes are just geometry. Fitted together in the right order, they form the icon that carries the whole campaign identity, and the "RAISE THE LEVEL" wordmark, which starts loose beside the bag, ends up absorbed inside it, filling the exact space where the blood would rise to.

02 Foundations

Brand essence

Every unit of blood donated is a level of life saved. The brand exists to make that equation felt in two seconds: the time it takes for someone, somewhere, to need a transfusion.

01

Urgency

Signal red, block typography and high contrast: nothing competes for attention, everything points to the act of donating.

02

Care

Human shapes (hands, arms, the gesture of giving) keep the brand close to people, never too clinical.

03

Clarity

One icon, one line, one number. Communication is stripped to the essential so it works at any scale.

Tone of voice
Direct Human Urgent without alarming Factual Encouraging
Use

"Every 2 seconds, someone needs your blood type."

Avoid

"Without donations, people will die." Guilt is not motivation.

03 Color

Color palette

Pulled directly from the campaign's original artwork. Click any swatch to try a new color; the whole page updates live. Click the hex to copy it.

Signal Red
#EE0504
Primary color. CTAs, the icon, high-impact headlines. Use in solid blocks, never in small running text.
Deep Red
#A91716
Shadow, wave and depth inside the illustrations. Builds the second layer of red across compositions.
Ink Black
#0A0A0A
Maximum-contrast background for the glowing mark. Used sparingly: the brand isn't dark by default.
Paper
#EEECEB
Default background. A subtle paper-grain texture reinforces the brand's editorial, printed feel.
White
#FFFFFF
Cards, breathing room, a legibility layer over photography and over red.
Text
#1C1A18
Near-black grey for long reading on paper, never pure black, to keep the palette's warmth.
60% Paper
30% Red
10% Ink
🅰️ White on Signal Red and Text on Paper meet WCAG AA for large text.
04 Typography

Typographic hierarchy

Two typefaces do all the work. One condensed block face to shout, one neutral grotesque to explain. Edit any line below to test your own copy at real scale.

Display96 / 120px
Raise the
Level
H164px
Donating blood is essential and saves lives.
H238px
Who can donate?
H327px
Mobile collection units
Body L21px / Inter
A blood transfusion can mean the difference between life and death.
Body16px / Inter
In most states, you must be 17 or older to donate whole blood. Every 2 seconds, someone needs a transfusion, and types O- and O+ are always in high demand.
Caption12 to 13px / Mono
Group O can donate to any type: it's the universal donor.
Anton, Display

Uppercase, condensed, sans-serif: it works like a stamp. Reserved for headlines, the brand mark and impact numbers, never for paragraphs.

Inter, Text

Neutral, highly legible on small screens, with weights from 400 to 900. Carries all navigation, body copy and interface.

05 Mark

Symbol & variations

The IV bag is the heart of the system, literally. Four treatments cover most uses; the animated version is the campaign's real asset.

Mark with white glow on black background
White glow, dark background
Mark in red outline on light background
Outline, light background
Mark with red glow on black background
Red glow, highlight
Real asset Animated mark with arm, tube pulsing
Motion, 1s loop, 5 frames
Minimum clear space

Don't distort or tilt the bag

Don't swap red for another color

Don't place it over photography without contrast

Don't hand-recreate the typography

06 Illustration

Illustration system

Flat shapes, thick consistent outlines, and letters that carry their own story: the letter "O" is also a drop of blood.

Illustration reference, blood types as drop letters Illustration reference, hands and eligibility drop
01
Single outline

Every stroke uses the same relative weight, no weight variation within a single piece.

02
Letter as shape

Blood types (O, A, B, AB) are drawn as solid blocks that absorb the drop: the letter is the illustration.

03
Simplified human figure

Hands and arms as flat silhouettes, no face, no defined gender; anyone can see themselves in the piece.

04
Paper texture

A subtle grain over the solid shapes avoids a cold digital look and moves it closer to screen-printed matter.

Icon vocabulary
Drop
Bag
Hand / Arm
Cross
Mobile unit
Location pin
07 Photography

Photography direction

Cinematic, clean and human. Hard light and deep shadow, a single accent of red per frame, and close-ups that respect the dignity of the donor.

Preview the brand's color treatment (contrast + slight desaturation)
Downloads the whole page with your edits, including any images you paste into the frames below.

Light & Color

Hard light, deep shadow and a single accent of red per frame: the chromatic palette that sets the campaign's visual mood.

Raise the Level mark on a phone screen, red background

Acting

Restrained expressions and genuine gestures, never performative, always close to the real experience of donating.

Person donating blood in a chair
The real moment of donation
LuAnn Hunt · Unsplash
08 Formats & Applications

Formats & applications

The same gesture, carried across real formats: phone, apparel, tablet and desktop.

Raise the Level mark on a phone screen, red background
Mobile, hero mark
Raise the Level cap and t-shirt mockup
Apparel, cap and tee
Tablet mockup with campaign ad layout
Tablet, editorial layout
Four phone mockups showing the campaign story sequence
Phone sequence, campaign story
Laptop mockup with full campaign ad layout
Desktop, full campaign layout
09 Motion

Motion & animation

Movement is always functional: a level that rises, a pulse that grabs attention, a number that grows. Never decorative for its own sake.

Real asset Real animated campaign loop
Principle
Duration
Use
Ease-out
240 to 320ms
Element entrances, button hovers: starts fast, settles smoothly.
Pulse loop
1.4 to 2s
Urgency icons (drop, notification), never faster than a resting heartbeat.
Count-up
900 to 1400ms
Impact statistics: rise once as they enter the screen.
Fill
600 to 900ms
A bar or bag "filling up": the brand's central metaphor.
Live prototypes, built with CSS/SVG, in the brand's visual language
70%
70%
Raise the level: drag it
0
million lives saved / year
Impact counter
Urgency pulse
10 Components

Interface components

Recurring blocks pulled from the campaign site, ready to reuse.

Pill buttons
Drop callout
Extra criteriamedications, conditions, recent travel
11 Applications

Original pieces

The system in use, pulled directly from the campaign website project.

Homepage, donation impact statistics
Blood types page
Learn more page, pill navigation
Who can donate page
Mobile collection units page
Home: impact statistics
Blood types: letter as illustration
Learn more: pill navigation
Who can donate: eligibility criteria