SharePoint Site Design & Branding: Look Book, Themes, and Custom Styling Guide

Why SharePoint Branding Matters

A branded SharePoint environment drives adoption. When the intranet looks like it belongs to your organization — using your colors, fonts, and visual identity — employees trust it more, use it more, and identify with it as "their" company platform rather than generic Microsoft software.

Modern SharePoint Online offers significant branding capabilities without requiring custom development, including custom themes, site designs, header customization, and the SharePoint Look Book for design inspiration.

The SharePoint Look Book

The SharePoint Look Book (lookbook.microsoft.com) is Microsoft's official gallery of pre-built SharePoint site templates demonstrating modern design patterns across:

• Corporate intranets
• Team sites
• Project sites
• Department portals
• Event sites
• Community sites

Look Book templates are provisioned directly to your tenant — they're not just screenshots. Access via the SharePoint admin portal: Admin Center → Active Sites → Create → Browse templates.

Top Look Book Templates for Enterprise Use

Leadership Connection — Executive communications site with CEO spotlight, leadership blog, and video messaging. Excellent starting point for executive intranet section.

Crisis Communications — Purpose-built for emergency communications with alert banners, FAQs, and resource links. Useful as a permanent template for IT outages, policy emergencies, or business continuity events.

Department Site — Clean departmental template with news, quick links, documents, and people directory. Use as the starting point for all department sites to ensure visual consistency.

Learning Central — Training and development portal with course catalogs, featured learning paths, and onboarding resources.

New Employee Onboarding — 30-60-90 day onboarding experience with task checklists, introductory videos, and new hire resources.

Custom Themes with SharePoint Theme Generator

SharePoint themes control the primary color scheme across site headers, navigation, buttons, and link colors.

Creating a Custom Theme

Use the SharePoint Theme Generator (spthemes.z22.web.core.windows.net) to generate a theme JSON from your brand colors:

