Flighty

午夜控制塔:明亮的控制室中,发光屏幕围绕单个设备浮动。
Flighty结合了出发信息板与控制塔:页面上半部像清晰的白色机场信息面板,之后进入深午夜紫色控制室,屏幕在黑暗中发光。色板绝大部分为无彩色,唯一鲜亮蓝色(#007bff)用于操作,唯一琥珀黄色(#f7be00)用于下载转化,在深浅表面上形成一套信号灯系统。排版自信厚重,56px展示标题使用紧凑的-0.025em字间距,像登机口变更公告一样有力,搭配紧凑的system-ui正文。标志性元素是被浮动通知卡片包围的手机模型;柔软、有阴影、略微倾斜的卡片显示延误、登机口变化、值机开放等实时航班数据,环绕设备,让产品显得鲜活而非静止。表面几乎平坦,采用极低不透明度阴影(0.02–0.04)与极细边框,因此深度来自叠层和页面由浅到深的过渡,而非浓重投影。
查看原始网站使用规范
建议采用
- 使用system-ui,字重范围400-700,绝不为正文或UI文字引入定制无衬线字体。
- 展示标题采用56px system-ui 700、-1.4px字间距及1.00行高;紧凑字间距与完整行高构成公告板的语气。
- #007bff仅用于任一表面上唯一最重要的操作,绝不用作装饰、标签或次要按钮。
- #f7be00仅用于下载转化时刻,搭配下载图标和深色周围环境,以获得最强信号感。
- 所有按钮、标签、导航元素和图标容器采用999px圆角;胶囊形是系统默认形状,必须使用。
- 通知卡片采用轻微旋转(-3°至+3°),围绕产品模型摆放,使用20px圆角和极轻阴影,形成散落、实时的感觉。
- 浅色与深色区块之间无缝过渡,深色画布采用#0d0021,保持同一字号尺度,只更换颜色设计变量。
建议避免
- 不要添加比0.02-0.04不透明度系统更浓的投影;沉重阴影会破坏平面的出发信息板美学。
- 除特定操作职责外,不要将#007bff或#f7be00用于文字、边框或背景;它们是信号色,而非品牌铺色。
- 不要引入第二种无衬线字体,system-ui覆盖从说明文字到展示文字的完整范围。
- 卡片、按钮或容器不要使用锐利直角(0-4px圆角);系统最小卡片圆角为8px,默认16-20px。
- 不要为正文添加彩色边框或背景;浅色上文字保持#000或#333,深色上保持#fff或#cfcfcf。
- 不要挤压区块;即使信息密度紧凑,也保持64-80px区块间隔,让大标题有呼吸空间。
- 不要将#d92d20红色作装饰,它仅是取消和严重延误的功能性警报色。