---
title: "一套系统， 五个平台。"
description: "Tanrei 是一个开源的设计系统。它把同样的令牌、同样的组件和同样的无障碍契约，以各平台自己的惯用方式交付到 Web、iOS、Android、Flutter 和 React Native。"
url: "https://tanrei.chnotchy.com/zh-cn/"
last_updated: 2026-10-17T15:47:59.000Z
---

# 一套系统， 五个平台。

> Tanrei 是一个开源的设计系统。它把同样的令牌、同样的组件和同样的无障碍契约，以各平台自己的惯用方式交付到 Web、iOS、Android、Flutter 和 React Native。

- Web
- SwiftUI
- Jetpack Compose
- Flutter
- React Native

- **个平台**: 5
- **个组件（计划）**: 96
- **已有规格**: 96
- **主题 × 对比度**: 6

## 从一开始就为保持同步而设计

### 两个唯一可信来源

由人手写的契约只有两种：设计令牌和组件规格。各平台的代码、这份文档和状态矩阵全都由它们推导而来，一旦彼此出现偏离，CI 就会失败。

### 对等，而非相同

每个平台得到的令牌、状态和无障碍语义都相同，但 API 的形态保持各自的习惯：Compose 中是 `enabled`，Flutter 中是把 `onPressed` 设为 null，SwiftUI 中是 `.disabled(_:)`。

### 经过验证的结构

参考、系统、组件三层令牌；颜色角色；字阶；按主题和对比度级别生成的色调调色板。外观克制，接近单色。

### 从结构上保证无障碍

每个主题、每个对比度级别下的对比度配对都在构建时校验。外观尺寸从不决定点击区域，焦点环是每份可交互组件规格的组成部分。

## 接下来读什么

- [开始使用](https://tanrei.chnotchy.com/zh-cn/getting-started/): 在你的平台上安装并使用 Tanrei。
- [基础](https://tanrei.chnotchy.com/zh-cn/foundations/brand/): 品牌、令牌、颜色、字体排印、形状、层级、动效和无障碍。
- [状态](https://tanrei.chnotchy.com/zh-cn/status/): 各平台目前已有的内容，由仓库自动生成。
- [Tanrei 是如何构建的](https://tanrei.chnotchy.com/zh-cn/project/how-tanrei-is-built/): 让五个平台如实保持一致的规格先行工作流。