• Enter your primary brand color (e.g., #0033A0 for navy blue)
• The generator creates a full Fluent Design color palette (primary, dark alt, dark, dark shade, neutrals, white)
• Export the theme JSON

```json

{

"themePrimary": "#0033a0",

"themeLighterAlt": "#f3f6fc",

"themeLighter": "#d0daf3",

"themeLight": "#aabae8",

"themeTertiary": "#597cd1",

"themeSecondary": "#1a4bbb",

"themeDarkAlt": "#002e92",

"themeDark": "#00277b",

"themeDarker": "#001d5b",

"neutralLighterAlt": "#f8f8f8",

"neutralLighter": "#f4f4f4",

"neutralLight": "#eaeaea",

"neutralQuaternaryAlt": "#dadada",

"neutralQuaternary": "#d0d0d0",

"neutralTertiaryAlt": "#c8c8c8",

"neutralTertiary": "#a6a6a6",

"neutralSecondary": "#666666",

"neutralPrimaryAlt": "#3c3c3c",

"neutralPrimary": "#333333",

"neutralDark": "#212121",

"black": "#1c1c1c",

"white": "#ffffff"

}

```

Applying Custom Themes via PowerShell

```powershell

# Add custom theme to tenant theme gallery

Connect-PnPOnline -Url "https://contoso-admin.sharepoint.com" -Interactive

$themeJson = Get-Content "C:BrandingContosoTheme.json" | ConvertFrom-Json

$themePalette = @{

"themePrimary" = $themeJson.themePrimary

"themeLighterAlt" = $themeJson.themeLighterAlt

# ... (all palette entries)

}

Add-PnPTenantTheme -Identity "Contoso Brand Theme" `

-Palette $themePalette `

-IsInverted $false

# Apply theme to a specific site

Connect-PnPOnline -Url "https://contoso.sharepoint.com/sites/Intranet" -Interactive

Set-PnPWebTheme -Theme "Contoso Brand Theme"

```

Applying Theme to All Sites via PnP PowerShell

```powershell

# Apply brand theme to all communication sites

Connect-PnPOnline -Url "https://contoso-admin.sharepoint.com" -Interactive

$sites = Get-PnPTenantSite | Where-Object { $_.Template -like "*SITEPAGEPUBLISHING*" }

foreach ($site in $sites) {

Connect-PnPOnline -Url $site.Url -Interactive

Set-PnPWebTheme -Theme "Contoso Brand Theme"

Write-Output "Applied theme to: $($site.Url)"

}

```

Site Designs and Site Scripts

Site designs automate site configuration when a new site is created. They apply site scripts — JSON-based instructions that configure navigation, content types, columns, themes, and more.

What Site Scripts Can Configure

• Apply a custom theme
• Set the site logo
• Create lists and libraries with predefined columns
• Apply content types
• Set regional settings (timezone, locale)
• Add navigation links
• Apply a Fluent UI header/footer
• Install SPFx solutions
• Grant permissions to groups
• Send a welcome email

Example Site Script for Department Sites

```json

{

"$schema": "schema.json",

"actions": [

{

"verb": "applyTheme",

"themeName": "Contoso Brand Theme"

},

{

"verb": "setSiteLogo",

"url": "/sites/BrandingHub/SiteAssets/dept-logo.png"

},

{

"verb": "createSPList",

"listName": "Department Announcements",

"templateType": 104,

"subactions": [

{

"verb": "addSPField",

"fieldType": "Text",

"displayName": "Priority",

"isRequired": true

}

]

},

{

"verb": "addNavLink",

"url": "/sites/HR",

"displayName": "HR Portal",

"isWebRelative": false

},

{

"verb": "addNavLink",

"url": "/sites/IT",

"displayName": "IT Helpdesk",

"isWebRelative": false

}

],

"bindings": [],

"version": 1

}

```

Deploying Site Designs

```powershell

# Add site script

$scriptJson = Get-Content "C:SiteDesignsDepartmentSiteScript.json" -Raw

Add-PnPSiteScript -Title "Department Site Script" `

-Content $scriptJson `

-Description "Standard configuration for all department sites"

# Create site design using the script

$script = Get-PnPSiteScript -Identity "Department Site Script"

Add-PnPSiteDesign -Title "Contoso Department Site" `

-SiteScriptIds @($script.Id) `

-WebTemplate "64" ` # 64 = Team site, 68 = Communication site

-Description "Standard department site with Contoso branding" `

-PreviewImageUrl "https://contoso.sharepoint.com/SiteAssets/dept-preview.png"

```

Header and Footer Customization

Site Header Options

SharePoint Communication Sites offer header layout options:

• Minimal: Small header, clean look
• Compact: Logo + navigation on same row (recommended for most intranets)
• Standard: Traditional SharePoint header (logo above navigation)
• Extended: Full-height hero image header (not recommended for functional intranet)

Configure via Site Settings → Change the look → Header

Custom Organization Logo

Upload your organization logo (PNG, 200x200px recommended, transparent background) to the site's Site Assets library, then apply:

```powershell

# Set custom site logo

Connect-PnPOnline -Url "https://contoso.sharepoint.com/sites/Intranet" -Interactive

Set-PnPWeb -SiteLogoUrl "/sites/Intranet/SiteAssets/company-logo.png"

```

SharePoint Framework (SPFx) Header/Footer

For advanced header/footer customization (custom nav, mega menus, external app links), use SharePoint Framework Extensions:

• Application Customizer: Adds header/footer HTML to every page in the site collection
• Use this for: persistent navigation bars, accessibility toolbars, GDPR cookie notices, company-wide alerts

OOTB SharePoint doesn't support truly custom HTML headers/footers without SPFx. For most enterprise clients without SPFx development capacity, the built-in header options plus a Hero or Text web part at the top of key pages suffice.

Custom Web Fonts

SharePoint uses Fluent UI typography by default (Segoe UI, Segoe UI Light). You cannot change site fonts without SPFx customizations.

Option 1 (No-code): Stick with Segoe UI — it's clean, professional, and fast-loading. Customize character sizes and colors via Fluent theme.

Option 2 (SPFx): Inject custom CSS via Application Customizer extension:

```javascript

// SPFx Application Customizer - custom font injection

import { override } from '@microsoft/decorators'

import { BaseApplicationCustomizer } from '@microsoft/sp-application-base'

export default class FontCustomizerApplicationCustomizer

extends BaseApplicationCustomizer<{}> {

@override

public onInit(): Promise {

const style = document.createElement('style')

style.innerHTML = `

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

.ms-siteHeader, .ms-compositeHeader, [class*="pageTitle"], h1, h2, h3 {

font-family: 'Inter', 'Segoe UI', sans-serif !important;

}

`

document.head.appendChild(style)

return Promise.resolve()

}

}

```

Color Accessibility (WCAG 2.1)

All branding must meet WCAG 2.1 AA color contrast requirements for accessibility compliance (required for government, healthcare, and most enterprise environments):

• Normal text: 4.5:1 contrast ratio minimum
• Large text (18pt+): 3:1 contrast ratio minimum
• UI components and icons: 3:1 contrast ratio minimum

Test your brand colors at: webaim.org/resources/contrastchecker

Common issue: White text on brand-colored buttons. If your primary brand color is a medium blue (#4472C4), white text passes. If it's a light yellow (#FFD700), white text fails — use dark text instead.

Branding Governance

Maintaining visual consistency across a large SharePoint environment requires governance:

Branding Governance Checklist

• [ ] Custom theme applied to all sites via PnP script
• [ ] Organization logo uploaded to all sites (not default SharePoint logo)
• [ ] Site naming convention enforced (prevents "My Team Site" with no context)
• [ ] Header layout standardized (compact recommended)
• [ ] Background images: only approved images from brand asset library
• [ ] News posts: hero image required (no image = fallback brand-colored image, not missing)
• [ ] Colors: only theme colors used in text and section backgrounds (no manual hex codes)
• [ ] Icon style: Fluent UI icons only (no emojis, no third-party icon sets in production)

Branding Asset Library

Create a dedicated SharePoint site collection as your Brand Hub:

```

Brand Hub (Communication Site)

├── Site Assets

│ ├── Logos (PNG, SVG, various sizes)

│ ├── Icons (approved icon set SVGs)

│ ├── Photography (approved brand images)

│ └── Templates (site design preview images)

├── Brand Guidelines (PDF)

├── SharePoint Branding Guide (SharePoint page)

└── Theme Files (JSON export of all approved themes)

```

Share the Brand Hub URL with all site owners and reference it in your SharePoint governance documentation.

Conclusion

Professional SharePoint branding is achievable without custom development for the vast majority of enterprise requirements. Use the SharePoint Look Book for design inspiration, the Theme Generator for color palette creation, and Site Designs for automated provisioning. For advanced customization, SPFx Application Customizers provide full control.

EPC Group handles complete SharePoint branding and design engagements — from theme creation to custom SPFx header/footer development. Contact us to transform your SharePoint environment's visual identity.