diff --git a/forms.html b/forms.html
new file mode 100644
index 0000000..28fe94f
--- /dev/null
+++ b/forms.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>system.css</title>
+		<meta name="description" content="A classless CSS base stylesheet to write modern websites using only HTML." />
+		<meta name="keywords" content="system, css, framework,classless css" />
+		<link rel="stylesheet" href="index.css" />
+	</head>
+	<body>
+		<header>
+			<h3>system.css</h3>
+			<nav>
+				<a href="index.html">Home</a>
+				<a href="forms.html" aria-current="page">Forms</a>
+				<a href="openprops.html">Themed</a>
+				<a href="style-api.html">Style API</a>
+			</nav>
+		</header>
+		<main>
+			<h1>A form with opinionated style and user validation</h1>
+			<p>Todo</p>
+
+			<form id="form" action="/">
+				<fieldset title="Full Name">
+					<div>
+						<label for="firstname">First name</label>
+						<input id="firstname" type="text" placeholder="First name" name="firstname" required="true" />
+					</div>
+					<div>
+						<label for="lastname">Last name</label>
+						<input id="lastname" type="text" placeholder="Last name" name="lastname" required="true" />
+					</div>
+				</fieldset>
+				<fieldset>
+					<legend>Gender (optional)</legend>
+					<fieldset>
+						<input type="radio" name="gender" id="gender_male" value="Male" />
+						<label for="gender_male">Male</label>
+						<input type="radio" name="gender" id="gender_female" value="Female" />
+						<label for="gender_female">Female</label>
+						<input type="radio" name="gender" id="gender_other" value="other-none-na" />
+						<label for="gender_other">Non-binary</label>
+						<input type="radio" name="gender" id="gender_unknown" value="unknown" />
+						<label for="gender_unknown">None of your business</label>
+					</fieldset>
+				</fieldset>
+				<fieldset title="Contact information">
+					<div>
+						<label for="email">E-mail</label>
+						<input type="email" id="email" required />
+					</div>
+					<div>
+						<label for="tel">Phone number</label>
+						<input type="tel" id="tel" required />
+					</div>
+					<div>
+						<label for="select">Country</label>
+						<select id="select" required="required">
+							<option>China</option>
+							<option>India</option>
+							<option>United States</option>
+							<option>Indonesia</option>
+							<option>Brazil</option>
+						</select>
+					</div>
+				</fieldset>
+				<fieldset>
+					<div>
+						<label for="password">password</label>
+						<input
+							type="password"
+							id="password"
+							pattern=".{8,24}"
+							required="required"
+							autocomplete="current-password"
+							title="This must be a valid password. Minimum of 8 characters with a max of 24."
+						/>
+					</div>
+				</fieldset>
+				<fieldset>
+					<div>
+						<label for="textarea">Comments (optional)</label>
+						<textarea id="textarea"></textarea>
+					</div>
+				</fieldset>
+				<fieldset>
+					<div>
+						<input type="checkbox" name="terms" id="terms" required />
+						<label for="terms">
+							I agree to the
+							<a href="https://dutchcelt.github.io/system.css/">terms and conditions</a></label
+						>
+					</div>
+				</fieldset>
+				<div>
+					<button disabled="disabled">Disabled</button>
+					<button type="button">Cancel</button>
+					<button type="submit">Submit</button>
+				</div>
+				<p>
+					<small
+						><em><strong>Note</strong>: Try to avoid the use of disabled items.</em></small
+					>
+				</p>
+			</form>
+		</main>
+		<footer></footer>
+	</body>
+</html>
diff --git a/index.html b/index.html
index 894f75b..c15bbb4 100644
--- a/index.html
+++ b/index.html
@@ -11,10 +11,17 @@
 	<body>
 		<header>
 			<h3>system.css</h3>
-			<nav><a href="index.html" aria-current="page">Home</a> <a href="openprops.html">Open props theme</a></nav>
+			<nav>
+				<a href="index.html" aria-current="page">Home</a>
+				<a href="forms.html">Forms</a>
+				<a href="openprops.html">Themed</a>
+				<a href="style-api.html">Style API</a>
+			</nav>
 		</header>
 		<main>
