Brand Guidelines

Creative Ideas Brand System

The standards for how the Creative Ideas Construction Services identity is built and applied — from the jobsite fence to the fleet door, the uniform, the proposal, and every digital surface.

Creative Ideas Construction Services Creative Ideas Construction Services
01 — Logotype

The Logo

The Creative Ideas mark pairs a structural building icon with a solid, engineered wordmark. The icon reads as a rising frame — columns, elevation, and vertical growth — while the gradient runs from bright blue down to deep navy, signalling craftsmanship built on a stable foundation.

Proper Usage:
  • Keep clear space around the mark equal to the width of the icon on all sides.
  • Use the vector or high-resolution file for signage, vehicle wraps, and print.
  • Scale proportionally — never stretch to fill a banner or truck panel.
  • Place on clean, high-contrast backgrounds so it stays legible from a distance.
Restrictions:
  • Do not recolor the icon gradient or swap in job-specific colors.
  • Do not add bevels, outlines, drop shadows, or "3D" effects.
  • Do not place the mark over busy jobsite photography without a solid plate behind it.
Creative Ideas Creative Ideas
Formats: PNG (logotype) · SVG (icon mark)
Clear space: One icon-width of empty space on every side
Min size: 120px wide on screen · 30mm in print · 6in on vehicles
Orientation: Horizontal lockup only — do not stack or re-arrange
02 — Versions

Approved Logo Versions

Four approved treatments cover every surface the brand lands on — from a white proposal cover to a navy site banner to a single-color vinyl decal. Pick the version that gives the strongest contrast against its background.

Primary logo
✓ Primary
Full color on white
The default. Use on white or very light neutral backgrounds — documents, website, proposals.
White logo
✓ Reversed
All-white on navy
For dark backgrounds, site banners, and photography plates. Keeps full legibility at distance.
Black logo
✓ Single color
Solid black
For faxed forms, permits, engraving, embroidery digitizing, and one-color print jobs.
Icon mark
✓ Icon only
Building mark
Use where the full wordmark won't read: hard hats, app icons, social avatars, small decals.
White logo on black
✓ Reversed
All-white on black
High-contrast option for equipment panels, dark apparel, and night-visible signage.
Logo on concrete
✓ Neutral
Full color on light grey
Acceptable on concrete-tone and light material backgrounds up to roughly 15% grey.
!
Production note: the reversed and single-color versions shown here are rendered from the master file. Before sending anything to a sign shop, embroiderer, or vinyl printer, export dedicated white and black vector files so the artwork is not dependent on a software filter.
03 — Application

Website & Digital Headers

The header is the first impression online. Use the full logotype at a minimum height of 28px, keep it left-aligned, and never place the dark logo on a dark navigation bar.

Creative Ideas
Services Projects GET A QUOTE
✓ Correct
Light header
Full color logo on white, with the Safety Orange reserved for the single primary action.
Creative Ideas
Services Projects GET A QUOTE
✓ Correct
Navy header
Reversed white logo on the deep navy bar. Contrast stays strong at every screen size.
Do not use
Services Projects
✗ Incorrect
Dark logo on dark bar
The black wordmark disappears into the navy. Always switch to the reversed version.
Do not use
Services Projects
✗ Incorrect
Undersized logo
Below 28px the icon detail collapses and the wordmark becomes unreadable on mobile.
04 — Application

Jobsite, Signage & Safety

On site, the logo is read from a moving vehicle or across a lot. Legibility beats decoration every time: solid backgrounds, generous clear space, and no logo placement on high-visibility safety striping.

Site banner
✓ Correct
Site banner & hoarding
Reversed logo on a solid navy field. Minimum 18in wide on perimeter fencing.
Safety orange
✓ Correct
Safety Orange plate
White logo on Safety Orange for high-visibility notices and temporary site marking.
Do not use
✗ Incorrect
On hazard striping
Never lay the mark over caution striping — it destroys legibility and dilutes a safety signal.
05 — Icon

The Building Mark

The building mark is the compressed form of the identity. Use it wherever the full lockup would be unreadable — hard hat decals, app icons, favicons, social avatars, equipment tags, and embroidered caps.

