Rules For Applying Mantel Brand Styles
When creating visual diagrams or frontend components, you can apply the following style guidelines to ensure consistency with the Mantel brand identity.
Colour Scheme
- You should aim to use the following primary colours from the Mantel brand palette.
- You *may* also use tints and shades of these colours as needed, but avoid introducing non-brand colours.
Palette
| Name | Hex | RGB |
|---|---|---|
| Ocean | #1E5E82 | rgb(30, 94, 130) |
| Flamingo | #D86E89 | rgb(216, 110, 137) |
| Deep Ocean | #002A41 | rgb(0, 42, 65) |
| Sky Blue | #81CCEA | rgb(129, 204, 234) |
| Cloud | #EEF9FD | rgb(238, 249, 253) |
General Design Principles
Colour Hierarchy
- Primary Actions/Elements: Ocean (#1E5E82)
- Secondary/Supporting: Sky Blue (#81CCEA)
- Emphasis/Accent: Flamingo (#D86E89)
- Foundation/Authority: Deep Ocean (#002A41)
- Background/Neutral: Cloud (#EEF9FD)
Semantic Usage
- Use Ocean for primary actions, main navigation, success states
- Use Sky Blue for interactive elements, information, secondary actions
- Use Flamingo sparingly for CTAs, warnings, important highlights
- Use Deep Ocean for text, borders, authoritative elements
- Use Cloud for backgrounds, subtle dividers, inactive states
Consistency Rules
- Avoid mixing colour schemes from other brands
- Maintain consistent colour meanings across all diagrams in a project
- When transparency is needed, use rgba values of the brand colours
- For hover states, darken by 10-15% or lighten by 10-15% staying within brand
Mermaid Styles
Example Mermaid class definitions to apply Mantel brand styles to diagrams
Mermaid Theme Class Definitions
Primary elements (Ocean with Cloud fill for readability)
classDef process fill:#EEF9FD,stroke:#1E5E82,stroke-width:2px,color:#002A41
classDef components fill:#EEF9FD,stroke:#1E5E82,stroke-width:2px,color:#002A41
classDef subprocess fill:#EEF9FD,stroke:#1E5E82,stroke-width:1px,color:#002A41,stroke-dasharray:5 5Interactive/Input elements (Sky Blue)
classDef inputOutput fill:#81CCEA,stroke:#1E5E82,stroke-width:2px,color:#002A41
classDef api fill:#81CCEA,stroke:#002A41,stroke-width:2px,color:#002A41
classDef user fill:#81CCEA,stroke:#002A41,stroke-width:2px,color:#002A41
classDef external fill:#81CCEA,stroke:#002A41,stroke-width:2px,color:#002A41,stroke-dasharray:3 3Decision points and important elements (Flamingo)
classDef decision fill:#D86E89,stroke:#002A41,stroke-width:2px,color:#FFFFFF
classDef critical fill:#D86E89,stroke:#002A41,stroke-width:2px,color:#FFFFFF
classDef error fill:#D86E89,stroke:#002A41,stroke-width:3px,color:#FFFFFF
classDef warning fill:#D86E8955,stroke:#D86E89,stroke-width:2px,color:#002A41
classDef security fill:#D86E89,stroke:#002A41,stroke-width:3px,color:#FFFFFF,stroke-dasharray:2 1Data and storage (Deep Ocean)
classDef data fill:#002A41,stroke:#1E5E82,stroke-width:2px,color:#EEF9FD
classDef storage fill:#002A41,stroke:#1E5E82,stroke-width:2px,color:#EEF9FD
classDef database fill:#002A41,stroke:#1E5E82,stroke-width:2px,color:#EEF9FD
classDef cache fill:#002A4166,stroke:#1E5E82,stroke-width:2px,color:#002A41State classes
classDef start fill:#1E5E82,stroke:#002A41,stroke-width:3px,color:#EEF9FD
classDef end fill:#002A41,stroke:#1E5E82,stroke-width:3px,color:#EEF9FD
classDef success fill:#1E5E8233,stroke:#1E5E82,stroke-width:2px,color:#002A41
classDef pending fill:#81CCEA55,stroke:#81CCEA,stroke-width:2px,color:#002A41,stroke-dasharray:5 5
classDef active fill:#1E5E82,stroke:#002A41,stroke-width:2px,color:#EEF9FD
classDef complete fill:#1E5E8255,stroke:#1E5E82,stroke-width:2px,color:#002A41
classDef disabled fill:#EEF9FD,stroke:#81CCEA66,stroke-width:1px,color:#81CCEA
classDef inactive fill:#EEF9FD,stroke:#81CCEA66,stroke-width:1px,color:#81CCEAProcess types
classDef manual fill:#EEF9FD,stroke:#D86E89,stroke-width:2px,color:#002A41
classDef automated fill:#EEF9FD,stroke:#1E5E82,stroke-width:2px,color:#002A41
classDef async fill:#81CCEA33,stroke:#81CCEA,stroke-width:2px,color:#002A41,stroke-dasharray:8 3
classDef sync fill:#EEF9FD,stroke:#1E5E82,stroke-width:2px,color:#002A41System elements
classDef system fill:#002A4133,stroke:#002A41,stroke-width:2px,color:#002A41
classDef network fill:#81CCEA33,stroke:#1E5E82,stroke-width:2px,color:#002A41
classDef queue fill:#81CCEA55,stroke:#1E5E82,stroke-width:2px,color:#002A41
classDef monitoring fill:#EEF9FD,stroke:#81CCEA,stroke-width:2px,color:#002A41,stroke-dasharray:1 1Emphasis and highlights
classDef highlight fill:#D86E8922,stroke:#D86E89,stroke-width:3px,color:#002A41
classDef focus fill:#1E5E8244,stroke:#1E5E82,stroke-width:3px,color:#002A41
classDef selected fill:#81CCEA44,stroke:#002A41,stroke-width:3px,color:#002A41Secondary elements
classDef secondary fill:#EEF9FD,stroke:#81CCEA,stroke-width:2px,color:#002A41
classDef note fill:#EEF9FD,stroke:#81CCEA,stroke-width:1px,color:#1E5E82
classDef comment fill:#EEF9FD,stroke:#81CCEA,stroke-width:1px,color:#1E5E82,stroke-dasharray:3 3
classDef optional fill:#EEF9FD,stroke:#81CCEA,stroke-width:1px,color:#002A41,stroke-dasharray:5 5Default styling
classDef default fill:#EEF9FD,stroke:#1E5E82,stroke-width:2px,color:#002A41Mermaid Usage Guide
Core Process Elements:
- Use 'process' for standard workflow steps
- Use 'subprocess' for nested or child processes
- Use 'components' for system components or modules
Interactive Elements:
- Use 'inputOutput' for user interactions or system I/O
- Use 'user' for user/actor specific elements
- Use 'api' for external service connections
- Use 'external' for third-party systems or external dependencies
Decision and Alert Elements:
- Use 'decision' for branching logic or critical choices
- Use 'critical' for important warnings or highlights
- Use 'error' for error states or failure conditions
- Use 'warning' for caution states (less severe than errors)
- Use 'security' for security-related checkpoints or processes
Data Elements:
- Use 'data' for data objects or data flow
- Use 'storage' or 'database' for persistent storage
- Use 'cache' for temporary storage or caching layers
State Elements:
- Use 'start' for process start points
- Use 'end' for process end points
- Use 'success' for successful completion states
- Use 'pending' for waiting or queued states
- Use 'active' for currently running processes
- Use 'complete' for finished processes
- Use 'disabled' or 'inactive' for unavailable elements
Process Types:
- Use 'manual' for human/manual processes
- Use 'automated' for automatic processes
- Use 'async' for asynchronous operations
- Use 'sync' for synchronous operations
System Elements:
- Use 'system' for internal system components
- Use 'network' for network-related elements
- Use 'queue' for message queues or buffers
- Use 'monitoring' for logging or monitoring components
Emphasis Elements:
- Use 'highlight' for temporarily emphasised elements
- Use 'focus' for elements requiring attention
- Use 'selected' for user-selected items
Supporting Elements:
- Use 'secondary' for supporting or auxiliary elements
- Use 'note' for annotations or explanatory text
- Use 'comment' for inline comments or documentation
- Use 'optional' for optional steps or components
Transparency Note
Some classes use transparency via hex alpha values (e.g., #81CCEA55):
- Last 2 digits represent opacity: FF=100%, CC=80%, 99=60%, 66=40%, 55=33%, 33=20%, 22=13%
- Used for: warning, cache, pending, disabled, system, network, queue, highlight states
- This creates visual hierarchy without introducing non-brand colours
Mermaid Rules
- Use
<br>instead of\nfor line breaks - Apply standard colour theme unless specified otherwise
- Do NOT use round brackets
()within item labels or descriptions - Mermaid does not support unordered lists within item labels
PlantUML Styles
PlantUML Colour Definitions
Apply these at the start of PlantUML diagrams:
!define OCEAN #1E5E82
!define FLAMINGO #D86E89
!define DEEP_OCEAN #002A41
!define SKY_BLUE #81CCEA
!define CLOUD #EEF9FD
skinparam backgroundColor CLOUD
skinparam defaultFontColor DEEP_OCEAN
' Activity Diagrams
skinparam activity {
BackgroundColor CLOUD
BorderColor OCEAN
FontColor DEEP_OCEAN
StartColor OCEAN
EndColor DEEP_OCEAN
BarColor FLAMINGO
DiamondBackgroundColor SKY_BLUE
DiamondBorderColor OCEAN
}
' Class Diagrams
skinparam class {
BackgroundColor CLOUD
BorderColor OCEAN
FontColor DEEP_OCEAN
AttributeFontColor OCEAN
StereotypeFontColor SKY_BLUE
ArrowColor OCEAN
HeaderBackgroundColor SKY_BLUE
}
' Sequence Diagrams
skinparam sequence {
ParticipantBackgroundColor SKY_BLUE
ParticipantBorderColor OCEAN
ActorBackgroundColor CLOUD
ActorBorderColor DEEP_OCEAN
LifeLineBorderColor OCEAN
ArrowColor OCEAN
GroupBackgroundColor CLOUD
GroupBorderColor SKY_BLUE
NoteBackgroundColor CLOUD
NoteBorderColor FLAMINGO
}
' Component Diagrams
skinparam component {
BackgroundColor CLOUD
BorderColor OCEAN
FontColor DEEP_OCEAN
InterfaceBackgroundColor SKY_BLUE
InterfaceBorderColor DEEP_OCEAN
}
' State Diagrams
skinparam state {
BackgroundColor CLOUD
BorderColor OCEAN
FontColor DEEP_OCEAN
StartColor OCEAN
EndColor DEEP_OCEAN
AttributeFontColor OCEAN
}
' Use Case Diagrams
skinparam usecase {
BackgroundColor CLOUD
BorderColor OCEAN
FontColor DEEP_OCEAN
ActorBackgroundColor SKY_BLUE
ActorBorderColor DEEP_OCEAN
}
' Error/Warning States
skinparam note {
BackgroundColor<<warning>> FLAMINGO
BorderColor<<warning>> DEEP_OCEAN
FontColor<<warning>> CLOUD
}Frontend Component Styles
CSS Variables
:root {
/* Primary Colours */
--brand-ocean: #1E5E82;
--brand-flamingo: #D86E89;
--brand-deep-ocean: #002A41;
--brand-sky-blue: #81CCEA;
--brand-cloud: #EEF9FD;
/* Semantic Mappings */
--colour-primary: var(--brand-ocean);
--colour-primary-dark: var(--brand-deep-ocean);
--colour-secondary: var(--brand-sky-blue);
--colour-accent: var(--brand-flamingo);
--colour-background: var(--brand-cloud);
--colour-surface: #FFFFFF;
/* Text Colours */
--text-primary: var(--brand-deep-ocean);
--text-secondary: var(--brand-ocean);
--text-on-primary: var(--brand-cloud);
--text-on-accent: #FFFFFF;
/* State Colours */
--colour-error: var(--brand-flamingo);
--colour-warning: var(--brand-flamingo);
--colour-success: var(--brand-ocean);
--colour-info: var(--brand-sky-blue);
/* Shadows and Overlays */
--shadow-colour: rgba(0, 42, 65, 0.1);
--overlay-light: rgba(238, 249, 253, 0.9);
--overlay-dark: rgba(0, 42, 65, 0.8);
}Component Guidelines
Buttons
Primary:
- Background: Ocean (#1E5E82)
- Text: Cloud (#EEF9FD)
- Hover: Deep Ocean (#002A41)
- Border: none or Ocean
Secondary:
- Background: Sky Blue (#81CCEA)
- Text: Deep Ocean (#002A41)
- Hover: Ocean (#1E5E82) with Cloud text
- Border: Ocean (#1E5E82)
Accent/CTA:
- Background: Flamingo (#D86E89)
- Text: White (#FFFFFF)
- Hover: Darker Flamingo (darken by 10%)
- Border: none
Ghost/Outline:
- Background: transparent
- Text: Ocean (#1E5E82)
- Hover: Cloud (#EEF9FD) background
- Border: Ocean (#1E5E82)
Navigation
Header:
- Background: Deep Ocean (#002A41)
- Text: Cloud (#EEF9FD)
- Active: Sky Blue (#81CCEA)
- Hover: Ocean (#1E5E82) background
Sidebar:
- Background: Cloud (#EEF9FD)
- Text: Deep Ocean (#002A41)
- Active: Ocean (#1E5E82) with Cloud text
- Hover: Sky Blue (#81CCEA) background
Forms
Input Fields:
- Background: White (#FFFFFF)
- Border: Sky Blue (#81CCEA)
- Focus Border: Ocean (#1E5E82)
- Text: Deep Ocean (#002A41)
- Placeholder: Sky Blue (#81CCEA)
- Error Border: Flamingo (#D86E89)
Labels:
- Colour: Ocean (#1E5E82)
- Required Indicator: Flamingo (#D86E89)
Cards and Surfaces
Standard Card:
- Background: White (#FFFFFF)
- Border: Cloud (#EEF9FD)
- Shadow: rgba(0, 42, 65, 0.1)
Highlighted Card:
- Background: Cloud (#EEF9FD)
- Border: Sky Blue (#81CCEA)
- Shadow: rgba(30, 94, 130, 0.15)
Alerts and Messages
Error:
- Background: Flamingo (#D86E89) at 10% opacity
- Border: Flamingo (#D86E89)
- Text: Deep Ocean (#002A41)
- Icon: Flamingo (#D86E89)
Warning:
- Background: Flamingo (#D86E89) at 5% opacity
- Border: Flamingo (#D86E89) at 50%
- Text: Deep Ocean (#002A41)
- Icon: Flamingo (#D86E89)
Success:
- Background: Ocean (#1E5E82) at 10% opacity
- Border: Ocean (#1E5E82)
- Text: Deep Ocean (#002A41)
- Icon: Ocean (#1E5E82)
Info:
- Background: Sky Blue (#81CCEA) at 10% opacity
- Border: Sky Blue (#81CCEA)
- Text: Deep Ocean (#002A41)
- Icon: Sky Blue (#81CCEA)
Data Visualisation (Charts)
- Primary Series: Ocean (#1E5E82)
- Secondary Series: Sky Blue (#81CCEA)
- Tertiary Series: Deep Ocean (#002A41)
- Highlight/Accent: Flamingo (#D86E89)
- Background: Cloud (#EEF9FD)
- Grid Lines: Sky Blue (#81CCEA) at 20% opacity
- Text: Deep Ocean (#002A41)
Tailwind Configuration
module.exports = {
theme: {
extend: {
colours: {
'brand': {
'ocean': '#1E5E82',
'flamingo': '#D86E89',
'deep-ocean': '#002A41',
'sky-blue': '#81CCEA',
'cloud': '#EEF9FD',
}
}
}
}
}Fonts & Typography
- Where applicable, the 'Inter' typeface is used for headlines, subheadings, and body copy.
- Favour bundling the font for offline use over relying on CDNs.
Inter CDN Fallback
If bundling is not possible, use this CDN:
<!-- HTML in your document's head -->
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">:root {
font-family: Inter, sans-serif;
font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
:root { font-family: InterVariable, sans-serif; }
}This information should help you maintain visual consistency with the Mantel brand across diagrams and frontend components.