One possibility

We borrow from an existing type descriptor style locally adapted to the "stand out/contrast" coloring for the header area.

On the search results page we have a post "type" descriptor that is off to the side:

Presently, the "stand out" coloring for the header area, when not a link, would follow what we've done on the person page (white):

So if we combine the descriptor "pill style" with the white "stand out" coloring, we get something like this:

deed:

legal code:

The above could be added by appending a span element around the deed and legal code words.

deed:

<h1>
CC BY-NC-ND 4.0 <span class="type">Deed</span>
</h1>

legal code:

<h1>
CC BY-NC-ND 4.0 <span class="type">Legal Code</span>
</h1>

And then, the following CSS would provide the styling as shown above:

header h1 span.type {
    padding: .5em .7em;

    font-family: 'Source Sans Pro';
    font-size: .3em;
    font-weight: 400;
    text-transform: lowercase;
    background: rgb(255, 255, 255);
    border-radius: 4px;
}

Overall, the page contexts for the licenses need some deeper work, but this would possibly correct this issue at the moment visually, while leaving room to address it more elegantly.

from index-prototype.

For a more stable proposed draft solution, see:

• creativecommons/cc-legal-tools-app#455

from index-prototype.