Deployed 67d8920 with MkDocs version: 1.6.0

stylesheets/extra.css

@@ -117,9 +117,9 @@
   --md-default-fg-color--lighter:      var(--grayscale-gray-450);
   --md-default-fg-color--lightest:     var(--grayscale-gray-500); 
   --md-default-bg-color:               var(--grayscale-gray-920);
-  --md-default-bg-color--light:        rgba(0, 0, 0, 0.54);
-  --md-default-bg-color--lighter:      rgba(0, 0, 0, 0.32);
-  --md-default-bg-color--lightest:     rgba(0, 0, 0, 0.07);
+  --md-default-bg-color--light:        var(--grayscale-gray-900);
+  --md-default-bg-color--lighter:      var(--grayscale-gray-800);
+  --md-default-bg-color--lightest:     var(--grayscale-gray-700);
 
   --md-typeset-color:                  var(--md-default-fg-color);
   --md-typeset-color-inverted:         var(--grayscale-gray-920);
@@ -173,14 +173,14 @@
 
   --md-accent-fg-color:                var(--tertiary);
 
-  --md-default-fg-color:               var(--grayscale-gray-900);
-  --md-default-fg-color--light:       rgba(0, 0, 0, 0.54);
-  --md-default-fg-color--lighter:     rgba(0, 0, 0, 0.32);
-  --md-default-fg-color--lightest:    rgba(0, 0, 0, 0.07);
+  --md-default-fg-color:               var(--grayscale-gray-920);
+  --md-default-fg-color--light:       var(--grayscale-gray-900);
+  --md-default-fg-color--lighter:     var(--grayscale-gray-800);
+  --md-default-fg-color--lightest:    var(--grayscale-gray-700);
   --md-default-bg-color:               var(--grayscale-gray-100);
-  --md-default-bg-color--light:       rgba(255, 255, 255, 0.7);
-  --md-default-bg-color--lighter:     rgba(255, 255, 255, 0.3);
-  --md-default-bg-color--lightest:    rgba(39, 27, 27, 0.12);
+  --md-default-bg-color--light:        var(--grayscale-gray-200);
+  --md-default-bg-color--lighter:      var(--grayscale-gray-300);
+  --md-default-bg-color--lightest:     var(--grayscale-gray-400);
 
   --md-typeset-color:                 var(--md-default-fg-color);
   --md-typeset-color-inverted:        var(--grayscale-gray-200);
@@ -442,9 +442,7 @@ input {
 }
 
 
-.iconSummary {
-  color: var(--md-secondary);
-}
+
 
 /* gallery */
 .galleryFlex {
@@ -658,12 +656,28 @@ input {
 }
 
 .handnotes {
-  background-color: var(--primary-light-020);
-  font-family: monospace;
-  margin-left: var(--spacing-2);
-  padding-inline: var(--spacing-2);
+  text-decoration-thickness: 16px;
+  text-underline-offset: -.5em;
+  text-decoration-color: var(--secondary-050);
+  text-decoration-style: solid;
+  text-decoration-line: underline;
+  text-decoration-skip-ink: none;
 }
 
 .md-sidebar__scrollwrap {
   overflow-y: visible;
-}
+}
+
+.iconSummary {
+  color: var(--md-secondary);
+  margin-right: var(--spacing-2);
+}
+
+.md-typeset .grid.cards>ul>li {
+  border-radius: var(--spacing-3);
+}
+
+.grid.cards>ul>li>p:first-child {
+  display: flex;
+  align-items: center;
+}

work/digital/kuno/index.html

@@ -619,6 +619,30 @@
     </span>
   </a>
 
+</li>
+
+        <li class="md-nav__item">
+  <a href="#design-system" class="md-nav__link">
+    <span class="md-ellipsis">
+      Design System
+    </span>
+  </a>
+
+    <nav class="md-nav" aria-label="Design System">
+      <ul class="md-nav__list">
+
+          <li class="md-nav__item">
+  <a href="#colors" class="md-nav__link">
+    <span class="md-ellipsis">
+      Colors
+    </span>
+  </a>
+
+</li>
+
+      </ul>
+    </nav>
+
 </li>
 
         <li class="md-nav__item">
