颜色

单一主色 + 极简语义色 + 纯净中性色。点击色块复制 HEX 值。

主色 / Primary（橙色阶）

primary-0

#FFF5EB

高亮背景

primary-100

#FFC18A

渐变起色

primary-200

#EF8B33

渐变中色

primary-300

#EB6E00

★ 主品牌色

primary-400

#E96C00

渐变结束

primary-500

#D06200

Hover / Pressed

primary-600

#B35400

深按压态

品牌渐变（135°，仅用于 logo 圆 + drawer header）： linear-gradient(135deg, #EB6E00 0%, #E96C00 100%)

平铺橙色 #EB6E00 在 90% 场景下足够。不要引入新的渐变。

语义色 / Semantic

success-300

#52C41A

成功 / 完成

error-300

#F4511E

错误 / 销毁

info-300

#3775F6

⚠ 仅用于用户头像

蓝色规则

#3775F6 专属于用户头像。不要在按钮、提示、链接等任何其它地方使用蓝色——这会破坏 user vs AI 的视觉区分。

中性色 / Neutrals

bg-page

#F5F5F5

页面背景

bg-card

#FFFFFF

卡片背景

bg-muted

#F0F0F0

次按钮 / 取消

bg-pill

#E0E0E0

禁用按钮

fg-1

#333333

主要文字

fg-2

#666666

次要文字

fg-3

#999999

占位 / 三级

border

#EDEDED

默认边线

规则。 无近黑、无米白、无染色灰。中性色保持纯净。

在代码中使用

颜色 token 跟随主题暗亮切换，必须通过 useColors() / useTheme().colors 在组件内拿；不要在模块顶层 import { colors }（顶层导出已删）。

import { StyleSheet } from 'react-native';
import { useColors, useThemedStyles } from '@unif/react-native-design';
import type { ColorTokens } from '@unif/react-native-design';

const makeStyles = (c: ColorTokens) =>
  StyleSheet.create({
    primary:   { backgroundColor: c.primary },        // 亮:#EB6E00 / 暗 同
    text:      { color: c.foreground },               // 亮:#333333 / 暗:#FFFFFF
    border:    { borderColor: c.outline },            // 亮:#EDEDED / 暗:#3A3A3C
    errorTint: { color: c.error },                    // 亮:#F4511E / 暗:#FF6B40
  });

function MyView() {
  const styles = useThemedStyles(makeStyles);
  const c = useColors(); // 也可拿来做 inline 计算的颜色 fallback
  // ...
}