Overview
ColorCoded Labs is a tech bootcamp based in Columbus, Ohio — preparing students for careers in tech and connecting graduates with employers. After a successful pilot launch, the team was scaling: new programs, growing media coverage, and partnership conversations with enterprise hiring partners. I led a brand system rework and website redesign that turned a standalone identity into a digital brand language the team could operate themselves.
The Challenge
ColorCoded Labs had launched with a bold visual identity — vibrant colors, a distinctive mark, a name that promised diversity and energy. But the brand had been built for print and standalone identity work, not for digital. There were no application rules for how the colors, typography, or layout should behave on a growing website — so on screen, every element ended up competing for attention. The brand that was meant to signal energy was reading as noise.
Brand Designed for Impact, Not Scale
The identity worked beautifully as a standalone — but applied across an entire website, every element ended up in brand color, every background fighting for attention, every section feeling equally important.
Site Built for a Pilot
The original site supported a single product. As the company expanded into multiple programs, press coverage, and partnership outreach, there was no structure to house any of it.
Team Blocked From Their Own Brand
Course updates, enrollment deadlines, and press mentions all required developer intervention — leaving the marketing team unable to keep their own site current as the company moved faster.
Original Pilot Site — Brand Color Everywhere
No Visual Hierarchy Between Sections
The Core Insight
The company is called ColorCoded Labs. But nothing in the identity actually did anything color-coded.
The original brand hinted at the concept — five colors in the palette, a color-banded logo — but there were no rules for how those colors should behave. So on the existing site, every color was being used at once, everywhere. The brand's own name was making a promise its design language wasn't keeping.
The real work was taking the brand's own name and turning it into a design instruction — a language with rules about where color lives, what it signals, and when it should be quiet.
My diagnosis to the client: "The colors concept is strong — but it's being overused on the website in a way that's making the concept less impactful. More whitespace and high-contrast foundations will make the brand colors stand out, not disappear."
Early Exploration
Before any visual design, I worked through structure. The original site had grown organically — new pages added as the company launched new initiatives, without a shared model for how those pages should behave.
I wireframed the priority page templates — homepage and about — to map content hierarchy, confirm information architecture, and align with stakeholders on structure before committing to any visual decisions. These wireframes surfaced structural gaps (the missing About page, partnerships section, and press archive) as design decisions rather than afterthoughts.
Homepage Wireframe — Hierarchy Before Visual System
About Page Wireframe — Mission, Values, and Team Structure
The Brand Language
With structure locked, I developed the brand's digital language — the set of rules that would make "color-coded" mean something across every surface the company needed.
A New Foundation for the Palette
The original palette had no rest states — every brand color was fully saturated, and there was nothing in the system that signaled "quiet." I added three foundation tones that gave the brand somewhere to land.
Xiketic
#18172DCultured
#F2F2F2White
#FFFFFFDark surfaces, light surfaces, and a true white — a canvas against which the brand colors could finally become meaningful.
Brand Colors, New Roles
Midnight Blue
#262262French Blue
#1C75BBDark Turquoise
#61C7CFCarrot Orange
#F6931DDeep Cerise
#EB008BThe brand colors didn't change — but their role did. Instead of defaulting to brand color as the baseline, the language now used them intentionally: primary CTAs, program identity, key data points, interactive states. The rule was 90/10 — 90% neutral foundation, 10% brand color. When color appeared, it meant something.
Typography
The brand's existing typographic voice was Helvetica Now Display — a clean, confident sans-serif. I extended it into a responsive digital type scale, defining hierarchy for the web-specific contexts the original print-oriented guidelines didn't cover: navigation, form elements, metadata, stat displays, and the dense curriculum sections on course pages.
Key Design Decisions
Making the Brand Name a Design Instruction
The company is called ColorCoded Labs, but nothing in the identity actually did anything color-coded. On the homepage hero, I assigned each letter of the headline a different color from the brand palette — and added a subtle interaction that cycles the letters through the palette on hover. It's a small moment that delivers on the brand's own name: the first thing a visitor reads on the site is literally color-coded. The concept stopped being a description and started being an experience.
Hero Headline — Interactive Color-Coded Letters
Restraint as the Brand Language's Core Rule
Convincing a client with a deliberately vibrant brand that less color would make the brand stronger required trust. The argument: when every color is shouting, none of them signal anything. By pulling brand color back to 10% of the interface, every appearance of brand color could mean something — and every CTA, every product marker, every key moment gained real visual weight.
Color as a Program Identity Layer
Rather than use brand colors decoratively, I assigned them to program. Each course owns a color — and that color carries through the entire experience of that program, from first impression to enrollment. This created instant recognition, supported cross-program differentiation, and built room for future programs to join without reinventing the system.
A System the Team Can Operate
A brand language only works if the team can maintain it. I built the CMS so the rules of the language — color assignment, component patterns, visibility logic — were baked into the content model itself. When the team adds a new course, they pick a color; the system handles the rest. The brand stays consistent because the infrastructure enforces it.
Applying the Language
The redesigned website became the first full application of the new brand language. Every page is assembled from the component library. Every use of brand color is deliberate. Every program is visually distinct, but clearly part of the same brand.
Homepage — Color-Coded Headline Delivers on the Brand Name
Course Offerings — Per-Program Color Identity
About Page — Mission-Forward, Language-Consistent
Outcome
The redesigned site launched in 2023, giving ColorCoded Labs a brand language built to keep up with the company's growth.
Delivering on the Name
"Color-coded" stopped being a description and became part of the design language — carried through the micro-interactions, iconography, and per-program color identity.
Full Content Independence
Team owns course launches, enrollment updates, and press publishing end-to-end — with the brand's rules baked into each component.
Reflection
This project reframed how I think about brand work.
ColorCoded Labs' identity wasn't the problem. The problem was that the brand had never been given a language — a set of rules for how its own concept should behave. The most important decision I made wasn't a visual one. It was noticing that the brand's name was already telling us what the design language should do, and building the rules to match.