Sushi Design System - UI Kit

Zomato

关于此应用

Sushi 是 Zomato 自己的设计系统，它有助于按照简洁明了的设计语言构建强大的用户界面。我们在 zomato，从头开始构建了这个。它不仅是我们的设计系统，而且还帮助我们为用户提供全新的增强体验。 Sushi 可以帮助您按照原子、干净和简单的设计语言构建定制的用户界面。虽然 Sushi 建立在自己的设计语言之上，但它在许多领域内部都完全接受并使用了 Google 的 Material Design 组件。

作为设计系统和品牌指南的参考，它被 Zomato 内部的各个团队使用和代表，例如产品、工程、营销和品牌。

什么是设计系统？
设计系统是可重用组件的集合，由明确的标准指导，可以组装在一起以构建任意数量的应用程序。设计系统不仅仅是您用于构建数字产品的资产和组件的集合。根据 Intercom 产品设计总监 Emmet Connolly 的说法，“……大多数设计系统实际上只是模式库：一大盒 UI 乐高积木，可以以近乎无限的方式组装。所有的部分可能都是一致的，但这并不意味着组装的结果会是一致的。您的产品不仅仅是一堆可重用的 UI 元素。它有结构和意义。它不是一个通用的网页，它是一个概念系统的体现。”

寿司设计系统

基金会
基础是数字品牌指南，它定义了我们设计系统的排版、调色板、图标、间距、阴影和信息架构。寿司遵循原子设计原则，使用可组合组件自下而上构建，按原子➡️分子➡️有机体排序。

原子设计
原子设计（如 Brad Frost 所述）映射到我们的系统。

#原子
最小的不可分割单位是原子。在 Android（或任何移动 UI）中，文本标签、按钮和图像持有者是原子。

#分子
涉及多个原子形成的视图，但在用户看来和行为仍然像单个实体是分子。例如，输入字段有输入框、错误字段和清除按钮，但它们合在一起就是一个实体。

#有机体
复杂但可重用的组件，它们以一种内聚的方式一起工作。由多个原子和分子组成。一个典型的例子是评分栏，它由标签组成，每个标签都有一个数字和一个图标。 The tags change color as well, when different ratings are selected.每个标签在其他地方也单独使用，但作为评级栏，它们共同创造新的意义。

排版
您可能知道，排版是一种排列字体的艺术，以使书面语言在显示时清晰易读和吸引人。字体排列包括字体、磅值、行长、行距和字母间距的选择，以及调整字母对之间的间距。

我们支持以下字体变体 -

超轻
光
常规的
中等的
半粗体
大胆的
超粗体

您可以使用具有多达 8 个字体粗细的任何字体并从这些别名中分配它们。虽然我们有 Metropolis、Okra 和 Roboto 用于演示，但您可以使用与您的品牌相匹配的任何字体。

颜色
Sushi 还在其调色板中提供了一组预定义的颜色。对于极其独特的情况，请随意使用您自己的颜色，但除此之外，我们建议您将此调色板中的颜色用于您产品的所有组件。

代码仓库