Skip to main content
DS nav
DS Example FORMS EXPERIMENT TYPE EXPERIMENT COLOR EXPERIMENT Halftone Example Layout Example Grids Example Theming All Images Example Scroll anims Example Colors Links Example Home
Box components Example Theme Container Themed Layout Main Layout Example Components Example Buttons Example Type Example Cards Example Markdown
Tools Another action Dropdown Submenu 404 Page

Color Combination Themes

Same card. Eight color palettes. All driven by data-colortheme scoped custom properties — no inline color values, no component overrides. Each card is an <article> with a single attribute.

Each theme overrides a small set of semantic tokens: --color-primary, --color-accent-bg, --color-band-bg, --color-blockquote, and --accent-h (which drives link color automatically via --link-color).

default yellow accent · green band · blue primary
data-colortheme="default"

Colour sets the mood

Typography and layout stay fixed. Only the accent, band, and interactive colours shift — via themed link colour driven by --accent-h.

Accent callout panel

This panel uses --color-accent-bg for background and --color-accent-text for text. Great for pull quotes, tips, or highlights.

A well-chosen palette changes the mood without touching a single pixel of layout or typography.

Body text with highlighted passage using --color-selection and --color-highlight-bg.

Secondary link →
yellow amber primary · yellow callouts · yellow band
data-colortheme="yellow"

Colour sets the mood

Typography and layout stay fixed. Only the accent, band, and interactive colours shift — via themed link colour driven by --accent-h.

Accent callout panel

This panel uses --color-accent-bg for background and --color-accent-text for text. Great for pull quotes, tips, or highlights.

A well-chosen palette changes the mood without touching a single pixel of layout or typography.

Body text with highlighted passage using --color-selection and --color-highlight-bg.

Secondary link →
warm orange primary · amber callouts · orange band
data-colortheme="warm"

Colour sets the mood

Typography and layout stay fixed. Only the accent, band, and interactive colours shift — via themed link colour driven by --accent-h.

Accent callout panel

This panel uses --color-accent-bg for background and --color-accent-text for text. Great for pull quotes, tips, or highlights.

A well-chosen palette changes the mood without touching a single pixel of layout or typography.

Body text with highlighted passage using --color-selection and --color-highlight-bg.

Secondary link →
cool blue primary · azure callouts · blue band
data-colortheme="cool"

Colour sets the mood

Typography and layout stay fixed. Only the accent, band, and interactive colours shift — via themed link colour driven by --accent-h.

Accent callout panel

This panel uses --color-accent-bg for background and --color-accent-text for text. Great for pull quotes, tips, or highlights.

A well-chosen palette changes the mood without touching a single pixel of layout or typography.

Body text with highlighted passage using --color-selection and --color-highlight-bg.

Secondary link →
forest green primary · sage callouts · green band
data-colortheme="forest"

Colour sets the mood

Typography and layout stay fixed. Only the accent, band, and interactive colours shift — via themed link colour driven by --accent-h.

Accent callout panel

This panel uses --color-accent-bg for background and --color-accent-text for text. Great for pull quotes, tips, or highlights.

A well-chosen palette changes the mood without touching a single pixel of layout or typography.

Body text with highlighted passage using --color-selection and --color-highlight-bg.

Secondary link →
sunset red primary · coral callouts · red band
data-colortheme="sunset"

Colour sets the mood

Typography and layout stay fixed. Only the accent, band, and interactive colours shift — via themed link colour driven by --accent-h.

Accent callout panel

This panel uses --color-accent-bg for background and --color-accent-text for text. Great for pull quotes, tips, or highlights.

A well-chosen palette changes the mood without touching a single pixel of layout or typography.

Body text with highlighted passage using --color-selection and --color-highlight-bg.

Secondary link →
violet purple primary · violet callouts · violet band
data-colortheme="violet"

Colour sets the mood

Typography and layout stay fixed. Only the accent, band, and interactive colours shift — via themed link colour driven by --accent-h.

Accent callout panel

This panel uses --color-accent-bg for background and --color-accent-text for text. Great for pull quotes, tips, or highlights.

A well-chosen palette changes the mood without touching a single pixel of layout or typography.

Body text with highlighted passage using --color-selection and --color-highlight-bg.

Secondary link →
pink pink primary · rose callouts · pink band
data-colortheme="pink"

Colour sets the mood

Typography and layout stay fixed. Only the accent, band, and interactive colours shift — via themed link colour driven by --accent-h.

Accent callout panel

This panel uses --color-accent-bg for background and --color-accent-text for text. Great for pull quotes, tips, or highlights.

A well-chosen palette changes the mood without touching a single pixel of layout or typography.

Body text with highlighted passage using --color-selection and --color-highlight-bg.

Secondary link →

let's make great things

Let's talk →

Let's Talk

Tom avatar

Get in touch

I work at the intersection of design and code.
Interested? Hit me up.
tomhermans@gmail.com

Copyright © 2026 Tom Hermans. Made by Tom Hermans .

All rights reserved 2026 inc Tom Hermans