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.

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

1. Primary Actions/Elements: Ocean (#1E5E82) 2. Secondary/Supporting: Sky Blue (#81CCEA) 3. Emphasis/Accent: Flamingo (#D86E89) 4. Foundation/Authority: Deep Ocean (#002A41) 5. Background/Neutral: Cloud (#EEF9FD) </COLOUR_HIERARCHY> - 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 </SEMANTIC_USAGE> - 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 </CONSISTENCY_RULES> </GENERAL_PRINCIPLES>

---

Mermaid Styles

Example Mermaid class definitions to apply Mantel brand styles to diagrams

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 5

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 3

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 1

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:#002A41

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:#81CCEA

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:#002A41

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 1

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:#002A41

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 5

classDef default fill:#EEF9FD,stroke:#1E5E82,stroke-width:2px,color:#002A41
</MERMAID_THEME>

- Use 'process' for standard workflow steps - Use 'subprocess' for nested or child processes - Use 'components' for system components or modules

• 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

• 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

• Use 'data' for data objects or data flow
• Use 'storage' or 'database' for persistent storage
• Use 'cache' for temporary storage or caching layers

• 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

• Use 'manual' for human/manual processes
• Use 'automated' for automatic processes
• Use 'async' for asynchronous operations
• Use 'sync' for synchronous operations

• 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

• Use 'highlight' for temporarily emphasised elements
• Use 'focus' for elements requiring attention
• Use 'selected' for user-selected items

• 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</MERMAID_USAGE_GUIDE>

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 </TRANSPARENCY_NOTE> - Use
instead of \n for 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 </MERMAID_RULES>

---

PlantUML Styles

Apply these colour definitions 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<> FLAMINGO
BorderColor<> DEEP_OCEAN
FontColor<> CLOUD
}
</PLANTUML_RULES>

---

Frontend Component Styles

: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);

}
</CSS_VARIABLES>

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)

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

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)

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)

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)

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) </COMPONENT_GUIDELINES> module.exports = { theme: { extend: { colours: { 'brand': { 'ocean': '#1E5E82', 'flamingo': '#D86E89', 'deep-ocean': '#002A41', 'sky-blue': '#81CCEA', 'cloud': '#EEF9FD', } } } } } </TAILWIND_CONFIG>

---

Fonts & Typography

- Where applicable use the 'Inter' typeface is utilised for headlines, subheadings, and body copy. - Favour bundling the font for offline use over relying on CDNs.

/* 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; }
}

</INTER_CDN>

---

This information should help you maintain visual consistency with the Mantel brand across diagrams and frontend components.