Kitchen Sink
One block, every state. Repeated across data-emphasis scopes so colors and contrast can be eyeballed against the whole system at once.
Default
Reading the way light bends through water
A sample paragraph that does real work: a link in prose, one in its focused state, inline code mid-sentence, strong for weight, emphasis for tone, marked text for an author callout, and a Cmd+K shortcut to round it out. Then deleted inserted for revision history, plus an CSS abbreviation.
Here is the highlight family in line — a fake selection painted in the middle, a target-text landing from a scroll-to-text link, and a find match next to the active find match. Try Cmd+F and search for middle — the real browser find should paint a yellow box on every match.
A pull quote sitting inside the prose — the kind of voice a sidebar might take.
A quiet-voice paragraph below — auxiliary information that shouldn't pull the eye.
function greet(name) {
return 'hello, ' + name;
}data-emphasis="alternate"
Reading the way light bends through water
A sample paragraph that does real work: a link in prose, one in its focused state, inline code mid-sentence, strong for weight, emphasis for tone, marked text for an author callout, and a Cmd+K shortcut to round it out. Then deleted inserted for revision history, plus an CSS abbreviation.
Here is the highlight family in line — a fake selection painted in the middle, a target-text landing from a scroll-to-text link, and a find match next to the active find match. Try Cmd+F and search for middle — the real browser find should paint a yellow box on every match.
A pull quote sitting inside the prose — the kind of voice a sidebar might take.
A quiet-voice paragraph below — auxiliary information that shouldn't pull the eye.
function greet(name) {
return 'hello, ' + name;
}data-emphasis="focused"
Reading the way light bends through water
A sample paragraph that does real work: a link in prose, one in its focused state, inline code mid-sentence, strong for weight, emphasis for tone, marked text for an author callout, and a Cmd+K shortcut to round it out. Then deleted inserted for revision history, plus an CSS abbreviation.
Here is the highlight family in line — a fake selection painted in the middle, a target-text landing from a scroll-to-text link, and a find match next to the active find match. Try Cmd+F and search for middle — the real browser find should paint a yellow box on every match.
A pull quote sitting inside the prose — the kind of voice a sidebar might take.
A quiet-voice paragraph below — auxiliary information that shouldn't pull the eye.
function greet(name) {
return 'hello, ' + name;
}data-emphasis="muted"
Reading the way light bends through water
A sample paragraph that does real work: a link in prose, one in its focused state, inline code mid-sentence, strong for weight, emphasis for tone, marked text for an author callout, and a Cmd+K shortcut to round it out. Then deleted inserted for revision history, plus an CSS abbreviation.
Here is the highlight family in line — a fake selection painted in the middle, a target-text landing from a scroll-to-text link, and a find match next to the active find match. Try Cmd+F and search for middle — the real browser find should paint a yellow box on every match.
A pull quote sitting inside the prose — the kind of voice a sidebar might take.
A quiet-voice paragraph below — auxiliary information that shouldn't pull the eye.
function greet(name) {
return 'hello, ' + name;
}data-emphasis="immersive"
Reading the way light bends through water
A sample paragraph that does real work: a link in prose, one in its focused state, inline code mid-sentence, strong for weight, emphasis for tone, marked text for an author callout, and a Cmd+K shortcut to round it out. Then deleted inserted for revision history, plus an CSS abbreviation.
Here is the highlight family in line — a fake selection painted in the middle, a target-text landing from a scroll-to-text link, and a find match next to the active find match. Try Cmd+F and search for middle — the real browser find should paint a yellow box on every match.
A pull quote sitting inside the prose — the kind of voice a sidebar might take.
A quiet-voice paragraph below — auxiliary information that shouldn't pull the eye.
function greet(name) {
return 'hello, ' + name;
}