系统颜色

主题颜色

  1. 主题主色调

    1
    app_color = FF0074FF

  2. 背景颜色

    1
    bg_color = FFF7F8FC

  3. 阴影颜色

    1
    eve_color = 05000000

  4. 蒙层颜色，用于展示该item已选中不可点击,[B3：70]

    1
    mask_color = B3FFFFFF

  5. 弹框透明底色

    1
    dialog_bg_color = CC000000

字体颜色

  1. 标题、或者是文本主题颜色，用于一级文字。如导航栏标题，产品信息，个人中心，弹窗状等

    1
    text_main = FF333333

  2. 二级标题颜色，用于二级文字信息。如导航栏二级标题，产品辅助信息，分享，弹窗副文本内容等

    1
    text_sub = FF838383

  3. 文本内容颜色，用于大面积描述性文本。如标题下面的正文。

    1
    text_content = FF666666

  4. 说明类型文字颜色，用于说明、解释性文字信息。如产品交易记录时间显示，产品下介绍内容等

    1
    text_decs = FF999999

  5. 输入框说明类型文字颜色，用于登录/注册输入框提示信息。

    1
    text_hint = FFBBBEC7

  6. 不可用的字体颜色

    1
    text_disable = FFCCCCCC

  7. 项目警示性信息颜色

    1
    text_notice = FFFF4040

按钮颜色

  1. 正常按钮颜色

    1
    btn_color = FF0075FF

  2. 按钮按下的颜色（一般系统有水波纹效果）

    1
    btn_color_press = FF0040FF

  3. 不可点击按钮的颜色

    1
    btn_color_disable = FF237CE5

分割线颜色

  1. 正常分割线颜色
    1
    divide_color = FFEDEDED

主题的红、黄、蓝、绿、橘

  1. 红

    1
    red = FFFF4040

  2. 黄

    1
    yellow = FFFEBE06

  3. 蓝

    1
    blue = FF0075FF

  4. 绿

    1
    green = FF19BE6B

  5. 橘

    1
    orange = FFFFB55A

其他

  1. 提示信息背景色，比如用于断网提示背景
    1
    tps_bg_color = FFFFF6E6

系统尺寸

主题尺寸

  1. 标题栏高度

    1
    title_bar_height = 56

  2. 状态栏高度（系统不可更改）

    1
    status_bar_height =25

  3. 标题栏菜单宽度和高度（一般推荐采用标题栏高的正方形）

    1
    bar_menu_width = 56

  4. 边距（内容到屏幕的距离）

    1
    margin = 12

  5. 卡片、条目之间的上下间距

    1
    margin_item = 10

组件尺寸

  1. 按钮的高度

    1
    2
    3
    4
    5
    6
    // 主要按钮的高度
    btn_height = 48
    // 在条目里按钮的高度
    item_btn_height = 30
    // 在条目里按钮的宽度,这里一般做最小宽度限制
    item_btn_width = 60

  2. 输入框的高度

    1
    edit_height = 40

  3. 条目的高度

    1
    item_height = 48

  4. 搜索框高度

    1
    search_height = 64

  5. 分割线的高度

    1
    divide_height = 0.5

文字尺寸

  1. 超大文本文字尺寸

    1
    font_size_max = 27

  2. 大文本文字尺寸

    1
    font_size_big = 23

  3. 标题文字尺寸

    1
    font_size_title = 17

  4. 普通按钮字体

    1
    font_size_btn = 16

  5. 二级标题文字尺寸

    1
    font_size_sub = 15

  6. 文本文字尺寸

    1
    font_size = 14

  7. 说明文字尺寸

    1
    font_size_desc = 13

  8. 输入框提示文字尺寸

    1
    font_size_hit = 12

  9. 小文本文字尺寸，比如红点消息个数

    1
    font_size_min = 11

圆角尺寸

  1. 卡片圆角

    1
    radius = 5

  2. 按钮圆角

    1
    2
    3
    4
    5
    6
    // 普通按钮圆角
    radius_btn = 6
    // 小按钮圆角
    radius_btn_min = 3
    // 椭圆按钮圆角
    radius_oval_btn = 20

  3. 弹框圆角

    1
    2
    3
    4
    5
    6
    7
    8
    // 普通弹框圆角
    radius_dialog = 15
    // 底部弹框圆角
    radius_dialog_sheet = 15
    // 活动弹框圆角（也可以视为普通弹框）
    radius_dialog_activity = 15
    // 搜索圆角
    radius_search = 25