-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (134 loc) · 7.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css.css">
<link rel="shortcut icon" href="./flies/logo-web.svg">
<meta name="msvalidate.01" content="0D50FD12D8A51671E5A933DD8D20A8D7" />
<title>Systematize Design —— 系统化，风格统一的设计系统</title>
<script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_8572_103.f6d6a3085bff28fa15655e3a844fd5c9.es5.js"></script>
<meta name='description' content='Systematize Design 是一套完善的设计体系，涵括「Systematize Design」设计标准与组件库和「Spiral」，一套 Web 组件库，助你快速实现设计稿，还有 「Amethyst」 图标库 ，致力于字体图标与图形的设计与实现协同。'>
</head>
<body>
<div class="SMDg-tab">
<img src="./flies/logo.svg" alt="Systematize Design">
</div>
<div class="head-figure">
<h1 class=tile><img src="./flies/logo.svg" alt="Systematize Design"><br>系统化，风格统一的设计系统</h1>
<p>为每一个人所创造<br>开放，融汇贯通，赋能每一个公司，团队，集体，个人设计与创造的能力</p>
</div>
<div class="SMD-Message-bar-little-information SMD-helper-middle">
<div class="SMD-gap-Middle SMD-tool-flex-row">
<div class="SMD-iconbox-information">
<iconpark-icon name="xinxi"></iconpark-icon>
</div>
<p class="SMD-text">本页正在完善</p>
<p class="SMD-marginalia-special">我们正在为其加入手机端支持，并丰富内容。</p>
</div>
</div>
<div class="SMD-Message-bar-little-information SMD-helper-middle">
<div class="SMD-gap-Middle SMD-tool-flex-row">
<div class="SMD-iconbox-information">
<iconpark-icon name="xinxi"></iconpark-icon>
</div>
<p class="SMD-text">文档正在编写</p>
<p class="SMD-marginalia-special">想要参与？可以访问我们的 Github 仓库。</p>
</div>
<a href="https://github.com/connect-ui/Systematize-Design-Docs">
<button class="SMD-button">
<p>去看看</p>
<iconpark-icon name="xiayi"></iconpark-icon>
</button>
</a>
</div>
</div>
<div class="SMD-box-card SMD-helper-middle">
<div class="display-flex-left-right">
<div class="cv-out">
<img src="./flies/SMD.png" alt="Systematize Design的多个组件" class="cv">
<div class="cv-shadow-mask">
<h3>Systematize Design</h3>
<p>Systematize Design 体系下的一套 UI 设计标准</p>
</div>
</div>
<div class="display-flex-normol SMD-gap-big">
<h3>为用户提供足够愉悦舒适的体验，<strong>风格鲜明，层次清晰。</strong></h3>
<p>Systematize Design 体系下「Systematize Design」是一套 UI 设计标准，提供足够美观的设计和清晰的设计方法，以完整的解决方案赋能团队以更快更好的方式实现 UI 设计，为每一个人提供更加舒畅的体验。</p>
</div>
<a href="https://js.design/resourceDetails?id=62468fd1337111276574f554" class="Allwidth">
<button class="SMD-button Allwidth">
去「即时设计」资源广场获取工具包
</button>
</a>
</div>
</div>
<div class="SMD-box-card SMD-helper-middle">
<div class="display-flex-left-right">
<div class="cv-out">
<img src="./flies/cui.png" alt="Spiral 概念图" class="cv">
<div class="cv-shadow-mask">
<h3>Spiral</h3>
<p>Systematize Design 体系下的一套 Web 组件库</p>
</div>
</div>
<div class="display-flex-normol SMD-gap-big">
<h3>符合Systematize Design的 Web 组件库，<strong>简单易用，方便构建。</strong></h3>
<p>Systematize Design 体系下「Spiral」是一套 Web 组件库，使用 Vue 3 + Typescript + Vite 构建，提供开箱即用的解决方案，赋能团队以更快更好的方式实现 UI 设计稿，加速产品发布。</p>
</div>
<a href="https://github.com/connect-ui/vue" class="Allwidth">
<button class="SMD-button Allwidth">
去「Github」开始使用
</button>
</a>
</div>
</div>
<div class="SMD-box-card SMD-helper-middle">
<div class="display-flex-left-right">
<div class="cv-out">
<img src="./flies/clia.png" alt="Amethyst 的多个图标" class="cv">
<div class="cv-shadow-mask">
<h3>Amethysts</h3>
<p>Systematize Design 体系下的一套图标库</p>
</div>
</div>
<div class="display-flex-normol SMD-gap-big">
<h3>简洁美观且含义清晰的图标库，<strong>简单易用，轻松设计。</strong></h3>
<p>Systematize Design 体系下「Amethyst」是一套图标库，提供组件库和字体图标的双解决方案，赋能团队以更快更好的方式实现 UI 设计稿，加速产品发布。</p>
</div>
<a href="https://js.design/resourceDetails?id=626d50d6b6d9719d31414821" class="Allwidth">
<button class="SMD-button Allwidth">
去「即时设计」资源广场获取资源包
</button>
</a>
</div>
</div>
<h2 class="midden margin-b">由你我共建</h2>
<p class="midden margin-b">Systematize Design 支持社区共创，欢迎所有人一起建设</p>
<div class="deeper">
<div class="deeper-inside">
<div>
<h3 class="margin-b">深度合伙人计划</h3>
<p class="margin-r margin-b">Systematize Design 是一套复杂的设计系统，我们欢迎且希望你可以加入其中，帮助我们完善它，并使其付诸实践，因此，我们需要你，也就是「深度合伙人」，我们将会与「深度合伙人」们进行层次较深的探讨，一起设计开发 Systematize Design 体系下的一切。</p>
<a href="https://jq.qq.com/?_wv=1027&k=FZfE8NDG">
<button class="SMD-button">
去了解详情
<iconpark-icon name="xiayi"></iconpark-icon>
</button>
</a>
</div>
</div>
</div>
<div class="foot-surface">
<div class="foot">
<img src="./flies/logo-docs.svg" alt="Systematize Design" class="big-SMD-logo">
<div class="SMD-tool-flex-column">
<img src="./flies/logo.svg" alt="Systematize Design" class="SMD-logo">
<p>一同创造全新的用户体验，由 OUR Studio 与 Systematize Design 社区共建。</p>
</div>
</div>
</div>
<p class="copyright">OUR Studio 2021-2022</p>
</body>
</html>