Type Scale

Paragraph Text

This is a normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu risus vel libero scelerisque ultricies. Sed ac turpis faucibus, rutrum urna sit amet, scelerisque est. Aliquam ultricies sapien dignissim viverra rhoncus.

This is a large paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu risus vel libero scelerisque ultricies. Sed ac turpis faucibus, rutrum urna sit amet, scelerisque est.

This is a small paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu risus vel libero scelerisque ultricies. Sed ac turpis faucibus, rutrum urna sit amet, scelerisque est. Aliquam ultricies sapien dignissim viverra rhoncus.

This text is bold

This text is italic

This text is underline

This is a link that opens in a new tab

Blockquote

We need to remember what’s important in life: friends, waffles, work. Or waffles, friends, work. Doesn’t matter, but work is third.
— Leslie Knope

Code Block

<p>Hello World</p>
<div>Hello World</div>

Copy Example

This is an H3 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae purus lorem. Fusce porta id dolor a hendrerit. Vivamus feugiat interdum ante ut lobortis. Fusce tempus dictum magna, at congue augue iaculis at. Cras eu lectus ut massa consectetur placerat ac in mauris. Etiam auctor ligula non purus vestibulum vestibulum.

Cras scelerisque ligula orci, eu varius mauris scelerisque sed. Fusce sed leo ac massa cursus dapibus ac vitae lectus.
— Name

This is an H3 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae purus lorem. Fusce porta id dolor a hendrerit. Vivamus feugiat interdum ante ut lobortis. Fusce tempus dictum magna, at congue augue iaculis at.

Lorem ipsum dolor sit amet

• Vestibulum eget volutpat justo. Mauris eleifend rutrum orci, sit amet condimentum est fermentum et.
• Duis lobortis dui eu dolor venenatis, ullamcorper scelerisque tortor pretium. Suspendisse potenti.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor:

1. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
2. Vestibulum id ligula porta felis euismod semper.
3. Maecenas faucibus mollis interdum.

Aliquam ultricies sapien dignissim viverra rhoncus, wp_enqueue_style(), dapibus posuere velit aliquet:

function ws_hello() {
	return 'Hello, world';
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae purus lorem. Etiam auctor ligula non purus vestibulum vestibulum. Fusce tempus dictum magna, at congue augue iaculis at.

Etiam auctor ligula non purus vestibulum, ac dignissim massa tincidunt. Fusce sed leo ac massa cursus dapibus ac vitae lectus.
— Name

Nulla eu risus vel libero scelerisque ultricies. Sed ac turpis faucibus, rutrum urna sit amet, scelerisque est. Aliquam ultricies sapien dignissim viverra rhoncus.

Buttons

The primary button is an outlined lime box that fills on hover. The variants below cover the common needs: a solid fill, a quieter secondary, a borderless text button, a smaller size, and a disabled state.

Colors