用途:提供 20 多个可直接部署的设计令牌(design token)系统,按行业垂直领域组织,帮助团队快速落地一套有主张的默认设计系统,之后再按需定制。
主要能力:每个预设采用三层令牌架构,遵循 W3C DTCG 标准——第一层为原始值(primitive),第二层为语义令牌(semantic),第三层为组件令牌(component)。令牌类别涵盖颜色(80-120 个)、排版(20-30 个)、间距(16-20 个,base-4 从 0 到 96)、圆角、阴影、动效、断点、z-index 与透明度。颜色使用 oklch 色彩空间生成 10 级明度阶梯,并校验 APCA 对比度。
预设分组:SaaS/生产力(Linear、Notion、Stripe、Slack、Figma);金融科技/医疗(Mercury、Robinhood、Calm Health、Clinical);电商/社交(Shopify、Premium Commerce、Social Warm、Community);创意/奢华/开发(Studio、Luxury、Playful、Developer)。
使用方式:预设以 CSS 自定义属性、Tailwind v4 @theme 和 W3C DTCG JSON 形式提供,并附 Style Dictionary 4.x 配置与 Figma Variables 映射。参考文件包括 saas-fintech-presets.md、ecommerce-social-presets.md、creative-dev-health-presets.md、dtcg-json-presets.md。定制时可更换主色(在 oklch 中选品牌色相并生成明度阶梯)、调整灰阶色相使预设更暖、或切换为深色优先。
适用场景:需要快速启动设计系统的产品团队、按行业寻找视觉方向的开发者,以及希望统一 CSS 与 Tailwind 令牌来源的前端项目。
限制:资料未提供具体安装命令、收费方式、平台支持范围或实际效果数据;预设为有主张的默认值,深度定制需自行调整并重新校验对比度。