The Always Beyond rulebook.

The swirl mark plus the “Always Beyond” wordmark. Three approved colourways — never recolour, stretch, or add effects. Download any variation as SVG (scalable, for design/print) or PNG (transparent, for quick use).

Full lockup

Primary · Blue

svgpng

Dark · on light

svgpng

Reversed · on dark

svgpng

Mark only

Mark · Blue

svgpng

Mark · Ink

svgpng

Mark · Reversed

svgpng

Clear space & size

• Keep clear space ≥ the height of the swirl mark on all sides.
• Minimum width: 120px digital / 25mm print (full lockup).
• Use the mark alone only where the wordmark has appeared nearby.

Don’t

• Recolour outside the three approved colourways.
• Stretch, rotate, add shadows, gradients, or outlines.
• Place on busy imagery or low-contrast backgrounds.

The live website palette. Hex is the source of truth; OKLCH is shown for perceptual edits. Use the Tailwind token, not a raw hex, in code.

One typeface across the whole brand — PolySans. Neutral (400) for regular text, Median (600) for emphasis and buttons. There is no separate display or body font. Headings H4–H6 and the Subtitle are set in uppercase.

PolySans Median, pill-shaped, 32 × 24 padding. Three types — Primary (yellow), Secondary (outline), and Link. On hover, Primary and Secondary both fill ink (black) with white text; on dark backgrounds the hover adds a blue ring. Link turns light-blue. One primary CTA per view.

Inputs and selects are fully rounded (pill); the textarea uses the 32px card radius. Two tones — one for white backgrounds, one for dark / blue. Clear labels, calm focus states, plain-language validation that explains what to fix.

32px-radius surfaces with a chip, title, body, and the circular arrow button. Light is the default; blue and ink carry emphasis. No drop shadows — hover fills the arrow button. Hover a card to see it.

Managed IT

Support that's fast, proactive, and actually helpful.

Unlimited remote & on-site support, with people who pick up and fix it.

Cybersecurity

Security that actually protects you.

Awareness training, 24/7 monitoring, and CIS-aligned best practice.

Strategy

IT that grows with you.

An 18–24 month roadmap so there are zero surprises in your budget.

The reusable interactive pieces. Accordion is built on native <details> for keyboard & screen-reader support.

Chips / pill tags

Single package — no tiersEmployee-owned99.2% satisfaction

Tooltip (hover / focus):

Hover meSub-90-second response when you call

Arrow buttons — hover to fill

Arrow buttons on dark — hover to fill

01.What does it cost?Most clients pay $3,500–$7,000/month depending on team size and complexity. Per-user pricing, everything included — no surprise fees.

Most clients pay $3,500–$7,000/month depending on team size and complexity. Per-user pricing, everything included — no surprise fees.

02.Are we locked into a contract?No. Month-to-month, cancel any time with 60 days' notice. We earn your business every month.

No. Month-to-month, cancel any time with 60 days' notice. We earn your business every month.

03.How does switching work?We handle the heavy lifting — connect with your old provider, install our tools, and pick a smooth hand-over date.

We handle the heavy lifting — connect with your old provider, install our tools, and pick a smooth hand-over date.

The repeatable layouts pages are assembled from — hero, feature grid, and stat band.

Finally, an IT company you’ll actually enjoy working with.

One package. One partner. One refreshingly different experience.

Get a free IT strategy callDiscover what’s included

Single package — no surprisesA team that knows youMonth-to-month

Single package — no surprisesA team that knows youMonth-to-month

No long-term contracts  ·  One all-inclusive package  ·  <90-second response time

How we show up for your business

We answer calls in under 90 seconds

And the people who answer can actually fix it — often before you hang up.

We help you save dollars on tech

Cleaning up unused licences and upgrading to better, cheaper options.

You work with the same people

A dedicated Account Manager and Technical Lead who know your setup.

We help you plan and budget ahead

A tech roadmap so there are zero surprises in your budget.

99.2%

of requests rated “awesome”

90s

average response when you call

45+

growing businesses supported

Our signature hero device: a photo masked into the brand oval with white chips floating over it. On load the image fades in, then the chips appear one-by-one. Reuse this on landing pages and other digital assets. Scroll it into view to play, or hit replay.

Single package — no surprisesA team that knows you by nameStrategic guidance for your techMonth-to-month flexibility

Single package — no surprisesA team that knows you by nameStrategic guidance for your techMonth-to-month flexibility

↺ Replay animation

Component: HeroShowcase · mask: /assets/graphics/hero-oval-mask.svg. Pass any image + chip set; positions are Tailwind classes.

Restrained by default. Transforms + opacity only, and every primitive respects prefers-reduced-motion (reduced-motion users get a plain cross-fade). Scroll the page to replay.

Real, warm, human photography — the team and the work, never stock-cliché. Optimised web copies live in /assets/images. Hero and section images are masked into the oval (see Hero treatment) or used full-bleed.

Team

ab-team-01↓ JPG

ab-team-02↓ JPG

ab-team-03↓ JPG

ab-team-04↓ JPG

ab-team-05↓ JPG

ab-team-06↓ JPG

General & section

general-01↓ JPG

general-02↓ JPG

general-03↓ JPG

general-04↓ JPG

Hero & CTA

About hero↓ JPG

Community hero↓ JPG

Guarantee CTA↓ JPG

Photography ships as optimised JPG. Need a different crop or the full- resolution original? Ask Catch Digital.

Line-art graphics used as background texture and for image treatment, plus the oval mask shape. On blue or dark backgrounds these graphics are always white — never black. Download as SVG (scalable) or PNG.

Texture — line↓ SVG↓ PNG

Texture — scribble↓ SVG↓ PNG

Oval mask shape↓ SVG↓ PNG

Custom illustrations (e.g. the Astral robot) used to add personality to select sections — playful, human, never clip-art. Anchor them to an edge so the crop reads intentionally; never float them centred. One illustration per view.

The Astral character anchors playful moments — headers, empty states, “about” and “community” sections. Pair with plenty of space.

↓ PNG

Brand motion atoms. The Astral orbit sits beside CTA copy — yellow dot on dark, blue dot on light. The header atoms accent headers and loaders, and the ticker runs as a value/number band.

Astral orbits — three motions, two colourways

Blue dot on light · yellow dot on dark. Download as MP4 (video) or GIF to drop into decks, ads, and pages.

Astral op1

On light↓ MP4↓ GIF

On dark↓ MP4↓ GIF

Astral op2

On light↓ MP4↓ GIF

On dark↓ MP4↓ GIF

Astral op3

On light↓ MP4↓ GIF

On dark↓ MP4↓ GIF

Header atoms (on blue)

↓ clap GIF

↓ plate GIF

↓ tube GIF

↓ neuron GIF

↓ flip GIF

Ticker / marquee

• Human
• Trustworthy
• Proactive
• Calm
• Strategic
• Refreshingly different

• Human
• Trustworthy
• Proactive
• Calm
• Strategic
• Refreshingly different

A smooth, seamless CSS ticker (no GIF loop seam). The branded marquee GIFs (values, by-the-numbers, team) are also in /assets/animations.

What each colour means, so usage stays consistent across pages and assets.

The most-used part of this guide. Always Beyond sounds like a knowledgeable peer who happens to be brilliant at IT — calm, human, refreshingly direct — never a vendor or a tech overlord. Use these rules for every PDF, ad, landing page, email, and post so the brand sounds like one voice.