Logo system
Four lockup formats × four colour variants = one coherent identity. The family scales from a full firm name on printed letterhead down to a 16px favicon.
The family
Every lockup ships in colour (navy), yellow (gold), black, and white. Pick the format that fits the space and the colour that fits the surface. Default to PLG; step down only when width demands it.
PLG — full name lockup
Horizontal wordmark spelling out Pierce Law Group. Primary choice wherever the full firm name should appear and width is not constrained — letterhead, print advertising, hero banners, formal documents.
/public/design-system/plg-logo-[colour|yellow|black|white].svgPL — compact lockup
Horizontal wordmark reading Pierce Law. Use in secondary placements where width is at a premium — navigation bars, footers, email headers — or when context already implies the firm name.
/public/design-system/pl-logo-[colour|yellow|black|white].svgStacked — narrow format
Two-line stacked version of the Pierce Law wordmark. Use when available width is under ~200px — square social profile images, app icons, print collateral columns, badges.
/public/design-system/pl-logo-[colour|yellow|black|white]-stacked.svgMonogram — icon format
The PL lettermark crest. Use at the smallest scales where the wordmark would be unreadable — favicons, browser tabs, social media avatars, watermarks, embossing, and engraving.
/public/design-system/pl-logo-monogram-[colour|yellow|white].svg · No black variant — use colour on light backgrounds.When to use each format
Default to PLG. Step down only when width is genuinely constrained — never choose a smaller format for aesthetic preference.
PLG
Use for: Letterhead, print ads, email signatures, website heroes, formal documents, marketing materials where the full firm name appears.
Default choice when width > 280px.
PL Horizontal
Use for: Navigation bars, footers, email headers, co-branding placements, narrow print columns where the full name has already appeared.
When width is 160–280px or "Group" is implied.
Stacked
Use for: Square social profile images, app-store listings, narrow print columns, stickers, badges where horizontal space is under ~200px.
Minimum 80px wide. Below that, use the Monogram.
Monogram
Use for: Favicons, browser tab icons, social media avatars, watermarks, embossing, engraving — any placement where a wordmark would be illegible.
Minimum 24px. Never as a standalone logo at display sizes.
Colour variant guide
Never manually recolour an SVG — always swap to the appropriate file. The right variant is determined entirely by background luminosity.
| Variant | File suffix | Place on | Never on |
|---|---|---|---|
| Colour — navy + gold | -colour | Ivory, white, light sand, paper | Navy, dark, or coloured surfaces |
| Yellow — gold only | -yellow | Navy, deep dark backgrounds | White or light (insufficient contrast) |
| Black | -black | Any light background; single-colour print | Dark or navy backgrounds |
| White | -white | Any dark or saturated background | Light or ivory backgrounds (invisible) |
Clear space & minimum size
Maintain a zone equal to the cap-height of the leading "P" on all four sides. No text, imagery, or other graphic elements may enter this zone.
File formats
Each variant ships in six formats. SVG for all screen work; WebP for social and email; PNG as a fallback; AI/EPS/PDF for print production.
| Format | Use case |
|---|---|
.svg | Web, UI, all digital placements — scales to any size without loss |
.webp | Social posts, email headers, optimised digital assets |
.png | Platforms that don't accept SVG; fallback for email clients |
.pdf | Desktop publishing and sending to print vendors |
.eps | Legacy print workflows and third-party production houses |
.ai | Source file — internal editing only, never distribute |
/public/design-system/. Full production packages (AI, EPS, PDF, PNG, WebP) are in the shared brand drive — contact the brand team for access.- Use only the supplied SVG or PNG files — never redraw or recompose
- Choose the colour variant that achieves sufficient contrast on its surface
- Default to PLG; step down to PL, Stacked, or Monogram only when width demands it
- Reserve the Monogram for favicons, avatars, and embossing — not as a display logo
- Respect clear space on all four sides equal to the cap-height of "P"
- Recolour, tint, or alter any element of the logo manually
- Place the colour (navy) version on a dark or heavily tinted background
- Stretch, condense, rotate, skew, or distort any lockup
- Apply drop shadows, glows, outlines, or gradients to the logo
- Use the logo below the minimum size for its format
- Mix lockup formats in close proximity (e.g. PLG and Monogram side by side)