digital forest
Role: Executive Director · Web Design Lead · Creative Strategist
Team Size: 12 Organizers
Tools: Figma
Timeline: Spring 2024 - Fall 2024
Overview
This project explores how a design system can suport accessibility clarity and brand cohesion within an eco-tech digital product.
Product Mission Statement
At Digital Forest, our mission is to revolutionize theserver farm industry by harnessing the power of green energyto create a sustainable and efficient digital ecosystem. We are committed to providing our clients with high-performance services while minimizing environmental impact.
By prioritizing renewable energy sources and innovative technologies, we aim to lead the way in responsible computing, empowering businesses to thrive in a greener future.
The Goal
The goal is to understand how color, typography, spacing, and interaction patterns can scale across an eco-tech digital product while meeting WCAG AA and AAA standards.
Atomic Design Comparative Study
I curated an in-depth competitive design system audit of five enterprises and eco-tech platforms to identify common atomic patterns and system-level conventions. These insights informed which atoms were implemented and inspired into Digital Forest's design system. As a result, only atoms that supported scalability, clarity, and accessibility were standardized within the system.
Based on the information gathered, Digital Forest establishes its design principles as:
- Accessibility-first systems
- Low cognitive load
- Calm, eco-tech visual language
View The Audit Here
Using Visual Substitution to Convey the Mission
Ernestine Pro
Reminiscent of the digital data lines with it’s geometric slab serifs but matches the organic, natural vibe with the round curves in each letter
Deer
Symbolizing natural ecosystem and environmental impact.
WCAG Approved Hue Ratios
Y-Tristimulus
Measures brightness of color & perceptual distance of a hue in a space relative to the distance of the human eye.
WCAG Conformance Level
Level A - foundational level, addressing core accessibility barriers, ensuring basic usability for most users with disabilities
Level AA - recommended standard for most organizations
Level AAA - provides exceptional accessibility but can be difficult or impossible to achieve for some content
Color Palette Decisions
Vibe
Calm, balanced, sustainable technology aesthetic, nature and forest feel.
WCAG
Tested against WCAG AA and AAA contrast ratios to ensure readability across light and dark modes.
Primary Dark
#1D1E07
Background
#121212
Deep Accent
#3C2503
Warm Accent
#995C00
Highlight
#E2A531
Primary Light
#FFFADB
Typography Styles
Jost
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Ernestine Pro
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Jost Regular
Jost Regular - 14pt
Jost Regular - 15pt
Jost Regular - 20pt
Jost Regular - 24pt
Jost Medium
Jost Medium - 14pt
Jost Medium - 15pt
Jost Medium - 20pt
Jost Medium - 24pt
Jost SemiBold
Jost SemiBold - 14pt
Jost SemiBold - 15pt
Jost SemiBold - 20pt
Jost SemiBold - 24pt
Jost Bold
Jost Bold - 14pt
Jost Bold - 15pt
Jost Bold - 20pt
Jost Bold - 24pt
Ernestine Pro Demibold - 14pt
Ernestine Pro Demibold - 15pt
Ernestine Pro Demibold - 20pt
Ernestine Pro Demibold - 24pt
Ernestine Pro Demibold - 32pt
Ernestine Pro Demibold - 36pt
Ernestine Pro
Used to differentiate labels and headers from Jost for text variation. A nod to the logotype which resembled digital data lines with its geometric slab serifs but matches the organic, natural vibe with the round curves in each letter.
Jost
A readable sans serif across screen sizes and weight width and is commonly used in the site for headings, body text, and interface elements and to helps with navigability. Typically left aligned to help readability and minimize eye strain and uneven reading rhythm.
Normal Text
Large Text
Reduced Animation Off
Reduced Animation On
Dark Mode
Light Mode
Simplified Interface Off
Simplified Interface On
Normal Buttons
Large Buttons
Final Product
The final outcome is an accessibility-first design system for an eco-tech server farm platform. The system includes standardized color tokens, typography scales, components, and global accessibility controls designed to adapt across information-dense interfaces without compromising clarity or brand cohesion.
Home Page
About Page
Partners Page
Resources Page
Support Page
Text generated content was derived from equinix.com and ChatGPT which allowed me full focus on the design system and accessibility application without worrying about the text and visual content under time constraints. Motion graphics on the landing page was a team effort of compiled images and video editing to practice visual substitution.
Reflection
This project strengthened my understanding of how design systems function as infrastructure rather than surface-level UI and how to apply accessibility that is built into system foundations rather than added later on. My eye for curating atoms developed when figuring out which atoms should be standardized before integrating them into bigger components such as molecules and organisms. If expanded further, I would incorporate user feedback and usability tests to refine how accessibility controls are prioritized and configured. The system would better adapt to real user needs rather than relying solely on systematic assumptions.