iBox 3.0

iBox 3.0 是新一代数字藏品交易平台的移动端界面,专注于为用户提供清爽、高效的数字资产管理和交易体验。整体设计语言追求简洁、现代、专业,强调内容优先和操作效率。 设计系统基于移动端优先原则,默认画布宽度为 375px,最小高度为 812px。设计文件存储在 Figma,使用 Token 系统确保设计一致性。

品牌主色#DF3136
品牌辅助色#356DC3
页面背景#F5F6F7
卡片背景#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

heroNumberHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

titleLargeHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 24px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

titleHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 22px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

titleSmallHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

navTitleHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 17px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyLargeHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyMediumHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 14px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodySmallHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

labelMediumHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

assistHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 11px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

captionHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 10px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

tabHarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif, Inter, SF Pro Text, system-ui · 9px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

brandAlibaba PuHuiTi 3.0 · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px
4px
8px
10px
12px
16px
20px
24px
32px
343px
355px

iBox 3.0 是新一代数字藏品交易平台的移动端界面,专注于为用户提供清爽、高效的数字资产管理和交易体验。整体设计语言追求简洁、现代、专业,强调内容优先和操作效率。 设计系统基于移动端优先原则,默认画布宽度为 375px,最小高度为 812px。设计文件存储在 Figma,使用 Token 系统确保设计一致性。

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Elevation & Depth

raised

Do's & Don'ts

Do

使用 Token 系统定义的颜色、间距、圆角
保持移动端页面宽度 375px
品牌主色用于交易和强调,中性黑用于系统确认
敏感信息必须脱敏
模块间保持合理间距(16/20/24px)
Accessibility

文字与背景对比度至少 4.5:1

可点击区域最小 44×44px

重要操作提供明确反馈

表单错误提供清晰提示

支持动态字体缩放

Responsive

虽然以移动端为主,但设计应考虑不同屏幕尺寸:

小屏: 320px - 375px

标准: 375px - 414px

大屏: 414px+

关键内容和操作在小屏上也应完整可用。

Download .md

License MIT
Uploaded 5 days ago
Version v1
File size 7.7 KB
Downloads 13
Copies 3

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/hightall/ibox-3-0 and implement it in my code

Don't have the MCP? Install it here