Brand Guide
Brand Position
Engineering resilient. Always with confidence. The brand promises technical expertise, practical solutions and trusted partnerships.
Overall logo and brand tone convey a personality that is
Professional, knowledgeable, clear, and reassuring.
Logo: svg or png with brand color underneath.
Typography
Primary typeface - Poppins
A modern geometric sans-serif chosen for its clean, approachable, and professional appearance. Poppins provides excellent readability across digital and print applications while reinforcing Shoreplan's technical expertise and contemporary brand.
Heading 1
Heading 2
Heading 3
Heading 4
Body paragraph 1
Body paragraph 2
Body paragraph 3
Usage guide
Use Poppins Medium (500) for all headings.
Use Poppins Regular (400), paragraph 2 for body.
Maintain 140% line spacing for optimal readability.
Keep 0 pt letter spacing throughout.
Avoid using all caps except for small labels or navigation where appropriate.
Use sentence case for headings to maintain an approachable, professional tone.
36 pt (3 rem)
31.2 pt (2.6 rem)
26.4 pt (2.2 rem)
14.4 pt (1.2 rem)
13.5 pt (1.125 rem)
12 pt (1 rem)
10.5 pt (0.875 rem)
Usage limitations
Similar letter shapes can reduce clarity in small sizes
(e.g., Ii, lL, 1, o, 0)Not optimized specifically for dyslexia-friendly reading
Thin weights (300–400) can fail WCAG contrast/readability at small sizes
Not ideal for dense paragraphs in long-form reports if overused
Document body text use Segoe UI, for technical numeric data use Consolas
Colors
This palette has a clean, coastal, and professional feel that aligns well with an engineering consultancy.
| Color | Swatch | HEX | RGB | Recommended Use |
|---|---|---|---|---|
| Off White | #ECEAE3 | 236, 234, 227 | Page backgrounds, sections | |
| Sage Grey | #829484 | 130, 148, 132 | Secondary accents, diagrams | |
| Light Grey | #E9E9E9 | 233, 233, 233 | Table fills, borders, subtle backgrounds | |
| Deep Teal | #255F62 | 37, 95, 98 | Primary brand color, headings, buttons | |
| Dark Teal | #193132 | 25, 49, 50 | Primary text, footers, emphasis |
Office Templates
Use the standardize Office Templates to communicate externally. This sets a polished and unified voice across all project artifacts.
| Theme Slot | Color | Swatch | HEX | Usage |
|---|---|---|---|---|
| Dark 1 | Dark Teal | #193132 | Main text, headers, footer text | |
| Light 1 | White | #FFFFFF | Primary background | |
| Dark 2 | Deep Teal | #255F62 | Headings, primary accents | |
| Light 2 | Off White | #ECEAE3 | Section backgrounds | |
| Accent 1 | Deep Teal | #255F62 | Buttons, highlights, links | |
| Accent 2 | Sage Grey | #829484 | Secondary accents, charts | |
| Accent 3 | Dark Teal | #193132 | Emphasis, icons, strong contrast elements | |
| Accent 4 | Light Grey | #E9E9E9 | Table fills, dividers | |
| Accent 5 | Off White | #ECEAE3 | Soft backgrounds, overlays | |
| Accent 6 | Sage Grey | #829484 | Supporting accents, visuals | |
| Hyperlink | Deep Teal | #255F62 | Links, interactive text | |
| Followed Hyperlink | Dark Teal | #193132 | Visited links |
Charts and graphs turn numbers into narratives—helping you understand and explore key information at a glance.
Chart 1
Data That Tells a Story
Use interactive visualizations that uncover insights, reveal trends, and help guide smart decisions.