Foundation: List Indents

Field	Value
Type	Skill Resource
Source	~/.copilot/skills/design/references/lists.md
Description	Not specified

Source Content

Foundation: List Indents

Source of truth: .storybook/storybook-docs.css — the [data-docs-mdx-article] unlayered section.

The rule

Lists inside a docs article section body ([data-docs-section-body]) are indented by --docs-section-indent only. The padding-left on the list element itself (1.45rem) then creates the gutter for the list marker. Never stack --docs-section-indent + --docs-section-padding as the list margin — that is for paragraph container divs, not for the list element itself.

Element	Left offset from article edge
Section heading (h2)	0
Section body paragraph text	--docs-section-indent + --docs-section-padding (max 3.75rem)
List element left edge	--docs-section-indent (max 1rem)
List marker	inside the list’s 1.45rem padding-left
List item text	--docs-section-indent + 1.45rem (max 2.45rem)

Token values

--docs-section-indent and --docs-section-padding are defined on the [data-docs-mdx-article] container:

--docs-section-indent: clamp(0.75rem, 2vw, 1rem);
--docs-section-padding: clamp(1.25rem, 2vw, 1.75rem);

At max viewport, --docs-section-indent = 1rem. List text therefore starts at 2.45rem from the left edge.

Why not indent + padding for lists?

Paragraph containers (divs with data-docs-section-body) apply both tokens:

• margin-left: --docs-section-indent
• padding-left: --docs-section-padding

A <ul> or <ol> with data-docs-section-body is the list element itself, not a wrapper. Applying both tokens to its margin before the list’s own padding-left stacks three layers of indentation and pushes item text to ~5.7rem — visually disconnected from its heading.

Correct CSS

[data-docs-mdx-article]:not(:has(.legal-document, [data-doc-shell], .legal-toc)) > :is(ul, ol)[data-docs-section-body] {
  max-width: calc(100% - var(--docs-section-indent) - 1.45rem);
  margin-left: var(--docs-section-indent);
  margin-right: 0;
  padding-left: 1.45rem;
}

Nested lists

Nested lists inside a list item use only their own padding-left (no additional margin). The outer list’s indent already provides the column; nesting just steps in by another 1.45rem.

Mobile override

At max-width: 640px, --docs-section-indent drops to 0.25rem. Lists follow automatically since they derive from the token.