Theme Preview | Harcus Parker

Theme Preview

Quick visual of common UI elements with the current site theme. Use this page to QA typography, CTA styling, and brand colors.

Colors

Primary

--primary

Secondary

--secondary

Tertiary

--tertiary

Delta

--delta

Epsilon

--epsilon

Accent

--accent

Muted

--muted

Foreground

--foreground

Background

--background

Typography

Heading 1

Heading 2 (Primary)

Body text example. This is how long-form copy will look with the current font stack.

Muted body text sample

Accent text sample

Buttons

Card + CTA

Card Title

This is a card using the current theme tokens.

Core Palette Overview

Quick glance at the main colors and their primary derivatives.

Primary

Base

--primary

Muted

--primary-muted

Vivid 1

--primary-vivid1

Dark 1

--primary-dark1

Foreground

--primary-foreground

Contrast Check

Primary + Foreground

Secondary

Base

--secondary

Muted

--secondary-muted

Vivid 1

--secondary-vivid1

Dark 1

--secondary-dark1

Foreground

--secondary-foreground

Contrast Check

Secondary + Foreground

Tertiary

Base

--tertiary

Muted

--tertiary-muted

Vivid 1

--tertiary-vivid1

Dark 1

--tertiary-dark1

Foreground

--tertiary-foreground

Contrast Check

Tertiary + Foreground

Delta

Base

--delta

Muted

--delta-muted

Vivid 1

--delta-vivid1

Dark 1

--delta-dark1

Foreground

--delta-foreground

Contrast Check

Delta + Foreground

Epsilon

Base

--epsilon

Muted

--epsilon-muted

Vivid 1

--epsilon-vivid1

Dark 1

--epsilon-dark1

Foreground

--epsilon-foreground

Contrast Check

Epsilon + Foreground

Detailed Matrix

Matrix view of saturation (Vivid) and lightness (Dark) variants.

primary Palette

Darkness \ Vividness

Base

Vivid 1 (+20%)

Vivid 2 (+40%)

Vivid 3 (+60%)

Base

--primary

--primary-vivid1

--primary-vivid2

--primary-vivid3

Dark 1

--primary-dark1

...vivid1-dark1

...vivid2-dark1

...vivid3-dark1

Dark 2

--primary-dark2

...vivid1-dark2

...vivid2-dark2

...vivid3-dark2

Dark 3

--primary-dark3

...vivid1-dark3

...vivid2-dark3

...vivid3-dark3

Dark 4

--primary-dark4

...vivid1-dark4

...vivid2-dark4

...vivid3-dark4

Dark 5

--primary-dark5

...vivid1-dark5

...vivid2-dark5

...vivid3-dark5

Muted Variations

Muted 1

--primary-muted1

Muted 2

--primary-muted2

Muted 3

--primary-muted3

Muted 4

--primary-muted4

Muted 5

--primary-muted5

Muted 6

--primary-muted6

Muted 7

--primary-muted7

Muted 8

--primary-muted8

Muted 9

--primary-muted9

Muted 10

--primary-muted10

secondary Palette

Darkness \ Vividness

Base

Vivid 1 (+20%)

Vivid 2 (+40%)

Vivid 3 (+60%)

Base

--secondary

--secondary-vivid1

--secondary-vivid2

--secondary-vivid3

Dark 1

--secondary-dark1

...vivid1-dark1

...vivid2-dark1

...vivid3-dark1

Dark 2

--secondary-dark2

...vivid1-dark2

...vivid2-dark2

...vivid3-dark2

Dark 3

--secondary-dark3

...vivid1-dark3

...vivid2-dark3

...vivid3-dark3

Dark 4

--secondary-dark4

...vivid1-dark4

...vivid2-dark4

...vivid3-dark4

Dark 5

--secondary-dark5

...vivid1-dark5

...vivid2-dark5

...vivid3-dark5

Muted Variations

Muted 1

--secondary-muted1

Muted 2

--secondary-muted2

Muted 3

--secondary-muted3

Muted 4

--secondary-muted4

Muted 5

--secondary-muted5

Muted 6

--secondary-muted6

Muted 7

--secondary-muted7

Muted 8

--secondary-muted8

Muted 9

--secondary-muted9

Muted 10

--secondary-muted10

tertiary Palette

Darkness \ Vividness

Base

Vivid 1 (+20%)

Vivid 2 (+40%)

Vivid 3 (+60%)

Base

--tertiary

--tertiary-vivid1

--tertiary-vivid2

--tertiary-vivid3

Dark 1

--tertiary-dark1

...vivid1-dark1

...vivid2-dark1

...vivid3-dark1

Dark 2

--tertiary-dark2

...vivid1-dark2

...vivid2-dark2

...vivid3-dark2

Dark 3

--tertiary-dark3

...vivid1-dark3

...vivid2-dark3

