我们发现，当使用基于组件的方法构建网页时，为了保证设计的原创性，我们需要保持设计过程轻快而简约。在设计模式库或风格指南时，很容易做得过头儿，所以我们用最简单的HTML、CSS和JavaScript建立自己的Web设计风格指南工具包。

为了避免复杂性，我们把设计风格和组件具化到一个页面，这让我们在通过Photoshop和Sketch验证想法时，可以尽可能地自由。

我们已经做了初步的风格指南，并可以在Github上访问。我们希望大家可以使用它，以及贡献想法来改进它。

为了保证Web设计风格指南的易用性，我们把风格分为以下几种。

• 品牌：根据屏幕断点设置不同的logo和字体。
• 颜色：按钮、背景、边框和超链接的主要、次要、普通和重点的色调。
• 版式：多种大小和粗细的主要和次要字体。

字体元素：h1到h6的标题层级；文本样式，如导语（大号）、二级（小号）、三级（更小号）和最小号；块级元素以及列表的样式。

• 其他HTML元素：基本表格样式；各种类型、大小、风格和状态的表单输入框和按钮。
• 常用组件类型：盒模型、博客、事件、新闻摘要与媒体组件。

我们这里只列出了启动项目所需的样式指南，如果有需要，你也可以轻松地为新组件添加样式。