基础栅格GRID / 8X
081624324048
以 8 为步进，规范化布局与组件大小；默认容器左右 24px，轻坪效与轻效率场景可扩宽至 32px 或 48px。
Design system / Mobile
LIGHTVELA / MOBILE把每一次
把每一次
移动交互做得清楚。
一套来自 Figma 原生规范的组件语言，覆盖布局、颜色、文字、控件和内容场景。
TODAY
把复杂的事
变简单。
变简单。
基础栅格8 · 16 · 24 · 32 · 40 · 48
⌂⌕▣
8 px栅格步进
750 × 1624默认设计稿
24 / 32 / 48页面左右 Padding
21Figma 规范节点
01 / FOUNDATIONS
规则先于组件
从可复用的事实出发，组件才会保持一致。
容器 PaddingLAYOUT
24
32
48
统一内容边界，让页面层级有稳定节奏。
02 / COLOR SYSTEM
颜色带来层级
透明度属于颜色 token，方便设计与开发保持同一语义。
NewBlue#205AEF品牌 / 按钮 / 高亮
Red#F44837警示 / 强调
A1#242424主要文字
TokenLightDarkUse
A1 / A1D主要文本
A2 / A2D辅助文本
A3 / A3D弱提示
NewBlue / D品牌强调
03 / TYPOGRAPHY
文字有明确职责
PingFang SC 是 iOS 中文与英文默认字体；Android 使用 Source Han Sans SC，数字可用 DIN Next LT Pro。
T8
48 / 56 · 64
需要高突出的界面标题T7
40 / 48 · 56
动作选单按钮文字T6
36 / 44 · 52
信息流标题T5
34 / 42 · 50
卡片标题T4
32 / 40 · 48
列表标题文字T3
28 / 36 · 42
描述性文字T2
24 / 32 · 36
辅助信息04 / BUTTONS
一个主要动作
主按钮用于框架内最重要的操作；多个动作并列时降低视觉层级。
XS 40S 48M 56L 64XL 80XXL 96
05 / COMPONENTS
从场景组合组件
每一个组件都带着使用边界，方便在产品场景中直接复用。
NAV / 72二级 Tab
推荐视频小说资讯
底部 8px 高亮条，选中项使用 NewBlue。
INPUT / 96输入框
搜索内容获取验证码
32px 文字，40px 行高，底部 2px 品牌色线。
STATE空状态
暂无内容换个条件再试试图与标题整体居中，文案保持简洁明确。
MEDIA播放器控制
01:24
03:56
暗色场景使用 A1D 与 NewBlueD，信息高亮保持克制。
CONTENT / 686评论
LightVela体验很好，以下方面值得点赞2分钟前 ♡ 12
头像 64px，正文 28px/36px，辅助信息 24px/32px。
FEEDBACK通知与加载
保存成功
Toast、气泡自动关闭；阻断式加载只用于必须完成的任务。