Back to Details

apply-mantel-styles

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Rules For Applying Mantel Brand Styles

Mantel品牌风格应用规则

When creating visual diagrams or frontend components, you can apply the following style guidelines to ensure consistency with the Mantel brand identity.
在创建可视化图表或前端组件时，你可以遵循以下样式规范，确保内容与Mantel的品牌标识保持一致。

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.
  • 请优先使用以下Mantel品牌调色板中的主色
  • 你也可以根据需要使用这些颜色的深浅变体，但请勿引入非品牌色系的颜色

Palette

调色板

NameHexRGB
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)
名称HexRGB
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)
  1. 主操作/主元素：Ocean (#1E5E82)
  2. 次要/辅助元素：Sky Blue (#81CCEA)
  3. 强调/重点色：Flamingo (#D86E89)
  4. 基础/权威元素：Deep Ocean (#002A41)
  5. 背景/中性色：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
  • Ocean用于主操作、主导航、成功状态
  • Sky Blue用于交互元素、信息提示、次要操作
  • 请谨慎使用Flamingo，仅用于CTA按钮、警告、重要高亮内容
  • Deep Ocean用于文本、边框、权威类元素
  • Cloud用于背景、细微分隔线、未激活状态

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
  • 请勿混用其他品牌的配色方案
  • 同一个项目的所有图表中需保持颜色含义一致
  • 需要使用透明度时，请使用品牌色对应的rgba值
  • hover状态请将品牌色加深10-15%或调浅10-15%，不得超出品牌色系范围

Mermaid Styles

Mermaid 样式

Example Mermaid class definitions to apply Mantel brand styles to diagrams
以下是可应用于图表的Mantel品牌风格Mermaid类定义示例

Mermaid Theme Class Definitions

Mermaid 主题类定义

Primary elements (Ocean with Cloud fill for readability)

主元素（为保证可读性使用Ocean边框+Cloud填充）

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

交互/输入元素（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
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)

决策节点和重要元素（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
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)

数据与存储（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
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
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
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
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
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
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
classDef default fill:#EEF9FD,stroke:#1E5E82,stroke-width:2px,color:#002A41

Mermaid Usage Guide

Mermaid 使用指南

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
核心流程元素：
  • 标准工作流步骤使用
    process
    类
  • 嵌套或子流程使用
    subprocess
    类
  • 系统组件或模块使用
    components
    类
交互元素：
  • 用户交互或系统输入输出使用
    inputOutput
    类
  • 用户/角色专属元素使用
    user
    类
  • 外部服务连接使用
    api
    类
  • 第三方系统或外部依赖使用
    external
    类
决策与警示元素：
  • 分支逻辑或关键选择使用
    decision
    类
  • 重要警告或高亮内容使用
    critical
    类
  • 错误状态或失败场景使用
    error
    类
  • 提醒状态（严重程度低于错误）使用
    warning
    类
  • 安全相关检查点或流程使用
    security
    类
数据元素：
  • 数据对象或数据流使用
    data
    类
  • 持久化存储使用
    storage
    或
    database
    类
  • 临时存储或缓存层使用
    cache
    类
状态元素：
  • 流程起点使用
    start
    类
  • 流程终点使用
    end
    类
  • 成功完成状态使用
    success
    类
  • 等待或排队状态使用
    pending
    类
  • 当前运行中的流程使用
    active
    类
  • 已完成的流程使用
    complete
    类
  • 不可用元素使用
    disabled
    或
    inactive
    类
流程类型：
  • 人工/手动流程使用
    manual
    类
  • 自动流程使用
    automated
    类
  • 异步操作使用
    async
    类
  • 同步操作使用
    sync
    类
系统元素：
  • 内部系统组件使用
    system
    类
  • 网络相关元素使用
    network
    类
  • 消息队列或缓冲区使用
    queue
    类
  • 日志或监控组件使用
    monitoring
    类
强调元素：
  • 临时强调的元素使用
    highlight
    类
  • 需要关注的元素使用
    focus
    类
  • 用户选中的项目使用
    selected
    类
辅助元素：
  • 支持或辅助元素使用
    secondary
    类
  • 注释或说明文本使用
    note
    类
  • 行内评论或文档使用
    comment
    类
  • 可选步骤或组件使用
    optional
    类

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
部分类通过十六进制alpha值实现透明度效果（例如#81CCEA55）：
  • 最后两位数字代表不透明度：FF=100%、CC=80%、99=60%、66=40%、55=33%、33=20%、22=13%
  • 适用场景：警告、缓存、待处理、禁用、系统、网络、队列、高亮状态
  • 这种方式可以在不引入非品牌色的前提下构建视觉层级

Mermaid Rules

Mermaid 使用规则

  • 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
  • 换行请使用
    <br>
    而非
    \n
  • 除非另有指定，否则请使用标准配色主题
  • 请勿在项目标签或描述中使用圆括号
    ( )
  • Mermaid不支持在项目标签内使用无序列表

PlantUML Styles

PlantUML 样式

PlantUML Colour Definitions

PlantUML 颜色定义

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
}
请在PlantUML图表的开头添加以下定义：
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 变量

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);
}
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)
主按钮：
  • 背景：Ocean (#1E5E82)
  • 文本：Cloud (#EEF9FD)
  • hover状态：Deep Ocean (#002A41)
  • 边框：无或Ocean色
次要按钮：
  • 背景：Sky Blue (#81CCEA)
  • 文本：Deep Ocean (#002A41)
  • hover状态：Ocean (#1E5E82)背景+Cloud色文本
  • 边框：Ocean (#1E5E82)
强调/CTA按钮：
  • 背景：Flamingo (#D86E89)
  • 文本：白色 (#FFFFFF)
  • hover状态：加深10%的Flamingo色
  • 边框：无
幽灵/线框按钮：
  • 背景：透明
  • 文本：Ocean (#1E5E82)
  • hover状态：Cloud (#EEF9FD)背景
  • 边框：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
顶部导航栏：
  • 背景：Deep Ocean (#002A41)
  • 文本：Cloud (#EEF9FD)
  • 激活状态：Sky Blue (#81CCEA)
  • hover状态：Ocean (#1E5E82)背景
侧边栏：
  • 背景：Cloud (#EEF9FD)
  • 文本：Deep Ocean (#002A41)
  • 激活状态：Ocean (#1E5E82)背景+Cloud色文本
  • hover状态：Sky Blue (#81CCEA)背景

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)
输入框：
  • 背景：白色 (#FFFFFF)
  • 边框：Sky Blue (#81CCEA)
  • 聚焦状态边框：Ocean (#1E5E82)
  • 文本：Deep Ocean (#002A41)
  • 占位符：Sky Blue (#81CCEA)
  • 错误状态边框：Flamingo (#D86E89)
标签：
  • 颜色：Ocean (#1E5E82)
  • 必填标识：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)
标准卡片：
  • 背景：白色 (#FFFFFF)
  • 边框：Cloud (#EEF9FD)
  • 阴影：rgba(0, 42, 65, 0.1)
高亮卡片：
  • 背景：Cloud (#EEF9FD)
  • 边框：Sky Blue (#81CCEA)
  • 阴影：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)
错误：
  • 背景：10%不透明度的Flamingo (#D86E89)
  • 边框：Flamingo (#D86E89)
  • 文本：Deep Ocean (#002A41)
  • 图标：Flamingo (#D86E89)
警告：
  • 背景：5%不透明度的Flamingo (#D86E89)
  • 边框：50%不透明度的Flamingo (#D86E89)
  • 文本：Deep Ocean (#002A41)
  • 图标：Flamingo (#D86E89)
成功：
  • 背景：10%不透明度的Ocean (#1E5E82)
  • 边框：Ocean (#1E5E82)
  • 文本：Deep Ocean (#002A41)
  • 图标：Ocean (#1E5E82)
信息：
  • 背景：10%不透明度的Sky Blue (#81CCEA)
  • 边框：Sky Blue (#81CCEA)
  • 文本：Deep Ocean (#002A41)
  • 图标：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)
  • 主系列：Ocean (#1E5E82)
  • 次系列：Sky Blue (#81CCEA)
  • 第三系列：Deep Ocean (#002A41)
  • 高亮/强调色：Flamingo (#D86E89)
  • 背景：Cloud (#EEF9FD)
  • 网格线：20%不透明度的Sky Blue (#81CCEA)
  • 文本：Deep Ocean (#002A41)

Tailwind Configuration

Tailwind 配置

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

Inter CDN Fallback

Inter字体CDN兜底方案

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.
如果无法打包字体，请使用以下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; }
}
以上内容可以帮助你在图表和前端组件中保持Mantel品牌的视觉一致性。