Brand Guidelines

How SupercityOS looks, sounds, and shows up — for everyone who applies the brand, builds with it, or writes in its voice.

Version 1.0 Internal · Agency · Engineering supercityos.com

01 — Brand story

Big-business support, without the heavy price tag

SupercityOS is a full-service managed IT provider serving small and mid-sized businesses across Atlantic Canada since 1997. We're real people who don't just fix problems—we own them. Every expression of the brand should feel the way our service feels: less stress, fewer surprises, IT that just works.

Managed IT

Help desk and tech support, phone systems, Microsoft 365 & Copilot, cloud management, procurement, networking.

Print Solutions

Managed print, document management, secure print release, lease buyouts and upgrades, usage analytics.

Cybersecurity

MFA and Zero Trust, password policy, NIST/CIS compliance, cyber-insurance readiness, data governance.

Taglines — verbatim

People Focused. Security Driven.

Secondary: "IT Management, Print Services, and Cybersecurity Defense That Just Works."

Proof points

Trusted by 300+ businesses across Atlantic Canada · In business since 1997 · Apple Technical Partner, Lenovo Gold Partner, Microsoft Partner · Serving legal, construction, non-profit and financial clients.

02 — Logo

The wordmark and the play mark

"SUPERCITY" sets in bright blue, "OS" in deep blue, led by the green play-button mark. The full lockup pairs the wordmark with the slogan; scalable SVGs are the source of truth for on-screen use.

Primary — light backgrounds. Full lockup with slogan.

Primary — dark backgrounds. Dark-alt lockup with slogan.

SVG lockup — UI & web

Mono white — embroidery / single-color only

Favicon & app icon — the play mark alone

Clear space

X X

Keep clear space equal to the height of the play mark (X) on all sides. Nothing enters this zone — no text, rules, or other marks.

Minimum size

Lockup: 140 px / 35 mm wide minimum

Play mark: 24 px / 8 mm minimum

Below these sizes, switch from the lockup to the play mark alone.

Don't

✕Stretch or squash the lockup

✕Recolor any part of the mark

✕Place on photos without a navy scrim

✕Add drop shadows or effects

✕Rotate or tilt the lockup

✕Use white on light — keep contrast

03 — Color

Deep navy, crisp white, one vivid green

Green is the signature — reserved for primary actions and "on/secure" states. Blue carries the brand; purple is a rare accent. Click any swatch to copy its hex.

Super Green

#44D62C

--green

Primary action · success · secure

Brand Blue

#3D95EE

--blue

Links · brand · selected states

Deep Blue

#1D456E

--blue-700

Dark surfaces · headings · text on green

Accent Purple

#A167A5

--purple

Tags · chips · data-viz variety

Ink

#363636

--ink

Primary text — warm near-black

Scales

Usage rules

Green means go: primary CTAs, success, progress, secure states. Never decoration.
On green fills, text is always deep blue #1D456E — never white.
Blue for links, secondary actions, selected states, data accents.
Purple sparingly: tags, category chips, data-viz variety only.
Surfaces are white or light slate; dark sections use deep blue, never black.
No purple/blue tech gradients. Gradients are navy scrims over photos only.

Semantic

Success

#259213

Info

#3075BA

Warning

#C77A06

Danger

#D43C2C

Accessible pairs

Contrast ratios computed against WCAG 2.1. AA = 4.5:1 body text; AA Large = 3:1 for text ≥ 24px or bold ≥ 19px.

Aa Text

Ink on white

AAA12.08:1

Aa Text

White on deep blue

AAA9.87:1

Aa Text

Deep blue on green

AA5.12:1

Aa Text

Green-700 on white

AA Large4.04:1

Aa Text

White on blue-500

AA4.80:1

Aa Text

White on blue-400

AA Large3.12:1

Aa Text

Deep blue on slate-50

AAA9.24:1

Aa Text

Purple-600 on purple-50

AAA7.53:1

Copy-paste — color tokens

:root {
  --green:    var(--green)  /* #44D62C */;
  --blue:     var(--blue)  /* #3D95EE */;
  --blue-600: var(--blue-600)  /* #3075BA */;
  --navy:     var(--navy)  /* #1D456E */;
  --purple:   var(--purple)  /* #A167A5 */;
  --ink:      var(--ink)  /* #363636 */;
  --border:   var(--border)  /* #DEE5E5 */;
  --bg-subtle:var(--bg-subtle)  /* #F5F8F8 */;
}

04 — Typography

Raleway leads, Cabin carries

Raleway (600–800) for the wordmark and every headline. Cabin (400–700) for body, UI, and labels. Nunito Sans is wired as the alternate. All three are self-hosted brand fonts.

Raleway — display

People Focused. Security Driven.

Semibold 600 Bold 700 Extrabold 800

Cabin — body & UI

Enjoy unlimited support from real people who don't just fix problems—they own them. We resolve issues quickly to minimize downtime, so your team can get back to work.

RegularMediumSemiboldBold

Nunito Sans — alternate

Reserved for secondary surfaces where Cabin is unavailable — long-form documents, partner co-branding, spreadsheets. Wired as --font-alt.

RegularSemiboldBoldExtrabold

Scale — 1.25 major third, 16px base

--text-6xl60pxDisplay

--text-5xl48pxHero headline

--text-4xl38pxSection heading

--text-2xl24pxCard heading

