Design Elements · The Swell

The Swell

Our signature motif: a radial field of brand triangles fading into a soft bloom, bleeding off the corner of a section the way light spills across a horizon. It rides the 45° axis shared by our gradient headlines, and it's the one graphic element that makes a Proper Sky surface unmistakably ours. This page shows the look first, then the anatomy, the exact triangle, where to place it, and two ways to build it.

The Swell at a glance

This is the motif as it lives on the home page — the hero swell bleeding up from the bottom-right of a navy section. Before any anatomy or rules, this is the feeling to aim for: calm, atmospheric, brand-blue, never busy.

Smarter business. Smarter I.T.

The Swell sits behind the headline and bleeds off the corner — atmosphere, not decoration.

Proper-Sky-BKG-Swell-Iso · 1058×1050 · bled off bottom-right

What it's made of

It reads as one soft shape, but it's two layers radiating from a single focal point: a wide bloom for atmosphere, and a field of brand triangles that's densest at the center and dissolves to nothing at the edge. That shared focus is what gives the Swell its direction.

The ground
Whatever sits behind — white, --ps-navy, or Trust Blue. The Swell carries no background of its own; it lets the surface show through.
The bloom
A wide, soft radial-gradient that lifts the area around the focus into a gentle glow — the brand's "atmosphere."
The triangle field
The brand triangle, tiled on a 14×15 grid, tinted with the 45° gradient, then faded out radially so it's densest at the focus and gone at the edges.

The triangle

The whole field is built from one shape, tiled — the exact primitive from the live site. It's a small right-triangle "tick," drawn once and repeated on a 14 × 15 grid. Note the grid is intentionally a hair taller than it is wide; that's the real spacing, not a square. Click anything below to copy.

The tick

One right triangle, viewBox 0 0 14 15, filled Trust Blue.

The tile

Repeated at 14px × 15px — the field before any fade or gradient.

#257CA8baked fill

14 × 15tile grid

45°SW → NE axis

<!-- the exact primitive — tile it at 14×15 -->
<svg xmlns="http://www.w3.org/2000/svg" fill="#257ca8"
     fill-rule="evenodd" viewBox="0 0 14 15">
  <path d="m0 0 1.96 2.05L4 4V0H0z"/>
</svg>

Where it goes

The Swell is an accent and a blender, never wallpaper. On the site it's absolutely positioned at width:70% and bled well off a corner, so only the dense core shows. Just as often it spills out of its box and bridges two sections — the parent runs overflow:visible so the field crosses the seam onto the page. These are the actual placements from the home page.

Tip: grab any Swell below and drag it around to test a placement — each card's inset updates live.

Bottom-leftinset: auto auto -32% -30%

Top-right, on blueinset: -28% -22% auto auto

Top-right, on lightinset: -30% -22% auto auto

Bottom-center seaminset: auto auto -60% 55%

Across sections — one Swell, two bands

IT the Proper Way™

We build IT around your business.

A Cloud Gray content band. The Swell starts here, top-right, as a faint wash behind the copy.

No BS. Just Proper IT.

Not the other way around.

…and continues down into the navy band below it. One element, anchored once, reading across the seam — exactly how the home page bridges a light section into the dark one beneath.

section seam

Two ways to build it

The live site uses a pre-rendered PNG — that's the source of truth, and the most faithful option. When you need it to recolor or scale freely (a slide, an ad, a different ground), rebuild it in CSS from the same triangle. Both are below.

Method A

The baked PNG

Drop Proper-Sky-BKG-Swell-Iso.png (1058×1050) into an absolutely-positioned box and bleed it off a corner. Triangles, fade, and color are baked in — pixel-true to the site. Tinted variants: blue, teal, aqua.

<div style="position:absolute; width:70%; inset:auto -40% -20% auto;"> <img src="swell-iso.png" width="1058" height="1050" alt=""> </div>

Method B

The CSS recipe

Two layers over the ground: a radial bloom, and the triangle tile filled with the brand gradient and faded out radially. Recolors with one token — same field you see in section 02.

/* radial fade + tiled triangle */ .swell__field { -webkit-mask: radial-gradient(circle at 50% 50%, #000 4%, rgba(0,0,0,.85) 34%, transparent 66%); } .swell__dots { background: var(--grad-text-dark-light); -webkit-mask: url(triangle.svg) 0 0 / 14px 15px repeat; }

The Swell generator

Dial it in. Move it to any corner or edge, size it up or down, push it off the edge for a full bleed, and switch grounds. The CSS updates live below — copy it straight into a layout, a slide, or an email. It stays on the 45° axis, home base bottom-right.

on navy · bottom-right

Anchor

Ground

Size

460px

Triangle size

14px

Bleed off edge

20%

Full bleed

Live CSS for the dialed-in Swell

On imagery

Over a photo the Swell does the same job with a light touch: anchor it in a corner, on a dark scrim so the field reads, and let it tie the image back to the brand. It can sit inside the photo, or bleed off the corner onto the page behind it — never fighting the subject.

Corner accent, inside the photoBottom-right, over the scrim.

Blend into a text panelBleeds from the dark side where copy sits.

Bleeding out of the box onto the page

Out of the frameThe Swell overhangs the photo's corner and spills onto the page.

Do & Don't

Bleed it off a corner at ~70% width so only the dense core shows.
Keep the field on the 45° SW→NE axis, like the gradient headlines.
Use the baked PNG for site-true fidelity; the CSS recipe when it must recolor.
Hold to one Swell per view, with room to breathe.

Don't

Don't tile it as wallpaper or center it as standalone decoration.
Don't lay it under body text or let it compete with a photo's subject.
Don't change the 14×15 grid to a square — keep the real spacing.
Don't recolor a PNG by hand — swap a tinted variant or use the CSS gradient.