Our Mission
Brand Guidelines
WaterStep was founded on a simple belief: access to clean water is a human right. Everything we do, the technology we build, the people we train, the crises we respond to, flows from that belief.
List of All Blocks Used
GenerateBlocks, paragraph block, image block, core button block
Eyebrown Headlines Poppins (Google Font)
Lora (Adelle Google Font Alternative) H1 You have not lived today until you have done something for someone who can never repay you.
Lora (Adelle Google Font Alternative) H2 You have not lived today until you have done something for someone who can never repay you.
Lora (Adelle Google Font Alternative) H3 You have not lived today until you have done something for someone who can never repay you.
Lora (Adelle Google Font Alternative) H4 You have not lived today until you have done something for someone who can never repay you.
Body Text
Poppins (Google Font) Mollis pretium lorem primis senectus habitasse lectus scelerisque donec ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque consectetur mi risus molestie curae malesuada. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh metus lobortis morbi cras magna gravida vivamus per risus fermentum. Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum sagittis enim et magna sit inceptos sodales parturient pharetra mollis.
Poppins (Google Font) Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla consectetur porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent erat volutpat posuere.
Approved Color Pairings with HOver State and AA text
Base / Bush Accent / White Turmeric / Bush Tropical / BushWP Buttons
Global styles for buttons:
font-size: 18px;
font-weight: 800;
text-decoration: none;
border-radius: 4px;
padding: 16px 36px;
Bush paired with Savana
Faux Buttons – Styled A links on bush overlay Bush 85%
Faux Buttons – Styled A links on Sahara Sand overlay Savana 85%
Brand Guidelines
Tone of Voice
Compassionate and Sincere:
Empathy and commitment to
empowerment and dignity.
Guided Progress Assurance:
Experience-backed support that’s
empowering, encouraging, reassuring
and motivating.
Strategic Momentum Building:
Dynamic using bold innovation
to elevate individuals and communities.
Clear and Impactful Messaging:
Emphasizing the experience-driven
guidance and commitment to helping
communities move forward.
Brand Values
Compassion
“The heart” of the brand.
The desire to lift others up.
North star.
Expertise
“The hands” of the brand.
Knowledge, skills, and the
technology to deliver.
Progress
“The mind” of the brand.
Pursuing a future where
safe water and health are
accessible to everyone.
Rational Positioning: Expertise
WaterStep has a unique set of expertise,
technologies, and the best practices to
scale the impact of each donated dollar.
Emotional Positioning: Compassion
Progress towards the goal of universal access to safe water
requires expertise and compassion. Only by compassionate
global hearts and empowered local hands can it be a reality.
Brand Colors
Savanna + Bush: Primaries, Sahara Sand Accent, Turmeric Special Use, Oceanic Accent, Tropical Special Use
| SAVANNA (teal) | SAHARA SAND (yellow) | TURMERIC (orange) | OCEANIC (dark blue) | TROPICAL (light green) | BUSH (dark teal) |
| RGB 87 189 184 HEX #57bdb8 | RGB 248 198 98 HEX #f8bc62 | RGB 237 129 57 HEX #ed8139 | RGB 54 119 134 HEX #367786 | RGB 137 189 141 HEX #89bd8d | RGB 1 65 66 HEX #014142 |
| Pantone | Pantone | Pantone | Pantone | Pantone | Pantone |
| 4174 U/C | 4002 U / 2008 C | 4008 U / 4009 C | 2208 U/C | 4204 U/C | 5473 U/C |
| Name | Swatch | HEX | RGB | Role |
|---|---|---|---|---|
| BRAND COLORS | ||||
| Savanna | #57bdb8 | 87, 189, 184 | Background / fill only | |
| Sahara Sand | #f8bc62 | 248, 188, 98 | Background / fill only | |
| Turmeric | #ed8139 | 237, 129, 57 | Primary visible accent | |
| Oceanic | #367786 | 54, 119, 134 | Background, or text on white only | |
| Tropical | #89bd8d | 137, 189, 141 | Background / fill only | |
| Bush | #014142 | 1, 65, 66 | Dark text, dark surfaces, nav bar | |
| THEME GLOBALS | ||||
| Contrast | #1a1a1a | 26, 26, 26 | Body text (max) | |
| Contrast-2 | #333333 | 51, 51, 51 | Body text, headings | |
| Contrast-3 | #555555 | 85, 85, 85 | Secondary text, meta | |
| Base | #ece6de | 236, 230, 222 | Page background | |
| Base-2 | #f3eee8 | 243, 238, 232 | Section background, footer | |
| Base-3 | #ffffff | 255, 255, 255 | Content / card background | |
| Accent | #275d68 | 39, 93, 104 | Primary link, button hover | |
| Accent-2 | #a04810 | 160, 72, 16 | Emergency text color when Turmeric fails AA | |
| Accent-3 | #1f6a66 | 31, 106, 102 | Secondary teal (text-safe) | |
WCAG 2.1 Color and Size Thresholds
Normal text: 4.5:1 (AA), 7:1 (AAA). Large text / UI components: 3:1 (AA).
Solo color against white or black
| Color | Hex | vs White | vs Black |
|---|---|---|---|
| Savanna | #57bdb8 | 2.24:1 ❌ | 9.38:1 ✅ |
| Sahara Sand | #f8bc62 | 1.70:1 ❌ | 12.36:1 ✅ |
| Turmeric | #ed8139 | 2.69:1 ❌ | 7.80:1 ✅ |
| Oceanic | #367786 | 5.07:1 ✅ AA | 4.14:1 ✅ large only |
| Tropical | #89bd8d | 2.16:1 ❌ | 9.73:1 ✅ |
| Bush | #014142 | 11.44:1 ✅ AAA | 1.84:1 ❌ |
Practical pairings
| Combo | Ratio | Verdict |
|---|---|---|
| White on Bush | 11.44:1 | ✅ AAA, anywhere |
| White on Oceanic | 5.07:1 | ✅ AA normal text |
| Bush on Sahara | 6.73:1 | ✅ AA normal text |
| Bush on Tropical | 5.30:1 | ✅ AA normal text |
| Bush on Savanna | 5.11:1 | ✅ AA normal text |
| Bush on Turmeric | 4.25:1 | ⚠️ AA large only, fails normal |
| Bush on Oceanic | 2.25:1 | ❌ fails everything |
| Oceanic on Savanna / Tropical / Sahara | 2.26–3.20:1 | ❌ fails normal, at best AA large |
All AA-passing pairings
| Pairing | Ratio | Level |
|---|---|---|
| Contrast on white | 17.40:1 | AAA |
| Contrast on base-2 | 15.09:1 | AAA |
| Contrast on base | 14.04:1 | AAA |
| Contrast-2 on white | 12.63:1 | AAA |
| White on Bush | 11.44:1 | AAA |
| Bush on white | 11.44:1 | AAA |
| Contrast-2 on base-2 | 10.95:1 | AAA |
| Contrast on Sahara | 10.24:1 | AAA |
| Contrast-2 on base | 10.19:1 | AAA |
| Bush on base-2 | 9.92:1 | AAA |
| Bush on base | 9.23:1 | AAA |
| Contrast on Tropical | 8.06:1 | AAA |
| Contrast on Savanna | 7.77:1 | AAA |
| Contrast-3 on white | 7.46:1 | AAA |
| Contrast-2 on Sahara | 7.44:1 | AAA |
| White on Accent | 7.36:1 | AAA |
| Accent on white | 7.36:1 | AAA |
| Bush on Sahara | 6.73:1 | AA |
| Contrast on Turmeric | 6.46:1 | AA |
| Contrast-3 on base-2 | 6.46:1 | AA |
| Accent on base-2 | 6.38:1 | AA |
| White on Accent-3 | 6.34:1 | AA |
| Accent-3 on white | 6.34:1 | AA |
| White on Accent-2 | 6.12:1 | AA |
| Accent-2 on white | 6.12:1 | AA |
| Contrast-3 on base | 6.01:1 | AA |
| Accent on base | 5.94:1 | AA |
| Contrast-2 on Tropical | 5.85:1 | AA |
| Contrast-2 on Savanna | 5.64:1 | AA |
| Accent-3 on base-2 | 5.50:1 | AA |
| Accent-2 on base-2 | 5.31:1 | AA |
| Bush on Tropical | 5.30:1 | AA |
| Accent-3 on base | 5.12:1 | AA |
| Bush on Savanna | 5.11:1 | AA |
| White on Oceanic | 5.07:1 | AA |
| Oceanic on white | 5.07:1 | AA |
| Accent-2 on base | 4.94:1 | AA |
| Contrast-2 on Turmeric | 4.69:1 | AA |