...vivid3-dark3

Dark 4

--tertiary-dark4

...vivid1-dark4

...vivid2-dark4

...vivid3-dark4

Dark 5

--tertiary-dark5

...vivid1-dark5

...vivid2-dark5

...vivid3-dark5

Muted Variations

Muted 1

--tertiary-muted1

Muted 2

--tertiary-muted2

Muted 3

--tertiary-muted3

Muted 4

--tertiary-muted4

Muted 5

--tertiary-muted5

Muted 6

--tertiary-muted6

Muted 7

--tertiary-muted7

Muted 8

--tertiary-muted8

Muted 9

--tertiary-muted9

Muted 10

--tertiary-muted10

delta Palette

Darkness \ Vividness

Base

Vivid 1 (+20%)

Vivid 2 (+40%)

Vivid 3 (+60%)

Base

--delta

--delta-vivid1

--delta-vivid2

--delta-vivid3

Dark 1

--delta-dark1

...vivid1-dark1

...vivid2-dark1

...vivid3-dark1

Dark 2

--delta-dark2

...vivid1-dark2

...vivid2-dark2

...vivid3-dark2

Dark 3

--delta-dark3

...vivid1-dark3

...vivid2-dark3

...vivid3-dark3

Dark 4

--delta-dark4

...vivid1-dark4

...vivid2-dark4

...vivid3-dark4

Dark 5

--delta-dark5

...vivid1-dark5

...vivid2-dark5

...vivid3-dark5

Muted Variations

Muted 1

--delta-muted1

Muted 2

--delta-muted2

Muted 3

--delta-muted3

Muted 4

--delta-muted4

Muted 5

--delta-muted5

Muted 6

--delta-muted6

Muted 7

--delta-muted7

Muted 8

--delta-muted8

Muted 9

--delta-muted9

Muted 10

--delta-muted10

epsilon Palette

Darkness \ Vividness

Base

Vivid 1 (+20%)

Vivid 2 (+40%)

Vivid 3 (+60%)

Base

--epsilon

--epsilon-vivid1

--epsilon-vivid2

--epsilon-vivid3

Dark 1

--epsilon-dark1

...vivid1-dark1

...vivid2-dark1

...vivid3-dark1

Dark 2

--epsilon-dark2

...vivid1-dark2

...vivid2-dark2

...vivid3-dark2

Dark 3

--epsilon-dark3

...vivid1-dark3

...vivid2-dark3

...vivid3-dark3

Dark 4

--epsilon-dark4

...vivid1-dark4

...vivid2-dark4

...vivid3-dark4

Dark 5

--epsilon-dark5

...vivid1-dark5

...vivid2-dark5

...vivid3-dark5

Muted Variations

Muted 1

--epsilon-muted1

Muted 2

--epsilon-muted2

Muted 3

--epsilon-muted3

Muted 4

--epsilon-muted4

Muted 5

--epsilon-muted5

Muted 6

--epsilon-muted6

Muted 7

--epsilon-muted7

Muted 8

--epsilon-muted8

Muted 9

--epsilon-muted9

Muted 10

--epsilon-muted10

Real UI Preview

A demonstration of standard UI components using the current theme.

Send us a message and we'll get back to you.

First name

Last name

Subject

Message

Accept terms and conditions

User Profile

Pro Member

Manage your account settings.

John Doe

john@example.com

Theme Preferences

Component Variants

Buttons and Badges in different states.

DefaultSecondaryOutlineDestructive

Landing Page Mockups

Conceptual sections to visualize the theme in a full-page context.

New Feature

Build faster with your theme

A beautiful, responsive, and accessible theme system that adapts to your brand. Start building your landing pages today.

Feature 1

Detailed description of this amazing feature and how it benefits the user.

Benefit point one
Benefit point two
Benefit point three

Feature 2

Detailed description of this amazing feature and how it benefits the user.

Benefit point one
Benefit point two
Benefit point three

Feature 3

Detailed description of this amazing feature and how it benefits the user.

Benefit point one
Benefit point two
Benefit point three

Ready to get started?

Join thousands of satisfied customers who are already building with our platform.

Key Performance Indicators

99.9%

Uptime Guaranteed

50k+

Active Users

$2M+

Revenue Generated

What our customers say

"This platform completely changed how we work. The muted color palettes are a game changer for our brand consistency."

Sarah J.

Product Designer

"Incredible attention to detail. The generated tokens made implementation a breeze."

Mike T.

Frontend Dev

Frequently Asked Questions

Is this theme accessible?

Yes, we prioritize contrast ratios and semantic markup.

Can I customize the generation logic?

Absolutely. The generation functions in theme.ts can be adjusted to fit your specific curve requirements.

Update site.json or campaign overrides to refresh these tokens. Restart the dev server when editing config files so the registry and theme injector reload.

← Back to Homepage