diff --git a/dist/scales.css b/dist/scales.css
new file mode 100644
index 0000000..183a2fd
--- /dev/null
+++ b/dist/scales.css
@@ -0,0 +1,220 @@
+:root {
+ --theme-h: 207;
+ --theme-s: 50%;
+ --theme-l: 50%;
+
+ --theme: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
+ --muted: hsl(var(--theme-h), 15%, 15%);
+
+ --font-family: sans-serif, "Roboto";
+ --line-height: 1.5;
+ --font-weight: 400;
+ --font-size: 20px;
+ --border-color: var(--theme);
+ --border-radius: 0rem;
+ --border-width: 1px;
+ --spacing: 1rem;
+}
+
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+ --theme-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%));
+ --theme-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%));
+
+ --background: hsl(var(--theme-h), 0%, 95%);
+ --foreground: hsl(var(--theme-h), 0%, 5%);
+
+ --muted: hsl(var(--theme-h), 15%, 75%);
+}
+
+[data-theme="dark"] {
+ --theme-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%));
+ --theme-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%));
+
+ --background: hsl(var(--theme-h), 50%, 5%);
+ --foreground: hsl(var(--theme-h), 20%, 90%);
+}
+
+*, *:before, *:after { box-sizing: border-box; }
+
+html,body {
+ background: var(--background);
+ color: var(--foreground);
+ margin: 0;
+ padding: 0;
+ font-family: var(--font-family);
+ font-size: var(--font-size);
+ font-weight: var(--font-weight);
+ line-height: var(--line-height);
+ box-sizing: border-box;
+ padding: 0;
+}
+
+img,embed,iframe,object,audio,video {
+ height: auto;
+ max-width: 100%;
+ border: none;
+}
+
+main {
+ margin: calc((100vh / 25) * 1.5) calc((100vw / 25) * 1.5);
+ padding: var(--spacing);
+ height:100vh;
+}
+
+table {
+ background-color: var(--background);
+ border-collapse: collapse;
+ border-spacing: 0;
+ width: 100%;
+}
+
+tbody {
+ border-top: 2px solid var(--theme);
+ border-top: 2px solid var(--theme);
+}
+
+th {text-align: left;color: var(--theme-dark)}
+
+th, td {
+ padding: calc(var(--spacing) / 2);
+ border-bottom: 1px solid var(--theme)
+}
+
+a {color: var(--theme)}
+a:hover {color: var(--foreground)}
+
+blockquote {
+ margin: var(--spacing) 0;
+ border-left: calc(var(--spacing) / 2) solid var(--theme-dark);
+ background: hsl(var(--theme-h) var(--theme-s) var(--theme-l));
+ color: var(--background);
+ padding: var(--spacing);
+}
+
+pre, code, kbd {
+ font-family: monospace;
+ display: inline-block;
+ white-space: pre;
+ margin: 0;
+ padding: 0;
+}
+
+code {
+ margin: 0 calc(var(--spacing) / 4);
+ padding: 0 calc(var(--spacing) / 4);
+ background: var(--background);
+}
+
+hr {
+ color: var(--theme);
+ border: 1px solid;
+}
+
+h1,h2,h3,h4,h5,h6 {text-transform: capitalize;}
+h1 {font-size: calc(var(--font-size) * 2); color: var(--theme-dark)}
+h2 {color: var(--theme)}
+h3 {border-bottom: 1px solid var(--theme);}
+
+small {color: var(--muted)}
+
+section {
+ margin-bottom: var(--spacing);
+}
+
+article {
+ padding: var(--spacing);
+ background-color: var(--theme-light);
+}
+
+label {
+ font-size: var(--font-size);
+ font-weight: 600;
+ text-transform: capitalize;
+ color: var(--foreground);
+ margin: 0 calc(var(--spacing) / 2);
+}
+
+input {
+ display: block;
+ outline: none;
+ box-sizing: border-box;
+ font-size: var(--font-size);
+ background-color: var(--background);
+ color: var(--foreground);
+ width: 100%;
+ height: calc(var(--font-size) * 3);
+ border: 1px solid var(--theme);
+ border-radius: var(--border-radius);
+ padding: var(--spacing);
+ margin-bottom: var(--spacing);
+ margin-right: var(--spacing);
+}
+
+input:disabled {
+ background: var(--muted);
+ color: var(--background);
+ cursor:not-allowed;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+ display: inline-block;
+ padding: 0;
+ margin: 0;
+ width: var(--spacing);
+ height: var(--spacing);
+}
+
+input[type="submit"] {
+ font-size: var(--font-size);
+ height: calc(var(--font-size) * 3);
+ padding: var(--spacing) calc(var(--spacing) / 2);
+ margin: var(--spacing) 0;
+ cursor: pointer;
+}
+
+input[type="submit"] {
+ background-color: var(--theme);
+ color: var(--background);
+}
+
+button, select, textarea {
+ display: inline-block;
+ outline: none;
+ font-family: var(--font-family);
+ font-size: var(--font-size);
+ height: calc(var(--font-size) * 3);
+ width: 100%;
+ border: 1px solid var(--theme);
+ color: var(--theme);
+ background-color: var(--background);
+ border-radius: var(--border-radius);
+ padding: var(--spacing);
+ margin-bottom: var(--spacing);
+ cursor: pointer;
+}
+
+select {
+ background: var(--background) no-repeat 100%;
+ color: var(--foreground);
+ appearance: none;
+ background-size: 1ex;
+ background-origin: content-box;
+ background-image: url("data:image/svg+xml;utf8,");
+}
+
+textarea {
+ overflow: auto;
+ resize: vertical;
+ border: 1px solid var(--theme);
+ height: calc(var(--line-height) * 6rem);
+ cursor: text;
+ color: var(--foreground);
+}
+
+.grid {
+ display: grid;
+ gap: var(--spacing);
+ grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+}
\ No newline at end of file
diff --git a/dist/scales.min.css b/dist/scales.min.css
new file mode 100644
index 0000000..38979c6
--- /dev/null
+++ b/dist/scales.min.css
@@ -0,0 +1,2 @@
+/* Scales CSS v:0.1 | MIT LICENSE | https://github.com/n2geoff/scales */
+:root{--theme-h:207;--theme-s:50%;--theme-l:50%;--theme:hsl(var(--theme-h), var(--theme-s), var(--theme-l));--muted:hsl(var(--theme-h), 15%, 15%);--font-family:sans-serif,"Roboto";--line-height:1.5;--font-weight:400;--font-size:20px;--border-color:var(--theme);--border-radius:0rem;--border-width:1px;--spacing:1rem}:root:not([data-theme=dark]),[data-theme=light]{--theme-light:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%));--theme-dark:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%));--background:hsl(var(--theme-h), 0%, 95%);--foreground:hsl(var(--theme-h), 0%, 5%);--muted:hsl(var(--theme-h), 15%, 75%)}[data-theme=dark]{--theme-light:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%));--theme-dark:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%));--background:hsl(var(--theme-h), 50%, 5%);--foreground:hsl(var(--theme-h), 20%, 90%)}*,:after,:before{box-sizing:border-box}body,html{background:var(--background);color:var(--foreground);margin:0;padding:0;font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);box-sizing:border-box;padding:0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:none}main{margin:calc((100vh / 25) * 1.5) calc((100vw / 25) * 1.5);padding:var(--spacing);height:100vh}table{background-color:var(--background);border-collapse:collapse;border-spacing:0;width:100%}tbody{border-top:2px solid var(--theme);border-top:2px solid var(--theme)}th{text-align:left;color:var(--theme-dark)}td,th{padding:calc(var(--spacing)/ 2);border-bottom:1px solid var(--theme)}a{color:var(--theme)}a:hover{color:var(--foreground)}blockquote{margin:var(--spacing) 0;border-left:calc(var(--spacing)/ 2) solid var(--theme-dark);background:hsl(var(--theme-h) var(--theme-s) var(--theme-l));color:var(--background);padding:var(--spacing)}code,kbd,pre{font-family:monospace;display:inline-block;white-space:pre;margin:0;padding:0}code{margin:0 calc(var(--spacing)/ 4);padding:0 calc(var(--spacing)/ 4);background:var(--background)}hr{color:var(--theme);border:1px solid}h1,h2,h3,h4,h5,h6{text-transform:capitalize}h1{font-size:calc(var(--font-size) * 2);color:var(--theme-dark)}h2{color:var(--theme)}h3{border-bottom:1px solid var(--theme)}small{color:var(--muted)}section{margin-bottom:var(--spacing)}article{padding:var(--spacing);background-color:var(--theme-light)}label{font-size:var(--font-size);font-weight:600;text-transform:capitalize;color:var(--foreground);margin:0 calc(var(--spacing)/ 2)}input{display:block;outline:0;box-sizing:border-box;font-size:var(--font-size);background-color:var(--background);color:var(--foreground);width:100%;height:calc(var(--font-size) * 3);border:1px solid var(--theme);border-radius:var(--border-radius);padding:var(--spacing);margin-bottom:var(--spacing);margin-right:var(--spacing)}input:disabled{background:var(--muted);color:var(--background);cursor:not-allowed}input[type=checkbox],input[type=radio]{display:inline-block;padding:0;margin:0;width:var(--spacing);height:var(--spacing)}input[type=submit]{font-size:var(--font-size);height:calc(var(--font-size) * 3);padding:var(--spacing) calc(var(--spacing)/ 2);margin:var(--spacing) 0;cursor:pointer}input[type=submit]{background-color:var(--theme);color:var(--background)}button,select,textarea{display:inline-block;outline:0;font-family:var(--font-family);font-size:var(--font-size);height:calc(var(--font-size) * 3);width:100%;border:1px solid var(--theme);color:var(--theme);background-color:var(--background);border-radius:var(--border-radius);padding:var(--spacing);margin-bottom:var(--spacing);cursor:pointer}select{background:var(--background) no-repeat 100%;color:var(--foreground);appearance:none;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}textarea{overflow:auto;resize:vertical;border:1px solid var(--theme);height:calc(var(--line-height) * 6rem);cursor:text;color:var(--foreground)}.grid{display:grid;gap:var(--spacing);grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
\ No newline at end of file