一部从作品本身写起的设计风格辞典。
它是纯粹的 HTML。任何浏览器、任何设备都能打开，不需要应用也不需要账号，机器读到的也是同一个页面。
| 词条 | 598 |
|---|
理解为Trust金融
494
.png)
GOV.UK デザインシステム / 2012– / 风格 / 平台界面语言
接近的原因Trust金融TechniqueCalm
英国政府的 Government Digital Service 为公共服务公开并维护的设计语言。全部内容排成没有装饰的左对齐单栏，用 GDS Transport 字体，不做圆角的绿色按钮靠下边一条深绿的带获得厚度，按下去正好沉下这个厚度。取得键盘焦点的元素则变成黄底加黑色下划线。
没有装饰的左对齐单栏，几乎不用边框，也不用阴影 / 不做圆角的绿色按钮，下边铺着一条深绿的带，按下时正好沉下这一层厚度 / 只有取得焦点的元素会变成黄底，下面再画一条黑线 / 字号只有 48、36、24、19、16px 这几档，中间没有别的尺寸
539
スケルトン・スクリーン / 2013– / 技法 / 界面风格
接近的原因Trust金融TechniqueCalm
加载时不出旋转图标，而是先把内容进入之前的空画面显示出来，再把信息一点点灌进去的做法。Luke Wroblewski 在2013年以自制应用 Polar 的反思为由，用这个名字介绍了它。它展示的不是让人等待这件事，而是事情正在推进。
加载过程中不出现旋转图标和进度条 / 正文和图片要落入的位置上，先放着同样尺寸的素面色块 / 内容到达之前版面就已确定，到达后元素也不移动 / 信息不是一次全出，而是按区域依次填满
538
.png)
1
.jpg)
42
326
.jpg)
118
554
Carbon Design System / 2015– / 风格 / 平台界面语言
接近的原因Trust金融TechniqueCalm
IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible.
IBM Plex and strong type hierarchy / White or deep-gray work surfaces / Dense tables, filters and side navigation / Blue reserved for action and focus
472
229
543
GitHub Primer / 2017– / 风格 / 平台界面语言
接近的原因Trust金融TechniqueCalm
GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior.
Neutral surfaces with blue links and restrained status colors / Octicons paired with short action labels / Thin borders separating lists, tabs and sidebars / Consistent steps of type and spacing even at high density
534
568
GitLab Pajamas / 2018– / 风格 / 平台界面语言
接近的原因Trust金融TechniqueCalm
GitLab's screen language connects code, issues, review, CI/CD and security inside one DevSecOps product through GitLab Sans and Mono, persistent navigation, dense lists and a purple-inflected neutral palette.
GitLab Sans paired with GitLab Mono for code / Layered structure built from left navigation and application chrome / Dense issue, merge-request and pipeline lists / White or charcoal surfaces with purple as brand focus
556
SAP Fiori / 2013– / 风格 / 平台界面语言
接近的原因Trust金融TechniqueCalm
SAP's role-based design language reduces enterprise processes to the information and actions each person needs, then carries them consistently across devices.
Role-based launchpad tiles / Shell bar and object pages / Compact tables and semantic status / Calm blue on pale work surfaces
566
PatternFly / 2012– / 风格 / 平台界面语言
接近的原因Trust金融TechniqueCalm
Red Hat's open-source screen language for enterprise products keeps complex infrastructure manageable through dense navigation, data views and tightly controlled status color.
Dark masthead and left navigation / Dense tables and forms on white or pale-gray work surfaces / Blue for primary action and red, orange or green for status / List, detail and action shown in coordinated panes
571
Canonical Vanilla / 2013– / 风格 / 平台界面语言
接近的原因Trust金融TechniqueCalm
Canonical's CSS-based screen language unifies Ubuntu, MAAS, Juju and related sites and applications through Ubuntu type, split grids, ruled sections and generous space, optimized for scanning long technical content.
Thin large headings paired with bold smaller headings in Ubuntu type / Asymmetric 25/75 and 50/50 splits / Fine rules above sections and generous vertical space / White surfaces, dark text and orange or aubergine focus
489
アドワイタ / 2011– / 风格 / 平台界面语言
接近的原因Trust金融TechniqueCalm
GNOME 给自己默认外观起的名字，指南规定亮色版、暗色版和高对比版必须用同一套部件来成立。窗口上端有一条顶栏横贯，放在上面的按钮既不画背景也不画边框。图标统一为 16x16px 的单色符号图标。
横贯窗口上端的一条顶栏，内容靠左、居中、靠右三点对齐，窗口的标题坐在中间 / 顶栏上的按钮没有背景也没有边框，面上只浮着符号和文字 / 以 16x16px 绘制的单色符号图标，主要笔画宽 2px，取不带透视的正面形态 / 公开的调色板，每个色相备齐五级，其中包括 Blue 3 的 #3584e4
544
Adobe Spectrum / 2013– / 风格 / 平台界面语言
接近的原因Trust金融TechniqueCalm
Adobe's cross-application design system. Under the principles Rational, Human and Focused, it changes density between desktop and mobile while keeping tool-heavy interfaces from pulling attention away from the work itself.
Neutral surfaces with vivid color reserved for selection / Icons, type and borders scaling together / Toolbars and property panels joined by fine divisions / The creative work stays stronger than the interface
561
Elastic UI / 2017– / 风格 / 平台界面语言
接近的原因Trust金融Technique
Elastic's interface system is made for searching, filtering and diagnosing large data sets without losing operational density.
Fixed header and left navigation / Persistent query, filter and time controls / Tables and time-series charts in shared panels / Bright series colors limited to data
59
545
Atlassian Design System / 2012– / 风格 / 平台界面语言
接近的原因Trust金融Technique
A system that translates the complexity of Jira and Confluence into shared tokens, content rules, spacing, grids and components. Consistency builds trust while keeping large sets of issues, documents and states navigable.
White and pale gray layers with blue primary actions / Rounded cards and lozenge-shaped status labels / Clear divisions among sidebar, table and detail pane / Color, spacing, radius and elevation controlled by tokens
546
Ant Design / 2015– / 风格 / 平台界面语言
接近的原因Trust金融Technique
A design system that keeps enterprise web applications at low entropy through reusable components and page patterns. Its values — Natural, Certain, Meaningful and Growing — systematize tables, forms, hierarchy and state without reducing information density.
Dense tables set in small type and fine rules / Blue primary actions with explicit semantic colors / Consistent forms, pagination, trees and tables / Readability achieved through alignment and repetition, not generous space
555
Salesforce Lightning / 2015– / 风格 / 平台界面语言
接近的原因Trust金融Technique
Salesforce's interface language for record-centered business work, organizing objects, actions and status into repeatable workspace patterns.
Object headers with compact metadata / Tabs, cards and activity timelines / Cloud blue with semantic status colors / Dense forms and record tables
557
米国Webデザインシステム / 2015– / 风格 / 公共设计
接近的原因Trust金融Calm
A shared system for accessible, mobile-friendly and trustworthy U.S. federal web services, built from tested public-service patterns.
White, navy and restrained federal red / Large plain headings and readable body text / Official-site banner / Clear forms, alerts and step indicators
6
7
%201%E2%80%935%20(1987)%2C%20Tate%20Modern%2C%20London%2C%20UK.jpg)
230
484
490
メタル（Java ルック＆フィール） / 1998– / 风格 / 平台界面语言
接近的原因Trust金融Technique
Sun 为 Swing 制定的默认外观，目的是让同一个程序在任何操作系统上看起来都一样。Metal 原本是 Sun 内部的项目代号，后来直接成了对外名称。蓝紫色的块面、一像素的平直边框，以及完全不模仿宿主平台的态度，就是它的标志。
内部窗口的标题栏是深蓝紫色的横带，压在淡蓝紫色的底上 / 标题栏和分隔线上压印着由细点与斜线组成的纹理 / 按钮是没有圆角的矩形，四周围着一像素的深蓝紫色细线 / 窗口的外框由操作系统绘制，框内的一切却遵循另一套视觉语言
547
Shopify Polaris / 2017– / 风格 / 平台界面语言
接近的原因Trust金融Technique
Shopify's UI framework for giving products, orders, payments and customers one commerce language. Cards and sections separate decisions, while short status and action language helps a merchant keep the store moving.
White cards stacked on a pale ground / Green used as success or forward motion / Title, status and primary action gathered at the top / Compact badges for product, order and payment states
558
NHSデザインシステム / 2016– / 风格 / 公共设计
接近的原因Trust金融Calm
The NHS system makes urgent health information and services calm, direct and consistent through plain language, strong focus states and tested clinical patterns.
NHS blue and generous white space / Large headings and short paragraphs / Callouts for warning and care advice / Visible focus and simple forms
559
BBC GEL / 2010– / 风格 / 平台界面语言
接近的原因Trust金融Technique
BBC's global experience language unifies news, video, audio and children's products through readable hierarchy, accessible media controls and reusable editorial components.
Black header over white content / Short bold headlines / News cards with consistent image ratios / Highly visible focus, captions and playback controls
580
CDEインターフェース / 1993–2000s / 风格 / 平台界面语言
接近的原因Trust金融Technique
The Common Desktop Environment unified UNIX workstations through Motif-derived bevels, a persistent Front Panel, workspace switching and low-color icons, making different hardware feel like one workplace.
Box-like Front Panel along the lower edge / Raised buttons and recessed fields made from paired light and dark borders / Low-color pixel icons with dark outlines / Persistent buttons for switching among workspaces
582
GNOME Clearlooks / 2005–2011 / 风格 / 平台界面语言
接近的原因Trust金融Calm
GNOME 2.12's standard theme made GTK applications friendly and simple through pale-gray windows, blue selection, restrained gloss and firm boundaries.
Pale-gray surfaces with blue selection bars / A quiet highlight only along button tops / Tabs and fields with restrained rounding / Small GNOME icons and a concise two-level hierarchy
485
オープンルック / 1988–1990s / 风格 / 平台界面语言
接近的原因Trust金融Technique
Sun Microsystems 以规格书形式公开出版的 UNIX 工作站画面语言。它同时规定了黑白显示用的版本和立体显示用的版本，共用元素一律用同一种无衬线字体来排，并规定颜色要用得克制。弹出窗口的左肩上有一枚图钉，钉下去窗口就留在工作面上。
弹出窗口页眉左端的图钉，钉住之后窗口不关闭，而是留在工作面上 / 标签后面跟着的三个点预告会出现另一个窗口，只有轮廓的三角形预告的是菜单 / 滚动条分成电梯、缆索和上下两个缆索锚点，缆索上颜色深的一段表示当前显示的比例 / 工作面用 50% 的网点做出，菜单的阴影用 75% 的网点
491
532
ゼロックス・スター・インターフェース / 1981–1990s / 风格 / 平台界面语言
接近的原因Trust金融Technique
1981年 Xerox 8010 的画面所确立的设计语言。文件夹、收发文篮、文件抽屉这类办公用品被画成带文字标签的图像排在屏幕上，当时的宣传册称之为电子桌面。画面上的东西可以用鼠标随意移动、复制和丢弃。
画面上的图像一定配有文字标签，不让图形单独承担意义 / 图像画的是办公桌上的东西，文件夹、收发文篮、文件抽屉 / 用鼠标抓取物件，移动、复制和删除属于同一套动作 / 电子表格表现为行与列的网格，操作网格的命令统一收进菜单
560
Mozilla Protocol / 2017– / 风格 / 平台界面语言
接近的原因Trust金融Technique
Mozilla's flexible web system puts content and global accessibility ahead of decoration while retaining a vivid open-web personality.
Bold black headings and broad white space / Large fields of vivid color / Flexible billboards and cards / Short copy and explicit calls to action
570
Ubuntu Yaru / 2018– / 风格 / 平台界面语言
接近的原因Trust金融Technique
Ubuntu's community-built default theme overlays Adwaita-based GTK and GNOME Shell with Ubuntu orange, dark header bars and Suru-derived icons, distributing windows, shell, icons, cursors and sound as one suite.
Light window body contrasted with a dark header bar / Ubuntu orange for selection and focus / Suru-derived icons based on circles, squares and vertical or horizontal oblongs / One-pixel icon edge, restrained gradient and lower shadow
32
58
8
31
2
24
55
%2C%20wood%20-%20Montreal%20Museum%20of%20Fine%20Arts%20-%20Montreal%2C%20Canada%20-%20DSC08989.jpg)
95
%2C%20RP-F-2008-51-2170-99.jpg)
425
IndexStyle并不收进所有设计相关术语。独立条目必须描述一种可辨认、可复现，并能与近邻区分的视觉语言。 收录标准