diff --git a/examples/static/schild.css b/examples/static/schild.css
index 44639805216205f78e96befe1d1af6910cfe3012..44cf298f895abb3ea7dcc3c95bc7fa66aaafd40b 100644
--- a/examples/static/schild.css
+++ b/examples/static/schild.css
@@ -12,8 +12,11 @@ body {
 	font-family: "Noto Sans", sans-serif;
 	padding: 0;
 	margin: 0;
+	background-color: #fff;
+	color: #000;
 	display: flex;
 	flex-direction: column;
+
 	@media not print {
 		/* This magic constant approximately corresponds to 48px at A4 size, but scales
 		 * with the viewport/iframe size
diff --git a/frontend/src/main.less b/frontend/src/main.less
index 89c0e5389c3cf04c199ab00d8964d84ca7b59c06..88bdb6b01f5c45e3be3a5ef6eb70cbaba55e2b38 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -1,5 +1,7 @@
 // the threshold at which we consider the screen "mobile"
 @mobile_threshold: 700px;
+// the border around the preview (per color)
+@preview_border: .3rem;
 
 * {
 	box-sizing: border-box;
@@ -132,8 +134,8 @@ main {
 	/* A4 aspect ratio: √2:1 */
 	aspect-ratio: 1.4142135623730951;
 
-	background-color: #fff;
-	color: #000;
+	border: @preview_border solid var(--bg);
+	padding: @preview_border;
 }
 
 .preview-small {
@@ -168,6 +170,7 @@ textarea {
 fieldset {
 	display: flex;
 	flex-wrap: wrap;
+	gap: 2 * @preview_border;
 }
 
 fieldset > div {
@@ -198,13 +201,17 @@ fieldset input {
 fieldset img,
 fieldset iframe,
 .preview-small {
-	border: 3px solid lightgray;
-	border-radius: 10px;
+	border-color: var(--fg);
+	border-radius: 3 * @preview_border;
 }
 
-input[type="radio"]:checked {
-	& + label > img,
-	& + iframe {
-		border:3px solid red;
+input[type="radio"] {
+	&:checked + label > img,
+	&:checked + iframe {
+		border-color: var(--accent2);
+	}
+
+	&:not(:checked) + iframe {
+		opacity: .8;
 	}
 }