--text-xl20pxLead paragraph

--text-base16pxBody copy

--text-sm14pxSecondary / UI

--text-xs12pxCaption

Copy-paste — type

h1, h2, h3 {
  font-family: var(--font-display)  /* 'Raleway', sans-serif */;
  color: var(--navy)  /* #1D456E */;
  letter-spacing: -0.02em;
}
body {
  font-family: var(--font-body)  /* 'Cabin', sans-serif */;
  font-size: var(--text-base)  /* 16px */;
  line-height: 1.55;
  color: var(--ink)  /* #363636 */;
}

05 — Voice & tone

Confident, plain-spoken, human

The promise is less stress and fewer surprises. Speak to the reader as "you / your business"; we are "we / our team". Outcomes before features. Security is peace of mind, never fear.

Warm & direct

"Let's Take IT Off Your Plate." Short, benefit-led sentences.

Outcome-first

Lead with what the client gets, then how. Concrete results, not feature lists.

Reassuring

Proof over promises: 300+ businesses, named testimonials, partner badges, response times.

Never jargon

No acronym soup, no doom-laden security talk, no overpromising. No emoji in marketing or product UI.

SAY

Get big-business support without the heavy price tag.

NOT

Leverage our best-in-class enterprise-grade solution stack.

SAY

Let's find the gaps before they become problems.

NOT

Hackers WILL breach you. Act now before it's too late.

SAY

Enjoy unlimited support from real people who own the problem.

NOT

Our SLA guarantees 100% unhackable, always-on infrastructure.

CTAs — always verbatim

Request an Audit Get Your Cyber Score Book a Consultation Get a Quote Discover More Client Portal

06 — Photography

Real people, real gear, cool light

Candid shots of the actual team at work — blue-lit benches, printer bays, help-desk rows. No stock handshakes, no posed grins at the camera. Imagery skews cool; warm candids are welcome when un-overlaid.

Help desk team at work — Do — standalone imagery runs as-is: honest color, natural grade.

Help desk team with navy scrim and headline — Do — text on photo always sits on a deep-navy gradient scrim.

Leadership — candid, relaxed, no posing

Hands-on detail — devices in real use

Bench repair — the work up close

Planning — process made visible

Collaboration — techs working together

On-site service — printers and people

Inside the machine — honest detail

Fleet ready to deploy

Portraits — cool, blue-lit, direct

Full library (18 approved shots, web-optimized) lives in assets/photos/.

07 — Iconography

Lucide — outline, 2px, rounded

The system icon set is Lucide: 24px grid, 2px stroke, round caps and joins. Default color is muted gray; blue or deep green for active and accent states. Never emoji, never Unicode glyphs, no filled or duotone icons outside solid color chips.

Default --fg-muted · active --blue-500 or --green-700 · chips pair the icon with its 50-tint background. Partner logos (Microsoft, Apple, Lenovo, Cisco, 3CX, Toshiba, Lexmark) stay in official colors on white — never recolored.

08 — Components

Buttons, inputs, cards, badges

Buttons

Primary is always green with deep-blue text. One primary per view. Secondary is solid blue or a navy outline.

Inputs

Work email

12px radius, 1.5px border, blue focus ring (3px, blue-100). Labels are semibold navy, 13px.

Card

Cyber-insurance ready

Let's find the gaps before they become problems.

White, 16px radius, hairline border, soft navy-tinted shadow. Hover lifts. No colored left-border accents.

Badges & status

● Secure ● In progress ● Needs attention ● Critical Legal

Pill badges pair a 50-tint background with the 700-step text of the same hue. Purple is the category chip, not a status.

Copy-paste — primary button

.btn-primary {
  background: var(--green)  /* #44D62C */;
  color: var(--fg-on-green)  /* #1D456E */;      /* never white on green */
  font: 700 14px var(--font-body)  /* Cabin */;
  padding: 11px 18px;
  border: none;
  border-radius: var(--radius-md)  /* 12px */;
  box-shadow: var(--shadow-green)  /* 0 8px 22px rgba(68,214,44,0.32) */;
  transition: all var(--dur)  /* 220ms */ cubic-bezier(0.22,1,0.36,1);
}
.btn-primary:hover  { background: var(--green-600)  /* #35B61E */; }
.btn-primary:active { transform: scale(0.98); }

09 — Spacing, radii, shadows, motion

The quiet system underneath

Spacing — 4px base

--space-2

8px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

--space-24

96px

Radii

sm 8

md 12

lg 16

xl 24

pill

Inputs and buttons 12px · cards 16px · large media 24px · pills 999px.

Shadows — navy-tinted, never black

green

Motion — calm and professional

Standard: 220ms cubic-bezier(0.22,1,0.36,1)
Fast (hover, press): 140ms · Slow (reveals): 380ms
Fades + small translateY on scroll. No bounces, no infinite loops.

Hover me

10 — Applications

The brand at work

Business card — 3.5 × 2 in

Jordan MacLeod

Senior Systems Technician

902-417-1450 · jordan@supercityos.com
41 Sterns Court, Dartmouth, NS B3B 1W7
supercityos.com

Social post — 1:1

Real people who don't just fix problems—they own them.

Book a Consultation

Email signature

Jordan MacLeod · Senior Systems Technician

SupercityOS — People Focused. Security Driven.

902-417-1450 · supercityos.com · 41 Sterns Court, Dartmouth, NS