Brand & UI Foundations品牌与界面基础

Design System设计系统

One brand color, derived directly from the Z·Pilot logo. One typographic scale. One set of components — applied consistently across web, H5 and the future mini-program. 一个品牌主色,直接取自 Z·Pilot Logo;一套字号阶梯;一套组件——在官网、H5 与未来小程序间保持一致。

Brand pink locked品牌粉已锁定 No color options无可选配色 Inter · Noto Sans SC #CD5E9D
02 — Color色彩

Color palette色彩体系

The brand pink is sampled exactly from the logo — #CD5E9D (a soft mauve-pink, not hot magenta). Every pink surface derives from this one value. There is no alternate scheme.品牌粉精确取自 Logo —— #CD5E9D(柔和的藕粉,而非荧光玫红)。所有粉色界面均由这一基准色派生,不提供其他配色方案。

Brand品牌色
Brand / Pink
#CD5E9D
--pink
Primary buttons, links, active states主按钮 · 链接 · 选中态
Pink 600
#BC5491
--pink-600
Hover / pressed悬停 / 按下
Pink 700
#A4476F
--pink-700
Pink text on white (legible ≈5.8:1)白底粉字(对比≈5.8:1)
Pink Soft
#F7E3EF
--pink-soft
Chip / badge backgrounds标签 / 徽章底色
Pink Tint
#FCF2F7
--pink-tint
Faint section wash浅色区块背景
Neutrals中性色
Ink
#0A0A0A
--ink
Primary text主文字
Ink 2
#666666
--ink-2
Secondary text次级文字
Ink 3
#999999
--ink-3
Tertiary / captions辅助 / 注释
Line
#E5E5E5
--line
Borders / dividers边框 / 分割线
BG 2
#FAFAFA
--bg-2
Near-white sections近白区块
BG / Card
#FFFFFF
--bg
Page & card background页面 / 卡片底色
Status状态色
Green
#1F9D57
--green
Launched / done已上市 / 完成
Blue
#2563EB
--blue
In review / prototype审核中 / 原型
Amber
#C77700
--amber
Mentor match / pending导师匹配 / 待办
Red
#DC2626
--red
Rejected / error驳回 / 错误
03 — Typography字体

Type scale字号阶梯

English in Inter, Chinese in Noto Sans SC (思源黑体), display accents in Plus Jakarta Sans. One shared scale keeps PC, H5 and mini-program aligned.英文用 Inter,中文用 思源黑体 Noto Sans SC,标题强调用 Plus Jakarta Sans。统一阶梯使 PC、H5 与小程序保持一致。

H1 · 56 / 700
From Idea to Product从想法到产品
H2 · 40 / 700
From Maker to Brand从创客到品牌
H3 · 28 / 700
Submit your idea提交你的想法
H4 · 20 / 600
Mentor network导师网络
Lead · 19 / 400
A platform for AI-hardware creators.一个面向 AI 硬件创作者的平台。
Body · 16 / 400
Start with an idea. Connect with mentors, resources and the ecosystem to build the next generation of AI hardware.从一个想法开始,连接导师、资源与生态,打造下一代 AI 硬件与创意产品。
Small · 14 / 400
Draft auto-saved every 10 seconds.草稿每 10 秒自动保存。
Mono / tabular
ZPL-2026-0042 · 1,289+ · 86%
04 — Geometry & Motion几何与动效

Radius, shadow & motion圆角 · 阴影 · 动效

Soft, single-layer shadows and calm easing. No bounce, no spring — the product should feel precise, not playful.柔和的单层阴影与平稳缓动。不弹跳、不回弹——产品要显得精确,而非花哨。

Radius圆角
4px · button-ish
9px · --r-btn
14px · --r-card
999 · --r-pill
Shadow阴影
--shadow-card
--shadow-hover
--shadow-pop
Motion & layout tokens动效与布局令牌
--easecubic-bezier(0.22, 1, 0.36, 1)
--t200ms var(--ease)
--maxw1200px — content max width— 内容最大宽度
--pad-x64px / 24px on mobile移动端
05 — Components组件

Core components核心组件

Every screen is built from this kit. Pink is reserved for the primary action and active state — used sparingly, it reads as a brand signal, not decoration.所有页面均由这套组件搭建。粉色只用于主操作与选中态——克制使用,作为品牌记号而非装饰。

Buttons按钮
Chips & status badges标签与状态徽章
AI Hardware Wearable Selectable可选 Selected已选 Prototype原型开发 In Review审核中 Mentor Match导师匹配 Launched已上市 Rejected已驳回 Draft草稿
Form controls表单控件
Keep it under 60 characters.不超过 60 个字符。
Cards卡片
Store Test门店测试Pet Tech
BarkSense

An emotion-sensing collar for pets.一只能读懂宠物情绪的项圈。

Lena Chu
David Okafor
Hardware mentor硬件导师
PCBDFM
Book a Session预约咨询
Bilingual by construction. Every label ships as paired .en / .zh spans; the EN/中 toggle swaps the whole product, including form placeholders. User-entered project content is not force-translated. 双语原生。每个文案都以成对的 .en / .zh 提供;EN/中 切换会同步整站,包括表单占位符。用户填写的项目内容不强制翻译。