Divider

A Divider is a simple visual element used to separate groups of content. It helps create structure, improve readability, and guide the user’s eye through sections of a layout. Dividers can be horizontal or vertical depending on the layout needs.

When to use it (and when not to)

Use a Divider when you need to:

• Separate sections of content within the same page or container.
• Create visual grouping inside cards, sidebars, lists, or forms.
• Provide a subtle break between related UI elements without introducing heavy visual noise.
• Clarify hierarchy when headings or spacing alone are not enough.

Avoid using a Divider when:

• Spacing alone is enough to create separation — generous padding or margins make the interface cleaner than adding a line.
• You want to show a change in context, navigation, or a major layout transition — use headers, subheaders, or layout components instead.
• You need to separate components with very strong contrast or visual weight — dividers may feel too subtle.
• You are trying to fix clutter — dividers shouldn’t compensate for an overcrowded layout.

Quick summary of accessibility & consistency

Although dividers are primarily decorative, accessibility still matters:

• Use semantic elements when appropriate: <hr> for horizontal dividers that represent a thematic break or section separation, or a decorative container (e.g., <div role="separator">) for dividers that are visual only.
• Ensure the divider has sufficient color contrast against the background if it conveys meaning (WCAG 1.4.11).
• Vertical dividers should use role="separator" so assistive technologies can interpret them correctly.
• Avoid adding text alternatives unless the divider communicates meaningful structure.
• Keep dividers out of the tab order; they should not be focusable.

Properties

Position

Horizontal

Divider

Width: 100%

Height: Stroke width (1px or 2px)

Vertical

Divider

Height: 80

Width: 1

Fill

Muted

Divider

Background color: #A8AAAC

Contrast

Divider

Background color: #E4E4E4

Red

Divider

Background color: #FF0022

Min width: 40

Blue

Divider

Background color: #0072F0

Min width: 40

Styling

Colors

Name	Applied as	Applied to
color-border-neutral-default	Border color	Divider
color-border-neutral-default	Border color	Divider
color-border-neutral-muted	Border color	Divider
color-border-neutral-muted	Border color	Divider
color-border-primary-default	Border color	Divider
color-border-primary-default	Border color	Divider
color-border-ev-default	Border color	Divider
color-border-ev-default	Border color	Divider

Accessibility

For Design

Accessibility compliance for Toyota:

Type	Fill Colour	Bg Colour	Contrast Ratio	Passes WCAG AA?
Muted	#A8AAAC	#FFFFFF	2.33:1	✅ Yes
Contrast	#E4E4E4	#FFFFFF	1.27:1	✅ Yes
Red	#FF0022	#FFFFFF	3.98:1	✅ Yes
Blue	#0072F0	#FFFFFF	4.5:1	✅ Yes

Usage

Do

Guidance on how to use a component.

• Use dividers sparingly to avoid visual clutter.
• Ensure consistent alignment with surrounding content (grid, spacing, containers).
• Choose orientation intentionally: horizontal for content flow, vertical inside toolbars, sidebars, or menus.
• Match color and weight to the design system tokens.
• Use semantic meaning when relevant, like separating list items or form sections.

Don’t

Guidance on what to avoid when using a component.

• Don’t overuse dividers to fix unclear layout hierarchy. Structure should come from spacing and typography first.
• Don’t mix multiple styles of dividers in the same view.
• Don’t use dividers to replace headings or labels — they only provide visual separation, not meaning.
• Don’t place dividers too close to content, which makes the UI feel cramped.