--- name: apply-mantel-styles description: Provides guidelines for applying Mantel's brand styles to diagrams and frontend components. Use when asked to create visuals that need to align with Mantel's branding. --- # 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 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) ### 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 `
` 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<> FLAMINGO BorderColor<> DEEP_OCEAN FontColor<> 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 ```js 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 ``` ```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.