Confident
Clear hierarchy and decisive contrast.
Digital design systemDraft for team reviewPELLING · DIGITAL DESIGN SYSTEM · V1.0
Confident structure.
Expressive energy.
A practical digital reference for creating consistent Pelling websites, graphics, presentations and PDFs.
BRAND CHARACTER
Clarity leads.
Energy follows.
Pelling’s digital language is direct, commercially focused and high-contrast. Strong grids and generous spacing create confidence; bright gradients and dry brushwork bring movement and personality.
The expressive layer supports the message. It should never compete with copy, weaken hierarchy or make every surface noisy.
Commercial
Design choices serve purpose and outcomes.
Intelligent
Structure before visual flourish.
Expressive
Energy is deliberate, never decorative noise.
01 · FOUNDATIONS
Logo
The exact website mark is the primary asset. Preserve its native 229:49 ratio, give it room and choose the variant by surface contrast.
Dark, saturated or darkened image surfaces
White or pale neutral surfaces
xx
CLEAR SPACE
Half the displayed logo height
Keep at least this amount on every side. This is a normalised operational rule for digital production.
- Never stretch or crop the mark
- Never add outlines, shadows or effects
- Check contrast over photography
- Recommended minimum: 120px wide
02 · FOUNDATIONS
Colour
Charcoal and the three-stop Pelling blue gradient are the core surfaces. Cyan is the primary editorial highlight; brighter accents and gradients differentiate services and campaigns.
Pelling charcoal
#1D252C
Navy 900
#0F2027
Navy 700
#203A43
Navy 500
#2C5364
Cyan
#63D7DC
Teal
#0099A8
Pink
#FF0084
Purple
#B182E0
Neon green
#92FE9D
Pelling blue
#0F2027 → #2C5364
Purple blue
#8E2DE2 → #4A00E0
Red purple
#C31432 → #240B36
Purple pink
#33001B → #FF0084
Blue light blue
#000046 → #1CB5E0
Orange yellow
#F12711 → #F5AF19
Green light green
#007C5E → #92FE9D
03 · FOUNDATIONS
Typography · Manrope
Use named visual roles rather than styling by HTML heading tag. This keeps hierarchy consistent across web, image and PDF outputs.
Strategic insight meets intelligent creativity.
Design that works in real life.
Opening doors through new branding.
Clear, commercially aware communication with room to breathe.
Pelling combines specialist skills to create meaningful results for clients.
Read more about our approach
work services about insights contact
Pelling Marketing by Design · Company no. 06474930
04 · FOUNDATIONS
Spacing and layout
A 4px base scale keeps compositions systematic. Responsive section spacing creates breathing room without relying on page-specific values.
4
8
12
16
24
32
40
48
64
80
96
144
20–40px
Related content groups
40–80px
Default section spacing
80–160px
Major narrative breaks
Square first
4–5px only for controls and campaign CTAs
Container: up to 1320px · Gutters: 12px desktop / 16px mobile
05 · BACKGROUND SYSTEM
Gradient first. Brushwork second.
The live visual effect is built from two separate layers: an approved linear gradient plus transparent SVG brushwork. Keep that construction editable.
01
Choose one approved gradient
02Add one brush family at 25%
03Place copy above and check contrast
Transparent overlays
SVG patterns and prospect emphasis marks can be positioned, scaled and layered independently.
Ready-made backgrounds
Landscape and square PNG recipes are intentionally opaque, flattened compositions.
Pelling blue · horizontal
HPBS · normal · 25%
Core editorial surface
Pelling blue · zigzag
ZZAS · soft-light · 25%
Services and section breaks
Pelling blue · broad patch
DPBP · overlay · 25%
Core campaign surface
Pelling blue · wave
WSP · overlay · 25%
Editorial and insight content
Purple blue · zigzag
ZZAS · overlay · 25%
Branding and creative services
Red purple · wave
WSP · overlay · 25%
Expressive campaign surface
Red purple · arch
RP · overlay · 25%
Contact and conversion
Purple pink · zigzag
ZZAS · overlay · 25%
High-energy campaign surface
Blue light blue · arch
RP · overlay · 25%
People and culture content
Orange yellow · ribbon
LRSP · overlay · 25%
Warm campaign CTA
Green · broad patch
DPBP · overlay · 25%
Strategy and growth services
Green · wave
WSP · soft-light · 25%
Insights and positive outcomes06 · COMPONENTS
Actions with intent
Pelling uses different action patterns for different jobs. Preserve those distinctions so conversion controls do not flatten the editorial experience.
EDITORIAL ACTION
Read more about our approachNavigation and narrative progressionCONVERSION ACTION
Book a discovery callLead-generation and campaign momentsCards and content blocks
Square edges are the default.
Controls and campaign CTAs
A small functional radius.
Pill treatments
A legacy exception, not the default.
07 · MAKING WITH THE SYSTEM
One system. Three channels.
Start with the tokens, select an approved background recipe and use the exact logo. Then apply the production checks for the output.
HTML
- Load local Manrope 300–800
- Separate semantic HTML from visual type roles
- Keep gradient and brush layers editable
- Provide visible focus and reduced motion
- Check mobile hierarchy and contrast
Images
- Start from an approved landscape or square recipe
- Keep essential copy inside crop-safe margins
- Use one brush, normally at 25% opacity
- Place the exact SVG logo
- Inspect at actual delivery size
PDFs
- Embed Manrope where possible
- Retain vector text and logo
- Use spacing tokens for page margins
- Prevent widows, clipping and broken links
- Render and proof every page
HUMAN REVIEW GATE
AI-produced work remains a candidate.
A person checks copy, logo use, visual hierarchy, accessibility, cropping and context before anything is released.
08 · REVIEW NOTES
Decisions made for consistency
The source website contains natural implementation variation. These proposed canonical decisions make the extracted system repeatable and are presented for team review.
Synthetic 900
Use Manrope ExtraBold 800 for heavy labels and CTAs.
Heading tags vary visually
Choose a named typography role rather than styling globally by h1–h6.
#212529, black and charcoal alternate
Use #1D252C for text on light surfaces.
A legacy blue gradient ends at #203A43
Use the repeated three-stop Pelling blue gradient.
Pages include one-off spacing
Use the repeated half, standard and double fluid section tokens.
Editorial, campaign and pill actions coexist
Use line CTAs for editorial actions, green rectangles for conversion, and pills exceptionally.
09 · DOWNLOADS
Use the source, not a copy.
Asset packs are separated by purpose: movable transparent marks, editable website overlays and fixed ready-made backgrounds.
PDF
Design system reference
Seven-page review and production summary
↓JSONDesign tokens
Machine-readable colours, typography and spacing
↓CSSWeb utilities
Font setup, variables and background classes
↓JSONBackground recipes
Gradient, brush, blend and placement rules
↓ZIP · SVGLogo pack
White, charcoal and current-colour variants
↓ZIP · SVG + PNGTransparent emphasis marks
10 artist brush marks and 40 underlines, tightly cropped and grouped by colour
↓ZIP · SVGWebsite texture overlays
26 transparent patterns across 10 clearly named brush families
↓ZIP · OPAQUE PNGReady-made backgrounds
24 fixed gradient-plus-brush compositions in landscape and square formats
↓