neptay.com访问
作品细节
一览整套系统。
浅色与深色模式下的首页、品牌色板、字号层级，以及网站支持的十种语言。
概述
官网是客户和合作伙伴对我们的第一印象。我们以对待客户项目的同一标准，呈现 Neptay 的每一项业务。
项目需求
- 问题
- 将一家拥有两大业务板块和客户服务的媒体与科技公司，塑造为一个清晰、可信的品牌。
- 限制
- 十种语言（其中一种从右向左书写），外加两种配色模式。
- 方案
- 一套基于设计令牌的设计系统：一套色板、大字号排版、灰色面板，以及唯一的黄色标记。
Neptay Media & Technology Services 是一家媒体与科技公司。网站将两大业务板块和客户服务整合为一个清晰的品牌来呈现。
设计系统以品牌色板为基础：两种浅色中性色、两种深色调，以及唯一的一种黄色强调色。同一套设计令牌同时驱动默认的浅色模式和深色模式；站内所有界面都以代码绘制，因此始终与产品保持同步。
网站基于同一内容层，以十种语言发布，其中包括日语和从右向左书写的阿拉伯语。布局采用逻辑属性，镜像翻转干净利落；每个页面的路由、元数据、hreflang 和结构化数据都能感知语言区域。
方法
三项原则，贯穿始终。
让文字担纲主角
标题大而紧凑，导语沉稳克制。一个双色调标题，同时承载核心观点及其语境。凡是文字能胜任的，绝不交给图标。
一种强调色，只作标记
品牌黄只用来标记操作和重点——一个按钮、一句高亮短语、一个小方块。其余一切交给墨色、灰色面板和细线，浅色与深色模式皆然。
动效只做确认，不做表演
内容在首次出现时平稳上浮就位，卡片在悬停时轻轻抬起；当访客开启“减弱动态效果”偏好时，所有动画随即停止。
成果
它带来了什么。
本地化
10种语言
英语、土耳其语、德语、西班牙语、法语、葡萄牙语、俄语、阿拉伯语、日语和简体中文——每个页面都配置了 hreflang。
布局
从左到右，也从右到左
阿拉伯语版通过逻辑属性镜像整个布局，无需另写一套样式表。
配色
一套色板，两种模式
五种品牌色以设计令牌的形式应用：默认浅色模式与深色模式，每个页面都可切换。
系统
一套设计令牌
所有页面、两种配色模式和全部十种语言，共用同一套设计令牌。
技术栈
- Next.js 15
- React 19
- TypeScript
- CSS 设计令牌
- Geist
- Vercel