Spec — Dividers

Facet Visual of Koder Design. Material parity: https://m3.material.io/components/dividers.

When to use a divider vs whitespace

Rule: divider answers "where does one group end and the next begin". If whitespace already makes that clear, skip the divider.

4 variants

Anatomy

Full-bleed:
────────────────────────────────────────

Inset:
   ─────────────────────────────────────   (← 16 px left padding)

Middle with text:
   ──────────────  OR  ──────────────────

Subheader:
   Section title
   ────────────────────────────────────

• Line thickness: 1 px (logical pixel)
• Color: outline-variant (low-emphasis surface line)
• Subheader label: label-large (14/20, weight 500), text-muted
• Inline text: label-medium, 8-12 px padding around text

R1 — Color and emphasis

Never use full saturation (primary solid) — divider should be subtle background, not foreground.

R2 — Orientation

Vertical divider:

• Height: 24 px (matches surrounding control height OR set explicitly)
• Width: 1 px
• Margin: 8 px horizontal

R3 — Inset rules

Inset divider's left edge aligns with the START of meaningful content in the row above. Common alignments:

Goal: divider visually splits the content into discrete rows without crossing into the leading-element column. The leading column reads as "continuous" while the text column reads as "discrete rows".

R4 — Middle (with content) divider

Inline text divider for section breaks within text content:

   ──────────────  OR  ──────────────
   ──────────  CONTINUED  ──────────
   ─────────  • • •  ─────────

• Text padded 8-12 px on either side
• Text is label-medium, text-muted (subtle)
• Line on each side, equal length
• Used for: onboarding step breaks, "Show more" pagination, modal alternate-action separator ("OR sign in with…")

R5 — Subheader divider

Pairs a label-large heading with a full-bleed divider below:

   System
   ────────────────────────────────────
   Notifications      ⌄
   Privacy            ⌄
   Storage            ⌄

   Account
   ────────────────────────────────────
   Profile            ⌄
   Sign out

• Used for grouped list sections (Settings is the canonical example)
• Label sits at standard list left-padding (16 px); divider is full-bleed below
• Label is text-muted weight 500 — secondary emphasis vs row labels

R6 — Spacing

Standard vertical spacing around a divider:

If dividers are between list rows of fixed height, NO extra spacing — divider sits at the row boundary. Spacing applies for free-form dividers (between cards, sections, etc.).

R7 — Accessibility

• Decorative divider: role="separator" + aria-orientation if vertical (default horizontal); no extra label needed
• Subheader: heading semantics drive the divider's meaning — divider itself remains role="separator"; heading is a real <h2> / <h3> element
• Middle-text divider: same — text inside is the meaning; divider is decorative
• DO NOT add aria-label to a divider with descriptive text — it's visual scaffolding, not content

R8 — Per-preset variation

R9 — Forbidden patterns

• ❌ Multiple consecutive dividers (no double / triple lines)
• ❌ Divider thicker than 2 px (becomes a border / rule)
• ❌ Saturated primary color as divider (visual noise)
• ❌ Divider where whitespace alone would do (over-decoration)
• ❌ Divider between EVERY card in a card list (cards are already self-grouped)
• ❌ Divider crossing into the leading-element column (icon / avatar) of inset list rows
• ❌ Vertical divider taller than its surrounding controls (looks detached)
• ❌ Decorative divider with aria-label (clutters screen reader output)

Cross-link

• themes/color-roles.kmd — outline-variant / outline token
• themes/typography.kmd — label-large for subheader label
• components/lists.kmd — most common host context
• foundations/elements.kmd — Container family (divider is a sub-class of structural element)