PBS — Brand Guidelines | Public Builders and Suppliers

00

Brand Overview

Mission

To deliver exceptional residential and commercial construction solutions with uncompromising quality, transparency, and innovation.

Vision

To be the most trusted name in building and construction — known for modern design, structural excellence, and lasting partnerships.

Values

Integrity · Precision · Innovation · Reliability · Sustainability — the pillars that drive every project and decision at PBS.

01

Logo

The PBS logo is an architectural lettermark — the initials "P", "B", and "S" are designed to resemble a city skyline of interconnected buildings rising from a curved horizon. The curved horizon at the base represents the globe, symbolizing PBS's global vision and worldwide reach. Together, it conveys growth, construction, and structural ambition on a global scale.

Primary — Light Background

Primary — Dark Background

Primary Color Logo

Logo Construction

The logo was built on a precise geometric grid system. Every angle, proportion, and curve was carefully calculated to achieve structural harmony — reflecting the precision and craftsmanship that PBS brings to every project.

Logo + Wordmark Lockup

When the logo is used alongside the full company name, use these approved lockups only. The wordmark uses Montserrat Bold for "PUBLIC BUILDERS" and Montserrat Medium for "& SUPPLIERS".

PUBLIC BUILDERS & SUPPLIERS

Horizontal Lockup

PUBLIC BUILDERS & SUPPLIERS

Stacked Lockup

02

Color Palette

The PBS color system is derived from the logo's architectural charcoal tone. The palette balances dark, structural tones with warm metallic accents — projecting strength, premium quality, and modern sophistication.

Primary Colors

Primary / Logo

Charcoal

HEX#3C3C3E

RGB60, 60, 62

HSL240°, 2%, 24%

CMYK0, 0, 0, 76

Headings / Darkest

Deep Black

HEX#1A1A1C

RGB26, 26, 28

HSL240°, 4%, 11%

CMYK0, 0, 0, 89

Accent Colors

Primary Accent

Warm Gold

HEX#C9A96E

RGB201, 169, 110

HSL39°, 46%, 61%

Accent Dark

Brass

HEX#A68B4B

RGB166, 139, 75

HSL42°, 38%, 47%

CTA / Links

Slate Teal

HEX#2A9D8F

RGB42, 157, 143

HSL173°, 58%, 39%

Neutrals & Backgrounds

Body Text

Slate

HEX#6B6B70

RGB107, 107, 112

Secondary Text

Silver

HEX#B0B0B5

RGB176, 176, 181

Borders / Dividers

Cloud

HEX#EDEDEF

RGB237, 237, 239

Page Background

Snow

HEX#F7F7F8

RGB247, 247, 248

Cards / Surfaces

White

HEX#FFFFFF

RGB255, 255, 255

Semantic / Functional Colors

Success

Forest

HEX#2D8F5E

Warning

Amber

HEX#E8A838

Error

Brick Red

HEX#C4453A

Color Usage Ratio

Neutrals 60%

Charcoal 25%

Gold 10%

Teal 5%

03

Typography

PBS uses a two-font system designed for clarity and architectural elegance. Montserrat — a geometric sans-serif — mirrors the angular, structured form of the logo. Inter provides exceptional readability for body text and UI elements.

Primary Typeface Google Fonts — Free

Montserrat

Use for: Headlines, subheadings, navigation, buttons, logo wordmark, hero text, feature titles

Aa Light — 300

Aa Regular — 400

Aa Medium — 500

Aa SemiBold — 600

Aa Bold — 700 ★

Aa ExtraBold — 800

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Secondary Typeface Google Fonts — Free

Inter

Use for: Body text, paragraphs, descriptions, form fields, captions, metadata, UI labels

Aa Light — 300

Aa Regular — 400 ★

Aa Medium — 500

Aa SemiBold — 600

Aa Bold — 700

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Type Scale

Display Montserrat Bold · 72px / 80px · -1.5px

Building Tomorrow

H1 Montserrat Bold · 48px / 56px · -1px

Our Projects

H2 Montserrat SemiBold · 36px / 44px · -0.5px

Why Choose PBS

H3 Montserrat SemiBold · 24px / 32px · -0.25px

Residential Construction

H4 Montserrat Medium · 20px / 28px

Project Details

Body Inter Regular · 16px / 26px

Public Builders and Suppliers delivers exceptional residential and commercial construction projects with a focus on quality, innovation, and client satisfaction.

Small Inter Regular · 14px / 22px

