primary transparent darkmode icon

primary

transparent

darkmode

icon

Accent

Primary
Brand

Secondary
Brand

Contrast

Strongest
Text

Strong
Text

Medium
Text

Subtle
Text

Base

Subtle
Background

Lighter
Background

Brightest
Background

.lighter-bg

Aa

Major Headings Here.

You can use the .subtle-text class for subheadings.

.subtle-text

Massa at aliquet leo torquent nullam himenaeos molestie nulla habitasse, nisi ante sociosqu felis erat inceptos potenti amet, accumsan hendrerit mi nisl nunc cursus vel laoreet. Varius volutpat etiam est blandit auctor nullam nisi pellentesque per, eleifend nostra sed urna amet libero mauris nascetur, sociosqu vel imperdiet parturient augue proin in duis. Nam at velit rhoncus per eu facilisis sem, sed pretium tempor commodo a volutpat, praesent tristique vulputate consectetur mattis fermentum.

.subtle-bg

H1 Medium length headline

H2 Medium length headline

H3 Medium length headline

H4 Medium length headline

H5 Medium length headline

H6 Medium length headline

Ipsum eget ultrices dui turpis taciti sodales ligula commodo massa ad dignissim vel tempus, mattis semper eleifend diam aenean libero cum tincidunt malesuada sapien eros nam. Tincidunt sed cursus himenaeos velit aliquam risus, proin mus sociosqu tristique placerat at elementum, ante torquent ad ridiculus vitae. Convallis dictum mauris arcu sociis consectetur sociosqu bibendum mattis mollis conubia pretium, luctus parturient hendrerit ultrices nulla ultricies orci vehicula cras. Mus curabitur turpis viverra at ac aptent nisl class integer sagittis sociosqu, lacinia eget metus feugiat scelerisque dictumst nulla pellentesque porttitor.

The wisdom of the wise, and the experience of ages, may be preserved by quotation.
Isaac D'Israeli

.lighter-bg

Primary Button

.primary-button

Transparent Button

.transparent-button-light

.button-link-light

.button-group-light

Item 1 Item 2 Item 3

Item 1

Parturient natoque imperdiet aliquet sit ultricies turpis eu nam sed, enim gravida vehicula euismod vestibulum elit felis curae, vulputate pellentesque tristique duis conubia consequat dapibus leo. Ornare maecenas leo laoreet ut nulla penatibus inceptos tempor felis, elit accumsan per facilisi libero bibendum hac faucibus aliquet, primis lacus himenaeos commodo parturient orci mauris euismod. Sapien leo turpis torquent venenatis accumsan integer hac morbi cum, lacinia egestas rutrum sed class eget eros justo nullam, metus nisi fermentum mus vestibulum dolor primis lobortis.

Item 2

Item 3

Himenaeos a aliquam pulvinar semper volutpat vel elit suspendisse, ipsum elementum nulla est quis montes ac hendrerit, rutrum ultrices sapien sociis auctor luctus iaculis. Phasellus quam malesuada nulla lacus nisl non dictum, tempor molestie primis cursus felis proin mollis, hendrerit condimentum accumsan ultricies curabitur vehicula. Cras fames inceptos vitae pulvinar nec tempus risus, montes et aenean hac euismod nascetur platea maecenas, libero potenti sit sociosqu ornare phasellus.

Item 1

Cras maecenas elit interdum convallis ornare magna, sollicitudin eros arcu et placerat cubilia varius, facilisis torquent tristique sociis nam. Adipiscing neque cras urna ut ultrices dis imperdiet cum integer odio, himenaeos molestie magna netus justo nibh facilisis ante. Dictumst aliquam odio elit mattis sem commodo taciti rutrum molestie, placerat dis eget nostra adipiscing accumsan purus felis, mauris egestas facilisi iaculis rhoncus amet metus facilisis.

Item 2

Est id duis dui varius sapien cum consectetur, pharetra metus aliquet vivamus pretium malesuada faucibus primis, ipsum himenaeos erat dis habitasse sociosqu. Ante curabitur ad enim tristique massa vehicula felis id nulla fusce, dui erat parturient a cras per volutpat maecenas ullamcorper porta, ultrices consectetur fames ultricies euismod porttitor class mus pulvinar. Volutpat massa tristique non per erat aenean, natoque viverra porta inceptos.