Cora

如同浪漫天空画中悬浮着书桌。
Cora将浪漫的户外写生天空画与精确产品界面配对,页面像仰望云层中的自由,再回到平静书桌。标志性手法是将满幅氛围插画作为画布,而非横幅:树枝、积云和鸟占据整个视口,UI元素悬浮其上,像贴靠窗面的卡片。排版具有文学感,轻字重衬线signifier用于标题,在多数SaaS网站高声表达之处低语,主力无衬线switzer则处理产品表面。色彩保持极少,鲜亮蔚蓝天空、用于填充操作的唯一深藏青色,以及作为单一墨印强调的暖红,因此情感表达由绘画和文字承担,而非调色板。
查看原始网站使用规范
建议采用
- 首屏和过渡分区以满幅天空插画作为页面画布;绝不要裁成横幅形状或放进卡片。
- 所有投影使用品牌蓝色调,即0.25不透明度的#0d5c96或rgba(0,0,0,0.1);中性灰阴影会破坏氛围。
- 衬线signifier采用300字重,无衬线switzer采用400-500;绝不要将UI文字设为衬线,或把标题设为粗无衬线。
- 每个按钮和标签都采用9999px胶囊圆角;方形或圆角矩形按钮会破坏系统柔软感。
- 满幅天空分区与白色内容分区交替,形成绘画 → 安静 → 绘画的呼吸韵律。
- 调色板限定为白色、蔚蓝、午夜藏青色、氛围蓝和唯一红色强调,不引入额外彩色UI颜色。
- Primary Filled Action背景设为#09426c(Midnight Navy),而非#117bc8;填充按钮必须比天空更深,才能像前景物体。
建议避免
- 不要用实色#117bc8作为填充按钮背景,它会融入天空画布;填充操作必须为Midnight Navy(#09426c)。
- 正文、导航项或按钮标签不要采用衬线signifier;它只留给24px及以上标题。
- 悬浮于天空的标题后方不要添加卡片或面板;文字应直接落在插画上。
- 不要使用#cccccc或#e0e0e0中性灰边框;所有边框只能是白色上的#dadada细线,或天空上的#60a8dd。
- 天空插画不要裁切、叠加渐变或施加模糊,必须以原始状态满幅展示。
- 不要引入绿、紫、黄等额外强调色相;调色板有明确纪律,蔚蓝、藏青色、唯一红色与中性色。
- 正文字号不要低于14px或高于18px;switzer针对这一范围调校,超出会失去清晰感。