Five border colors are available: a base color with two lighter and two darker shades.

Click any of the five border colors to copy its value

• borderOnLight2
  + 2
• borderOnLight1
  + 1
• borderOnLight
  base
• borderOnLight-1
  - 1
• borderOnLight-2
  - 2

In most cases, only the base border color should be used to separate sections visually on the page.

Visual Hierarchy By Nesting Border Colors

1-3 Levels of Nesting

Use the lighter shades to indicate inner levels.

• Base Border Color
  • Plus 1
    • + 2
    • + 2
    • + 2
  • Plus 1
    • + 2
• Base Border Color
  • Plus 1
    • + 2
  • Plus 1
    • + 2
    • + 2

4-5 Levels of Nesting

Increasingly darken the outtermost border as depth increases.

• - 2
  • Minus 1
    • Base Border Color
      • Plus 1
        • + 2
        • + 2
    • Base
  • Minus 1

Pages should not have more than 5 levels of nesting. Use <sections> to break up long pages instead of using visual nesting.

Vertical List Hierarchies

Sometimes a vertical list looks better with borders, especially when the list items might wrap onto multiple lines.

Vertical lists with 3 or more levels of nesting should usually offer additional clues to the hierarchical organization — such as section headings, indentation, border thickness, or color.

No Nesting

The border color for vertical lists with no nesting will depend on each situation's design needs. Lighter is usually better. The darkest shades should be reserved for nested vertical lists.

2 Levels of Nesting

Usually a vertical list with 2 levels of nesting will use:

• .borderOnLight (base) for the outter level
• .borderOnLight2 (very light) for each inner level

3 Levels of Nesting

Usually a vertical list with 3 levels of nesting will use:

• .borderOnLight-2 (very dark) for the outter level
• .borderOnLight (base) for the middle level
• .borderOnLight2 (very light) for each inner level

While five border colors could support a vertical list up to five levels deep, more than three levels of nesting is strongly discouraged.