Large background list number

How to use it

Set the number of a list item/heading "behind" the heading so that the two are overlapping, and the number has less contrast with the background. Make it big.

When to use it

This is mostly a style choice, but it's a chance to add some variety to your design, and also some subtle brand colour since the lighter number won't dominate the page too much.

What to watch out for

The contrast of the number with the background colour should be low, and its contrast with the heading/list item should be high. This means that the number will blend in with the background more, but still be noticeable because it's much larger. If the text and the number don't contrast enough, they'll interfere with each other and be hard to read.

Examples

Example