Use the icon alone when:
  • The space is square or vertical (avatars, app tiles, hard hat fronts).
  • The full wordmark would render under 120px wide.
  • The Creative Ideas name already appears adjacent in text.
Never:
  • Rebuild the icon from scratch or trace it — always use the supplied SVG.
  • Crop the mark or cut off the base of the structure.
Square — app icons & favicons
Icon
Icon
Icon
Round — social avatars & decals
Icon
Icon
Icon
Format: SVG (scales to any size without loss)
Min size: 16px favicon · 2in hard hat decal
06 — Naming

Writing "Creative Ideas" in Text

In plain text — proposals, emails, contracts, social posts — write the name as two words with a capital C and a capital I. The full legal descriptor "Construction Services" follows the name on first mention and in all formal documents.

Creative Ideas
✓ Correct
Standard short form for body copy after first mention.
Creative Ideas Construction Services
✓ Correct
Full form — use on first mention, contracts, bids, and all legal documents.
CreativeIdeas
✗ Incorrect
Never close the space between the two words.
CREATIVE IDEAS / creative ideas
✗ Incorrect
Do not set the name in all caps or all lowercase in running text. Headline styling is a design choice, not a naming rule.
07 — Color System

Primary Colors

Blue carries the brand; black and white carry the information. These four colors should account for roughly 90% of any Creative Ideas surface — backgrounds, structural elements, and typography.

Bright Blue
RGB 21 · 132 · 255
Links, active states, highlights, and digital accents.
Deep Navy
RGB 28 · 53 · 159
Headers, banners, signage fields, and vehicle graphics.
Structural Black
RGB 0 · 0 · 0
The wordmark, headlines, and primary body text.
Clean White
RGB 255 · 255 · 255
Page backgrounds, reversed type, and breathing room.
08 — Color System

Accent — Safety Orange

Safety Orange is the one warm note in the system and it is deliberately rationed. Treat it the way it works on a real jobsite: it marks the thing that needs attention — the primary button, the deadline, the call to action — and nothing else.

Safety Orange
RGB 249 · 123 · 34
Primary buttons, key stats, and high-visibility site elements.
Orange Deep
RGB 210 · 98 · 15
Hover and pressed states for orange buttons only.
Steel Grey
RGB 100 · 116 · 139
Secondary text, captions, dividers, and specification tables.
The 90/10 rule: if more than one element on a screen or page is Safety Orange, the accent has stopped working. One orange element per view.
09 — Color System

The Brand Gradient

A single gradient, taken directly from the icon mark: bright blue at the top falling to deep navy at the base — light at the roofline, solid at the foundation. Use it for large fields, banners, and hero panels. Never inside the logo itself.

Vertical gradient
✓ Primary
Vertical (structural)
180deg · #3772FA → #203EAD → #1C359F
Diagonal gradient
✓ Secondary
Diagonal (digital)
135deg · #3772FA → #1C359F
Do not use
✗ Incorrect
Gradient shifted
Do not re-map the gradient into other hues or apply it to the wordmark.
10 — In the Field

Brand Mockups

How the identity behaves once it leaves the screen. Each application below shows the approved logo version, the correct background field, and where the Safety Orange accent is allowed to appear.

