Theme maker

Make the six decisions that matter.

Change the canvas, card, heading, body, accent and border. The preview stays plain HTML so the output is easy to copy.

Preview

Local tokens, familiar components

This card is styled from the values on the left. Export the result when it feels right.

[data-theme="custom"] {
  --surface-canvas: #f8f8f6;
  --surface-card: #ffffff;
  --text-heading: #151515;
  --text-body: #565656;
  --accent: #e5484d;
  --border-strong: #c8c8c8;
}