diff --git a/index.html b/index.html
new file mode 100644
index 0000000..95446c0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meet Kanso.css</title>
+    <link rel="stylesheet" type="text/css" href="kanso.css">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <style>
+        :root {
+            --font: Inter, sans-serif;
+        }
+
+        * {
+            transition: color .2s, background-color .2s;
+        }
+    </style>
+</head>
+
+<body>
+
+    <header>
+        <nav>
+            <a href="#install"><button type="submit">Install</button></a>
+            <a href="#theming"><button>Theming</button></a>
+            <a href="#demo"><button>Demo</button></a>
+            <a href="https://github.com/nightmono/kanso.css" target="_blank" rel="noopener noreferrer">
+                <button>GitHub &UpperRightArrow;</button>
+            </a>
+        </nav>
+    </header>
+
+    <main>
+
+        <h1>Meet Kanso.css</h1>
+
+        <p>A classless CSS template for simple forms and web pages.</p>
+
+        <p>
+            I&apos;ve always wanted a minimal CSS template that I can customize for each project, as opposed to starting
+            from a blank CSS file.
+        </p>
+
+        <p>Which is why I created Kanso.css.</p>
+
+        <p>
+            In Japanese, Kanso translates to simplicity or purity, advocating for the elimination of the unnecessary. I
+            wanted a template that reflected this philosophy, offering a clean, minimal, and distraction-free
+            experience that can be added onto.
+        </p>
+
+        <h2>Features</h2>
+
+        <p>
+            Sticking to its core principles, Kanso.css minimizes its number of declarations, whilst being responsive
+            and easily customizable.
+        </p>
+
+        <p>At less than 100 lines, Kanso.css is a tiny 1.3 KB in size.</p>
+
+        <p>Works as a standalone classless CSS framework, but can be added onto and tailored for specific projects.</p>
+
+        <p>Font and colors are stored as global variables, making it easy to theme Kanso.css.</p>
+
+        <p>Comes with a dark theme by default.</p>
+
+        <p><button type="submit" onclick="switchTheme()">Switch Theme</button></p>
+
+        <script>
+            function switchTheme() {
+                const root = document.documentElement;
+
+                if (getComputedStyle(root).getPropertyValue('--fg1').trim() === '#222') {
+                    root.style.setProperty('--fg1', '#eee');
+                    root.style.setProperty('--fg2', '#888');
+                    root.style.setProperty('--bg1', '#181818');
+                    root.style.setProperty('--bg2', '#282828');
+                } else {
+                    root.style.setProperty('--fg1', '#222');
+                    root.style.setProperty('--fg2', '#555');
+                    root.style.setProperty('--bg1', '#f8f8f8');
+                    root.style.setProperty('--bg2', '#eee');
+                }
+            }
+        </script>
+
+        <h2 id="install">Installation</h2>
+
+        <h3>1. Serve Locally</h3>
+
+        <p>The recommended way to install Kanso.css is to save it locally.</p>
+
+        <p>This method allows you to customize and tailor Kanso.css.</p>
+
+        <a href="https://github.com/nightmono/kanso.css/releases" target="_blank" rel="noopener noreferrer">
+            <button type="submit">GitHub Release Page &UpperRightArrow;</button>
+        </a>
+
+        <h3>2. jsDeliver CDN</h3>
+
+        <p>You can apply the default Kanso.css to your site by adding the following link tag within your head tag.</p>
+
+        <code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nightmono/kanso.css@main/kanso.css"&gt;</code>
+
+        <h2 id="theming">Theming and Customization</h2>
+
+        <p>The font and colors are changable as global root variables.</p>
+
+        <p>
+            Kanso.css uses 4 colors:<br>
+            <code>--fg1</code> for text color,<br>
+            <code>--fg2</code> for outlines,<br>
+            <code>--bg1</code> for background color,<br>
+            <code>--bg2</code> for background color of buttons and text input.
+        </p>
+
+        <p>Below is the color scheme example for the dark mode theme:</p>
+
+        <p><code>:root { --fg1: #eee; --fg2: #555; --bg1: #181818; --bg2: #282828; }</code></p>
+
+        <p>Because the size of Kanso.css is so small, you can add any custom CSS directly onto the file itself.</p>
+
+        <p>
+            Alternatively, you can load your own stylesheet after Kanso.css, overriding any conflicting declarations
+            Kanso.css has with yours.
+        </p>
+
+        <h2 id="demo">Demo Forms</h2>
+
+        <h3>XOR Mask</h3>
+        <p>
+            <label>Binary Input 1:</label>
+            <textarea id="input1" rows="2"></textarea>
+        </p>
+        <p>
+            <label>Binary Input 2:</label>
+            <textarea id="input2" rows="2"></textarea>
+        </p>
+        <p>
+            <button type="submit" onclick="xorMask()">XOR Mask</button>
+        </p>
+        <p>
+            <label>Binary Output:</label>
+            <textarea id="output" rows="2"></textarea>
+        </p>
+
+        <script>
+            function xorMask() {
+                const input1 = document.getElementById('input1').value;
+                const input2 = document.getElementById('input2').value;
+
+                let result = '';
+                for (let i = 0; i < input1.length; i++) {
+                    result += input1[i] ^ input2[i];
+                }
+
+                document.getElementById('output').value = result;
+            }
+        </script>
+
+        <form>
+            <h3>Message</h3>
+            <p>
+                <label>What language is Kanso from?</label>
+                <select name="language">
+                    <option value="1" selected>Language</option>
+                    <option value="2">Spanish</option>
+                    <option value="3">Japanese</option>
+                    <option value="4">Arabic</option>
+                </select>
+            </p>
+            <p>
+                <label>First name *</label>
+                <input type="text" name="firstName" required>
+            </p>
+            <p>
+                <label>Surname</label>
+                <input type="text" name="surname">
+            </p>
+            <p>
+                <label>Email *</label>
+                <input type="email" name="email" required>
+            </p>
+            <p>
+                <label>Web Tech:</label>
+                <label><input checked name="type" type="radio" value="html"> HTML</label>
+                <label><input name="type" type="radio" value="css"> CSS</label>
+                <label><input name="type" type="radio" value="js"> JavaScript</label>
+            </p>
+            <p>
+                <label>Message</label>
+                <textarea rows="3"></textarea>
+            </p>
+            <p>
+                <label>
+                    <input type="checkbox" id="checkbox" value="terms">
+                    I agree to the <a href="#">terms and conditions</a>
+                </label>
+            </p>
+
+            <button type="submit">Send</button>
+            <button type="reset">Reset</button>
+            <button disabled="disabled">Disabled</button>
+        </form>
+
+    </main>
+
+    <footer>
+        <br><br>
+        <hr />
+        <br>
+        <p>
+            Kanso.css was made by
+            <a href="https://github.com/nightmono" target="_blank" rel="noopener noreferrer">
+                nightmono &UpperRightArrow;
+            </a>
+            and is licensed under the MIT license.
+        </p>
+        <br>
+    </footer>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/kanso.css b/kanso.css
new file mode 100644
index 0000000..30a36a3
--- /dev/null
+++ b/kanso.css
@@ -0,0 +1,90 @@
+:root {
+    --font: sans-serif;
+    --fg1: #222;
+    --fg2: #888;
+    --bg1: #f8f8f8;
+    --bg2: #eee;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --fg1: #eee;
+        --fg2: #555;
+        --bg1: #181818;
+        --bg2: #282828;
+    }
+}
+
+* {
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+}
+
+body {
+    color: var(--fg1);
+    background-color: var(--bg1);
+    font-family: var(--font);
+    line-height: 1.5;
+    margin: 0 auto;
+    max-width: 500px;
+    padding: 2rem 1rem 1rem;
+    box-sizing: content-box;
+}
+
+a {
+    color: var(--fg1);
+    font-weight: 600;
+}
+
+small {
+    font: inherit;
+    color: var(--fg2);
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+textarea,
+input,
+select,
+button {
+    font: inherit;
+    color: var(--fg1);
+    padding: 0.25rem 0.5rem;
+    background-color: var(--bg2);
+    border: 1px solid var(--fg2);
+    border-radius: 4px;
+}
+
+textarea,
+input[type="text"],
+input[type="email"] {
+    width: 100%;
+    max-width: 100%;
+}
+
+button {
+    font-weight: 600;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    transition: all .2s;
+}
+
+button[type="submit"] {
+    color: var(--bg1);
+    background-color: var(--fg1);
+    border-color: var(--fg1);
+}
+
+button:disabled {
+    color: var(--fg2);
+    background-color: var(--bg2);
+    border: var(--bg2);
+    cursor: not-allowed;
+}
+
+button:hover {
+    opacity: .8;
+}
