Example Lab

Dark mode auto-themes your website and allows for accented elements. Accents can be applied to Light Mode as well, but by default Accents are turned off during Light Mode to match your original intent for design.

Typography

This is a normal paragraph with a link, some bold, some emphasis, and a code snippet.

  • List item one
  • List item two
  • List item three
“Design is how it works.”
Tag Another Accent

Muted helper text to preview contrast.

Buttons & Inputs

Anchor Btn


Range & Details

More details

Collapsible content block with a link.

First Second Third

Table

NameStatusScore
AlphaActive93
BetaPaused81
GammaQueued67

Code

def greet(name: str) -> str:
    return f"Hello, !"

Scrollbars

This box demonstrates an in-page scroll container picking up the accent. The page scrollbar (right side of the window) is also accented.

Scrollable line 1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 2 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 3 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 4 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 5 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 6 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 7 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 8 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 9 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 10 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 11 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 12 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 13 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 14 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 15 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 16 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 17 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 18 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 19 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 20 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scrollable line 21 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Forms Sampler

Lists & Misc

  1. Ordered item
  2. Another item
  3. Final item

Breadcrumbs: Home Library Data