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 5

Interactive/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 3

Decision 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 1

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

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

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

System 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 1

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

Secondary 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 5

Default styling

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

Mermaid 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
```
\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

PlantUML Styles

PlantUML Colour Definitions

Apply these at the start of PlantUML diagrams:

plantuml

!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

css

: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

<!-- HTML in your document's head -->
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

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.

apply-mantel-styles

NPX Install

Tags

SKILL.md Content