Design Elements · Gradients
Gradients
Gradients carry the Proper Sky look — but it isn't one gradient, and it is not a duotone. Every hero photo keeps its real color — skin tones, shirts, warm interior light all survive — and is only gently cooled. The brand presence comes from a translucent wash laid on top: three shared ingredients — an indigo deep-corner, a navy text-scrim, and a teal glow — recombined into a small family of geometries. Below: the signature look, the no-duotone principle, the two washes, the anatomy, scrims and panels, gradient text, and a live builder.
The signature look
This is the wash as it lives on the home page: a real photograph, gently cooled, with the Navy Diagonal wash laid over it — a quiet dark column on the left for the headline, the teal glow signing the top-right. The photo still reads as a photo. Everything brand about it is the wash and the gradient headline.
Managed IT Services
No BS. Just IT the Proper Way™. The photo reads naturally — only the wash and the gradient headline are brand.
Real color, gently cooled
The most-missed rule: we don't drain the color out of a photo. Each image is only lightly settled — saturate(.72) brightness(.95) contrast(1.06) — so skin, fabric, and warm light all survive. The cool cast you see on the live site comes from the Trust-Blue unify layer inside each wash, not from desaturating the photograph. Drag to compare.
Raw — full color
+ --cool-grade
The shift is subtle on purpose. If a photo looks drained or blue-grey, it's been over-graded — back it off.
The two washes
Lay exactly one wash over the cooled photo, and pick the geometry by subject. Two named washes cover the whole site. Every color in them is a canonical palette token laid translucent — the live corner-samples only read darker and greener because they're sitting over a dark photo.
get freedom to focus.
Exceptional People.
Note the headline in both: on a hero photo, gradient text is always present — the emphasis line in --grad-text-*, the rest in plain white.
Wash anatomy
Each wash is the same three ingredients composited over a gently-cooled photo. Read left → right — and notice how much of the photograph survives at every step.
--cool-grade · settles warmth, keeps real tones.
Scrims & solid panels
When text sits elsewhere, the same navy ramp re-anchors as a scrim — a darkening that protects legibility without a full wash. And when there's no photo at all, the washes lay over a solid brand color to make a panel for cards, CTA strips, and footers.
Gradient text
The headline treatment — for display sizes (≥28px) only, never body copy. Direction flips with the ground; the on-light variant stays in a darker blue range so it survives on white. One gradient headline per view, with plain Navy or white headings around it.
The wash builder
Build a hero treatment live. Drag a photo onto the stage (or use the default), pick a wash geometry, dial the cool-grade, and back the wash off until the photo breathes. The CSS updates below — copy it straight into a hero, a card, or a HubSpot module.
get freedom to focus.
Wash geometry
Cool-grade
Wash strength
Gradient headline
Do & Don't
Do
- Keep hero photos in real color — only gently cool them. Let skin, shirts, and warm light show.
- Lay exactly one wash on top; pick the geometry by subject (Navy Diagonal for solo/tech, Teal Frame for people).
- Keep the teal glow bright and in one corner — it's the through-line signature.
- Let the indigo deepen toward violet in its corner pool — that's intentional, not a bug.
Don't
- Don't duotone a hero photo — it crushes the real color the brand depends on.
- Don't crank wash opacity until the photo disappears — back it off, let it breathe.
- Don't stack both washes, or center the teal glow.
- Don't run a full brand wash behind body text, or gradient-fill anything under 28px.
A note on duotone
The full duotone remap (shadows→navy, mids→blue, highlights→teal) is the far edge of the system — it kills the real color heroes depend on, so it's graphics-only: abstract texture, a divider, a backdrop behind big type. The real judgment call — good duotone vs. bad duotone — lives on the Imagery page, next.