Applied — real-world
Creative Ideas building signage and site hoarding
Site presence
Building signage & hoarding
Icon mark at facade scale on the white panel, full logotype on the perimeter fence banner, and the reversed icon on the dark mesh screen — three versions working together on one site.
Creative Ideas office reception and collateral
Environment
Office reception & collateral
Dimensional wall logotype behind the desk, carried through to the laptop, mug, and brochure stand. Blue accent panel uses the icon as a repeating graphic device.
Creative Ideas dump truck fleet and jobsite yard sign
Fleet
Dump truck & yard sign
Icon mark on the cab door and repeated large on the bed for road visibility. The full logotype stays on the yard sign, where it is read at a standstill.
Creative Ideas branded excavator on site
Equipment
Heavy equipment
Full logotype along the boom arm where there is a long, flat run; icon mark alone on the cab side panel. Never wrap the lockup around a curved or hinged surface.
Application specs
Office reception logo
Environment
Office reception wall
Dimensional brushed-metal or acrylic letters, full color logo, mounted at eye level with a gradient reveal on the desk face.
Uniform logo patch
Hard hat decal
Apparel & PPE
Hi-vis vest & hard hat
Logo on a white patch so it never competes with the hi-vis field. Icon-only decal on the hard hat front, 2in minimum.
Building banner logo
Site presence
Building wrap & hoarding
Reversed logo on the brand gradient, sized to read from the street. Keep one logo per elevation — do not repeat across panels.
LIC #000000 · 555 000 0000
Fleet
Truck & van doors
Full color logo on the white panel, minimum 6in wide. License and phone sit in the gradient strip with a thin orange rule above.
Yard sign logo
Another project built by
NOW BUILDING
Signage
Jobsite yard sign
White board with a navy keyline border. Full color logo on top, supporting line in Steel Grey, single orange tag for the status.
Business card back
Business card front
PROJECT MANAGER
555 000 0000 · creativeideas.com
Stationery
Business cards
Gradient back carrying the icon alone; white front with the full logo, an orange rule, and contact details in Steel Grey.
11 — Protection

Logo Misuse — What Not to Do

Every example below has shown up on a real contractor's signage at some point. None of them are acceptable for Creative Ideas. When in doubt, use the supplied file at its original proportions and colors.

Do not stretch
✗ Never
Stretch horizontally
Distorts the wordmark to fill a banner width.
Do not squish
✗ Never
Compress vertically
Crushes the structure of the icon mark.
Do not rotate
✗ Never
Rotate or tilt
The mark is always level — it represents structure.
Do not skew
✗ Never
Skew or italicize
Fake perspective undermines a builder's credibility.
Do not add shadow
✗ Never
Add drop shadows
No hard shadows, bevels, or embossing.
Do not glow
✗ Never
Apply glows
Outer glow reads as clip-art, not construction.
Do not outline
✗ Never
Add outlines
Never stroke the logo to force contrast — change the background instead.
Do not recolor
✗ Never
Recolor the mark
No seasonal, project, or client-matched color versions.
Do not blur
✗ Never
Use low-resolution files
Blurry, upscaled artwork on signage. Always start from vector.
Do not fade
✗ Never
Fade or ghost the logo
Low opacity as a "watermark" kills legibility.
Do not clash
✗ Never
Clash blue on blue
The gradient icon disappears against a brand blue field.
Do not use busy background
✗ Never
Place on busy patterns
Textures and photography need a solid plate behind the mark.
12 — Typography

Typography

Archivo carries headlines — it is squared, engineered, and matches the geometry of the wordmark. Inter carries everything that has to be read carefully: specifications, scopes of work, contracts, and body copy.

Proper Usage:
  • Archivo Black / Extra Bold for headlines, signage, and vehicle lettering.
  • Inter Regular for body copy, proposals, and specification tables.
  • Uppercase with wide letter-spacing for labels, tags, and site notices.
Restrictions:
  • Do not substitute condensed, slab, or script faces to "look more industrial."
  • Do not set body copy below 14px, or in Archivo — it is a display face.
  • No outlines, shadows, or stretched type on signage.
Display — Archivo Black (900)
Headlines, hero statements, signage, and vehicle lettering. Set uppercase with tight tracking for maximum impact at distance.
Built to Last
Heading — Archivo Extra Bold (800)
Section titles and page headings. The workhorse weight across the website and printed proposals.
Commercial & Residential Construction
Sub-heading — Archivo Semi Bold (600)
Secondary headers and card titles. Provides hierarchy without competing with the main heading.
Project Scope & Deliverables
Body — Inter Regular (400)
Extended reading: scopes of work, contracts, specifications, and web copy. Use Medium (500) for emphasis rather than bold.
Creative Ideas Construction Services delivers ground-up builds, tenant improvements, and renovation work on schedule and to specification.

Get the brand assets

The primary logotype and the building icon mark. For sign shops and embroiderers, request dedicated one-color vector files before production.