Atomic Design: Quarks 聚焦于设计系统中最底层的一环——夸克（Quarks），即亚原子级的构建块，是组成原子的最原始设计值。
一、什么是夸克 夸克在 Brad Frost 的原子设计方法学基础上，于“原子（Atoms）”之下增加了一个层级。原子是最小的 UI 组件，而夸克是最小的设计值，即构建原子的原材料。夸克具有四个特征：是原始值（颜色、间距单位、字号、阴影）；是非可视的（自身不渲染任何内容）；是设计令牌（定义设计语言的命名常量）；由原子消费（原子导入并使用夸克进行样式设置）。
夸克与原子的区别：夸克是值/令牌，不渲染任何内容（如 CSS 变量、常量），示例为 --color-primary-500、spacing.md，处于基础层不导入其他内容，用途是定义设计语言；原子是 UI 组件，渲染可视元素，示例为 Button、Input、Label，只导入夸克，用途是实现设计语言。
二、常见夸克类型 文档给出了各类夸克的代码示例，包括：颜色令牌（品牌色与语义色的多级色阶）、间距令牌（px、0 至 24 的数值刻度及语义别名 none 到 3xl）、字体排版令牌（fontFamily、fontSize、fontWeight、lineHeight、letterSpacing）、边框令牌（borderRadius、borderWidth）、阴影令牌（shadows 及 focusRings）、动画令牌（duration、easing、transitions）、断点令牌（breakpoints 与 mediaQueries）、z-index 令牌。以上示例均以 TypeScript 常量配合 as const 导出。
三、CSS 自定义属性 文档说明可把夸克导出为 CSS 自定义属性以实现运行时主题化，并给出 generateCSSVariables() 函数示例及其生成的 variables.css 输出，采用 :root 与 --color-、--spacing-、--font-size- 等命名。
四、目录结构与导出 推荐将令牌集中放在 src/quarks/ 下（colors.ts、spacing.ts、typography.ts、borders.ts、shadows.ts、animations.ts、breakpoints.ts、z-index.ts、css-variables.ts 及生成的 variables.css），组件放在 src/components/ 下按 atoms、molecules、organisms、templates、pages 分层；quarks/index.ts 作为统一桶导出入口。
五、在原子中使用夸克 文档给出三种用法示例：CSS-in-JS（styled-components/emotion）直接引用令牌；CSS Modules 通过 CSS 变量在样式中引用；Tailwind CSS 通过 tailwind.config.js 引入 colors、spacing、fontSize、borderRadius 等令牌。
六、主题与暗色模式 通过 themes.ts 定义 lightTheme 与 darkTheme，并提供 theme-light.css、theme-dark.css（以 [data-theme="dark"] 切换）的 CSS 变量方案。
七、最佳实践 包括：使用语义化命名而非原始颜色名；保持一致的色阶；通过 as const 与类型导出保证类型安全；以夸克作为唯一真实来源，避免组件内硬编码；为令牌添加文档注释。
八、应避免的反模式 包括：夸克中混入逻辑（应保持纯值，逻辑放到组件/主题中）；为特定组件创建令牌（应使用通用语义令牌）；令牌数量过多（应采用有意图、可用的刻度）。
九、适用场景 搭建新设计系统的设计令牌；将现有 CSS 变量组织为结构化系统；创建可主题化的组件库；确保大型代码库的一致性；构建白标或多品牌应用；从硬编码值迁移到设计令牌。
十、相关技能与资源 相关技能包括 atomic-design-fundamentals、atomic-design-atoms、atomic-design-integration。文档还列出了设计令牌 W3C 社区组、Style Dictionary、Tokens Studio 等文档资源，以及 Figma Tokens、Style Dictionary、Theme UI 等工具链接。
关于收费、价格、平台支持范围等具体信息，资料中暂未提供。