Theme Color Palette

Light Theme

Shadow

Border

Ring

BorderRing

base

Aa

Aa

Aa

Aa

muted

Aa

Aa

Aa

Aa

primary

Aa

Aa

Aa

Aa

secondary

Aa

Aa

Aa

Aa

tertiary

Aa

Aa

Aa

Aa

accent

Aa

Aa

Aa

Aa

error

Aa

Aa

Aa

Aa

success

Aa

Aa

Aa

Aa

info

Aa

Aa

Aa

Aa

warning

Aa

Aa

Aa

Aa

Article Title

This is the body text where the main content of the article will be. It uses the defined pink body color.

Subheading

Here’s a lead paragraph to introduce a section. The lead text should be visually distinct.

Another Subheading

More content follows here, potentially with bold text and italic text for emphasis.

This is a link styled with the pink theme.

This is a quote from an external source, styled with borders and a distinct color.

Lists can be styled as well:

  • First bullet item
  • Second bullet item
  • Third bullet item

Code blocks are formatted with different colors:

console.log('Hello, World!');

Here’s a horizontal rule separating content:


Tables can also be incorporated:

Header 1 Header 2
Row 1, Col 1 Row 1, Col 2
Row 2, Col 1 Row 2, Col 2

Dark Theme

Shadow

Border

Ring

BorderRing

base

Aa

Aa

Aa

Aa

muted

Aa

Aa

Aa

Aa

primary

Aa

Aa

Aa

Aa

secondary

Aa

Aa

Aa

Aa

tertiary

Aa

Aa

Aa

Aa

accent

Aa

Aa

Aa

Aa

error

Aa

Aa

Aa

Aa

success

Aa

Aa

Aa

Aa

info

Aa

Aa

Aa

Aa

warning

Aa

Aa

Aa

Aa

Article Title

This is the body text where the main content of the article will be. It uses the defined pink body color.

Subheading

Here’s a lead paragraph to introduce a section. The lead text should be visually distinct.

Another Subheading

More content follows here, potentially with bold text and italic text for emphasis.

This is a link styled with the pink theme.

This is a quote from an external source, styled with borders and a distinct color.

Lists can be styled as well:

  • First bullet item
  • Second bullet item
  • Third bullet item

Code blocks are formatted with different colors:

console.log('Hello, World!');

Here’s a horizontal rule separating content:


Tables can also be incorporated:

Header 1 Header 2
Row 1, Col 1 Row 1, Col 2
Row 2, Col 1 Row 2, Col 2