diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index d51d9ca..638adf7 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -26,8 +26,14 @@ jobs:
         with:
           node-version: 16
       - run: npm ci
-      - run: npm install -g sass
-      - run: sass sass/main.scss css/chimera.css
+      - name: install sass dependency
+        run: npm install -g sass
+      - name: compile chimera theme
+        run: sass sass/chimera.scss css/chimera.css
+      - name: compile chimera-dark theme
+        run: sass sass/chimera-dark.scss css/chimera-dark.css
+      - name: compile chimera-golden theme
+        run: sass sass/chimera-golden.scss css/chimera-golden.css
 
   publish-npm:
     needs: [format-prettier, compile-sass]
diff --git a/README.md b/README.md
index de15472..7ff9f28 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@
 
 # ChimeraCSS
 
-Classless CSS framework with a Clean, soft and modern design inspired By SakuraCSS and Marx.
+Classless CSS framework with a clean, soft and modern design inspired By SakuraCSS and Marx.
 
 ## Why?
 
@@ -55,6 +55,64 @@ or
 yarn add chimeracss
 ```
 
+### Themes
+
+Chimera has three themes: chimera, chimera-dark, chimera-golden. to use an alternative theme, change the filename in the import to the same as the theme:
+
+Chimera-dark
+
+```html
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://unpkg.com/chimeracss@:version/css/chimera-dark.css"
+/>
+```
+
+Chimera-golden
+
+```html
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://unpkg.com/chimeracss@:version/css/chimera-golden.css"
+/>
+```
+
+### Theme comparisons
+
+<div>
+    <p>No css/HTML only</p>
+    <img  
+      align="center" 
+      src="./public/img/no-css.png"
+      alt="Chimera"
+      width="50%" 
+    />
+    <p>Chimera:</p>
+    <img  
+      align="center" 
+      src="./public/img/chimera.png"
+      alt="Chimera"
+      width="50%" 
+    />
+    <p>Chimera-dark:</p>
+    <img  
+      align="center" 
+      src="./public/img/chimera-dark.png"
+      alt="Chimera"
+      width="50%" 
+    />
+    <p>Chimera-golden:</p>
+    <img  
+      align="center" 
+      src="./public/img/chimera-golden.png"
+      alt="Chimera"
+      width="50%" 
+    />
+    
+</div>
+
 ## License
 
 You can check out the full license [here](https://github.com/J0hans1/Chimera/blob/master/LICENSE)
diff --git a/css/chimera-dark.css b/css/chimera-dark.css
new file mode 100644
index 0000000..68a2642
--- /dev/null
+++ b/css/chimera-dark.css
@@ -0,0 +1,268 @@
+button,
+input[type=button],
+input[type=submit] {
+  background-color: hsl(183, 40%, 50%);
+  color: #333333;
+  font-size: medium;
+  padding: 0.5em 0.75em;
+  border: 0;
+  border-radius: 0.5em;
+  transition: 200ms ease-in-out;
+}
+
+button:hover,
+input[type=button]:hover,
+input[type=submit]:hover {
+  background-color: hsl(183, 40%, 40%);
+  border-color: hsl(183, 40%, 40%);
+  cursor: pointer;
+}
+
+button:active,
+input[type=button]:active,
+input[type=submit]:active {
+  border-color: hsl(183, 40%, 30%);
+  background-color: hsl(183, 40%, 30%);
+}
+
+blockquote {
+  line-height: 2em;
+  background-color: hsl(0, 0%, 20%);
+  width: 100%;
+  box-sizing: border-box;
+  border-left: 0.25em solid hsl(183, 40%, 50%);
+  border-radius: 0 0.5em 0.5em 0;
+  padding: 1em;
+  margin: 0;
+}
+
+code,
+kbd,
+var,
+samp, pre {
+  background-color: hsl(0, 0%, 20%);
+  border-radius: 8px;
+  font-family: "Fira Code", monospace;
+}
+
+pre {
+  padding: 10px;
+  overflow-x: auto;
+  width: 100%;
+}
+
+code,
+kbd,
+var,
+samp {
+  padding: 4px 8px;
+}
+
+hr {
+  background-color: hsl(183, 40%, 50%);
+  height: 0.2em;
+  width: 100%;
+  border: 0;
+  margin: 1em 0;
+}
+
+img {
+  width: 100%;
+  height: auto;
+}
+
+label {
+  font-weight: 600;
+}
+
+a {
+  color: hsl(183, 40%, 50%);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+a:hover {
+  color: hsl(183, 40%, 40%);
+  cursor: pointer;
+}
+
+a:active {
+  color: hsl(183, 40%, 30%);
+  text-decoration-color: hsl(183, 40%, 30%);
+}
+
+li, ul {
+  margin-left: 1.5em;
+  padding: 0;
+  line-height: 2em;
+}
+
+ul {
+  list-style: disc;
+}
+
+li {
+  list-style: inherit;
+}
+
+input[type=checkbox] {
+  /*remove default checkboxes, and reset style*/
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  background-color: hsl(0, 0%, 20%);
+  /*style*/
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  border: 2px solid hsl(0, 0%, 51%);
+  border-radius: 0.2em;
+  display: grid;
+  place-content: center;
+}
+
+input[type=checkbox]:hover {
+  border: 2px solid hsl(183, 40%, 50%);
+}
+
+input[type=checkbox]::before {
+  transition: 200ms transform ease-in-out;
+  transform: scale(0);
+  width: 0.5em;
+  height: 0.5em;
+  background-color: hsl(183, 40%, 50%);
+  content: "";
+  border-radius: 0.05em;
+}
+
+input[type=checkbox]:checked::before {
+  transform: scale(1);
+}
+
+input[type=radio] {
+  /*remove default radio-buttons, and reset style*/
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  background-color: hsl(0, 0%, 20%);
+  /*style*/
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  border: 2px solid hsl(0, 0%, 51%);
+  /*Place fill*/
+  display: grid;
+  place-content: center;
+}
+
+input[type=radio]:hover {
+  border: 2px solid hsl(183, 40%, 50%);
+}
+
+input[type=radio]::before {
+  transition: 200ms transform ease-in-out;
+  transform: scale(0);
+  width: 0.5em;
+  height: 0.5em;
+  background-color: hsl(183, 40%, 50%);
+  content: "";
+  border-radius: 50%;
+}
+
+input[type=radio]:checked::before {
+  transform: scale(1);
+}
+
+radio,
+checkbox {
+  line-height: 1.1;
+  display: grid;
+  grid-template-columns: 1em auto;
+  gap: 0.5em;
+  align-items: center;
+  margin: 1em 0em;
+}
+
+td, th {
+  border-bottom: 0.1em solid hsl(183, 40%, 50%);
+  padding: 0.5em;
+  text-align: left;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th {
+  font-weight: 600;
+}
+
+td {
+  font-weight: lighter;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  font-weight: 400;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+h1 {
+  font-size: 3em;
+}
+
+h2 {
+  font-size: 2.5em;
+}
+
+h3 {
+  font-size: 2em;
+}
+
+h4 {
+  font-size: 1.5em;
+}
+
+h5 {
+  font-size: 1.25em;
+}
+
+h6 {
+  font-size: 1em;
+}
+
+p {
+  line-height: 1.5;
+  font-weight: 300;
+}
+
+textarea,
+input[type=text],
+input[type=email],
+input[type=password],
+input[type=number],
+input[type=tel],
+input[type=url],
+input[type=search] {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  background-color: hsl(0, 0%, 20%);
+  color: hsl(0, 0%, 100%);
+  font-size: medium;
+  border-radius: 0.5em;
+  border: 0;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0.5em 0;
+  padding: 1em 0 1em 1em;
+  resize: none;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  color: hsl(0, 0%, 100%);
+  background: hsl(0, 0%, 10%);
+}
+
+/*# sourceMappingURL=chimera-dark.css.map */
diff --git a/css/chimera-dark.css.map b/css/chimera-dark.css.map
new file mode 100644
index 0000000..d19d643
--- /dev/null
+++ b/css/chimera-dark.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/_buttons.scss","../sass/chimera-dark.scss","../sass/_blockquotes.scss","../sass/_formatted-text.scss","../sass/_horisontal-rule.scss","../sass/_images.scss","../sass/_labels.scss","../sass/_links.scss","../sass/_lists.scss","../sass/_checkboxes.scss","../sass/_radio-buttons.scss","../sass/_radio-checkbox-groups.scss","../sass/_tables.scss","../sass/_text.scss","../sass/_textfields.scss","../sass/_base.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE,kBCEQ;EDDR,OCMuB;EDLvB;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE,kBCTa;EDUb,cCVa;EDWb;;;AAGF;AAAA;AAAA;EAGE,cChBe;EDiBf,kBCjBe;;;ACPjB;EACE;EACA,kBDUqB;ECTrB;EACA;EACA;EACA;EACA;EACA;;;ACRF;AAAA;AAAA;AAAA;EACE,kBFWqB;EEVrB;EACA;;;AAGF;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAKE;;;AClBF;EACE,kBHIQ;EGHR;EACA;EACA;EACA;;;ACLF;EACE;EACA;;;ACFF;EACE;;;ACDF;EACE,ONYa;EMXb;EACA;;;AAGF;EACE,ONDa;EMEb;;;AAGF;EACE,ONLe;EMMf,uBNNe;;;AOPjB;EACE;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;ACbF;AACE;EACA;EACA;EACA;EACA,kBROqB;AQLrB;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA,kBRtBQ;EQuBR;EACA;;;AAGF;EACE;;;ACjCF;AACE;EACA;EACA;EACA;EACA,kBTOqB;ASLrB;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA,kBTtBQ;ESuBR;EACA;;;AAGF;EACE;;;ACjCF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;;ACPF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AClBF;EACE;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EACE;EACA;;;ACtCF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,abPW;EaQX,kBbGqB;EaFrB,ObDa;EaEb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnBF;EACE;EACA,OdOa;EcNb,YdQW","file":"chimera-dark.css"}
\ No newline at end of file
diff --git a/css/chimera-golden.css b/css/chimera-golden.css
new file mode 100644
index 0000000..052823b
--- /dev/null
+++ b/css/chimera-golden.css
@@ -0,0 +1,268 @@
+button,
+input[type=button],
+input[type=submit] {
+  background-color: #fae0d1;
+  color: #333333;
+  font-size: medium;
+  padding: 0.5em 0.75em;
+  border: 0;
+  border-radius: 0.5em;
+  transition: 200ms ease-in-out;
+}
+
+button:hover,
+input[type=button]:hover,
+input[type=submit]:hover {
+  background-color: hsl(22, 80%, 70%);
+  border-color: hsl(22, 80%, 70%);
+  cursor: pointer;
+}
+
+button:active,
+input[type=button]:active,
+input[type=submit]:active {
+  border-color: hsl(22, 80%, 60%);
+  background-color: hsl(22, 80%, 60%);
+}
+
+blockquote {
+  line-height: 2em;
+  background-color: hsl(60, 5%, 10%);
+  width: 100%;
+  box-sizing: border-box;
+  border-left: 0.25em solid #fae0d1;
+  border-radius: 0 0.5em 0.5em 0;
+  padding: 1em;
+  margin: 0;
+}
+
+code,
+kbd,
+var,
+samp, pre {
+  background-color: hsl(60, 5%, 10%);
+  border-radius: 8px;
+  font-family: "Fira Code", monospace;
+}
+
+pre {
+  padding: 10px;
+  overflow-x: auto;
+  width: 100%;
+}
+
+code,
+kbd,
+var,
+samp {
+  padding: 4px 8px;
+}
+
+hr {
+  background-color: #fae0d1;
+  height: 0.2em;
+  width: 100%;
+  border: 0;
+  margin: 1em 0;
+}
+
+img {
+  width: 100%;
+  height: auto;
+}
+
+label {
+  font-weight: 600;
+}
+
+a {
+  color: hsl(22, 80%, 70%);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+a:hover {
+  color: hsl(22, 80%, 70%);
+  cursor: pointer;
+}
+
+a:active {
+  color: hsl(22, 80%, 60%);
+  text-decoration-color: hsl(22, 80%, 60%);
+}
+
+li, ul {
+  margin-left: 1.5em;
+  padding: 0;
+  line-height: 2em;
+}
+
+ul {
+  list-style: disc;
+}
+
+li {
+  list-style: inherit;
+}
+
+input[type=checkbox] {
+  /*remove default checkboxes, and reset style*/
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  background-color: hsl(60, 5%, 10%);
+  /*style*/
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  border: 2px solid hsl(0, 0%, 51%);
+  border-radius: 0.2em;
+  display: grid;
+  place-content: center;
+}
+
+input[type=checkbox]:hover {
+  border: 2px solid #fae0d1;
+}
+
+input[type=checkbox]::before {
+  transition: 200ms transform ease-in-out;
+  transform: scale(0);
+  width: 0.5em;
+  height: 0.5em;
+  background-color: #fae0d1;
+  content: "";
+  border-radius: 0.05em;
+}
+
+input[type=checkbox]:checked::before {
+  transform: scale(1);
+}
+
+input[type=radio] {
+  /*remove default radio-buttons, and reset style*/
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  background-color: hsl(60, 5%, 10%);
+  /*style*/
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  border: 2px solid hsl(0, 0%, 51%);
+  /*Place fill*/
+  display: grid;
+  place-content: center;
+}
+
+input[type=radio]:hover {
+  border: 2px solid #fae0d1;
+}
+
+input[type=radio]::before {
+  transition: 200ms transform ease-in-out;
+  transform: scale(0);
+  width: 0.5em;
+  height: 0.5em;
+  background-color: #fae0d1;
+  content: "";
+  border-radius: 50%;
+}
+
+input[type=radio]:checked::before {
+  transform: scale(1);
+}
+
+radio,
+checkbox {
+  line-height: 1.1;
+  display: grid;
+  grid-template-columns: 1em auto;
+  gap: 0.5em;
+  align-items: center;
+  margin: 1em 0em;
+}
+
+td, th {
+  border-bottom: 0.1em solid #fae0d1;
+  padding: 0.5em;
+  text-align: left;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th {
+  font-weight: 600;
+}
+
+td {
+  font-weight: lighter;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  font-weight: 400;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+h1 {
+  font-size: 3em;
+}
+
+h2 {
+  font-size: 2.5em;
+}
+
+h3 {
+  font-size: 2em;
+}
+
+h4 {
+  font-size: 1.5em;
+}
+
+h5 {
+  font-size: 1.25em;
+}
+
+h6 {
+  font-size: 1em;
+}
+
+p {
+  line-height: 1.5;
+  font-weight: 300;
+}
+
+textarea,
+input[type=text],
+input[type=email],
+input[type=password],
+input[type=number],
+input[type=tel],
+input[type=url],
+input[type=search] {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  background-color: hsl(60, 5%, 10%);
+  color: #fae0d1;
+  font-size: medium;
+  border-radius: 0.5em;
+  border: 0;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0.5em 0;
+  padding: 1em 0 1em 1em;
+  resize: none;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  color: #fae0d1;
+  background: hsl(0, 0%, 0%);
+}
+
+/*# sourceMappingURL=chimera-golden.css.map */
diff --git a/css/chimera-golden.css.map b/css/chimera-golden.css.map
new file mode 100644
index 0000000..b141d2c
--- /dev/null
+++ b/css/chimera-golden.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/_buttons.scss","../sass/chimera-golden.scss","../sass/_blockquotes.scss","../sass/_formatted-text.scss","../sass/_horisontal-rule.scss","../sass/_images.scss","../sass/_labels.scss","../sass/_links.scss","../sass/_lists.scss","../sass/_checkboxes.scss","../sass/_radio-buttons.scss","../sass/_radio-checkbox-groups.scss","../sass/_tables.scss","../sass/_text.scss","../sass/_textfields.scss","../sass/_base.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE,kBCEQ;EDDR,OCMuB;EDLvB;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE,kBCTa;EDUb,cCVa;EDWb;;;AAGF;AAAA;AAAA;EAGE,cChBe;EDiBf,kBCjBe;;;ACPjB;EACE;EACA,kBDUqB;ECTrB;EACA;EACA;EACA;EACA;EACA;;;ACRF;AAAA;AAAA;AAAA;EACE,kBFWqB;EEVrB;EACA;;;AAGF;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAKE;;;AClBF;EACE,kBHIQ;EGHR;EACA;EACA;EACA;;;ACLF;EACE;EACA;;;ACFF;EACE;;;ACDF;EACE,ONYa;EMXb;EACA;;;AAGF;EACE,ONDa;EMEb;;;AAGF;EACE,ONLe;EMMf,uBNNe;;;AOPjB;EACE;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;ACbF;AACE;EACA;EACA;EACA;EACA,kBROqB;AQLrB;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA,kBRtBQ;EQuBR;EACA;;;AAGF;EACE;;;ACjCF;AACE;EACA;EACA;EACA;EACA,kBTOqB;ASLrB;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA,kBTtBQ;ESuBR;EACA;;;AAGF;EACE;;;ACjCF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;;ACPF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AClBF;EACE;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EACE;EACA;;;ACtCF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,abPW;EaQX,kBbGqB;EaFrB,ObDa;EaEb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnBF;EACE;EACA,OdOa;EcNb,YdQW","file":"chimera-golden.css"}
\ No newline at end of file
diff --git a/public/img/chimera-dark.png b/public/img/chimera-dark.png
new file mode 100644
index 0000000..dfaeee9
Binary files /dev/null and b/public/img/chimera-dark.png differ
diff --git a/public/img/chimera-golden.png b/public/img/chimera-golden.png
new file mode 100644
index 0000000..2c9eb07
Binary files /dev/null and b/public/img/chimera-golden.png differ
diff --git a/public/img/chimera.png b/public/img/chimera.png
new file mode 100644
index 0000000..4625ef2
Binary files /dev/null and b/public/img/chimera.png differ
diff --git a/public/img/no-css.png b/public/img/no-css.png
new file mode 100644
index 0000000..fe69a65
Binary files /dev/null and b/public/img/no-css.png differ
diff --git a/sass/_base.scss b/sass/_base.scss
deleted file mode 100644
index 0ee3b16..0000000
--- a/sass/_base.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use "variables";
-
-body {
-  font-family: variables.$font-stack;
-  color: variables.$Chimera-text;
-  background: variables.$Chimera-bg;
-}
diff --git a/sass/_links.scss b/sass/_links.scss
deleted file mode 100644
index abec17e..0000000
--- a/sass/_links.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use "variables";
-
-a {
-  color: variables.$Chimera;
-  text-decoration: none;
-  font-weight: 400;
-}
-
-a:hover {
-  color: variables.$Chimera-dark;
-  cursor: pointer;
-}
-
-a:active {
-  color: variables.$Chimera-darker;
-  text-decoration-color: variables.$Chimera-darker;
-}
diff --git a/sass/chimera-dark.scss b/sass/chimera-dark.scss
new file mode 100644
index 0000000..6288462
--- /dev/null
+++ b/sass/chimera-dark.scss
@@ -0,0 +1,18 @@
+// fonts
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+
+//Color palette
+$Chimera: hsl(183, 40%, 50%);
+$Chimera-dark: hsl(183, 40%, 40%);
+$Chimera-darker: hsl(183, 40%, 30%);
+$Chimera-input-border: hsl(0, 0%, 51%);
+$Chimera-text: hsl(0, 0%, 100%);
+$Chimera-text-secondary: #333333;
+$Chimera-bg: hsl(0, 0%, 10%);
+$Chimera-bg-secondary: hsl(0, 0%, 20%);
+$Chimera-link: hsl(183, 40%, 50%);
+
+// @use "main";
+
+@import "elements/main";
diff --git a/sass/chimera-golden.scss b/sass/chimera-golden.scss
new file mode 100644
index 0000000..402652d
--- /dev/null
+++ b/sass/chimera-golden.scss
@@ -0,0 +1,18 @@
+// fonts
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+
+//Color palette
+$Chimera: #fae0d1;
+$Chimera-dark: hsl(22, 80%, 70%);
+$Chimera-darker: hsl(22, 80%, 60%);
+$Chimera-input-border: hsl(0, 0%, 51%);
+$Chimera-text: #fae0d1;
+$Chimera-text-secondary: #333333;
+$Chimera-bg: hsl(0, 0%, 0%);
+$Chimera-bg-secondary: hsl(60, 5%, 10%);
+$Chimera-link: hsl(22, 80%, 70%);
+
+// @use "main";
+
+@import "elements/main";
diff --git a/sass/_variables.scss b/sass/chimera.scss
similarity index 67%
rename from sass/_variables.scss
rename to sass/chimera.scss
index 323527f..dae3fc5 100644
--- a/sass/_variables.scss
+++ b/sass/chimera.scss
@@ -1,10 +1,4 @@
-// @font-face {
-//   font-family: "Inter";
-//   src: url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
-// }
-
-// $font-stack: "Inter";
-
+// fonts
 $font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
   "Helvetica Neue", Arial, "Noto Sans", sans-serif;
 
@@ -12,8 +6,13 @@ $font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 $Chimera: hsl(183, 40%, 50%);
 $Chimera-dark: hsl(183, 40%, 40%);
 $Chimera-darker: hsl(183, 40%, 30%);
-$Chimera-darkest: hsl(183, 40%, 20%);
-$Chimera-input-border: hsl(0, 0%, 51%);
 $Chimera-text: hsl(0, 0%, 25%);
+$Chimera-text-secondary: #ffff;
 $Chimera-bg: hsl(40, 30%, 100%);
 $Chimera-bg-secondary: hsl(60, 5%, 95%);
+$Chimera-input-border: hsl(0, 0%, 51%);
+$Chimera-link: hsl(183, 40%, 50%);
+
+// @use "main";
+
+@import "elements/main";
diff --git a/sass/elements/_base.scss b/sass/elements/_base.scss
new file mode 100644
index 0000000..b1615ba
--- /dev/null
+++ b/sass/elements/_base.scss
@@ -0,0 +1,5 @@
+body {
+  font-family: $font-stack;
+  color: $Chimera-text;
+  background: $Chimera-bg;
+}
diff --git a/sass/_blockquotes.scss b/sass/elements/_blockquotes.scss
similarity index 53%
rename from sass/_blockquotes.scss
rename to sass/elements/_blockquotes.scss
index 4d58f18..c0f2d61 100644
--- a/sass/_blockquotes.scss
+++ b/sass/elements/_blockquotes.scss
@@ -1,11 +1,9 @@
-@use "variables";
-
 blockquote {
   line-height: 2em;
-  background-color: variables.$Chimera-bg-secondary;
+  background-color: $Chimera-bg-secondary;
   width: 100%;
   box-sizing: border-box;
-  border-left: 0.25em solid variables.$Chimera;
+  border-left: 0.25em solid $Chimera;
   border-radius: 0 0.5em 0.5em 0;
   padding: 1em;
   margin: 0;
diff --git a/sass/_buttons.scss b/sass/elements/_buttons.scss
similarity index 57%
rename from sass/_buttons.scss
rename to sass/elements/_buttons.scss
index e973e4d..66e7715 100644
--- a/sass/_buttons.scss
+++ b/sass/elements/_buttons.scss
@@ -1,10 +1,8 @@
-@use "variables";
-
 button,
 input[type="button"],
 input[type="submit"] {
-  background-color: variables.$Chimera;
-  color: #ffff;
+  background-color: $Chimera;
+  color: $Chimera-text-secondary;
   font-size: medium;
   padding: 0.5em 0.75em;
   border: 0;
@@ -15,14 +13,14 @@ input[type="submit"] {
 button:hover,
 input[type="button"]:hover,
 input[type="submit"]:hover {
-  background-color: variables.$Chimera-dark;
-  border-color: variables.$Chimera-dark;
+  background-color: $Chimera-dark;
+  border-color: $Chimera-dark;
   cursor: pointer;
 }
 
 button:active,
 input[type="button"]:active,
 input[type="submit"]:active {
-  border-color: variables.$Chimera-darker;
-  background-color: variables.$Chimera-darker;
+  border-color: $Chimera-darker;
+  background-color: $Chimera-darker;
 }
diff --git a/sass/_checkboxes.scss b/sass/elements/_checkboxes.scss
similarity index 72%
rename from sass/_checkboxes.scss
rename to sass/elements/_checkboxes.scss
index 888db20..de83cac 100644
--- a/sass/_checkboxes.scss
+++ b/sass/elements/_checkboxes.scss
@@ -1,17 +1,15 @@
-@use "variables";
-
 input[type="checkbox"] {
   /*remove default checkboxes, and reset style*/
   appearance: none;
   margin: 0;
   padding: 0;
-  background-color: variables.$Chimera-bg-secondary;
+  background-color: $Chimera-bg-secondary;
 
   /*style*/
   width: 1em;
   height: 1em;
   border-radius: 1em;
-  border: 2px solid variables.$Chimera-input-border;
+  border: 2px solid $Chimera-input-border;
   border-radius: 0.2em;
 
   display: grid;
@@ -19,7 +17,7 @@ input[type="checkbox"] {
 }
 
 input[type="checkbox"]:hover {
-  border: 2px solid variables.$Chimera;
+  border: 2px solid $Chimera;
 }
 
 input[type="checkbox"]::before {
@@ -27,7 +25,7 @@ input[type="checkbox"]::before {
   transform: scale(0);
   width: 0.5em;
   height: 0.5em;
-  background-color: variables.$Chimera;
+  background-color: $Chimera;
   content: "";
   border-radius: 0.05em;
 }
diff --git a/sass/_formatted-text.scss b/sass/elements/_formatted-text.scss
similarity index 77%
rename from sass/_formatted-text.scss
rename to sass/elements/_formatted-text.scss
index d2252ba..aa00c99 100644
--- a/sass/_formatted-text.scss
+++ b/sass/elements/_formatted-text.scss
@@ -1,7 +1,5 @@
-@use "variables";
-
 %formatted-text {
-  background-color: variables.$Chimera-bg-secondary;
+  background-color: $Chimera-bg-secondary;
   border-radius: 8px;
   font-family: "Fira Code", monospace;
 }
diff --git a/sass/_horisontal-rule.scss b/sass/elements/_horisontal-rule.scss
similarity index 53%
rename from sass/_horisontal-rule.scss
rename to sass/elements/_horisontal-rule.scss
index b5de673..542752a 100644
--- a/sass/_horisontal-rule.scss
+++ b/sass/elements/_horisontal-rule.scss
@@ -1,7 +1,5 @@
-@use "variables";
-
 hr {
-  background-color: variables.$Chimera;
+  background-color: $Chimera;
   height: 0.2em;
   width: 100%;
   border: 0;
diff --git a/sass/_images.scss b/sass/elements/_images.scss
similarity index 100%
rename from sass/_images.scss
rename to sass/elements/_images.scss
diff --git a/sass/_labels.scss b/sass/elements/_labels.scss
similarity index 100%
rename from sass/_labels.scss
rename to sass/elements/_labels.scss
diff --git a/sass/elements/_links.scss b/sass/elements/_links.scss
new file mode 100644
index 0000000..1025116
--- /dev/null
+++ b/sass/elements/_links.scss
@@ -0,0 +1,15 @@
+a {
+  color: $Chimera-link;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+a:hover {
+  color: $Chimera-dark;
+  cursor: pointer;
+}
+
+a:active {
+  color: $Chimera-darker;
+  text-decoration-color: $Chimera-darker;
+}
diff --git a/sass/_lists.scss b/sass/elements/_lists.scss
similarity index 100%
rename from sass/_lists.scss
rename to sass/elements/_lists.scss
diff --git a/sass/elements/_main.scss b/sass/elements/_main.scss
new file mode 100644
index 0000000..1b664f3
--- /dev/null
+++ b/sass/elements/_main.scss
@@ -0,0 +1,15 @@
+@import "buttons";
+@import "blockquotes";
+@import "formatted-text";
+@import "horisontal-rule";
+@import "images";
+@import "labels";
+@import "links";
+@import "lists";
+@import "checkboxes";
+@import "radio-buttons";
+@import "radio-checkbox-groups";
+@import "tables";
+@import "text";
+@import "textfields";
+@import "base";
diff --git a/sass/_radio-buttons.scss b/sass/elements/_radio-buttons.scss
similarity index 71%
rename from sass/_radio-buttons.scss
rename to sass/elements/_radio-buttons.scss
index 7be5487..5511fe9 100644
--- a/sass/_radio-buttons.scss
+++ b/sass/elements/_radio-buttons.scss
@@ -1,17 +1,15 @@
-@use "variables";
-
 input[type="radio"] {
   /*remove default radio-buttons, and reset style*/
   appearance: none;
   margin: 0;
   padding: 0;
-  background-color: variables.$Chimera-bg-secondary;
+  background-color: $Chimera-bg-secondary;
 
   /*style*/
   width: 1em;
   height: 1em;
   border-radius: 1em;
-  border: 2px solid variables.$Chimera-input-border;
+  border: 2px solid $Chimera-input-border;
 
   /*Place fill*/
   display: grid;
@@ -19,7 +17,7 @@ input[type="radio"] {
 }
 
 input[type="radio"]:hover {
-  border: 2px solid variables.$Chimera;
+  border: 2px solid $Chimera;
 }
 
 input[type="radio"]::before {
@@ -27,7 +25,7 @@ input[type="radio"]::before {
   transform: scale(0);
   width: 0.5em;
   height: 0.5em;
-  background-color: variables.$Chimera;
+  background-color: $Chimera;
   content: "";
   border-radius: 50%;
 }
diff --git a/sass/_radio-checkbox-groups.scss b/sass/elements/_radio-checkbox-groups.scss
similarity index 100%
rename from sass/_radio-checkbox-groups.scss
rename to sass/elements/_radio-checkbox-groups.scss
diff --git a/sass/_tables.scss b/sass/elements/_tables.scss
similarity index 75%
rename from sass/_tables.scss
rename to sass/elements/_tables.scss
index 5533e12..0fef4e6 100644
--- a/sass/_tables.scss
+++ b/sass/elements/_tables.scss
@@ -1,7 +1,5 @@
-@use "variables";
-
 %tablerow {
-  border-bottom: 0.1em solid variables.$Chimera;
+  border-bottom: 0.1em solid $Chimera;
   padding: 0.5em;
   text-align: left;
 }
diff --git a/sass/_text.scss b/sass/elements/_text.scss
similarity index 100%
rename from sass/_text.scss
rename to sass/elements/_text.scss
diff --git a/sass/_textfields.scss b/sass/elements/_textfields.scss
similarity index 70%
rename from sass/_textfields.scss
rename to sass/elements/_textfields.scss
index 123a915..08fd7bb 100644
--- a/sass/_textfields.scss
+++ b/sass/elements/_textfields.scss
@@ -1,5 +1,3 @@
-@use "variables";
-
 textarea,
 input[type="text"],
 input[type="email"],
@@ -8,9 +6,9 @@ input[type="number"],
 input[type="tel"],
 input[type="url"],
 input[type="search"] {
-  font-family: variables.$font-stack;
-  background-color: variables.$Chimera-bg-secondary;
-  color: variables.$Chimera-text;
+  font-family: $font-stack;
+  background-color: $Chimera-bg-secondary;
+  color: $Chimera-text;
   font-size: medium;
   border-radius: 0.5em;
   border: 0;
diff --git a/sass/main.scss b/sass/main.scss
deleted file mode 100644
index a3f4817..0000000
--- a/sass/main.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@use "buttons";
-@use "blockquotes";
-@use "formatted-text";
-@use "horisontal-rule";
-@use "images";
-@use "labels";
-@use "links";
-@use "lists";
-@use "checkboxes";
-@use "radio-buttons";
-@use "radio-checkbox-groups";
-@use "tables";
-@use "text";
-@use "textfields";
-@use "base";