diff --git a/src/experiments/scales.less b/src/experiments/scales.less
new file mode 100644
index 0000000..64c4dcf
--- /dev/null
+++ b/src/experiments/scales.less
@@ -0,0 +1,217 @@
+@theme-h: 207;
+@theme-s: 50%;
+@theme-l: 50%;
+
+@theme: color(hsl(@theme-h, @theme-s, @theme-l));
+@font-family: sans-serif, "Roboto";
+@line-height: 1.5;
+@font-weight: 400;
+@font-size: 20px;
+@border-radius: 0rem;
+@border-width: 1px;
+@spacing: 1rem;
+
+:root {
+    --theme: color(hsl(@theme-h, @theme-s, @theme-l));
+}
+
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+    --bg: color(hsl(@theme-h, 0%, 95%));
+    --fg: color(hsl(@theme-h, 0%, 5%));
+    --light: hsl(@theme-h, @theme-s, calc(@theme-l + 35%));
+    --dark: hsl(@theme-h, @theme-s, calc(@theme-l - 35%));
+    --gray: color(hsl(@theme-h, 15%, 75%));
+}
+
+[data-theme="dark"] {
+    --bg: color(hsl(@theme-h, 50%, 5%));
+    --fg: color(hsl(@theme-h, 20%, 90%));
+    --light: hsl(@theme-h, @theme-s, calc(@theme-l - 35%));
+    --dark: hsl(@theme-h, @theme-s, calc(@theme-l + 35%));
+    --gray: color(hsl(@theme-h, 15%, 15%));
+}
+
+*, *:before, *:after { box-sizing: border-box; }
+
+html,body {
+    background: var(--bg);
+    color: var(--fg);
+    margin: 0;
+    padding: 0;
+    font-family: @font-family;
+    font-size: @font-size;
+    font-weight: @font-weight;
+    line-height: @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: @spacing;
+    height:100vh;
+}
+
+table {
+    background-color: --bg;
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+}
+
+tbody {
+    border-top: 2px solid @theme;
+    border-top: 2px solid @theme;
+}
+
+th {text-align: left;color: var(--dark)}
+
+th, td {
+    padding: calc(@spacing / 2);
+    border-bottom: 1px solid color(@theme)
+}
+
+a {color: @theme}
+a:hover {color: var(--fg)}
+
+blockquote {
+    margin: @spacing 0;
+    border-left: calc(@spacing / 2) solid var(--dark);
+    background: color(hsl(@theme-h, @theme-s, @theme-l));
+    color: --bg;
+    padding: @spacing;
+}
+
+pre, code, kbd {
+    font-family: monospace;
+    display: inline-block;
+    white-space: pre;
+    margin: 0;
+    padding: 0;
+}
+
+code {
+    margin: 0 calc(@spacing / 4);
+    padding: 0 calc(@spacing / 4);
+    background: --bg;
+}
+
+hr {
+    color: @theme;
+    border: 1px solid;
+}
+
+h1,h2,h3,h4,h5,h6 {text-transform: capitalize;}
+h1 {font-size: calc(@font-size * 2); color: var(--dark)}
+h2 {color: color(@theme)}
+h3 {border-bottom: 1px solid color(@theme);}
+
+small {color: var(--gray)}
+
+section {
+    margin-bottom: @spacing;
+}
+
+article {
+    padding: @spacing;
+    background-color: var(--light);
+}
+
+label {
+    font-size: @font-size;
+    font-weight: 600;
+    text-transform: capitalize;
+    color: var(--fg);
+    margin: 0 calc(@spacing / 2);
+}
+
+input {
+    display: block;
+    outline: none;
+    box-sizing: border-box;
+    font-size: @font-size;
+    background-color: --bg;
+    color: var(--fg);
+    width: 100%;
+    height: calc(@font-size * 3);
+    border: 1px solid @theme;
+    border-radius: @border-radius;
+    padding: @spacing;
+    margin-bottom: @spacing;
+    margin-right: @spacing;
+}
+
+input:disabled {
+    background: var(--gray);
+    color: var(--bg);
+    cursor:not-allowed;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    width: @spacing;
+    height: @spacing;
+}
+
+input[type="submit"] {
+    font-size: @font-size;
+    height: calc(@font-size * 3);
+    padding: @spacing calc(@spacing / 2);
+    margin: @spacing 0;
+    cursor: pointer;
+}
+
+input[type="submit"] {
+    background-color: color(@theme);
+    color: var(--bg);
+}
+
+button, select, textarea {
+    display: inline-block;
+    outline: none;
+    font-family: @font-family;
+    font-size: @font-size;
+    height: calc(@font-size * 3);
+    width: 100%;
+    border: 1px solid color(@theme);
+    color: color(@theme);
+    background-color: var(--bg);
+    border-radius: @border-radius;
+    padding: @spacing;
+    margin-bottom: @spacing;
+    cursor: pointer;
+}
+
+select {
+    background: var(--bg) no-repeat 100%;
+    color: var(--fg);
+    appearance: none;
+    background-size: 1ex;
+    background-origin: content-box;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>");
+}
+
+textarea {
+    overflow: auto;
+    resize: vertical;
+    border: 1px solid color(@theme);
+    height: calc(@line-height * 6rem);
+    cursor: text;
+    color: var(--fg);
+}
+
+.grid {
+    display: grid;
+    gap: @spacing;
+    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+}
\ No newline at end of file