Section

Structural components that divide page content into thematically related areas, providing clear visual separation and content organization.

This documentation is a work in progress and may contain incomplete or outdated information. If you have any feedback or suggestions, please open an issue on GitHub.

Tokens

Design tokens that control the visual appearance, spacing, and behavioral characteristics of section components, ensuring consistent content organization across different layout contexts and maintaining design system coherence.

Theming Tokens

Design tokens organized by category with color-coded labels indicating their scope and impact level. Each token includes detailed specifications with values, usage guidelines, and customization options.

Legend:

Granular tokens that affect only this component.
Granular tokens that affect other components.
Semantic tokens that affect the whole application.
Base tokens that affect the whole application.

Color

Component Token	Base Token
color.section.fg-large	{color.context.default.fg-main}
color.section.fg-medium	{color.context.default.fg-main}
color.section.fg-small	{color.context.default.fg-main}
color.section.icon-large	{color.context.default.icon-main}
color.section.icon-medium	{color.context.default.icon-main}
color.section.icon-small	{color.context.default.icon-main}
color.context.default.border-subtle	{color.base.context.light.default.border-subtle}

Typography

Component Token	Base Token
font.section.header-large	{font.text.large.strong}
font.section.header-medium	{font.text.medium.strong}
font.section.header-small	{font.text.small.strong}
font.text.large.normal	{fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.normal}, lineHeight: {typography.lineHeight.text.large}, fontSize: {typography.fontSize.text.large}, letterSpacing: {typography.letterSpacing.base.zero}, paragraphSpacing: {typography.paragraphSpacing.base.zero}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}}
font.text.medium.normal	{fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.normal}, lineHeight: {typography.lineHeight.text.medium}, fontSize: {typography.fontSize.text.medium}, letterSpacing: {typography.letterSpacing.base.zero}, paragraphSpacing: {typography.paragraphSpacing.base.zero}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}}
font.text.small.normal	{fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.normal}, lineHeight: {typography.lineHeight.text.small}, fontSize: {typography.fontSize.text.small}, letterSpacing: {typography.letterSpacing.base.zero}, paragraphSpacing: {typography.paragraphSpacing.base.zero}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}}

Sizing

Component Token	Base Token
size.icon.glyph.large	{size.unit.28}
size.icon.glyph.medium	{size.unit.24}
size.icon.glyph.small	{size.unit.20}
size.asset.separator	{size.unit.1}

Spacing

Component Token	Base Token
size.context.large	{size.unit.48}
size.context.medium	{size.unit.40}
size.context.small	{size.unit.32}
size.context.xsmall	{size.unit.24}

Border Width

Component Token	Base Token
borderWidth.section.main	{borderWidth.context.zero}

Border Radius

Component Token	Base Token
borderRadius.section.main	{borderRadius.context.large}
borderWidth.asset.separator	{size.asset.separator}

Box Shadow

Component Token	Base Token
shadow.section.main	{shadow.elevation.default.20}