diff --git a/CLAUDE.md b/CLAUDE.md
index 8513f61..5151644 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -127,7 +127,8 @@ Replace the dynamic skip-link generator with a **static, always-visible `<nav>`*
 ```
 
 - Give every `<fieldset>` or section a stable, semantic `id`.
-- The nav should be compact (e.g. `font-size: smaller`, horizontal list on desktop, collapsed or scrollable on mobile).
+- The nav should be **collapsed by default** (e.g. a `<details>`/`<summary>` or a disclosure button) to preserve maximum space for the examples. It expands on demand.
+- On mobile a collapsed nav is essential; on desktop it can remain collapsed but should be easy to open.
 - This replaces the JS-generated skip link mechanism entirely and removes the Cash dependency for that feature.
 
 ---
diff --git a/behaviour.js b/behaviour.js
index 6bf1173..e09c6a9 100644
--- a/behaviour.js
+++ b/behaviour.js
@@ -1,94 +1,28 @@
 /*
  * It looks like jQuery but it's Cash 💰
- * You'll find the documentation on GitHub: https://github.com/fabiospampinato/cash#readme
- *
- * Thanks to Stephan M. for helping me out with JS
+ * https://github.com/fabiospampinato/cash#readme
  */
 
-
-/*
- * Helper Functions
- * - find an attribute
- */
-    $.fn.hasAttr = function (name) {
-        return this.attr(name) !== undefined;
-    };
-    
-    //  https://stackoverflow.com/questions/26203453/jquery-generate-unique-ids
-    function Generator() {}
-        Generator.prototype.rand =  Math.floor(Math.random() * 26) + Date.now();
-        Generator.prototype.getId = function() {
-            return this.rand++;
-        };
-    
-    var idGen = new Generator();
-    
-    /* TODO: Convert skipt links to function
-    $.fn.dynamicSkiplinks = function (name) {
-        // 
-    };
-    */
-    
-
-// Skip link function
 $(function () {
-    
-    // Basics
+
     $('html').removeClass('no-js');
-    
-    // DEBUG
-    //if(window.location.href.includes('github')) {
-    if (document.location.href.indexOf('github') === -1) {
-        $('#design-01').attr('checked', true);
-        // $('#design-02').attr('checked', true);
-        // $('#design-03').attr('checked', true);
+
+    // Enable Streamline typography by default on local builds
+    if (window.location.hostname !== 'nativeformelements.com') {
+        $('#design-01').prop('checked', true);
+        $('body').addClass('design-01');
     }
-    
-    /*
-     * Dynamic Skip Links
-     *  looks for specific elements and built a list (select)
-     */
-    
-    $('legend,h1,h2')
-    .attr('tabindex', '-1')
-    .removeAttr('title')
-    .each(function () {
-        var elementName = $(this).get(0).tagName.toLowerCase();
-        var getElementAriaLabel = $(this).attr('aria-label');
-        var getElementText = $(this).text();
-        
-        var noContent = 'No label';
-    
-        if ($(this).hasAttr('aria-label')) {
-            var elementAriaLabel = getElementAriaLabel;
-        } else {
-            var elementText = getElementText;
-        }
-        
-        if ($(this).hasAttr('id')) {
-            // console.log("true");
-        } else {
-            var elementUniqueId = idGen.getId();
-            
-            $(this).attr('id', elementUniqueId);
-            $('#js-nav-skip-links').append(
-                '<li><a href="#' + elementUniqueId + '">Go to ' + (typeof elementAriaLabel !== 'undefined' ? elementAriaLabel : (elementText != '' ? elementText : noContent)) + " (" + elementName + ")" + "</a></li>"
-            );
-        }
-    });
-    
-    /*
-     * Design options
-     * optional styles based on checkboxes
-     */
-    
-    $('.design-option').on('change', function() {
-        var elementId = this.id;
-        
-        if(this.checked) {
-            $('body').addClass(elementId);
+
+    // Indeterminate checkbox — must be set via JS, cannot be done in HTML
+    const checkIndeterminate = document.getElementById('check-indeterminate');
+    if (checkIndeterminate) checkIndeterminate.indeterminate = true;
+
+    // Design tier toggles — apply/remove body class matching checkbox id
+    $('.design-option').on('change', function () {
+        if (this.checked) {
+            $('body').addClass(this.id);
         } else {
-            $('body').removeClass(elementId);
+            $('body').removeClass(this.id);
         }
     });
 
diff --git a/design-basic.css b/design-basic.css
index 46de1b4..903abe5 100644
--- a/design-basic.css
+++ b/design-basic.css
@@ -1,8 +1,9 @@
- fieldset {
-        border: 1px solid var(--text-color-pos)
-    }
-
+fieldset {
+    border: 1px solid var(--color-text);
+}
 
 @media (prefers-color-scheme: dark) {
-    border-color: var(--text-color-pos)
-}
\ No newline at end of file
+    fieldset {
+        border-color: var(--color-text);
+    }
+}
diff --git a/index.html b/index.html
index 4801687..9e2265b 100644
--- a/index.html
+++ b/index.html
@@ -16,8 +16,34 @@
 </head>
 <body>
 	
-<nav class="nav-skip-links-wrapper" aria-label="Skip links">
-	<ul id="js-nav-skip-links"></ul>
+<nav aria-label="Sections">
+	<details>
+		<summary>Sections</summary>
+		<ol>
+			<li><a href="#section-text">Input Field</a></li>
+			<li><a href="#section-password">Password</a></li>
+			<li><a href="#section-otp">One-time Password</a></li>
+			<li><a href="#section-checkbox">Checkbox Group</a></li>
+			<li><a href="#section-radio">Radio Button Group</a></li>
+			<li><a href="#section-textarea">Textarea</a></li>
+			<li><a href="#section-select">Select</a></li>
+			<li><a href="#section-select-advanced">Advanced Select</a></li>
+			<li><a href="#section-datalist">Datalist</a></li>
+			<li><a href="#section-slider">Slider</a></li>
+			<li><a href="#section-datetime">Datetime</a></li>
+			<li><a href="#section-email">Email</a></li>
+			<li><a href="#section-tel">Telephone</a></li>
+			<li><a href="#section-url">URL</a></li>
+			<li><a href="#section-number">Number</a></li>
+			<li><a href="#section-search">Search</a></li>
+			<li><a href="#section-color">Color</a></li>
+			<li><a href="#section-file">File</a></li>
+			<li><a href="#section-date">Date</a></li>
+			<li><a href="#section-time">Time</a></li>
+			<li><a href="#section-buttons">Buttons</a></li>
+			<li><a href="#section-aria-group">ARIA group</a></li>
+		</ol>
+	</details>
 </nav>
 
 
@@ -30,50 +56,46 @@ <h2>Design</h2>
 	<p>"Native form elements are ugly." I hear you saying. This is not true! They are indented to deliver native look, feel &amp; behaviour an each and every platform. To deliver a web application that feels like a native app. Unfortunately branding always was more important.</p>
 	<p>For form styling head over to <a href="#">XY framework</a></p> or use the buttons to switch on some basic styling</p>
 	<p>ToDo: Radio Group with styles.</p> -->
-	<h2 title="hallo"></h2>
 	<input class="design-option" type="checkbox" id="design-01">
 	<label for="design-01">Streamline typography</label>
 	
 	<input class="design-option" type="checkbox" id="design-02">
-	<label for="design-02">(tbd) Basic borders and padding</label>
-	
-	<input class="design-option" type="checkbox" id="design-03">
-	<label for="design-03">(tbd) Basic design</label>
+	<label for="design-02">Minimal Design</label>
 </header>
 
 <p>For more details please visit <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">MDN The native form widgets</a></p>
 
 <main>
-<fieldset>
+<fieldset id="section-text">
 	<legend>Input Field</legend>
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
 			<!-- standard -->
-			<label for="textbox-std">Input Standard</label>
+			<label for="textbox-std">Full name</label>
 			<input type="text" id="textbox-std" name="textbox-std" />
 		</div>
 		
 		<div class="grid-item-wrapper">
 			<!-- pre-filled -->
-			<label for="textbox-pre">Input Standard (pre-filled)</label>
+			<label for="textbox-pre">Full name</label>
 			<input type="text" id="textbox-pre" name="textbox-pre" value="Input field content" />
 		</div>
 		
 		<div class="grid-item-wrapper">
 			<!-- required -->
-			<label for="textbox-req">Input (required)</label>
+			<label for="textbox-req">Full name</label>
 			<input type="text" id="textbox-req" name="textbox-req" required />
 		</div>
 		
 		<div class="grid-item-wrapper">
 			<!-- read-only -->
-			<label for="textbox-ro">Input (read-only)</label>
+			<label for="textbox-ro">Full name</label>
 			<input type="text" id="textbox-ro" name="textbox-ro" value="Input field content" readonly />
 		</div>
 		
 		<div class="grid-item-wrapper">
 			<!-- disabled -->
-			<label for="textbox-dis">Input (disabled)</label>
+			<label for="textbox-dis">Full name</label>
 			<input type="text" id="textbox-dis" name="textbox-dis" disabled />
 		</div>
 	</div>
@@ -81,29 +103,29 @@ <h2 title="hallo"></h2>
 	<h2>Variants</h2>
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<label for="textbox-ph">Input Standard with Placeholder</label>
+			<label for="textbox-ph">Username</label>
 			<input type="text" id="textbox-ph" name="textbox-ph" placeholder="Input field placeholder text" />
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="textbox-hint">Input Standard with hint</label>
+			<label for="textbox-hint">Email address</label>
 			<input type="text" id="textbox-hint" name="textbox-hint" aria-describedby="hash-01" />
 			<span class="form-field-hint" id="hash-01">I'm the hint</span>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="textbox-pattern">Input Standard with Pattern</label>
-			<input type="text" id="textbox-pattern" name="part" pattern="[0-9]{3}" title="A part number is a digit followed by three uppercase letters." />
+			<label for="textbox-pattern">Part number</label>
+			<input type="text" id="textbox-pattern" name="part" pattern="[0-9]{3}" title="Enter exactly three digits (0–9)." />
 		</div>
 	</div>
 </fieldset>
 
-<fieldset>
+<fieldset id="section-password">
 	<legend>Password Field</legend>
 	
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<label for="pwd-std">Password Standard</label>
+			<label for="pwd-std">Password</label>
 			<input type="password" id="pwd-std" name="pwd-std" />
 		</div>
 		
@@ -112,36 +134,36 @@ <h2>Variants</h2>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="pwd-req">Password (required)</label>
+			<label for="pwd-req">Password</label>
 			<input type="password" id="pwd-req" name="pwd--req" required />
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="pwd-ro">Password (read-only)</label>
+			<label for="pwd-ro">Password</label>
 			<input type="password" id="pwd-ro" name="pwd-ro" value="Input field content" readonly />
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="pwd-dis">Password (disabled)</label>
+			<label for="pwd-dis">Password</label>
 			<input type="password" id="pwd-dis" name="pwd-dis" disabled />
 		</div>
 	</div>
 </fieldset>
 
-<fieldset>
+<fieldset id="section-otp">
 	<legend>One Time Password</legend>
 	
 	<p>Some text</p>
 	
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
+			<label for="otp-1">One-time code</label>
 			<input id="otp-1" type="text" name="auth-token" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" />
-			<label for="otp-1" title="One Time Code">OTP</label>
 		</div>
 	</div>
 </fieldset>
 
-<fieldset>
+<fieldset id="section-checkbox">
 	<legend>Checkbox Group</legend>
 	
 	<p>What do you wanna do today?</p>
@@ -153,7 +175,7 @@ <h2>Variants</h2>
 		</div>
 		<div class="grid-item-wrapper">
 			<input type="checkbox" id="check-2" name="activities" value="check-2" checked />
-			<label for="check-2">Option 2 (pre-checked)</label>
+			<label for="check-2">Option 2</label>
 		</div>
 		<div class="grid-item-wrapper not-available">
 			Not available
@@ -163,7 +185,7 @@ <h2>Variants</h2>
 		</div>
 		<div class="grid-item-wrapper">
 			<input type="checkbox" id="option-5" name="activities" value="option-4" disabled>
-			<label for="option-5">Option 5 (disabled)</label>
+			<label for="option-5">Option 5</label>
 		</div>
 	</div>
 	
@@ -178,9 +200,17 @@ <h2>Variants</h2>
 			<label for="check-no">No</label>
 		</div>
 	</div>
+
+	<h2>Indeterminate</h2>
+	<div class="grid-wrapper">
+		<div class="grid-item-wrapper">
+			<input type="checkbox" id="check-indeterminate" name="activities-indeterminate" value="indeterminate">
+			<label for="check-indeterminate">All options</label>
+		</div>
+	</div>
 </fieldset>
 
-<fieldset>
+<fieldset id="section-radio">
 	<legend>Radio Button Group</legend>
 	
 	<p>What do you wanna do today?</p>
@@ -192,7 +222,7 @@ <h2>Variants</h2>
 		</div>
 		<div class="grid-item-wrapper">
 			<input type="radio" id="radio-2" name="radio-example-1" value="radio-2" checked />
-			<label for="radio-2">Option 2 (pre-checked)</label>
+			<label for="radio-2">Option 2</label>
 		</div>
 		<div class="grid-item-wrapper not-available">
 			Not available
@@ -202,7 +232,7 @@ <h2>Variants</h2>
 		</div>
 		<div class="grid-item-wrapper">
 			<input type="radio" id="radio-5" name="radio-example-1" value="radio-5" disabled>
-			<label for="radio-5">Option 5 (disabled)</label>
+			<label for="radio-5">Option 5</label>
 		</div>
 	</div>
 	
@@ -219,62 +249,62 @@ <h2>Variants</h2>
 	</div>
 </fieldset>
 
-<fieldset>
+<fieldset id="section-textarea">
 	<legend>Textarea</legend>
 	
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<label for="textarea-std">Text Area</label>
+			<label for="textarea-std">Comment</label>
 			<textarea id="textarea-std" name="textarea"></textarea>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="textarea-pre">Text Area (pre-filled)</label>
+			<label for="textarea-pre">Comment</label>
 			<textarea id="textarea-pre" name="textarea">Text area content</textarea>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="textarea-req">Text Area (required)</label>
+			<label for="textarea-req">Comment</label>
 			<textarea id="textarea-req" name="textarea" required></textarea>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="textarea-ro">Text Area (read-only)</label>
+			<label for="textarea-ro">Comment</label>
 			<textarea id="textarea-ro" name="textarea" readonly>Text area content</textarea>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="textarea-dis">Text Area (disabled)</label>
+			<label for="textarea-dis">Comment</label>
 			<textarea id="textarea-dis" name="textarea" disabled>Text area content</textarea>
 		</div>
 	</div>
 	
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<label for="textarea-ph">Text Area with Placeholder</label>
+			<label for="textarea-ph">Comment</label>
 			<textarea id="textarea-ph" name="textarea" placeholder="Input field placeholder text"></textarea>
 		</div>
 		<div class="grid-item-wrapper">
-			<label for="textarea-ph-de">Text Area with Placeholder</label>
+			<label for="textarea-ph-de">Kommentar</label>
 			<textarea id="textarea-ph-de" name="textarea-ph-de" placeholder="Ich bin ein Platzhalter" lang="de"></textarea>
 		</div>
 		<div class="grid-item-wrapper">
-			<label for="textarea-ph-fr">Text Area with Placeholder</label>
+			<label for="textarea-ph-fr">Commentaire</label>
 			<textarea id="textarea-ph-fr" name="textarea-ph-fr" placeholder="Je suis un texte générique" lang="fr"></textarea>
 		</div>
 		<div class="grid-item-wrapper">
-			<label for="textarea-ph-za">Text Area with Placeholder</label>
+			<label for="textarea-ph-za">Comment</label>
 			<textarea id="textarea-ph-za" name="textarea-ph-za" placeholder="I'm the South African Placeholder" lang="za"></textarea>
 		</div>
 	</div>
 </fieldset>
 
-<fieldset>
+<fieldset id="section-select">
 	<legend>Dropdown / Select</legend>
 	
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<label for="dropdown-std">Select</label>
+			<label for="dropdown-std">Country</label>
 			<select id="dropdown-std">
 				<option value="">Please choose &hellip;</option>
 				<option value="1">Option 1</option>
@@ -284,7 +314,7 @@ <h2>Variants</h2>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="dropdown-pre">Select (pre-selected)</label>
+			<label for="dropdown-pre">Country</label>
 			<select id="dropdown-pre">
 				<option value="">Please choose &hellip;</option>
 				<option value="1">Option 1</option>
@@ -294,7 +324,7 @@ <h2>Variants</h2>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="dropdown-req">Select (required)</label>
+			<label for="dropdown-req">Country</label>
 			<select id="dropdown-req" required>
 				<option value="">Please choose &hellip;</option>
 				<option value="1">Option 1</option>
@@ -304,7 +334,7 @@ <h2>Variants</h2>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="dropdown-ro">Select (read-only-ish)</label>
+			<label for="dropdown-ro">Country</label>
 			<select id="dropdown-ro">
 				<option disabled value="">Please choose &hellip;</option>
 				<option disabled value="1">Option 1</option>
@@ -314,7 +344,7 @@ <h2>Variants</h2>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="dropdown-dis">Select (disabled)</label>
+			<label for="dropdown-dis">Country</label>
 			<select id="dropdown-dis" disabled>
 				<option value="">Please choose &hellip;</option>
 				<option value="1">Option 1</option>
@@ -326,7 +356,7 @@ <h2>Variants</h2>
 	
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<label for="dropdown-multi">Select (multiple)</label>
+			<label for="dropdown-multi">Countries</label>
 			<select id="dropdown-multi" multiple>
 				<option value="">Please choose &hellip;</option>
 				<option value="1">Option 1</option>
@@ -340,12 +370,12 @@ <h2>Variants</h2>
 	</div>
 </fieldset>
 
-<fieldset>
+<fieldset id="section-select-advanced">
 	<legend>Advanced Dropdown / Select</legend>
 	
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<label for="dropdown-adv-std">Select</label>
+			<label for="dropdown-adv-std">Region</label>
 			<select id="dropdown-adv-std">
 				<optgroup label="Group 1">
 					<option value="1">Option 1</option>
@@ -361,7 +391,7 @@ <h2>Variants</h2>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="dropdown-adv-pre">Select (pre-selected)</label>
+			<label for="dropdown-adv-pre">Region</label>
 			<select id="dropdown-adv-pre">
 				<optgroup label="Group 1">
 					<option value="1">Option 1</option>
@@ -377,7 +407,7 @@ <h2>Variants</h2>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="dropdown-adv-req">Select (required)</label>
+			<label for="dropdown-adv-req">Region</label>
 			<select id="dropdown-adv-req" required>
 				<optgroup label="Group 1">
 					<option value="1">Option 1</option>
@@ -397,7 +427,7 @@ <h2>Variants</h2>
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="dropdown-adv-dis">Select (disabled)</label>
+			<label for="dropdown-adv-dis">Region</label>
 			<select id="dropdown-adv-dis" disabled>
 				<optgroup label="Group 1">
 					<option value="1">Option 1</option>
@@ -413,7 +443,7 @@ <h2>Variants</h2>
 		</div>
 	</div>
 	<div class="grid-item-wrapper">
-		<label for="dropdown-adv-dis-part">Select (partly disabled)</label>
+		<label for="dropdown-adv-dis-part">Region</label>
 		<select id="dropdown-adv-dis-part">
 			<optgroup label="Group 1" disabled>
 				<option value="1">Option 1</option>
@@ -429,7 +459,7 @@ <h2>Variants</h2>
 	</div>
 </fieldset>
 
-<fieldset>
+<fieldset id="section-datalist">
 	<legend>Datalist</legend>
 	
 	<div class="grid-wrapper">
@@ -683,13 +713,13 @@ <h2>Variants</h2>
 
 </fieldset>
 
-<fieldset>
+<fieldset id="section-slider">
 	<legend>Slider</legend>
 	
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<form oninput="range-slider-std-output.value=parseInt(range-slider-std.value)">
-				<label for="range-slider-std">Slider</label>
+			<form oninput="this.elements['range-slider-std-output'].value = parseInt(this.elements['range-slider-std'].value)">
+				<label for="range-slider-std">Volume</label>
 				<input id="range-slider-std" name="range-slider-std" type="range" value="50" />
 				<output name="range-slider-std-output">0</output>
 			</form>
@@ -701,88 +731,176 @@ <h2>Variants</h2>
 	</div>
 </fieldset>
 
-<fieldset>
+<fieldset id="section-datetime">
 	<legend>Datetime local</legend>
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<label for="meeting-time-std">Datetime</label>
+			<label for="meeting-time-std">Appointment</label>
 			<input type="datetime-local" id="meeting-time-std" name="meeting-time" />
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="meeting-time-pre">Datetime (pre-filled)</label>
+			<label for="meeting-time-pre">Appointment</label>
 			<input type="datetime-local" id="meeting-time-pre" name="meeting-time" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00" />
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="meeting-time-req">Datetime (required)</label>
+			<label for="meeting-time-req">Appointment</label>
 			<input type="datetime-local" id="meeting-time-req" name="meeting-time" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00" required />
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="meeting-time-ro">Datetime (read-only)</label>
+			<label for="meeting-time-ro">Appointment</label>
 			<input type="datetime-local" id="meeting-time-ro" name="meeting-time" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00" readonly />
 		</div>
 		
 		<div class="grid-item-wrapper">
-			<label for="meeting-time-dis">Datetime (disabled)</label>
+			<label for="meeting-time-dis">Appointment</label>
 			<input type="datetime-local" id="meeting-time-dis" name="meeting-time" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00" disabled />
 		</div>
 	</div>
 </fieldset>
 
-<div role="group" aria-labelledby="idOfHeadline">
-	<h3 id="idOfHeadline">Checkbox Group</h3>
-	
-	<p>What do you wanna do today?</p>
-	<p>Choose</p>
+<fieldset id="section-email">
+	<legend>Email</legend>
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<input type="checkbox" id="aria-group-01" name="activities" value="check-1" />
-			<label for="aria-group-01">Option 1</label>
+			<label for="email-std">Email address</label>
+			<input type="email" id="email-std" name="email-std" autocomplete="email" />
 		</div>
 		<div class="grid-item-wrapper">
-			<input type="checkbox" id="aria-group-02" name="activities" value="check-2" checked />
-			<label for="aria-group-02">Option 2 (pre-checked)</label>
+			<label for="email-pre">Email address</label>
+			<input type="email" id="email-pre" name="email-pre" value="name@example.com" autocomplete="email" />
 		</div>
-		<div class="grid-item-wrapper not-available">
-			Not available
+		<div class="grid-item-wrapper">
+			<label for="email-req">Email address</label>
+			<input type="email" id="email-req" name="email-req" required autocomplete="email" />
 		</div>
-		<div class="grid-item-wrapper not-available">
-			Not available
+		<div class="grid-item-wrapper">
+			<label for="email-ro">Email address</label>
+			<input type="email" id="email-ro" name="email-ro" value="name@example.com" readonly autocomplete="email" />
 		</div>
 		<div class="grid-item-wrapper">
-			<input type="checkbox" id="aria-group-03" name="activities" value="option-4" disabled>
-			<label for="aria-group-03">Option 5 (disabled)</label>
+			<label for="email-dis">Email address</label>
+			<input type="email" id="email-dis" name="email-dis" disabled autocomplete="email" />
 		</div>
 	</div>
-	
-	<p>Choose (required)</p>
+</fieldset>
+
+<fieldset id="section-tel">
+	<legend>Telephone</legend>
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<input type="checkbox" id="aria-group-check-yes" name="check-choose" value="yes" required />
-			<label for="aria-group-check-yes">Yes</label>
+			<label for="tel-std">Phone number</label>
+			<input type="tel" id="tel-std" name="tel-std" autocomplete="tel" />
 		</div>
 		<div class="grid-item-wrapper">
-			<input type="checkbox" id="aria-group-check-no" name="check-choose" value="no" required />
-			<label for="aria-group-check-no">No</label>
+			<label for="tel-pre">Phone number</label>
+			<input type="tel" id="tel-pre" name="tel-pre" value="+1 234 567 8900" autocomplete="tel" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="tel-req">Phone number</label>
+			<input type="tel" id="tel-req" name="tel-req" required autocomplete="tel" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="tel-ro">Phone number</label>
+			<input type="tel" id="tel-ro" name="tel-ro" value="+1 234 567 8900" readonly autocomplete="tel" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="tel-dis">Phone number</label>
+			<input type="tel" id="tel-dis" name="tel-dis" disabled autocomplete="tel" />
 		</div>
 	</div>
-</div>
+</fieldset>
 
-<fieldset>
-	<legend><h3>Checkbox Group</h3></legend>
-	
-	<p>What do you wanna do today?</p>
-	<p>Choose</p>
+<fieldset id="section-url">
+	<legend>URL</legend>
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<input type="checkbox" id="aria-group-04" name="activities" value="check-1" />
-			<label for="aria-group-04">Option 1</label>
+			<label for="url-std">Website</label>
+			<input type="url" id="url-std" name="url-std" autocomplete="url" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="url-pre">Website</label>
+			<input type="url" id="url-pre" name="url-pre" value="https://example.com" autocomplete="url" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="url-req">Website</label>
+			<input type="url" id="url-req" name="url-req" required autocomplete="url" />
 		</div>
 		<div class="grid-item-wrapper">
-			<input type="checkbox" id="aria-group-05" name="activities" value="check-2" checked />
-			<label for="aria-group-05">Option 2 (pre-checked)</label>
+			<label for="url-ro">Website</label>
+			<input type="url" id="url-ro" name="url-ro" value="https://example.com" readonly autocomplete="url" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="url-dis">Website</label>
+			<input type="url" id="url-dis" name="url-dis" disabled autocomplete="url" />
+		</div>
+	</div>
+</fieldset>
+
+<fieldset id="section-number">
+	<legend>Number</legend>
+	<div class="grid-wrapper">
+		<div class="grid-item-wrapper">
+			<label for="number-std">Quantity</label>
+			<input type="number" id="number-std" name="number-std" min="0" max="100" step="1" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="number-pre">Quantity</label>
+			<input type="number" id="number-pre" name="number-pre" value="42" min="0" max="100" step="1" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="number-req">Quantity</label>
+			<input type="number" id="number-req" name="number-req" required min="0" max="100" step="1" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="number-ro">Quantity</label>
+			<input type="number" id="number-ro" name="number-ro" value="42" readonly min="0" max="100" step="1" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="number-dis">Quantity</label>
+			<input type="number" id="number-dis" name="number-dis" disabled min="0" max="100" step="1" />
+		</div>
+	</div>
+</fieldset>
+
+<fieldset id="section-search">
+	<legend>Search</legend>
+	<div class="grid-wrapper">
+		<div class="grid-item-wrapper">
+			<label for="search-std">Search</label>
+			<input type="search" id="search-std" name="search-std" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="search-pre">Search</label>
+			<input type="search" id="search-pre" name="search-pre" value="Search term" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="search-req">Search</label>
+			<input type="search" id="search-req" name="search-req" required />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="search-ro">Search</label>
+			<input type="search" id="search-ro" name="search-ro" value="Search term" readonly />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="search-dis">Search</label>
+			<input type="search" id="search-dis" name="search-dis" disabled />
+		</div>
+	</div>
+</fieldset>
+
+<fieldset id="section-color">
+	<legend>Color</legend>
+	<div class="grid-wrapper">
+		<div class="grid-item-wrapper">
+			<label for="color-std">Favourite colour</label>
+			<input type="color" id="color-std" name="color-std" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="color-pre">Favourite colour</label>
+			<input type="color" id="color-pre" name="color-pre" value="#003781" />
 		</div>
 		<div class="grid-item-wrapper not-available">
 			Not available
@@ -791,24 +909,173 @@ <h3 id="idOfHeadline">Checkbox Group</h3>
 			Not available
 		</div>
 		<div class="grid-item-wrapper">
-			<input type="checkbox" id="aria-group-06" name="activities" value="option-4" disabled>
-			<label for="aria-group-06">Option 5 (disabled)</label>
+			<label for="color-dis">Favourite colour</label>
+			<input type="color" id="color-dis" name="color-dis" disabled />
 		</div>
 	</div>
-	
-	<p>Choose (required)</p>
+</fieldset>
+
+<fieldset id="section-file">
+	<legend>File</legend>
+	<div class="grid-wrapper">
+		<div class="grid-item-wrapper">
+			<label for="file-std">Upload file</label>
+			<input type="file" id="file-std" name="file-std" />
+		</div>
+		<div class="grid-item-wrapper not-available">
+			Not available
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="file-req">Upload file</label>
+			<input type="file" id="file-req" name="file-req" required />
+		</div>
+		<div class="grid-item-wrapper not-available">
+			Not available
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="file-dis">Upload file</label>
+			<input type="file" id="file-dis" name="file-dis" disabled />
+		</div>
+	</div>
+</fieldset>
+
+<fieldset id="section-date">
+	<legend>Date</legend>
+	<div class="grid-wrapper">
+		<div class="grid-item-wrapper">
+			<label for="date-std">Date of birth</label>
+			<input type="date" id="date-std" name="date-std" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="date-pre">Date of birth</label>
+			<input type="date" id="date-pre" name="date-pre" value="1990-01-15" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="date-req">Date of birth</label>
+			<input type="date" id="date-req" name="date-req" required />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="date-ro">Date of birth</label>
+			<input type="date" id="date-ro" name="date-ro" value="1990-01-15" readonly />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="date-dis">Date of birth</label>
+			<input type="date" id="date-dis" name="date-dis" disabled />
+		</div>
+	</div>
+</fieldset>
+
+<fieldset id="section-time">
+	<legend>Time</legend>
+	<div class="grid-wrapper">
+		<div class="grid-item-wrapper">
+			<label for="time-std">Meeting time</label>
+			<input type="time" id="time-std" name="time-std" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="time-pre">Meeting time</label>
+			<input type="time" id="time-pre" name="time-pre" value="14:30" />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="time-req">Meeting time</label>
+			<input type="time" id="time-req" name="time-req" required />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="time-ro">Meeting time</label>
+			<input type="time" id="time-ro" name="time-ro" value="14:30" readonly />
+		</div>
+		<div class="grid-item-wrapper">
+			<label for="time-dis">Meeting time</label>
+			<input type="time" id="time-dis" name="time-dis" disabled />
+		</div>
+	</div>
+</fieldset>
+
+<fieldset id="section-buttons">
+	<legend>Buttons</legend>
+
+	<h2>Default</h2>
+	<div class="grid-wrapper">
+		<div class="grid-item-wrapper">
+			<button type="button">button</button>
+		</div>
+		<div class="grid-item-wrapper">
+			<button type="submit">button[submit]</button>
+		</div>
+		<div class="grid-item-wrapper">
+			<button type="reset">button[reset]</button>
+		</div>
+		<div class="grid-item-wrapper">
+			<input type="submit" value="input[submit]" />
+		</div>
+		<div class="grid-item-wrapper">
+			<input type="reset" value="input[reset]" />
+		</div>
+	</div>
+
+	<h2>Disabled</h2>
 	<div class="grid-wrapper">
 		<div class="grid-item-wrapper">
-			<input type="checkbox" id="aria-group-check-yes-2" name="check-choose" value="yes" required />
-			<label for="aria-group-check-yes-2">Yes</label>
+			<button type="button" disabled>button</button>
+		</div>
+		<div class="grid-item-wrapper">
+			<button type="submit" disabled>button[submit]</button>
+		</div>
+		<div class="grid-item-wrapper">
+			<button type="reset" disabled>button[reset]</button>
+		</div>
+		<div class="grid-item-wrapper">
+			<input type="submit" value="input[submit]" disabled />
 		</div>
 		<div class="grid-item-wrapper">
-			<input type="checkbox" id="aria-group-check-no-2" name="check-choose" value="no" required />
-			<label for="aria-group-check-no-2">No</label>
+			<input type="reset" value="input[reset]" disabled />
 		</div>
 	</div>
 </fieldset>
 
+<section id="section-aria-group">
+	<h2>Grouping: ARIA <code>role="group"</code></h2>
+	<p>An alternative to <code>&lt;fieldset&gt;</code> + <code>&lt;legend&gt;</code>. The group label is provided by an element referenced with <code>aria-labelledby</code>.</p>
+	<div role="group" aria-labelledby="aria-group-heading">
+		<h3 id="aria-group-heading">Activities</h3>
+
+		<p>What do you wanna do today?</p>
+		<p>Choose</p>
+		<div class="grid-wrapper">
+			<div class="grid-item-wrapper">
+				<input type="checkbox" id="aria-group-01" name="activities" value="check-1" />
+				<label for="aria-group-01">Option 1</label>
+			</div>
+			<div class="grid-item-wrapper">
+				<input type="checkbox" id="aria-group-02" name="activities" value="check-2" checked />
+				<label for="aria-group-02">Option 2</label>
+			</div>
+			<div class="grid-item-wrapper not-available">
+				Not available
+			</div>
+			<div class="grid-item-wrapper not-available">
+				Not available
+			</div>
+			<div class="grid-item-wrapper">
+				<input type="checkbox" id="aria-group-03" name="activities" value="option-4" disabled>
+				<label for="aria-group-03">Option 5</label>
+			</div>
+		</div>
+
+		<p>Choose (required)</p>
+		<div class="grid-wrapper">
+			<div class="grid-item-wrapper">
+				<input type="checkbox" id="aria-group-check-yes" name="aria-check-choose" value="yes" required />
+				<label for="aria-group-check-yes">Yes</label>
+			</div>
+			<div class="grid-item-wrapper">
+				<input type="checkbox" id="aria-group-check-no" name="aria-check-choose" value="no" required />
+				<label for="aria-group-check-no">No</label>
+			</div>
+		</div>
+	</div>
+</section>
+
 </main>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/cash/8.1.0/cash.min.js"></script>
 <script src="behaviour.js"></script>
diff --git a/style.css b/style.css
index 4a29c4c..6f30ed8 100644
--- a/style.css
+++ b/style.css
@@ -1,65 +1,59 @@
 :root {
   font-family: system-ui, sans-serif;
   font-size: 100%;
+  accent-color: #003781;
+}
+
+@supports (font: -apple-system-body) {
+  body {
+    font: -apple-system-body;
+    font-family: system-ui, sans-serif;
+  }
 }
 
 
 /*  = = = = = = = = = = VARIABLES: Colours = = = = = = = = = =*/
 :root {
-  --color-bg-01:      hsl(359,0%,90%);
-  --color-bg-02:      hsl(359,0%,80%);
-  --color-text:       hsl(359,0%,20%);
-  --color-link:       hsl(359,0%,40%);
-  --color-focus:      hsl(359,10%,90%);
+  --color-bg-01:  #f5f5f5;
+  --color-bg-02:  #e8e8e8;
+  --color-text:   #111111;
+  --color-link:   #003781;
+  --color-focus:  hsl(220, 80%, 35%);
 }
 
-
 @media (prefers-color-scheme: dark) {
-
   :root {
-    --color-bg-01:    hsl(359,0%,20%);
-    --color-bg-02:    hsl(359,0%,25%);
-    --color-text:     hsl(359,0%,90%);
-    --color-link:     hsl(359,0%,70%);
-    --color-focus:    hsl(359,10%,40%);
+    --color-bg-01:  #1a1a1a;
+    --color-bg-02:  #242424;
+    --color-text:   #f0f0f0;
+    --color-link:   #7ab3e8;
+    --color-focus:  hsl(220, 80%, 70%);
   }
-
 }
 
 @media (forced-colors) {
-
   :root {
-    --color-bg-01:    Canvas;
-    --color-bg-02:    Canvas;
-    --color-text:  CanvasText;
-    --color-link:  LinkText;
+    --color-bg-01:          Canvas;
+    --color-bg-02:          Canvas;
+    --color-text:           CanvasText;
+    --color-link:           LinkText;
     --color-text--disabled: GrayText;
   }
-
-}
-
-/* Display-P3 color, when supported. https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/ */
-@supports (color: color(display-p3 1 1 1)) {
-  :root {
-    --bright-green: color(display-p3 0 1 0);
-  }
 }
 
-@media (color-gamut: p3) {
-    /* Do colorful stuff. */
-}
 
 body {
   background-color: var(--color-bg-01);
   color: var(--color-text);
+  padding-inline: 1rem;
 }
 
 a {
   color: var(--color-link);
 }
 
-/* F O R M   B A S I C   S T Y L E S  */
-label { }
+
+/* F O R M   B A S I C   S T Y L E S */
 
 .form-field-wrapper {
   margin-bottom: .5rem;
@@ -70,20 +64,18 @@ label { }
 }
 
 @media (prefers-color-scheme: dark) {
-  :focus {
+  :focus-visible {
     outline-color: var(--color-focus);
   }
-  
+
   img {
     opacity: .75;
     transition: opacity .5s ease-in-out;
   }
-    img:hover {
-      opacity: 1;
-    }
+  img:hover {
+    opacity: 1;
+  }
 
-  fieldset {}
-  
   input,
   textarea,
   select {
@@ -93,36 +85,85 @@ label { }
     border: 1px solid var(--color-text); /* fix Safari Datetime */
   }
 
-  * :disabled {
+  *:disabled {
     opacity: .2;
   }
 }
 
+
+/*  N A V I G A T I O N  */
+
+nav details summary {
+  cursor: pointer;
+  font-size: smaller;
+  padding: .25rem 0;
+}
+
+nav details ol {
+  list-style: none;
+  padding: 0;
+  margin: .25rem 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: .25rem .75rem;
+  font-size: smaller;
+}
+
+
 /*  L A Y O U T  */
 
 @media (min-width: 900px) {
-    .grid-wrapper {
-      display: grid;
-      grid-template-columns: repeat(5, 1fr);
-      grid-template-rows: 1fr;
-      margin: 0 0 1rem;
+  .grid-wrapper {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: 1fr;
+    gap: 1rem;
+    margin: 0 0 1rem;
   }
 }
-.grid-item-wrapper {}
 
 
-body.design-01 {}
-body.design-01 label { }
+/*  D E S I G N   T I E R S  */
 
 body.design-01 input,
 body.design-01 textarea,
-body.design-01 select {
-    font-size: 100%;
-  }
+body.design-01 select,
+body.design-01 button {
+  font-size: 100%;
+  font-family: inherit;
+}
 
+/* Minimal Design — Allianz Blue accent */
+body.design-02 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
+body.design-02 textarea,
+body.design-02 select {
+  border: 1px solid var(--color-link);
+  border-radius: 4px;
+  padding: .375rem .5rem;
+  font-size: 100%;
+  font-family: inherit;
+  width: 100%;
+  box-sizing: border-box;
+}
 
-body.design-02 label {
-  display: inline-block;
-  width: 12rem;
+body.design-02 input:focus-visible,
+body.design-02 textarea:focus-visible,
+body.design-02 select:focus-visible,
+body.design-02 button:focus-visible {
+  outline: 2px solid var(--color-link);
+  outline-offset: 2px;
+}
+
+body.design-02 button,
+body.design-02 input[type="submit"],
+body.design-02 input[type="reset"],
+body.design-02 input[type="button"] {
+  background-color: var(--color-link);
+  color: var(--color-bg-01);
+  border: none;
+  border-radius: 4px;
+  padding: .375rem .75rem;
+  cursor: pointer;
   font-size: 100%;
-}
\ No newline at end of file
+  font-family: inherit;
+}