apply-mantel-styles

Name: apply-mantel-styles
Author: sammcj

github.com/sammcj设计与 UI167106 次安装2 天前更新

代码仓库

关于 apply-mantel-styles

apply-mantel-styles 是一项设计技能，用于在图表和前端组件中应用 Mantel 品牌规范。它规定了色彩令牌、组件样式、字体和标志的使用方式。

主要功能

01使用 Mantel 色板和色阶
02应用语义状态颜色
03设置按钮、导航和表单样式
04遵循字体与标志规范
05使用 CSS 变量和 Tailwind 颜色

适用场景

01使图表符合 Mantel 品牌规范
02统一前端组件的样式
03为状态消息和图表选择颜色
04为浅色或深色背景挑选标志版本

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sammcj/agentic-coding --skill apply-mantel-styles

安装后在 Claude Code 中输入/apply-mantel-styles确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/

Mantel_Icon__Navy.svg

Mantel_Icon__Negative.svg

Mantel_Icon__Positive.svg

Mantel_Icon__White.svg

Mantel_Logo__Navy.svg

Mantel_Logo__Negative.svg

Mantel_Logo__Positive.svg

Mantel_Logo__White.svg

resources/

diagrams.md

详细介绍

应用 Mantel 品牌样式的规则

创建可视化图表或前端组件时，可以遵循以下样式指南，确保与 Mantel 品牌形象保持一致。

配色方案

尽量使用 Mantel 品牌调色板中的以下主色。
也可以根据需要使用这些颜色的浅色和深色变体，但应避免引入非品牌颜色。

调色板

名称	十六进制	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)

扩展调色板 — 品牌色阶（从最浅的 50 到最深的 900）

使用这些令牌设置浅色、深色、悬停状态、边框和表面，不要引入非品牌颜色。优先使用每种品牌色的核心色阶（粗体）；需要调整对比度时，再选用相邻色阶。

Ocean — 核心色阶 500

 50  #E8F2F8      500  #1E5E82   ← core
100  #C5DCEA      600  #174E6E
200  #9DC3D8      700  #103D57
300  #6AA5C3      800  #0A2D40
400  #3D89AF      900  #042031

Flamingo — 核心色阶 500

 50  #FAEEF2      500  #D86E89   ← core
100  #F4D1DA      600  #C25079
200  #EDB0BE      700  #9E3456
300  #E690A2      800  #7A1E3D
400  #DE7F92      900  #550E28

Sky — 核心色阶 400（Sky 的品牌锚点位于 400，而非 500）

 50  #F0FAFD      400  #81CCEA   ← core
100  #D9F1F9      500  #59BAE2
200  #B8E5F5      600  #329DD3
300  #95D6EF      700  #1B7EAD
                  800  #0E5F85
                  900  #064260

Neutral — 用于浅色表面的文本、边框和分隔线的灰色

 50  #F5F7F9      500  #8A99AB
100  #DDE3EA      600  #5C6A7A
200  #C5CED9      700  #3E4F5E
300  #A8B5C4      800  #293C49
400  #B2BECC      900  #161C21

锚点令牌（固定，不属于色阶）

令牌	十六进制	用途
Deep Ocean	`#002A41`	主要深色背景
Cloud	`#EEF9FD`	主要浅色／中性色背景
Skywalker 950	`#001421`	近黑色深色表面
Skywalker 900	`#001E2F`	最深色区块
Skywalker 800	`#042D44`	深色表面 2
Skywalker 700	`#073B58`	深色表面 3
Skywalker 600	`#0C4F74`	深色表面 4（最浅的深色）

语义状态颜色

成功／警告／错误／提醒状态请使用以下颜色。不要用品牌色替代——将 Flamingo 滥用于错误状态，会破坏用户所依赖的语义约定。

令牌	十六进制	用途
Yoda 600	`#07883D`	成功／正向
BB8 600	`#E87400`	警告
Kylo 600	`#D91544`	错误／危险
Pyre 300	`#FFD60A`	高亮／提醒

