设计与品牌素材

生成色阶并比较对比度，帮助设计易于访问的界面。

使用 Adobe 的公开配色工具探索色彩和谐关系并创建调色板。

免费字体系列，帮助读者区分形状相近的字符。

Atlassian 公开的界面基础规范、组件和设计指南。

为网站、幻灯片和产品配图生成矢量背景。

开源界面图标，提供 SVG、精灵图和图标字体格式。

免费界面图标；来源网站说明了署名要求及组件许可。

注重隐私的字体托管服务和开源字体目录。

按商业和电商用途分类的免费图库照片。

浏览精选调色板并复制色值，探索品牌的配色方向。

检查颜色组合的可读性，并根据对比度目标调整颜色。

用免费的浏览器配色生成器探索调色板；高级功能另行提供。

与他人协作，绘制产品流程、架构图和概念草图。

简洁的线框 SVG 图标，可根据界面调整尺寸和颜色。

Figma 的免费 Starter 套餐，适合探索界面设计；协作功能有使用限制。

搜索免费图标库，与付费 Pro 图标目录分开。

浏览采用开放许可的字体系列，并查看各系列的许可证。

探索适合网站和品牌排版的免费字体组合。

Indian Type Foundry 提供的免费字体，可用于个人及商业项目。

提供无障碍服务设计模式、组件和基于研究的设计指南。

GitHub 的开源界面设计模式和基础组件。

适用于网站、应用和品牌排版的开源字体系列。

在浏览器中生成 SVG 背景、波浪、形状和分层构图。

先查看调色板在示例页面上的效果，再选择品牌配色。

适用于 React 和 Vue 界面的无样式无障碍组件。

可调整前景色和背景色的重复平铺 SVG 图案。

Tailwind CSS 团队提供的线框和实心界面图标。

模块化人物插画库，可自定义姿势和服装。

开源设计系统，包含组件、设计模式和无障碍指南。

适用于产品和品牌设计系统的开源无衬线、衬线和等宽字体。

用可复用的人物、物件和背景搭建插画场景。

开源 SVG 图标及配套框架库。可在来源网站为下一款产品或发布活动挑选素材。

产品界面专用的可变字体，注重阅读体验。

风格一致的线框图标，提供 SVG 下载和框架包。

供网站、演示文稿和营销内容使用的免费插画库。

Google 公开的数字产品设计指南、组件和设计模式。

Google 的可变符号字体系列，可调整字重和填充。

以黑人及其他深色肤色人群为主角的免费照片，让视觉素材更具代表性。

GitHub 为产品和开发者界面提供的开源图标。

以 CC0 发布、可重复使用的手绘插画。可在来源网站为下一款产品或发布活动挑选素材。

可自由组合的人物插画库，适合演示文稿和产品场景。

开源 CSS 设计变量，涵盖间距、字体、颜色和动效。

按类别整理的开放许可设计工具、素材和学习资料目录。

开源界面设计工具，提供免费套餐和自行托管选项。

提供多种字重的图标系列，适合界面、图表和演示文稿。

免费的浏览器图像编辑器，可处理分层图像、模型图和常见设计格式。

为信息密集的产品界面设计的小尺寸图标。

无预设样式的无障碍界面基础组件，用于构建产品设计系统。

在示例网站布局中预览字体和配色组合。

风格统一的网页和移动界面图标库。可在来源网站为下一款产品或发布活动挑选素材。

自定义并下载明确标为免费的背景和图案素材。

可视化优化 SVG 文件，下载前查看文件大小变化。

Shopify 公开的面向商家的产品界面设计指南和组件。

SVG 品牌标志；请查看各品牌的商标和使用指南。

发布网站前，在浏览器中压缩图片并比较不同图像格式。

可自定义的免费插画，使用时需注明来源。

大型 SVG 界面图标库，提供框架包。

独立设计的开源字体，各字体有自己的许可证。

用免费工具探索标题和正文的模块化字号比例。

查找免费字体推荐，并通过来源链接查看各字体的许可证。

美国政府提供的无障碍设计组件和指南。

按 WCAG 对比度要求检查前景色与背景色。

查找可重复使用的媒体，并查看每个文件的许可和署名信息。

轻量图标，提供 CSS、SVG 和框架组件形式。

用免费编辑器创建图表和流程图，并可选择本地文件存储。

供网站和产品界面使用的开源插画库。

开源界面组件，可复制到自己的代码库中修改使用。

可编辑的插画，适合落地页和产品说明。

Fluent 2 Design System 提供产品设计或无障碍参考。代码、文档与图标等素材的许可可能不同，使用前请查看详情中的原始许可。

Ant Design 提供产品设计或无障碍参考。代码、文档与图标等素材的许可可能不同，使用前请查看详情中的原始许可。

PatternFly 提供产品设计或无障碍参考。代码、文档与图标等素材的许可可能不同，使用前请查看详情中的原始许可。

Zendesk Garden 提供产品设计或无障碍参考。代码、文档与图标等素材的许可可能不同，使用前请查看详情中的原始许可。

W3C Web Accessibility Tutorials 提供产品设计或无障碍参考。代码、文档与图标等素材的许可可能不同，使用前请查看详情中的原始许可。

Radix Colors 提供产品设计或无障碍参考。代码、文档与图标等素材的许可可能不同，使用前请查看详情中的原始许可。