| TextPrimary1 | Effect one 颜色描述 | Effect - dark | 更新 | Effect - light |
|---|---|---|---|---|
Branding Color | ||||
| Primary | 品牌蓝色 | #0ECDEB 100% | ||
| Secondary | 表示进度的颜色 & 其他一些品牌露出的场景 | #0ECDEB 100% | ||
| Tertiary | 品牌蓝色 不透明度60% | #0ECDEB 60% | ||
System Color | ||||
| Link1 | Effectone 链接色 | #1481FD 100% | ||
| Positive | 表示完成成功的颜色 | #0ECDEB 100% | ||
| Positive2 | 表示完成成功的颜色，可用于文本 | #FFFFFF 90% | ||
| BGConstToastDefault | 灰色 Toast | #545454 100% | ||
| Negative | 表示删除、退出 | #FF4C3A 100% | ||
Text & Icon Color | ||||
| TextPrimary | 一级文字 / icon 颜色 | #FFFFFF 100% | #161823 100% | |
| TextPrimary1 | 一级文字 / icon 颜色(深色) | #162123 100% | ||
| TextPrimary2 | 一级文字 / icon 颜色(灰色) | #162123 75% | ||
| TextSecondary | 二级文字 / icon 颜色 | #FFFFFF 75% | #161823 75% | |
| TextTertiary | 三级文字 / icon 颜色 | #FFFFFF 55% | #161823 50% | |
| TextTertiary2 | // 仅为了处理后三个底 tab 上加文字的情况下的文字颜色映射 | #FFFFFF 75% | #161823 50% | |
| TextQuaternary | 四级文字 / icon 颜色 | #FFFFFF 34% | #161823 34% | |
| ConstTextInverse1 | 用在工具、视频页上的一级文字 / icon 颜色 | #FFFFFF 100% | ||
| ConstTextInverse2 | 用在工具、视频页上的二级文字 / icon 颜色 | #FFFFFF 75% | ||
| ConstTextInverse3 | 一级蓝色按钮上的文字 / | #000000 100% | ||
| ConstTextInverse4 | 拍照模式下拍照按钮颜色 | #FFFFFF 100% | ||
Background Color | ||||
| BGPrimary | Base Layer + 0% 白色 // 所有非视频页的底色 | # 121212 100% | # 121212 100% | |
| BGPrimary2 | Layer 1 透明色 + 叠加 4% 的白色 // 不可点击的辅助背景色 & 用在二级按钮 disabled 状态背景颜色 | #161E23 100% | #1B1B1B 100% | |
| BGPrimary3 | Layer 2 透明色 + 叠加 8% 的白色 // 其他弹板背景色 & 不可点击的辅助背景色 & 用在二级按钮 disabled 状态背景颜色 | #262626 80% | #242424 100% | |
| BGSecondary2 | Filter弹板背景色 | #000000 25% | #000000 25% | |
| BGSecondary3 | #FFFFFF 100% | #343B3F 100% | ||
| BGSecondary4 | 弹板标题背景色 | #000000 15% | ||
| BGTertiary | 所有弹窗背景色，动作菜单底色 | #FFFFFF 100% | ||
| BGInput3 | 滑杆默认底色 | #FFFFFF 15% | ||
| BGCard | card底色 | #FFFFFF 6% | ||
| BGCard2 | card底色高亮态 | #FFFFFF 15% | ||
| BGContainerModal | 弹窗背景色 | #FFFFFF 100% | ||
| ConstBGInverse | 视频/工具黑色底色 | #000000 100% | ||
| BGInverse2 | 首页poi、道具 tag、提示条背景色、视频页上的黑色按钮 | #000000 60% | ||
| BGInverse3 | 视频页倍速面板背景色 | #292929 34% | ||
| ConstBGContainer | 视频页上的二级按钮背景色 | #000000 12% | ||
| ConstBGContainer_Dark | 面板上的二级按钮背景色 | #FFFFFF 12% | ||
| ConstBGContainer2 | 视频页上的 封面 placeholder 加载色 | #000000 12% | ||
| ConstBGContainer3 | 视频页上的二级按钮 disabled 状态背景色 | |||
| ConstBGContainer4 | 视频页上拍摄按钮的拍摄状态背景色 | # E4E4E4 34% | ||
| ConstBGContainer5 | 面板上的二级按钮未选中态/选项背景色 | #3A3A3A 50% | ||
| ConstBGContainer6 | 工具页上的二级按钮背景色 | #686767 100% | ||
| ConstBGContainer7 | 音乐库、音效库面板上的选中态背景色 | #FFFFFF 7% | ||
| ConstBGContainer8 | 视频页倒计时滑动框背景 | #3A3A3A 34% | ||
| ConstBGContainer9 | 视频页倍速面板选中项背景 | #FFFFFF 100% | ||
Screen Dimming | ||||
| SDPrimary | // 太深，尽量不用 | #000000 80% | ||
| SDSecondary | 蒙层默认色值 | #000000 50% | ||
| SDTertiary | 轻蒙层色值 | #000000 20% | ||
Shadow | ||||
| ShadowPrimary | TikTok 较深的阴影色 | |||
Line Color | ||||
LinePrimary | 在浅色模式下用于区分层级的分割线 20% 透明度，并且在深色模式下不显示： | #161F23 20% | ||
| LineDarker | 深色分割线 | #161823 3% | ||
| ConstLineInverse | 视频页、工具里较深的分割线 | #FFFFFF 20% | ||
| ConstLineInverse2 | 视频页、工具里较浅的分割线 | #FFFFFF 8% | ||
| ConstLineInverse3 | ||||
Assist Color | ||||
| AssistColorPink1 | 音乐轨底色 | #FF6D6D 100% | ||
| AssistColorPink2 | 音乐轨文字 | #4F0000 100% | ||
| AssistColorPinkMask | 音乐轨波形 | #270404 20% | ||
| AssistColorYellow | ||||
| AssistColorGreen | ||||
| AssistColorPurple1 | 音效轨底色 | #8773FF 100% | ||
| AssistColorPurple2 | 音效轨文字 | #28015C 100% | ||
| AssistColorPurple3 | 录音-录制中-mask | #130EEF 60% | ||
| AssistColorBlueMask | 遮罩 | #0ED1EF 45% | ||
| AssistColorOrange | ||||
| AssistColorRed | ||||
| AssistColorBrown | ||||
| AssistColor | ||||
| AssistColor | ||||
| LiveColorStart | ||||
| LiveColorEnd | ||||
| LiveColorStart | ||||
| LiveColorEnd | ||||
| Gradientlive | ||||
| GradientGreen | ||||
| LineInverse2 | 视频页、工具里较浅的分割线 | #FFFFFF 12% | #FFFFFF 12% |