通用设计原则

色彩层级

主要操作／元素：Ocean（#1E5E82）
次要／辅助内容：Sky Blue（#81CCEA）
强调／点缀：Flamingo（#D86E89）
基础／权威元素：Deep Ocean（#002A41）
背景／中性色：Cloud（#EEF9FD）

浅色背景使用 Cloud（#EEF9FD）或白色（#FFFFFF）。
深色背景使用 Deep Ocean（#002A41）。切勿使用纯黑色（#000000）。
浅色背景上的主要文本使用 Deep Ocean；深色背景上则使用白色。
点缀元素（边框、图标、高亮）使用 Ocean、Flamingo 或 Sky Blue。

语义用法

主要操作、主导航和品牌级强调使用 Ocean
交互元素、信息和次要操作使用 Sky Blue
CTA 和品牌亮点少量使用 Flamingo（错误状态不使用，应使用 Kylo）
文本、边框和权威元素使用 Deep Ocean
背景、微妙的分隔线和非激活状态使用 Cloud
成功／警告／错误／提醒状态使用语义状态颜色（Yoda／BB8／Kylo／Pyre），切勿用品牌色替代这些颜色
默认采用浅色／日间模式配色方案

一致性规则

避免混用其他品牌的配色方案
确保项目中所有图表的颜色含义一致
需要透明度时，使用品牌色的 rgba 值
悬停／按下状态应沿品牌色阶移动一级（例如，悬停时 ocean-500 → ocean-600，按下时 flamingo-500 → flamingo-600）。只有在没有合适的色阶令牌时，才使用百分比调暗／调亮

前端组件样式

组件指南

按钮

主要：

背景：Ocean（#1E5E82）
文本：Cloud（#EEF9FD）
悬停：Deep Ocean（#002A41）
边框：无或 Ocean

次要：

背景：Sky Blue（#81CCEA）
文本：Deep Ocean（#002A41）
悬停：Ocean（#1E5E82），文本为 Cloud
边框：Ocean（#1E5E82）

强调/行动号召：

背景：Flamingo 500（#D86E89）
文本：White（#FFFFFF）
悬停：Flamingo 600（#C25079）
边框：无

幽灵/轮廓：

背景：透明
文本：Ocean（#1E5E82）
悬停：Cloud（#EEF9FD）背景
边框：Ocean（#1E5E82）

表单

输入字段：

背景：White（#FFFFFF）
边框：Sky Blue（#81CCEA）
聚焦边框：Ocean（#1E5E82）
文本：Deep Ocean（#002A41）
占位符：Sky Blue（#81CCEA）
错误边框：Kylo 600（#D91544）

标签：

颜色：Ocean（#1E5E82）
必填标记：Flamingo（#D86E89）

卡片和表面

标准卡片：

背景：White（#FFFFFF）
边框：Cloud（#EEF9FD）
阴影：rgba(0, 42, 65, 0.1)

突出显示的卡片：

背景：Cloud（#EEF9FD）
边框：Sky Blue（#81CCEA）
阴影：rgba(30, 94, 130, 0.15)

警报和消息

使用语义状态颜色——不要将 Flamingo 滥用于错误/警告，也不要将 Ocean 滥用于成功状态。

错误：

背景：Kylo 600（#D91544），不透明度为 10%
边框：Kylo 600（#D91544）
文本：Deep Ocean（#002A41）
图标：Kylo 600（#D91544）

警告：

背景：BB8 600（#E87400），不透明度为 10%
边框：BB8 600（#E87400）
文本：Deep Ocean（#002A41）
图标：BB8 600（#E87400）

成功：

背景：Yoda 600（#07883D），不透明度为 10%
边框：Yoda 600（#07883D）
文本：Deep Ocean（#002A41）
图标：Yoda 600（#07883D）

信息：

