| 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% |