间距与圆角

间距以 4px 为基本单位，分八档。圆角是一组短的阶梯，每种圆角各有用途。

间距

页面里的大段之间隔 --space-section，处处一样，不会在某一页收紧。卡片内边距看卡片的种类：功能卡和对比卡 32px，内容窗口 24px，网格小块 20px。网格变窄时减少列数，不缩小卡片。

Token	值	说明
--space-xxsspace.xxs	4px
--space-xsspace.xs	8px
--space-smspace.sm	12px
--space-mdspace.md	16px
--space-lgspace.lg	24px
--space-xlspace.xl	32px
--space-xxlspace.xxl	48px
--space-sectionspace.section	96px	大区块之间的距离，全站一致。

页面宽度和断点

内容最宽到 --container-max。两侧都有侧栏的内容页改用 --container-wide，这样中间一栏保持阅读宽度 --container-reading，两边各一条侧栏。正文永远不超过阅读宽度。

系统只有两个断点：到 --break-rails 时右侧栏收起，到 --break-stack 时全部堆叠，主栏在最前面。

Token	值	说明
--container-maxcontainer.max	1200px	内容宽度。
--container-readingcontainer.reading	680px	单栏阅读宽度：文章正文、关于页。
--container-widecontainer.wide	1360px	三栏内容页：两侧栏加间距，中间保留完整的阅读宽度。
--nav-heightnav-height	64px	顶部导航栏高度。
--control-heightcontrol-height	40px	输入框和按钮的高度。
--icon-button-sizeicon-button-size	36px	只有图标的按钮。
--rail-leftrail.left	200px
--rail-rightrail.right	280px
--break-railsbreak.rails	1080px	小于这个宽度时去掉右侧栏。
--break-stackbreak.stack	768px	小于这个宽度时全部变成单栏，正文在最前。
--tap-mintap-min	44px	768px 以下的最小触控尺寸。元素加 data-ds-tap 属性才生效。

圆角

圆角表明东西是什么：按钮和输入框 8px，内容卡片 12px，头图这类大块展示 16px，标签用药丸形，头像和图标按钮用圆形。4px 和 6px 留给标签的点缀和菜单项。

Token	值	说明
--radius-xsradius.xs	4px
--radius-smradius.sm	6px
--radius-mdradius.md	8px
--radius-lgradius.lg	12px
--radius-xlradius.xl	16px
--radius-pillradius.pill	9999px
--radius-fullradius.full	9999px