Back to project

Supporting document · Crestline Technologies

Brand
Guidelines

The visual identity system created for Crestline Technologies — a fictional company used as the canvas for my ServiceNow self-service portal project.

Colour palette

Deep Navy
#0F2A45
Primary brand
Navy Mid
#2A4A63
Surfaces
Steel
#5A8FA8
Secondary text
Crestline Teal
#1D9E75
CTAs & actions
Teal Mid
#5DCAA5
Links & hover

Typography

Display / H1DM Sans · 300 weight
Letter-spacing: -1px
Heading style
Section title / H2DM Sans · 500 weight
Regular tracking
Section title
Body textDM Sans · 400 weight
Line-height: 1.75
Body copy used across descriptions and supporting text throughout the portal.
Labels & metadataDM Mono · 400 weight
Uppercase, tracked
LABEL STYLE

Components

Buttons

Primary
Secondary
Accent / CTA

Status badges

In progress Approved On hold Rejected

Priority

P1 Critical P2 High P3 Normal

Request card example

Hardware request Approved

REQ-00847 · 12 May 2025

MacBook Pro 14" — Requested by S. Patel

Manager approved IT fulfilment

ServiceNow portal tokens

Paste these values directly into the ServiceNow Service Portal theme CSS fields.

Header background
#0F2A45
$nav-bg / header-color
Button / CTA colour
#1D9E75
$brand-primary / btn-primary-bg
Navigation background
#2A4A63
$nav-sidebar-bg
Page background
#F0F4F8
$body-bg
Secondary text
#5A8FA8
$text-muted
Link / hover colour
#5DCAA5
$link-color
Success background
#E1F5EE
$state-success-bg
Info / pending background
#C8DEF0
$state-info-bg

Usage guidelines

Do

  • Use Deep Navy as the dominant brand colour
  • Use Crestline Teal for actions, CTAs, and approvals
  • Use DM Mono for all labels, codes, and metadata
  • Pair navy backgrounds with navy-tint or white text
  • Keep badge text in the same colour family as its background

Don't

  • Use teal as a background colour for large areas
  • Mix both typefaces in the same UI element
  • Place navy text on a navy background
  • Use font weights above 500
  • Add drop shadows or gradients to brand elements

Back to project

View Crestline project