Residential and commercial cleaningBranding

Years of cleaning, and nobody knew its name

A cleaning company in San José that had spent years working in private homes without anyone knowing its name. We built the whole brand —its own manual, uniform, stationery, signage, vehicle and website— drawn from the first stroke to carry the commercial work it wasn't doing yet.

Client: Bay Area Janitorial Cleaning Services
Business type: Residential and commercial cleaning
Service area: Branding
Location: San José, California
Year: 2026

Services delivered

Brand Design
Identity Manual
Stationery
Uniforms & Textiles
Signage
Vehicle Wrap
Web Design
Web Development
Hosting & Deployment

24 + 24pages of identity manual and pages of website, all built on the same brand

Visit the site

The challenge

Bay Area Janitorial had spent years cleaning private homes in San José. One service, done well, and not a single piece of material saying who was behind it. Not a weak brand: none. Every flyer was resolved by whoever printed it, the uniform said nothing, the van went bare and the website was a template that resembled none of it. Work came in by referral, from one house to the one next door, and that was exactly the ceiling: word of mouth only reaches so far, and to knock on the door of an office or a building you have to look like a company before anyone opens. We had to start at the beginning, and the beginning was deciding what this company looked like.

What we did

We did all of it, from the mark to the deployment. The brand wasn't drawn for the business it was, but for the one it was going to be. The question —homes or offices?— was answered by putting in both: a house on one side, the office blocks on the other, and between them the foam and the tools, all mounted on a wave that joins them. The day that mark was delivered the company still only cleaned homes; the office blocks had been sitting inside the logo for months, waiting their turn. The construction was built on the proportions of the letter “B” at 23 points, and out of that came a twenty-four-page manual: clear space measured in the X value, reductions tested down to 30%, five variants of the mark, two primary blues with four supporting colors, Montserrat in four weights, the graphic system of waves and bubbles, and six ways of breaking it drawn out one by one. Then we brought it down to what gets touched: overall, stationery, door hanger, towel, A-frame, flag and vehicle wrap. And on that base we built the site: the palette turned into design tokens, with every combination's contrast pinned down in tests so nobody can break it by accident, and the manual's own Montserrat served to the browser rather than a lookalike.

The result

A company that had no image now reads the same on the overall's embroidery, on the van's vinyl and on a phone screen, because all three come from the same file and the same rule. And the wrapped van works while it sits still: every house it cleans leaves an ad on that street for the whole day. Today the business presents itself as what it is —residential and commercial— without having to explain who it is first, which is exactly what it was missing to move from homes to buildings. The website is twenty-four pages served already written, with no server composing them on every visit, and it works just as well on mobile, which is where most calls come from. Phone and email are one tap away from any page, and a floating button composes the WhatsApp message with the name and the enquiry already inside, so the business receives a request rather than a “hi”.

I want a project like this

The brand manual

A house and an office block, without choosing

The first decision was not to split the business in two. The mark puts the house on one side and the office blocks on the other, and between them the foam and the tools, all on a wave that joins them and later reappears throughout the graphic system. The construction wasn't eyeballed: it was built on the proportions of the letter “B” at 23 points, and that measure is what distributes the elements and the text.

The X that measures the air, and how far it shrinks

Around the mark there's a clear margin equal to the X value of its own construction, and nothing occupies that space. The reduction was tested too: down to 75% the full logo still reads; below that the simplified versions take over, and at 30% only the sparkle symbol is left working. On the web that rule lives inside the component that draws the logo, so it doesn't depend on anyone remembering it.

Two blues that lead, four that follow

French Blue is the brand's color and Grey Blue supports it; behind them come Ocean Mist, Bright Snow, Graphite and Sunflower Gold. Each was documented with its HEX, its RGB and its CMYK, and on the web something more was added: its measured contrast ratio. The main blue gives 9.96:1 on white and works for text; Grey Blue stops at 2.74:1 and the gold at 1.79:1, so neither can set a letter on a light background —and an automated test prevents it—.

Montserrat, and only four weights

A single family for the whole brand, in Medium, SemiBold, Bold and ExtraBold. The manual assigns the roles —the heavy weights for headlines and labels, Medium for body copy— and the website adds none of its own. The files served to the browser are exactly the ones from the identity package, not a lookalike downloaded separately: that's the difference between print and digital resembling each other and being the same thing.

Five versions for five different places

The full logo is the default version. The wordmark keeps only the text when the strip is narrow. The symbol works when the brand is already identified in context. The sparkles inside their circle serve as the favicon. And the oval version is mandatory the moment there's a photograph underneath, which is exactly where a mark without its own background gets lost.

Waves, bubbles and a gradient

The graphic system wasn't invented separately: it's three pieces that come out of the mark itself. The wavy lines repeat its wave, the central gradient provides the shine, and the bubbles with their sparkles connect to what the business actually does. On the web the bubbles aren't a static ornament —they float— but the animation is pure CSS and their travel is measured as a percentage of the container, not the window: that way a short band and a tall hero behave the same with nothing to configure.

Six ways to break it

The manual devotes a page to what isn't done, drawn out rather than merely stated: colors outside the palette, changes of proportion, shadows, moved elements, a different typeface and rotations. They're not there to limit whoever designs, but so the brand survives the hands it's going to pass through. On the web those six prohibitions stopped depending on good memory: the logo is only ever drawn through a component that preserves its proportion, and neither the code nor the review will accept a shadow or a tilt on top of it.