-			<h1>The quick brown fox jumps over the lazy dog</h1>
+			<h1>Browsers have a mini design system</h1>
+			<p>With this base stylesheet we can utilise a browsers system color and css keywords implementation.</p>
+			<h2>Let's build on top of that</h2>
 			<p>
 				This paragraph text is using
 				<a href="https://github.com/dutchcelt/system.css/blob/main/system.css">system.css</a>. Lorem ipsum dolor
@@ -56,8 +63,8 @@ <h6>Heading 6</h6>
 
 			<p>
 				Lorem ipsum dolor sit amet consectetur adipisicing elit. <code>Hic culpa, nobis doloremque</code> veniam
-				non, nihil cupiditate odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
-				debitis eveniet totam minima vel.
+				non, nihil cupiditate odit repellat est <kbd>ALT&nbsp;+&nbsp;F4</kbd> expedita facilis. Fuga aspernatur,
+				alias debitis eveniet totam minima vel.
 			</p>
 
 			<ul>
@@ -177,90 +184,6 @@ <h6>Heading 6</h6>
 
 			<hr />
 
-			<form id="form" action="/">
-				<fieldset title="Full Name">
-					<div>
-						<label for="firstname">First name</label>
-						<input id="firstname" type="text" placeholder="First name" name="firstname" required="true" />
-					</div>
-					<div>
-						<label for="lastname">Last name</label>
-						<input id="lastname" type="text" placeholder="Last name" name="lastname" required="true" />
-					</div>
-				</fieldset>
-				<fieldset>
-					<legend>Gender (optional)</legend>
-					<fieldset>
-						<input type="radio" name="gender" id="gender_male" value="Male" />
-						<label for="gender_male">Male</label>
-						<input type="radio" name="gender" id="gender_female" value="Female" />
-						<label for="gender_female">Female</label>
-						<input type="radio" name="gender" id="gender_other" value="other-none-na" />
-						<label for="gender_other">Non-binary</label>
-						<input type="radio" name="gender" id="gender_unknown" value="unknown" />
-						<label for="gender_unknown">None of your business</label>
-					</fieldset>
-				</fieldset>
-				<fieldset title="Contact information">
-					<div>
-						<label for="email">E-mail</label>
-						<input type="email" id="email" required />
-					</div>
-					<div>
-						<label for="tel">Phone number</label>
-						<input type="tel" id="tel" required />
-					</div>
-					<div>
-						<label for="select">Country</label>
-						<select id="select" required="required">
-							<option>China</option>
-							<option>India</option>
-							<option>United States</option>
-							<option>Indonesia</option>
-							<option>Brazil</option>
-						</select>
-					</div>
-				</fieldset>
-				<fieldset>
-					<div>
-						<label for="password">password</label>
-						<input
-							type="password"
-							id="password"
-							pattern=".{8,24}"
-							required="required"
-							autocomplete="current-password"
-							title="This must be a valid password. Minimum of 8 characters with a max of 24."
-						/>
-					</div>
-				</fieldset>
-				<fieldset>
-					<div>
-						<label for="textarea">Comments (optional)</label>
-						<textarea id="textarea"></textarea>
-					</div>
-				</fieldset>
-				<fieldset>
-					<div>
-						<input type="checkbox" name="terms" id="terms" required />
-						<label for="terms">
-							I agree to the
-							<a href="https://dutchcelt.github.io/system.css/">terms and conditions</a></label
-						>
-					</div>
-				</fieldset>
-				<div>
-					<button disabled="disabled">Disabled</button>
-					<button type="button">Cancel</button>
-					<button type="submit">Submit form</button>
-				</div>
-				<p>
-					<small
-						><em><strong>Note</strong>: Try to avoid the use of disabled items.</em></small
-					>
-				</p>
-			</form>
-			<hr />
 			<details>
 				<summary>This is the details summary text</summary>
 				<h4>Heading 5</h4>
diff --git a/openprops.html b/openprops.html
index 4e154f9..f45f681 100644
--- a/openprops.html
+++ b/openprops.html
@@ -11,14 +11,18 @@
 	<body>
 		<header>
 			<h3>system.css</h3>
-			<nav><a href="index.html">Home</a> <a href="openprops.html" aria-current="page">Open props theme</a></nav>
+			<nav>
+				<a href="index.html">Home</a> <a href="forms.html">Forms</a
+				><a href="openprops.html" aria-current="page">Themed</a>
+				<a href="style-api.html">Style API</a>
+			</nav>
 		</header>
 		<main>
