diff --git a/README.md b/README.md
index c2670b3..523342e 100644
--- a/README.md
+++ b/README.md
@@ -103,26 +103,35 @@ The default stacks are:
 `theme` is the set of theme colors.
 Colors must be hexidecimal.
 Colors can be named however you like.
-Colors included in the theme seting will have a color scale generated.
+Colors included in the theme setting will have a color scale generated.
 It is recommended to pick a color, then choose a middle lightness as the basis of the scale so as to maximize the amount of steps in the scale that are not white or black.
 You can choose your naming convention.
 Bootstrap like themes will use generic names such as "primary"
 Material like themes will choose a theme color name i.e. 'indigo'
-There are two special names, light and dark. These will not have a scale generated.
+There are special names, light and dark, accent and accent-contrast. These will not have a scale generated and will be used as the basis for the default theme. The default theme will adjust to user set dark and light modes.
 - `light` is meant to be used as a light text color
 - `dark` is meant to be used as a dark text color
+- `accent` will be set as the [`accent-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) for the document and will be reflected in input and focus styling.
+- `accent-contrast` will be used as the text color used with accented backgrounds. This color should meet accessibility guidelines for contrast.
+
+## UPGRADE GUIDE
+If you want to restore the default Boostrap theme colors the copy and paste the code below into your `config.json`
+```json
+"theme": {
+  "accent": "#007AFF",
+  "accent-cotrast": "#fff",
+  "light": "#f8f9fa",
+  "dark": "#343a40",
+  "primary": "#007bff",
+  "secondary": "#6c757d",
+  "success": "#28a745",
+  "info": "#17a2b8",
+  "warning": "#ffc107",
+  "error": "#dc3545"
+}
+```
 
-The default theme uses a Boostrap like naming convention
-- light "#fff"
-- dark "#222"
-- primary "#1f74d6"
-- secondary "#7327ce"
-- success "#2cdd93"
-- info "#2196f3"
-- warning "#ffeb3b"
-- error "#e21893"
-
-These theme scales are intended to give you enough colors for all use cases including hover, disabled, active and visited states.
+Theme scales are intended to give you enough colors for all use cases including hover, disabled, active and visited states.
 
 #### example color theme scale
 ```css
diff --git a/config.json b/config.json
index da83aca..9e3526d 100644
--- a/config.json
+++ b/config.json
@@ -25,20 +25,15 @@
   "theme": {
     "light": "#f8f9fa",
     "dark": "#343a40",
-    "primary": "#007bff",
-    "secondary": "#6c757d",
-    "success": "#28a745",
-    "info": "#17a2b8",
-    "warning": "#ffc107",
-    "error": "#dc3545"
+    "accent": "#007aff",
+    "primary": "#007aff"
   },
   "color": {
-    "crimson": "#eb0052",
-    "muted": "#6c757d",
-    "white": "#fff"
+    "error": "#ff3b2f",
+    "warn": "#ffcc02",
+    "success": "#35c759"
   },
   "properties": {
-    "gradient": "linear-gradient(var(--primary), var(--secondary))"
   },
   "grid": {
     "steps": 6
diff --git a/package-lock.json b/package-lock.json
index d708985..d1a43f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2632,9 +2632,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
       "bin": {
         "semver": "bin/semver"
@@ -5166,9 +5166,9 @@
       }
     },
     "semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true
     },
     "shebang-command": {
diff --git a/reset.mjs b/reset.mjs
index 3755d36..946946f 100644
--- a/reset.mjs
+++ b/reset.mjs
@@ -14,9 +14,6 @@ export default function reset (query) {
 html:focus-within {
   scroll-behavior: smooth;
 }
-body {
-  min-height: 100vh;
-}
 audio,
 canvas,
 embed,
diff --git a/size.mjs b/size.mjs
index c00e20e..61263ce 100644
--- a/size.mjs
+++ b/size.mjs
@@ -5,10 +5,8 @@ export default function size (query='') {
 .sb-auto${query}{block-size:auto}
 .sb-100${query}{block-size:100%}
 .sb-min-0${query}{min-block-size:0}
-.sb-min-none${query}{min-block-size:none}
 .sb-min-100${query}{min-block-size:100%}
 .sb-max-0${query}{max-block-size:0}
-.sb-max-none${query}{max-block-size:none}
 .sb-max-100${query}{max-block-size:100%}
 .sb-100vw${query}{block-size:100vw}
 .sb-100vh${query}{block-size:100vh}
@@ -16,10 +14,8 @@ export default function size (query='') {
 .si-auto${query}{inline-size:auto}
 .si-100${query}{inline-size:100%}
 .si-min-0${query}{min-inline-size:0}
-.si-min-none${query}{min-inline-size:none}
 .si-min-100${query}{min-inline-size:100%}
 .si-max0${query}{max-inline-size:0}
-.si-max-none${query}{max-inline-size:none}
 .si-max-100${query}{max-inline-size:100%}
 .si-100vw${query}{inline-size:100vw}
 .si-100vh${query}{inline-size:100vh}
diff --git a/theme-color.mjs b/theme-color.mjs
index 7a65c3c..69872c2 100644
--- a/theme-color.mjs
+++ b/theme-color.mjs
@@ -2,7 +2,14 @@ import hextohsl from './hex-to-hsl.mjs'
 
 export default function themeColor({ config }) {
   const { color={}, theme={} } = config
-  theme['grey'] = theme && theme.grey || '#777'
+  const defaultLight = '#f8f9fa'
+  const defaultDark = '#343a40'
+  const lightParts = hextohsl(theme['light'] || defaultLight);
+  const defaultAccent = '#007aff'
+  const defaultAccentContrast = defaultDark
+  theme['accent'] = theme['accent'] || defaultAccent
+  theme['accent-contrast'] = theme['accent-contrast'] || defaultAccentContrast
+
 
   function colorSteps(color, name) {
     const hue = color.h
@@ -22,19 +29,56 @@ export default function themeColor({ config }) {
     `
   }
 
+
   return /*css*/`
 /*** Theme Colors ***/
 :root {
 ${Object.keys(theme).map(name => {
-if (name === 'light' || name === 'dark') {
+  if (name === 'light' ||
+      name === 'dark' ||
+      name === 'accent' ||
+      name === 'accent-contrast') {
   return `  --${name}: ${theme[name]};`
 }
-
 else {
   return colorSteps(hextohsl(theme[name]), name)
 }
 }).join('\n')}
+
 ${Object.keys(color).map(name => `  --${name}: ${color[name]};`).join('\n')}
+  --back: var(--light, ${defaultLight});
+  --fore: var(--dark, ${defaultDark});
+  ${colorSteps({ h: lightParts.h, s: 0, l: 50}, 'grey')}
+  --focus-size: 1px;
+  --focus-offset: 1px;
+  accent-color: var(--accent);
+  color-scheme: light dark;
+}
+
+:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
+  outline: none;
+}
+
+:is(a, button, input, textarea, summary):focus-visible {
+  outline: max(var(--focus-size), 1px) solid var(--accent);
+  outline-offset: var(--focus-offset);
+}
+
+:is(a, button, input, textarea, summary):not(:focus):not(:placeholder-shown):invalid {
+  outline: max(var(--focus-size), 1px) solid var(--error);
+  outline-offset: var(--focus-offset);
+}
+
+:is(a, button, input, textarea, summary):not(:focus):not(:placeholder-shown):invalid {
+  outline: max(var(--focus-size), 1px) solid var(--error);
+  outline-offset: var(--focus-offset);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --back: var(--dark, ${defaultDark});
+    --fore: var(--light, ${defaultLight});
+  }
 }
 `