布局角色 · 设计系统 · iantype.com

布局角色布局

展示

系统样例

页面容器

正文宽度

semantic.spacing.controlGroup控件组间距0.75rem
semantic.spacing.controlGap控件内部间距0.5rem
semantic.spacing.controlInline.sm小控件横向内距0.75rem
semantic.spacing.controlInline.md中控件横向内距1rem
semantic.spacing.controlInline.lg大控件横向内距1.25rem
semantic.spacing.segmentInset分段控制内距0.25rem
semantic.spacing.segmentGap分段控制项目间距0.25rem
semantic.spacing.card卡片内距1.25rem
semantic.spacing.section内容区块间距4rem
semantic.layout.contentMax内容最大宽度90rem
semantic.layout.readable正文宽度68ch

Token

2 个分类

名称	类型	浅色	深色	预览
`semantic.spacing.controlGroup`控件组间距	dimension	`0.75rem`	`0.75rem`	Aa
`semantic.spacing.controlGap`控件内部间距	dimension	`0.5rem`	`0.5rem`	Aa
`semantic.spacing.controlInline.sm`小控件横向内距	dimension	`0.75rem`	`0.75rem`	Aa
`semantic.spacing.controlInline.md`中控件横向内距	dimension	`1rem`	`1rem`	Aa
`semantic.spacing.controlInline.lg`大控件横向内距	dimension	`1.25rem`	`1.25rem`	Aa
`semantic.spacing.segmentInset`分段控制内距	dimension	`0.25rem`	`0.25rem`	Aa
`semantic.spacing.segmentGap`分段控制项目间距	dimension	`0.25rem`	`0.25rem`	Aa
`semantic.spacing.card`卡片内距	dimension	`1.25rem`	`1.25rem`	Aa
`semantic.spacing.section`内容区块间距	dimension	`4rem`	`4rem`	Aa
`semantic.layout.contentMax`内容最大宽度	dimension	`90rem`	`90rem`	Aa
`semantic.layout.readable`正文宽度	dimension	`68ch`	`68ch`	Aa

使用

使用规则

页面和组件通过语义或组件 Token 使用这些值。
不要在页面中复制原始值。
浅色和深色主题分别检查实际组合。