-			<h1>The quick brown fox jumps over the lazy dog</h1>
+			<h1>Theme system.css with your own props</h1>
 			<p>
-				This paragraph text is using
-				<a href="https://github.com/dutchcelt/system.css/blob/main/system.css">system.css</a>. Lorem ipsum dolor
-				sit amet consectetur adipisicing elit.
+				This page has been style with
+				<a href="https://open-props.style">Open props</a>. This is a styling solution that works well with
+				system.css. Both focus on the use of CSS Custom Properties.
 			</p>
 			<p>
 				This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequatur
@@ -56,8 +60,8 @@ <h6>Heading 6</h6>
 
 			<p>
 				Lorem ipsum dolor sit amet consectetur adipisicing elit. <code>Hic culpa, nobis doloremque</code> veniam
-				non, nihil cupiditate odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
-				debitis eveniet totam minima vel.
+				non, nihil cupiditate odit repellat est <kbd>ALT&nbsp;+&nbsp;F4</kbd> expedita facilis. Fuga aspernatur,
+				alias debitis eveniet totam minima vel.
 			</p>
 
 			<ul>
@@ -177,90 +181,6 @@ <h6>Heading 6</h6>
 
 			<hr />
 
-			<form id="form" action="/">
-				<fieldset title="Full Name">
-					<div>
-						<label for="firstname">First name</label>
-						<input id="firstname" type="text" placeholder="First name" name="firstname" required="true" />
-					</div>
-					<div>
-						<label for="lastname">Last name</label>
-						<input id="lastname" type="text" placeholder="Last name" name="lastname" required="true" />
-					</div>
-				</fieldset>
-				<fieldset>
-					<legend>Gender (optional)</legend>
-					<fieldset>
-						<input type="radio" name="gender" id="gender_male" value="Male" />
-						<label for="gender_male">Male</label>
-						<input type="radio" name="gender" id="gender_female" value="Female" />
-						<label for="gender_female">Female</label>
-						<input type="radio" name="gender" id="gender_other" value="other-none-na" />
-						<label for="gender_other">Non-binary</label>
-						<input type="radio" name="gender" id="gender_unknown" value="unknown" />
-						<label for="gender_unknown">None of your business</label>
-					</fieldset>
-				</fieldset>
-				<fieldset title="Contact information">
-					<div>
-						<label for="email">E-mail</label>
-						<input type="email" id="email" required />
-					</div>
-					<div>
-						<label for="tel">Phone number</label>
-						<input type="tel" id="tel" required />
-					</div>
-					<div>
-						<label for="select">Country</label>
-						<select id="select" required="required">
-							<option>China</option>
-							<option>India</option>
-							<option>United States</option>
-							<option>Indonesia</option>
-							<option>Brazil</option>
-						</select>
-					</div>
-				</fieldset>
-				<fieldset>
-					<div>
-						<label for="password">password</label>
-						<input
-							type="password"
-							id="password"
-							pattern=".{8,24}"
-							required="required"
-							autocomplete="current-password"
-							title="This must be a valid password. Minimum of 8 characters with a max of 24."
-						/>
-					</div>
-				</fieldset>
-				<fieldset>
-					<div>
-						<label for="textarea">Comments (optional)</label>
-						<textarea id="textarea"></textarea>
-					</div>
-				</fieldset>
-				<fieldset>
-					<div>
-						<input type="checkbox" name="terms" id="terms" required />
-						<label for="terms">
-							I agree to the
-							<a href="https://dutchcelt.github.io/system.css/">terms and conditions</a></label
-						>
-					</div>
-				</fieldset>
-				<div>
-					<button disabled="disabled">Disabled</button>
-					<button type="button">Cancel</button>
-					<button type="submit">Submit form</button>
-				</div>
-				<p>
-					<small
-						><em><strong>Note</strong>: Try to avoid the use of disabled items.</em></small
-					>
-				</p>
-			</form>
-			<hr />
 			<details>
 				<summary>This is the details summary text</summary>
 				<h4>Heading 5</h4>
