Keyline

🧭 When to Use a Keyline

Use a Keyline when you need to:

• Visually separate grouped UI elements (e.g., between nav and content)

• Create a boundary between sections in dashboards or forms

• Support alignment and structure in card-based layouts or multi-column designs

Avoid using Keylines where spacing alone can define separation, or when too many dividers would visually clutter the page.

📏 Sizes

Keylines come in three thicknesses, depending on their visual importance and placement:

• Small (sm) – Used for lightweight separation between closely related items (e.g., list rows, inline components)

• Medium (md) – The default size, ideal for most use cases including section dividers

• Large (lg) – Used sparingly for strong separation between major sections (e.g., page transitions or persistent navigation boundaries)

These sizes are defined using your system’s spacing and stroke tokens, ensuring they scale consistently with your layout grid.

♿ Accessibility Considerations

From a design perspective:

• Ensure keylines are not the only method of communicating separation—use spacing, headings, or layout cues alongside them

• Maintain enough contrast between the keyline and its background, especially in dark mode

From a code perspective (if implemented):

• Keylines are decorative only; use aria-hidden="true" to prevent screen readers from interpreting them as content

✅ Best Practices

• Use sparingly—Keylines work best when they support the rhythm of the layout, not when they divide everything

• Pair with consistent vertical spacing above and below for visual clarity

• Use horizontal keylines more frequently than vertical ones unless aligning within data tables or tool panels