Captions, metadata, and supplementary information use this size.

Overline Montserrat Medium · 12px / 16px · 2px tracking · Uppercase

Section Label

Text Logo Usage

When to Use Text-Only Logo

Favicon and very small spaces (below 80px)
Monochrome printing where detail is lost
Embroidery and engraving applications
Social media profile icons

Font: Montserrat Bold, 700 weight
Tracking: 3px letter-spacing
Case: Always uppercase

04

Web & Digital Guidelines

Standards for implementing the PBS brand across websites, web apps, and digital platforms. These guidelines ensure a consistent, premium experience across all screen sizes.

Website Color Mapping

Page Background

#F7F7F8 Snow

Header / Footer

#1A1A1C Deep Black

GET A QUOTE

Primary CTA Button

#C9A96E Warm Gold

LEARN MORE

Secondary CTA

#3C3C3E Charcoal

View Project →

Links / Tertiary

#2A9D8F Slate Teal

CSS Design Tokens

CSS

:root {
  /* ─── Brand Colors ─── */
  --color-primary:        #3C3C3E;
  --color-primary-dark:   #1A1A1C;
  --color-primary-light:  #5A5A5C;

  /* ─── Accent ─── */
  --color-accent:         #C9A96E;
  --color-accent-dark:    #A68B4B;
  --color-accent-light:   #D4BC8A;
  --color-cta:            #2A9D8F;
  --color-cta-hover:      #238578;

  /* ─── Neutrals ─── */
  --color-text:           #3C3C3E;
  --color-text-secondary: #6B6B70;
  --color-text-muted:     #B0B0B5;
  --color-border:         #EDEDEF;
  --color-surface:        #FFFFFF;
  --color-background:     #F7F7F8;

  /* ─── Semantic ─── */
  --color-success:        #2D8F5E;
  --color-warning:        #E8A838;
  --color-error:          #C4453A;

  /* ─── Typography ─── */
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ─── Spacing Scale ─── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;

  /* ─── Border Radius ─── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 1px 3px rgba(26,26,28,0.06);
  --shadow-md:  0 4px 12px rgba(26,26,28,0.08);
  --shadow-lg:  0 8px 30px rgba(26,26,28,0.12);
  --shadow-xl:  0 16px 50px rgba(26,26,28,0.16);
}

Button Styles

Primary CTA Warm Gold bg · Deep Black text · Montserrat SemiBold 14px · 2px tracking

Secondary Charcoal bg · White text · Montserrat SemiBold 14px · 2px tracking

Outline Transparent bg · Charcoal border & text · Montserrat Medium 14px

Ghost / Link No bg · Slate Teal text · Inter Medium 14px · Underline on hover

Layout Guidelines

Grid System

12-column grid with 24px gutters. Max content width: 1200px. Side padding: 24px (mobile) / 48px (tablet) / 64px (desktop).

Card Design

White background, 12px border-radius, --shadow-md on rest, --shadow-lg on hover. 24px internal padding.

Border Radius

Buttons: 8px. Cards: 12px. Modals: 16px. Avoid fully rounded (pill) shapes — angular designs align better with the PBS brand.

Spacing

Use an 8px base grid. Section spacing: 96px (desktop) / 64px (mobile). Component gaps: 24px. Inline spacing: 8–16px.

05

Quick Reference

Primary Color

Charcoal #3C3C3E

Accent Color

Warm Gold #C9A96E

CTA Color

Slate Teal #2A9D8F

Heading Font

Montserrat Bold

Body Font

Inter Regular

Background

Snow #F7F7F8

Public Builders & Suppliers

Brand Overview

Mission

Vision

Values

Logo

Logo Construction

Logo + Wordmark Lockup

Color Palette

Primary Colors

Charcoal

Deep Black

Accent Colors

Warm Gold

Brass

Slate Teal

Neutrals & Backgrounds

Slate

Silver

Cloud

Snow

White

Semantic / Functional Colors

Forest

Amber

Brick Red

Color Usage Ratio

Typography

Montserrat

Inter

Type Scale

Text Logo Usage

When to Use Text-Only Logo

Web & Digital Guidelines

Website Color Mapping

Page Background

Header / Footer

Primary CTA Button

Secondary CTA

Links / Tertiary

CSS Design Tokens

Button Styles

Layout Guidelines

Grid System

Card Design

Border Radius

Spacing

Quick Reference

Primary Color

Accent Color

CTA Color

Heading Font

Body Font

Background