diff --git a/src/system-selectors.css b/src/system-selectors.css
index b994369..db1d5bf 100644
--- a/src/system-selectors.css
+++ b/src/system-selectors.css
@@ -218,6 +218,7 @@
 	}
 
 	pre {
+		margin-block: var(--system-spacing-main);
 		padding: var(--system-spacing-main);
 		max-width: 100%;
 		overflow: auto;
@@ -245,6 +246,7 @@
 	}
 
 	details {
+		margin-block: var(--system-spacing-main);
 		border: var(--system-stroke-thin) solid var(--system-stroke-color);
 		border-radius: var(--system-radius);
 		cursor: text;
diff --git a/style-api.html b/style-api.html
new file mode 100644
index 0000000..b74c0b8
--- /dev/null
+++ b/style-api.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>system.css</title>
+		<meta name="description" content="A classless CSS base stylesheet to write modern websites using only HTML." />
+		<meta name="keywords" content="system, css, framework,classless css" />
+		<link rel="stylesheet" href="index.css" />
+	</head>
+	<body>
+		<header>
+			<h3>system.css</h3>
+			<nav>
+				<a href="index.html">Home</a>
+				<a href="forms.html">Forms</a>
+				<a href="openprops.html">Themed</a>
+				<a href="style-api.html" aria-current="page">Style API</a>
+			</nav>
+		</header>
+		<main>
+			<h1>A style api to make system.css your own</h1>
+			<p>Todo</p>
+			<!-- <pre><code>--system-cs-state</code></pre> -->
+			<details>
+				<summary>System Colors</summary>
+				<h3>heading</h3>
+				<p>
+					A number of system values don't work well in dark mode. With <code>color-mix()</code> we create
+					overrides that are easy to maintain.
+				</p>
+
+				<pre><code>--system-canvas: color-mix(
+  in oklab, 
+  var(--gray-0) var(--system-cs-state), 
+  var(--gray-9)
+);</code></pre>
+
+				<table>
+					<thead>
+						<tr>
+							<th>Property</th>
+							<th>Initial value (default)</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>--system-accent-color</td>
+							<td>AccentColor</td>
+						</tr>
+						<tr>
+							<td>--system-accent-color-text</td>
+							<td>AccentColorText</td>
+						</tr>
+						<tr>
+							<td>--system-active-text</td>
+							<td>ActiveText</td>
+						</tr>
+						<tr>
+							<td>--system-button-border</td>
+							<td>ButtonBorder</td>
+						</tr>
+						<tr>
+							<td>--system-button-face</td>
+							<td>ButtonFace</td>
+						</tr>
+						<tr>
+							<td>--system-button-text</td>
+							<td>ButtonText</td>
+						</tr>
+						<tr>
+							<td>--system-canvas</td>
+							<td>Canvas</td>
+						</tr>
+						<tr>
+							<td>--system-canvas-text</td>
+							<td>--system-field</td>
+						</tr>
+						<tr>
+							<td>--system-field</td>
+							<td>Field</td>
+						</tr>
+						<tr>
+							<td>--system-field-text</td>
+							<td>FieldText</td>
+						</tr>
+						<tr>
+							<td>--system-gray-text</td>
+							<td>GrayText</td>
+						</tr>
+						<tr>
+							<td>--system-highlight</td>
+							<td>Highlight</td>
+						</tr>
+						<tr>
+							<td>--system-highlight-text</td>
+							<td>HighlightText</td>
+						</tr>
+						<tr>
+							<td>--system-link-text</td>
+							<td>LinkText</td>
+						</tr>
+						<tr>
+							<td>--system-mark</td>
+							<td>Mark</td>
+						</tr>
+						<tr>
+							<td>--system-mark-text</td>
+							<td>MarkText</td>
+						</tr>
+						<tr>
+							<td>--system-selected-item</td>
+							<td>SelectedItem</td>
+						</tr>
+						<tr>
+							<td>--system-selected-item-text</td>
+							<td>SelectedItemText</td>
+						</tr>
+						<tr>
+							<td>--system-visited-text</td>
+							<td>VisitedText</td>
+						</tr>
+					</tbody>
+				</table>
+			</details>
+			<!--
+			<details>
+				<summary>Xxxx</summary>
+				<h3>heading</h3>
+				<p>Todo</p>
+				<table>
+					<thead>
+						<tr>
+							<th>Property</th>
+							<th>Initial value (default)</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>--system-xxx</td>
+							<td>xxx</td>
+						</tr>
+						<tr>
+							<td>--system-accent-xxx</td>
+							<td>xx</td>
+						</tr>
+					</tbody>
+				</table>
+			</details>
+			-->
+		</main>
+		<footer></footer>
+	</body>
+</html>
diff --git a/theme/openprops/system-open-props.css b/theme/openprops/system-open-props.css
index 1ebd875..6d859b5 100644
--- a/theme/openprops/system-open-props.css
+++ b/theme/openprops/system-open-props.css
@@ -12,23 +12,23 @@
 		--system-button-border: color-mix(in oklab, var(--system-stroke-color) var(--system-cs-state), ButtonBorder);
 		--system-button-face: var(--system-canvas);
 		--system-button-text: var(--system-canvas-text);
-		--system-canvas: color-mix(in oklab, var(--gray-0) var(--system-cs-state), var(--gray-9));
-		--system-canvas-text: color-mix(in oklab, var(--gray-12) var(--system-cs-state), var(--gray-0));
+		--system-canvas: color-mix(in oklab, var(--blue-1) var(--system-cs-state), var(--blue-12));
+		--system-canvas-text: color-mix(in oklab, var(--blue-12) var(--system-cs-state), var(--blue-2));
 		--system-field: var(--system-canvas);
 		--system-field-text: var(--system-canvas-text);
-		--system-gray-text: color-mix(in oklab, var(--gray-6) var(--system-cs-state), var(--gray-5));
-		--system-highlight: color-mix(in oklab, var(--blue-2) var(--system-cs-state), var(--blue-5));
+		--system-gray-text: color-mix(in oklab, var(--blue-6) var(--system-cs-state), var(--blue-5));
+		--system-highlight: color-mix(in oklab, var(--blue-2) var(--system-cs-state), var(--blue-3));
 		--system-highlight-text: var(--system-canvas-text);
-		--system-link-text: color-mix(in oklab, var(--indigo-7) var(--system-cs-state), var(--indigo-3));
+		--system-link-text: color-mix(in oklab, var(--indigo-10) var(--system-cs-state), var(--indigo-1));
 		--system-mark: color-mix(in oklab, var(--yellow-3) var(--system-cs-state), var(--yellow-8));
-		--system-mark-text: color-mix(in oklab, var(--gray-12) var(--system-cs-state), var(--gray-0));
+		--system-mark-text: color-mix(in oklab, var(--blue-12) var(--system-cs-state), var(--blue-2));
 		--system-selected-item: color-mix(in oklab, var(--indigo-2) var(--system-cs-state), var(--indigo-7));
 		--system-selected-item-text: var(--system-canvas-text) var(--system-canvas-text);
-		--system-visited-text: color-mix(in oklab, var(--purple-7) var(--system-cs-state), var(--purple-3));
+		--system-visited-text: color-mix(in oklab, var(--purple-10) var(--system-cs-state), var(--purple-2));
 
 		/* These are only mixed with system colors */
-		--system-surface-color: color-mix(in oklab, var(--gray-3) var(--system-cs-state), var(--gray-8));
-		--system-stroke-color: color-mix(in oklab, var(gray-4) var(--system-cs-state), var(gray-7));
+		--system-surface-color: color-mix(in oklab, var(--blue-2) var(--system-cs-state), var(--blue-10));
+		--system-stroke-color: color-mix(in oklab, var(--blue-4) var(--system-cs-state), var(--blue-7));
 		--system-invalid-color: color-mix(in oklab, var(--system-active-text) 90%, var(--system-canvas-text));
 
 		--system-interactive-color: var(--system-accent-color);

Property	Initial value (default)
--system-accent-color	AccentColor
--system-accent-color-text	AccentColorText
--system-active-text	ActiveText
--system-button-border	ButtonBorder
--system-button-face	ButtonFace
--system-button-text	ButtonText
--system-canvas	Canvas
--system-canvas-text	--system-field
--system-field	Field
--system-field-text	FieldText
--system-gray-text	GrayText
--system-highlight	Highlight
--system-highlight-text	HighlightText
--system-link-text	LinkText
--system-mark	Mark
--system-mark-text	MarkText
--system-selected-item	SelectedItem
--system-selected-item-text	SelectedItemText
--system-visited-text	VisitedText