Bonusparallax — Brand guidelines (UK) R3
A concise, web-first identity guide built for parallax-enabled sites, campaign banners and printed collateral. Includes logo rules, colour system, typography, image treatment and usage do's & don'ts.
Logo — construction & spacing
Primary mark for web and print. Maintain clear space equal to the height of the “B” in the mark. Do not rotate, recolour (except palette tokens), or distort the mark.
Primary mark
Reverse & monochrome
- Minimum size for digital use: 42px height.
- Do not place over low-contrast busy backgrounds — use the reverse mark inside a glass-card or colour block.
Colour system
Primary and accents tuned for high-contrast parallax layers and accessible UI components across UK accessibility standards.
| Token | HEX | Usage |
|---|---|---|
| --brand-primary | #FF00FF → #00FFFF (gradient) | Primary CTAs, highlights |
| --brand-deep | #0b0b12 | Backgrounds, footers |
| --accent-1 | #00FFFF | Links, accents |
| --muted | #9aa0a6 | Secondary text |
Usage tips
- Prefer gradients for large hero areas to preserve texture under parallax layers.
- Maintain 4.5:1 contrast for body text on coloured backgrounds.
Typography
Primary web font: Inter (variable) for UI and body. Display: Manrope for headings when available. Fallbacks: system-ui, -apple-system, "Segoe UI", Roboto.
Scale
H1 36px — H2 28px — H3 20px — Body 16px — Small 14px
Web safe stack
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
Imagery & photography
Images should favour depth, foreground elements and subtle motion for parallax layers. Crop to emphasize subject and allow negative space for overlays.
Do: use high-res images, align focal points to safe areas for animated parallax. Don't: heavily compress or add strong vignettes that hinder legibility.
Do's & Don'ts — quick reference
Resources & downloads
Prepared asset pack for designers and developers. Contains SVG marks, gradient tokens, Figma kit and export-ready banner templates sized for UK campaigns.
- SVG logo pack (primary, reversed, icon)
- Gradient & colour tokens (JSON, CSS)
- Figma UI kit — components & parallax-ready frames
- Banner templates — 1920×600, 1200×400, 800×300
Accessibility & UK compliance
Guidelines align with UK accessibility practices and Web Content Accessibility Guidelines (WCAG 2.1 AA) for colour contrast and text sizing. Always run automated checks on final builds.
Contrast checks
Ensure all foreground/background combinations meet minimum contrast thresholds.
Legal notes
Usage rights for imagery must be verified; branding assets cannot be sublicensed without permission.