Primary Section
This is a sample paragraph of text. It demonstrates the body color for this section. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Secondary Section
This is a sample paragraph of text. It demonstrates the body color for this section. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sample Module (Light)
This card demonstrates the light module styles with Secondary Icon.
Sample Module (Light)
This card demonstrates the light module styles with Secondary Icon.
Sample Module (Dark)
This card demonstrates the dark module styles with Primary Icon.
Accent Section
This is a sample paragraph of text. It demonstrates the body color for this section. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Primary Icon
Primary Icon
Primary Icon
Primary Section (Dark Modules)
This section demonstrates dark modules on a primary section background.
Sample Module (Dark)
This card demonstrates the dark module styles with Primary Icon.
Sample Module (Dark)
This card demonstrates the dark module styles with Primary Icon.
Sample Module (Dark)
This card demonstrates the dark module styles with Primary Icon.
CTA Section
This is a sample paragraph of text. It demonstrates the body color for this section. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Footer Section
This is footer text with a link and another link.
© 2025 Your Company. All Rights Reserved.
Basic Color Combinations
Light 1
on Dark 1
Light 1
on Dark 2
Light 2
on Dark 1
Light 2
on Dark 2
Dark 1
on Light 1
Dark 1
on Light 2
Dark 2
on Light 1
Dark 2
on Light 2
Light 1
on Primary
Light 1
on Secondary
Light 2
on Primary
Light 2
on Secondary
Dark 1
on Primary
Dark 1
on Secondary
Dark 2
on Primary
Dark 2
on Secondary