Brand SDK

The Pro Comms brand system.

Color, type, logo, voice, and components — rendered live from the production tokens. Copy anything here directly into new work.

Logo

Lockup and glyph

Pro CommsBusiness Telecom

Do

Use the dark lockup on light backgrounds and the light lockup on ink-900 or darker.
Use the glyph alone in favicons, avatars, and anywhere under 120px.
Keep the glyph on signal-600 — it is the one place the accent appears as a fill.

Do not

Do not recolor the glyph to match a campaign.
Do not stretch, rotate, or add effects to the lockup.
Do not place the lockup on a busy photograph without a scrim.
Do not typeset "Pro Comms" as two words in a different face and call it the logo.

Clear space: Keep clear space equal to the height of the glyph on all four sides.
Minimum size: Do not render the full lockup below 120px wide. Use the glyph alone instead.

Color

Two ramps, no third

Contrast ratios below are measured against white and computed at render time — they are not annotations that can go stale.

Signal Green

signal-*

The accent. Carries every call to action, active state, and confirmation. signal-700 is the minimum step for text and white-on-color buttons (5.9:1). 600 and lighter are graphical only — icon fills, rings, badges, and large display type.

signal-50

#ecfdf3

1.05:1

signal-100

#d3f8e0

1.15:1

signal-200

#aaf0c4

1.31:1

signal-300

#73e2a3

1.60:1

signal-400

#3ccb7f

2.09:1

signal-500

#16b364

2.74:1

signal-600

#099250

4.01:1

AA white

signal-700

#087443

5.85:1

AA white

signal-800

#095c37

8.08:1

AA white

signal-900

#084c2e

10.08:1

Ink Navy

ink-*

The ground. Body copy, headings, dark sections, and every neutral surface. ink-900 for body copy, ink-600 for secondary text, ink-950 for hero and footer backgrounds, ink-50 for alternating section bands.

ink-50

#f4f7fb

1.07:1

ink-100

#e7edf6

1.18:1

ink-200

#c9d7e9

1.46:1

ink-300

#9db4d3

2.12:1

ink-400

#6a8bb8

3.50:1

AA white

ink-500

#486a9d

5.49:1

AA white

ink-600

#375383

7.70:1

AA white

ink-700

#2d436a

9.89:1

AA white

ink-800

#1d2c47

13.97:1

AA white

ink-900

#111d31

16.88:1

AA white

ink-950

#0a1220

18.75:1

Typography

Inter, one family

Weight and size carry the hierarchy. No secondary display face, no italics in UI, no letter-spacing outside the eyebrow.

Display

One provider for every line.

text-4xl sm:text-6xl font-bold tracking-tight

Hero headline. One per page.

One provider for every line.

text-4xl sm:text-5xl font-bold tracking-tight

Page title in the dark header.

One provider for every line.

text-3xl sm:text-4xl font-bold tracking-tight

Section headings.

One provider for every line.

text-lg font-semibold

Card and subsection titles.

Body Large

One provider for every line.

text-lg leading-relaxed

Section intros and lede paragraphs.

Body

One provider for every line.

text-base leading-relaxed

Default running text.

Small

One provider for every line.

text-sm leading-relaxed

Card copy, form labels, list items.

Caption

One provider for every line.

text-xs

Fine print, disclaimers, helper text.

Eyebrow

One provider for every line.

text-xs font-semibold uppercase tracking-[0.18em]

Kicker above a section heading.

Components

The shipped primitives

Buttons

Ghost (dark surfaces only)

Badges

NeutralSignalComing soon

Category icons

Eyebrow

On light

On dark

Voice

How we write

Pro Comms sells to people who have been oversold before. Every sentence should survive a skeptical reader.

Lead with the concrete

Write this

Port your existing numbers with no downtime and no porting fee.

Not this

We deliver best-in-class number portability solutions.

Name the price

Write this

$45 per line / month. Unlimited premium 5G data.

Not this

Competitive rates tailored to your business needs.

Say what we do not do

Write this

We do not sell handsets, and we think that is a feature.

Not this

Full-service provider for all your communication requirements.

Short sentences. Plain words.

Write this

Some lines cannot move to VoIP.

Not this

Certain circuits may present migration challenges in a VoIP context.

Where these values live

src/app/globals.css: The @theme block. Authoritative for anything Tailwind compiles — every bg-*, text-*, and ring-* class.
src/lib/brand.ts: The same ramps as data, plus type scale, voice rules, and logo rules. Read by this page and anything that needs tokens at runtime.
src/components/ui.tsx: Button, Badge, Card, Container, Section, Eyebrow. Compose these rather than restyling from scratch.
src/components/logo.tsx: The lockup and glyph, drawn inline as SVG so they recolor and scale without an asset pipeline.

The CSS and the TypeScript ramps are maintained in parallel by necessity — Tailwind needs the values at build time, and TypeScript cannot read them back out of a stylesheet. Change both. Drift shows up on this page as a swatch that does not match the component beside it.