DCoE — Brand Guidelines

01Logo

The DCoE logo system consists of three lockup formats and three color variants. Always use the official logo files from the brand asset library.

Logo lockups

The DCoE logo is available in horizontal, vertical, and icon-only configurations for different layout contexts.

Horizontal lockup

Primary use — marketing, headers, documents

Vertical lockup

Stacked — social media, square formats

Icon mark

Compact — favicons, app icons, watermarks

Color variants

The logo ships in three color modes for different background contexts.

Horizontal lockup

Blue (primary)

On white / light backgrounds

↓ PNG ↓ SVG

White (reversed)

On dark / photo backgrounds

↓ PNG ↓ SVG

Black (mono)

Single-color print contexts

↓ PNG ↓ SVG

Vertical lockup

Blue (primary)

On white / light backgrounds

↓ PNG ↓ SVG

White (reversed)

On dark / photo backgrounds

↓ PNG ↓ SVG

Black (mono)

Single-color print contexts

↓ PNG ↓ SVG

Icon Mark

Blue (primary)

On white / light backgrounds

↓ PNG ↓ SVG

White (reversed)

On dark / photo backgrounds

↓ PNG ↓ SVG

Black (mono)

Single-color print contexts

↓ PNG ↓ SVG

Clear space & minimum size

Maintain a clear zone equal to the height of the "Drop" shape around all edges of the logo. The minimum width for the horizontal lockup is 120px on screen and 30mm in print, vertical lockup, icon is 60px and 15mm in print.

ℹ

Always use the master Figma component for branding — editing it will propagate changes across all instances and child components.

02Color palette

DCoE's color system is built on a primary blue, an accent green, a secondary navy, a full grayscale, and four functional colors. All values are available as Figma variables.

Primary — DCoE Blue

The core brand color, used for primary actions, headers, links, and brand-forward applications.

DCoE Blue

Primary / Fill / Default — The primary brand identifier

HEX#007FAD

RGB0, 127, 173

HSL196°, 100%, 34%

Token--primary-default

Darker

#003F57

fill/darker

Dark

#005F82

fill/dark

Default

#007FAD

fill/default

Light

#B2D8E6

fill/light

Lighter

#D9ECF3

fill/lighter

Accent — Green

The accent green palette is used as a secondary brand color for highlights, visual accents, and complementary UI elements.

Darker

#143725

secondary/darker

Dark

#29573D

secondary/dark

Default

#70DAA0

secondary/default

Light

#B9F9D3

secondary/light

Lighter

#DAFCE6

secondary/lighter

Secondary — Navy

Deep navy tones for backgrounds, page chrome, footer areas, and dark-mode interfaces.

Darker

#0F1922

Dark

#1A2A3A

Default

#2D3E50

Light

#4A6580

Lighter

#8BA4B8

Grayscale

Neutral tones for body text, borders, backgrounds, and supporting content.

Gray 900

#212121

Gray 700

#565C65

Gray 500

#A9AEB1

Gray 300

#DFE1E2

Gray 100

#F0F0F0

Functional

Reserved for UI states and alerts. Never use as decorative brand colors.

Error

#B41D39

Errors, critical states

Success

#4AA564

Confirmations

Warning

#E5A000

Caution notices

Info

#009EC1

Informational

⚠

You can find more detailed information about the color tokens and variants at the following Figma Link.

03Typography

DCoE uses Poppins as its sole typeface across all touchpoints — headings, body, and UI. Line height is 1.57 (157%).

Brand typeface

Poppins

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Google Fonts · Weights: 400, 500, 600, 700 · --typography/font-family/body-font

Type scale

Element	Sample	Spec
H1	Section heading	Poppins Bold / 31px
H2	Subsection	Poppins Bold / 24px
H3	Card title	Poppins Bold / 20px
Body	Default body text	Poppins Regular / 16px
Body Bold	Strong emphasis	Poppins Bold / 16px
Caption	Small text and labels	Poppins Regular / 13px

⚠

You can find more detailed information about typography tokens and variants at the following Figma Link.

04Iconography

DCoE integrates USWDS and Bootstrap icon libraries. Custom icons can be added following the standard size grid.

Standard icon sizes

16×16
@1x

32×32
@2x

128×128
@3x

256×256
@4x

ℹ

Always export icons at @1x and @2x for retina/high-DPI display support. Align icons to the pixel grid for crisp rendering. Minimum touch target for interactive icons is 44×44px.

3D Icons

Circle Icons

05Photography

DCoE photography should convey professionalism, digital innovation, and collaboration. The standard media ratio is 16:9.

16:9 media component

Photo guidelines

Attribute	Guidance
Tone	Professional, clean, modern. Natural lighting preferred.
Subjects	Technology, collaboration, workspaces, digital infrastructure.
Composition	Asymmetric, clear focal point. Allow space for text overlays.
Color grading	Neutral to cool tones. Align with the DCoE blue-gray palette.
Figma import	Mac: `⇧ ⌘ K` Win: `Ctrl ⇧ K`

06Covers

Decorative cover that integrate with content as backgrounds and section.

Dark geometric — triangular mesh

Light geometric — hexagonal grid

Download PNG

07Assets

Video Call background

Corporate background to use for video calls

Slidedeck

Corporate slide presentation

Google Drive link ⎋

08Co-branding

DCoE supports co-branding with partner organizations using a dedicated Figma component system.

Horizontal co-brand layout

Co-branding rules

DCoE logo always appears first (left / top)
Partner logos must be equal or smaller visual weight
Use the master Figma component — not individual instances
Formats: vertical, horizontal, icon, text, branding bar
Maintain standard clear space between brand marks

09Do's & Don'ts

Quick-reference brand compliance rules across the entire visual identity system.

Do

Use official logo files from the asset library
Maintain minimum clear space around the logo
Use primary blue (#007FAD) as the lead brand color
Use Poppins for all text — headings, body, and UI
Apply 16:9 ratio for standard media
Use USWDS / Bootstrap icons at standard sizes
Test color contrast for WCAG AA

Don't

Stretch, rotate, or distort the logo
Change logo colors beyond the 3 approved variants
Use functional colors as primary brand colors
Use unauthorized fonts on official materials
Place the logo on low-contrast backgrounds
Break pattern tiling with improper cropping
Add shadows, gradients, or effects to the logo

10Changelog

Version history and updates to the DCoE brand guidelines.

Date	Version	Notes
Mar 2026	1.1.0	Added accent green palette (#DAFCE6 → #143725) from Figma design tokens. Unified typeface to Poppins only (removed Inter). Updated heading color to #1C1E1F, body text to #565C65. Simplified sidebar (removed bullets and dividers). Header changed to white with #DFE1E2 border. Hero updated to white background. Reduced main content top spacing. Background set to white throughout.
Mar 2026	1.0.0	Initial brand guidelines release — logo, color, typography, iconography, photography, patterns, co-branding, and usage rules.