Menu
CoddyTech

颜色

Coddy 品牌色

品牌色只有一个:Coddy Blue。洋红色专属于 Bugsy。其他每种颜色在产品里都有特定含义,所以绝不会只为装饰而出现。

复制格式

品牌

两个有名字的颜色

Coddy Blue 用于标志、Bit、链接和点缀。Bugsy Magenta 只用于 Bugsy 和 AI 导师。

Coddy Blue

唯一的品牌色。用于标志、文字标志、Bit 和点缀。

深色背景上的 Coddy Blue

同一种蓝,在深色背景上提亮。

Bugsy Magenta

只用于 Bugsy 和 AI 导师功能,其他地方一律不用。

产品

有含义的颜色

学习者会把这些颜色当作信号来读。橙色是你的连胜,金色是你的分数。请只在对应的含义上使用它们。

连胜

连胜火焰和每日连胜时刻。

分数

XP、分数、金币和宝石。

能量

能量闪电和每日上限。

Pro

Coddy Pro 和高级功能。

成功

通过的测试、完成的课、正确的答案。

红心

红心和生命值。

连胜冻结

冻结的连胜,帮你保住漏掉的那一天。

界面

按钮和链接

我们的按钮下方有一层更深的阴影,点击时会被按下去。试试看。

按钮蓝

网页浅色主题下的主按钮。

按钮阴影

按钮蓝下方那道按压边缘。

深蓝

次要按钮和链接。

深色主题按钮蓝

深色背景上的主按钮。

背景

浅色和深色

干净的白色或极浅的蓝色,大量留白,一个视觉焦点。深色模式是暖调炭灰色,绝不是纯黑。

白色

浅色主题的背景。

薄雾

浅色主题下的卡片和次要区域。

天空淡蓝

落地页的浅蓝色区块。

炭灰

深色主题的背景。

石墨

深色主题下的卡片。

编辑器

代码编辑器的背景。

渐变

两片天空

浅色天空

浅色主题下的首屏区块和重要时刻。

深色天空

同样的思路,换到日落之后。

易读

达标的对比度

Coddy Blue 是一种明亮欢快的蓝,非常适合插画和点缀,但用作白色小字的背景就太浅了。下面是常见配色组合的评分。

Coddy4.13:1
仅限大字
按钮蓝上的白色,用于加粗的按钮文字。
Coddy3.99:1
仅限大字
Coddy Blue 上的 Bit 藏青色。
Coddy8.02:1
达标
Coddy Blue 上的黑色。
Coddy6.35:1
达标
炭灰上的 Coddy Blue。
Coddy5.08:1
达标
Bugsy Magenta 上的白色。
Coddy2.62:1
仅限插画
Coddy Blue 上的白色。适合大幅插画,绝不能用于正文。

常见问题

关于颜色的问题

Coddy 的品牌色是什么?

Coddy Blue,#29ABE2。在深色背景上,网站会把它提亮到 #34B4E4。

Bugsy 为什么是另一种颜色?

洋红色告诉你,这是 AI 导师在说话。它专属于 Bugsy 和她的功能,所以不会出现在其他地方。

我可以在设计里使用连胜橙或分数金吗?

只能按它们的含义使用。在 Coddy 里,橙色代表连胜,金色代表分数,拿来做装饰会让学习者困惑。

要写关于 Coddy 的报道?

公司资料、创始人信息和媒体联系方式都在媒体页面上。 前往媒体资料包

Coddy 编程语言插图

和 Coddy 一起学编程

开始