背景：Sky Blue（#81CCEA），不透明度为 10%
边框：Sky Blue（#81CCEA）
文本：Deep Ocean（#002A41）
图标：Sky Blue（#81CCEA）

数据可视化（图表）

主系列：Ocean（#1E5E82）
次系列：Sky Blue（#81CCEA）
第三系列：Deep Ocean（#002A41）
高亮/强调：Flamingo（#D86E89）
背景：Cloud（#EEF9FD）
网格线：Sky Blue（#81CCEA），不透明度为 20%
文本：Deep Ocean（#002A41）

CSS 变量

:root {
   /* Core brand (anchor steps) */
   --brand-ocean: #1E5E82;        /* ocean-500 */
   --brand-flamingo: #D86E89;     /* flamingo-500 */
   --brand-sky-blue: #81CCEA;     /* sky-400 */
   --brand-deep-ocean: #002A41;
   --brand-cloud: #EEF9FD;

   /* Ocean ramp */
   --ocean-50:  #E8F2F8; --ocean-100: #C5DCEA; --ocean-200: #9DC3D8;
   --ocean-300: #6AA5C3; --ocean-400: #3D89AF; --ocean-500: #1E5E82;
   --ocean-600: #174E6E; --ocean-700: #103D57; --ocean-800: #0A2D40;
   --ocean-900: #042031;

   /* Flamingo ramp */
   --flamingo-50:  #FAEEF2; --flamingo-100: #F4D1DA; --flamingo-200: #EDB0BE;
   --flamingo-300: #E690A2; --flamingo-400: #DE7F92; --flamingo-500: #D86E89;
   --flamingo-600: #C25079; --flamingo-700: #9E3456; --flamingo-800: #7A1E3D;
   --flamingo-900: #550E28;

   /* Sky ramp */
   --sky-50:  #F0FAFD; --sky-100: #D9F1F9; --sky-200: #B8E5F5;
   --sky-300: #95D6EF; --sky-400: #81CCEA; --sky-500: #59BAE2;
   --sky-600: #329DD3; --sky-700: #1B7EAD; --sky-800: #0E5F85;
   --sky-900: #064260;

   /* Neutral greys */
   --neutral-50:  #F5F7F9; --neutral-100: #DDE3EA; --neutral-200: #C5CED9;
   --neutral-300: #A8B5C4; --neutral-400: #B2BECC; --neutral-500: #8A99AB;
   --neutral-600: #5C6A7A; --neutral-700: #3E4F5E; --neutral-800: #293C49;
   --neutral-900: #161C21;

   /* Dark surfaces */
   --skywalker-950: #001421; --skywalker-900: #001E2F; --skywalker-800: #042D44;
   --skywalker-700: #073B58; --skywalker-600: #0C4F74;

   /* Semantic status */
   --yoda-600: #07883D;  /* success */
   --bb8-600:  #E87400;  /* warning */
   --kylo-600: #D91544;  /* error */
   --pyre-300: #FFD60A;  /* highlight */

   /* 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 */
   --text-primary: var(--brand-deep-ocean);
   --text-secondary: var(--brand-ocean);
   --text-on-primary: var(--brand-cloud);
   --text-on-accent: #FFFFFF;

   /* State (semantic status — do not substitute brand colours) */
   --colour-error: var(--kylo-600);
   --colour-warning: var(--bb8-600);
   --colour-success: var(--yoda-600);
   --colour-info: var(--brand-sky-blue);
   --colour-highlight: var(--pyre-300);

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

Tailwind 配置

Tailwind 的配置键是 colors（美式拼写）——无论项目范围内采用何种拼写规范，框架都要求使用此拼写。

module.exports = {
   theme: {
      extend: {
         colors: {
            brand: {
               ocean: '#1E5E82',
               flamingo: '#D86E89',
               'sky-blue': '#81CCEA',
               'deep-ocean': '#002A41',
               cloud: '#EEF9FD',
            },
            ocean: {
               50: '#E8F2F8', 100: '#C5DCEA', 200: '#9DC3D8',
               300: '#6AA5C3', 400: '#3D89AF', 500: '#1E5E82',
               600: '#174E6E', 700: '#103D57', 800: '#0A2D40',
               900: '#042031',
            },
            flamingo: {
               50: '#FAEEF2', 100: '#F4D1DA', 200: '#EDB0BE',
               300: '#E690A2', 400: '#DE7F92', 500: '#D86E89',
               600: '#C25079', 700: '#9E3456', 800: '#7A1E3D',
               900: '#550E28',
            },
            sky: {
               50: '#F0FAFD', 100: '#D9F1F9', 200: '#B8E5F5',
               300: '#95D6EF', 400: '#81CCEA', 500: '#59BAE2',
               600: '#329DD3', 700: '#1B7EAD', 800: '#0E5F85',
               900: '#064260',
            },
            neutral: {
               50: '#F5F7F9', 100: '#DDE3EA', 200: '#C5CED9',
               300: '#A8B5C4', 400: '#B2BECC', 500: '#8A99AB',
               600: '#5C6A7A', 700: '#3E4F5E', 800: '#293C49',
               900: '#161C21',
            },
            skywalker: {
               600: '#0C4F74', 700: '#073B58', 800: '#042D44',
               900: '#001E2F', 950: '#001421',
            },
            // Semantic status (single-step anchors)
            yoda: '#07883D',   // success
            bb8:  '#E87400',   // warning
            kylo: '#D91544',   // error
            pyre: '#FFD60A',   // highlight
         }
      }
   }
}

字体与排版

在适用情况下，标题、副标题和正文使用“Inter”字体。
优先将字体打包以供离线使用，而不是依赖 CDN。

角色	字体	字重	CSS
标题	Inter	半粗体	`font-weight: 600`
副标题	Inter	中等	`font-weight: 500`
正文	Inter	常规	`font-weight: 400`

Inter CDN 回退方案

如果无法打包，请使用此 CDN：


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

Logo 系统

Logo 变体

该技能将所有 Logo 文件打包在 assets/ 中。选择指南：

文件	适用场景……
`Mantel_Logo__Positive.svg`	在浅色背景上使用的全彩 Logo
`Mantel_Logo__Negative.svg`	在深色背景上使用的全彩 Logo
`Mantel_Logo__Navy.svg`	在浅色背景上使用的单色（Deep Ocean）Logo
`Mantel_Logo__White.svg`	在深色背景上使用的单色（白色）Logo
`Mantel_Icon__Positive.svg`	在浅色背景上单独使用的全彩图标
`Mantel_Icon__Negative.svg`	在深色背景上单独使用的全彩图标
`Mantel_Icon__Navy.svg`	在浅色背景上使用的单色（Deep Ocean）图标
`Mantel_Icon__White.svg`	在深色背景上使用的单色（白色）图标

Logo 规范（至关重要——违反规范会非常明显）

切勿拉伸或扭曲。 Logo 的宽高比约为 4.67:1。图标约为 1.5:1。始终保持比例。
切勿更改 Logo 颜色。 仅使用提供的变体，切勿重新着色图标或字标。
切勿裁剪 Logo。 所有元素都必须完整显示。
Logo 周围的最小留白等于图标部分的高度和宽度。
最小尺寸： Logo 宽 80px / 21mm。图标宽 44px / 12mm。
在浅色背景上使用浅色 Logo = 错误。在深色背景上使用深色 Logo = 错误。务必选择与背景形成对比的变体。
面向客户的材料优先使用： 在 Deep Ocean 背景上使用全彩 Negative Logo。这是最常见、最具品牌辨识度的组合。
切勿在 Logo 周围添加彩色边框——品牌指南明确禁止这样做。

资源

如果你要创建图表，必须同时阅读 ./resources/diagrams.md

这些信息有助于你在图表和前端组件中保持 Mantel 品牌的视觉一致性。

支持 Markdown

登录后评论