1 files changed, 104 insertions, 0 deletions
diff --git a/styles/readme.md b/styles/readme.md
new file mode 100644
index 0000000..89cb09c
--- /dev/null
+++ b/styles/readme.md
@@ -0,0 +1,104 @@
+# Styles
+
+This is the folder where all website css should be. Currently most of the css
+is done using inline styles in the .tsx files, but they're being moved to
+seperate .css files in here. A redesign has also been in the making and we now
+have a style guide to follow while writing the website:
+
+## Dark
+
+![Dark mode style guide](./styleguidedark.png)
+
+## Light
+
+![Light mode style guide](./styleguidelight.png)
+
+The new designs can be found on
+[Figma](https://www.figma.com/file/rTciVQApAe6cwrH1Prl5Wn/4-op-een-rij?node-id=0%3A1).
+The Figma designs are in dark mode, but the website will (for now) still have
+light mode as it's default theme.
+
+After the move to .css files is done I'll also start working on the new theming
+settings, and allow custom themes to be created with css that can easily be
+selected in the settings page instead of having to copy-paste color codes
+manually.
+
+## Show me the css
+
+These will eventually be moved to global.css when the move to .css files is done.
+
+```css
+:root {
+	--background: #E3E6EE;
+	--foreground: var(--gray-900);
+
+	--accent: #7E3AA6;
+
+	--error: #A63A4D;
+	--disk-b-alt: #582D35;
+
+	--confirm: #3AA699;
+	--disk-a-alt: #244743;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background: var(--gray-900);
+		--foreground: #FFFFF3;
+
+		--accent: #AD34F3;
+
+		--error: #FF4365;
+		--disk-b-alt: #F49BA1;
+
+		--confirm: #00D9C0;
+		--disk-a-alt: #86F3F3;
+	}
+}
+
+:root {
+	/* shade */
+	--gray-100: #CED2DC;
+	--gray-200: #A9AFC0;
+	--gray-300: #757D92;
+	--gray-700: #293140;
+	--gray-800: #1F242D;
+	--gray-900: #141619;
+
+	/* box-shadow */
+	--drop-level-2: 0px 8px 32px 0px  rgba(0, 0, 0, 0.3);
+	--drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);
+
+	/* border-radius */
+	--tight-corner: 6px;
+	--loose-corner: 8px;
+
+	/* margin/padding */
+	--spacing-small:  6px;
+	--spacing-medium: 12px;
+	--spacing-large:  24px;
+}
+
+html {
+	font-family: "Inter", sans-serif;
+	font-size: 14px;
+}
+
+/* headings */
+h1, h2, h3 { font-weight: 700; }
+h1 { font-size: 25px; }
+h2 { font-size: 20px; }
+
+.subtile {
+	color: var(--gray-300);
+	font-style: italic;
+}
+
+/* no-select */
+.nosel {
+	user-select: none;
+	font-weight: 600;
+}
+
+```
+