@@ -1416,6 +1440,30 @@
     </span>
   </a>
 
+</li>
+
+        <li class="md-nav__item">
+  <a href="#design-system" class="md-nav__link">
+    <span class="md-ellipsis">
+      Design System
+    </span>
+  </a>
+
+    <nav class="md-nav" aria-label="Design System">
+      <ul class="md-nav__list">
+
+          <li class="md-nav__item">
+  <a href="#colors" class="md-nav__link">
+    <span class="md-ellipsis">
+      Colors
+    </span>
+  </a>
+
+</li>
+
+      </ul>
+    </nav>
+
 </li>
 
         <li class="md-nav__item">
@@ -1608,6 +1656,9 @@ <h2 id="goals">Goals</h2>
 <li>Establish a User's Help Center.</li>
 <li>Assist with internal documentation.</li>
 </ol>
+<h2 id="design-system">Design System</h2>
+<h3 id="colors">Colors</h3>
+<p><a class="glightbox" href="../../../img/kuno/kuno-design-system-colors-light-dark.webp" data-type="image" data-width="100%" data-height="auto" data-desc-position="bottom"><img alt="KunoDesign System Colors" src="../../../img/kuno/kuno-design-system-colors-light-dark.webp" /></a></p>
 <h2 id="feature-definition-flow">Feature Definition Flow</h2>
 <p>In a single designer team, surrounded by developers, the role of design often lacks clarity. The individual tasked with this responsibility may encounter challenges in dealing with team members who may not fully comprehend the purpose of design.</p>
 <p>The ultimate objective of the feature definition flow is to reach a point where one can anticipate approximately 80%-95% of what is expected to happen and how it will unfold, leaving only a minimal percentage to simple coincidence. </p>
@@ -1630,8 +1681,7 @@ <h3 id="prototype">Prototype</h3>
 <p>With the emergence of Sketch, other alternatives like Adobe XD surfaced. Adobe XD, from its inception, catered to both MacOS and Windows designers, offering an interactive prototype mode that evolved from simple click-throughs to more sophisticated interactions. Clicking a button to navigate to a new screen provides clients and stakeholders with a unique "feel" of the product.</p>
 <p>Prototypes are essential for problem-solving, showcasing new features, and communicating designs to developers. An interactive prototype goes beyond a static image, offering a more immersive experience. During this stage, ideas can be explored, tested, and validated, allowing for the identification and resolution of potential issues before actual development.</p>
 <p>Here, you can see a single-screen prototype in Figma. <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 4h2v12l5.5-5.5 1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5 11 16V4Z"/></svg></span></p>
-<p><a class="content-link" href="https://www.figma.com/file/alDXlktB2GDEDV66ajWORQ/System73?type=design&amp;node-id=50%3A10206&amp;mode=design&amp;t=t5F1wc1RMnn5v2kh-1" target="_blank"><span class="twemoji middle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7Z"/></svg></span>View Figma Reduced Prototype</a></p>
-<p><a class="glightbox" href="../../../img/kuno/kuno-prototype.webp" data-type="image" data-width="100%" data-height="auto" data-desc-position="bottom"><img alt="Kuno Prototype Image" src="../../../img/kuno/kuno-prototype.webp" /></a></p>
+<p><a href="https://www.figma.com/file/alDXlktB2GDEDV66ajWORQ/System73?type=design&amp;node-id=50%3A10206&amp;mode=design&amp;t=t5F1wc1RMnn5v2kh-1" target="_blank"><img alt="Kuno Prototype Image" src="../../../img/kuno/kuno-prototype.webp" /></a></p>
 <h3 id="test">Test</h3>
 <p>No matter how positive you feel about the progress of your project, it inevitably has flaws. The sooner these flaws are identified, the better, as addressing them early on reduces the workload for developers.</p>
 <p>Regardless of one's confidence in design skills, users seldom interact with products as intended. </p>