diff --git a/examples/docs/color.md b/examples/docs/color.md new file mode 100644 index 000000000..fe08b398e --- /dev/null +++ b/examples/docs/color.md @@ -0,0 +1,157 @@ + + +## Color 色彩 + +Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。 + +### 主色 + +Element 主要品牌颜色是鲜艳、友好的蓝色。 + + + +
Light Blue
#58B7FF
+ + +
Blue
#20A0FF
+ + +
Dark Blue
#1D8CE0
+ + + +### 辅助色 + +除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。每种颜色都有较浅和较深两种。 + + + +
Blue
#20A0FF
+ + +
Success
#13CE66
+ + +
Warning
#F7BA2A
+ + +
Danger
#ff4949
+ + + +### 中性色 + +中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 + + + +
+
Black
#1f2d3d
+
Light Black
#324057
+
Extra Light Black
#475669
+
+ + +
+
Silver
#8492a6
+
Light Silver
#99a9bf
+
Extra Light Silver
#c0ccda
+
+ + +
+
Gray
#d3dce6
+
Light Gray
#e5e9f2
+
Extra Light Gray
#eff2f7
+
+ + +
+
Dark White
#F9FAFC
+
White
#FFFFFF
+
+ + diff --git a/examples/docs/typography.md b/examples/docs/typography.md new file mode 100644 index 000000000..15249a639 --- /dev/null +++ b/examples/docs/typography.md @@ -0,0 +1,148 @@ + + +## Typography 字体 + +我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。 + +### 中文字体 + +
+ 和畅惠风 +
PingFang SC
+
+
+ 和畅惠风 +
Hiragino Sans GB
+
+
+ 和畅惠风 +
Microsoft YaHei
+
+ +### 英文／数字字体 + +
+ RGag +
Helvetica Neue
+
+
+ RGag +
Helvetica
+
+
+ RGag +
Arial
+
+ +### 字体家族 css 代码： + +```css +font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; +``` + +### 字体使用规范： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
主标题用 Element 快速搭建页面20px Extra large
标题用 Element 快速搭建页面18px large
小标题用 Element 快速搭建页面16px Medium
正文用 Element 快速搭建页面14px Small
正文（小）用 Element 快速搭建页面13px Extra Small
辅助文字用 Element 快速搭建页面12px Extra Extra Small
diff --git a/examples/nav.config.json b/examples/nav.config.json index b92076044..696bb3432 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -10,6 +10,18 @@ "title": "Layout 布局", "description": "" }, + { + "path": "/color", + "name": "色彩 (color)", + "title": "Color 色彩", + "description": "" + }, + { + "path": "/typography", + "name": "字体 (typography)", + "title": "Typography 字体", + "description": "" + }, { "path": "/icon", "name": "图标 (icon)",