initial commitHEADprimary

19 files changed, 518 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..090d9bb
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+deploy.sh
diff --git a/assets/apple-touch-icon.png b/assets/apple-touch-icon.png
new file mode 100644
index 0000000..3f97c2a
--- /dev/null
+++ b/assets/apple-touch-icon.png
diff --git a/assets/favicon.ico b/assets/favicon.ico
new file mode 100644
index 0000000..7bf9cea
--- /dev/null
+++ b/assets/favicon.ico
diff --git a/assets/favicon.svg b/assets/favicon.svg
new file mode 100644
index 0000000..feefbac
--- /dev/null
+++ b/assets/favicon.svg
@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m29.856 55.488c-14.112 0-25.344-11.52-25.344-25.632s11.232-25.344 25.344-25.344 25.632 11.232 25.632 25.344-11.52 25.632-25.632 25.632z" transform="scale(0.266667)"/></svg>
diff --git a/assets/og-image.png b/assets/og-image.png
new file mode 100644
index 0000000..c86ce75
--- /dev/null
+++ b/assets/og-image.png
diff --git a/assets/style/root.css b/assets/style/root.css
new file mode 100644
index 0000000..28b325d
--- /dev/null
+++ b/assets/style/root.css
@@ -0,0 +1,38 @@
+:root {
+  --background-color: var(--uchu-gray-1);
+  --base-grid-color1: oklch(var(--uchu-blue-3-raw) / 30%);
+  --base-grid-color2: oklch(var(--uchu-purple-3-raw) / 30%);
+  --baseline: calc(var(--line-height) / 2);
+  --block-spacing-bottom: var(--line-height);
+  --block-spacing-top: 0;
+  --column-gap: calc(var(--line-height) * 2);
+  --display-scale: 1;
+  --font-mono: "inc mono";
+  --font-sans: null;
+  --font-serif: null;
+  --font-size: 12px;
+  --foreground-color: oklch(var(--uchu-yin-raw) / 80%);
+  --h1-size: 2.8rem;
+  --h2-size: 2.2rem;
+  --h3-size: 1.4rem;
+  --h4-size: 1.1rem;
+  --hr-thickness: 2px;
+  --line-height: calc(var(--font-size) * 1.5);
+  --pixel: 1px;
+  --row-gap: var(--line-height);
+
+  @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
+    --display-scale: 2;
+    --pixel: 0.5px;
+  }
+
+  @media only screen and (min-device-pixel-ratio: 2.5), only screen and (min-resolution: 2.5dppx) {
+    --display-scale: 3;
+    --pixel: 0.34px;
+  }
+
+  @media only screen and (min-device-pixel-ratio: 3.5), only screen and (min-resolution: 3.5dppx) {
+    --display-scale: 4;
+    --pixel: 0.25px;
+  }
+}
diff --git a/assets/style/type.css b/assets/style/type.css
new file mode 100644
index 0000000..2096864
--- /dev/null
+++ b/assets/style/type.css
@@ -0,0 +1,31 @@
+@font-face {
+  font-display: swap;
+  font-family: "inc mono";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../type/400.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "inc mono";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../type/400i.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "inc mono";
+  font-style: normal;
+  font-weight: 600;
+  src: url("../type/600.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "inc mono";
+  font-style: italic;
+  font-weight: 600;
+  src: url("../type/600i.woff2") format("woff2");
+}
diff --git a/assets/type/400.woff2 b/assets/type/400.woff2
new file mode 100644
index 0000000..ffafed3
--- /dev/null
+++ b/assets/type/400.woff2
diff --git a/assets/type/400i.woff2 b/assets/type/400i.woff2
new file mode 100644
index 0000000..527be83
--- /dev/null
+++ b/assets/type/400i.woff2
diff --git a/assets/type/600.woff2 b/assets/type/600.woff2
new file mode 100644
index 0000000..57a7053
--- /dev/null
+++ b/assets/type/600.woff2
diff --git a/assets/type/600i.woff2 b/assets/type/600i.woff2
new file mode 100644
index 0000000..5a12834
--- /dev/null
+++ b/assets/type/600i.woff2
diff --git a/assets/work/beauty-lynk.jpeg b/assets/work/beauty-lynk.jpeg
new file mode 100644
index 0000000..0b42374
--- /dev/null
+++ b/assets/work/beauty-lynk.jpeg
diff --git a/assets/work/chronver.jpeg b/assets/work/chronver.jpeg
new file mode 100644
index 0000000..bcb3143
--- /dev/null
+++ b/assets/work/chronver.jpeg
diff --git a/assets/work/dap.jpeg b/assets/work/dap.jpeg
new file mode 100644
index 0000000..6610564
--- /dev/null
+++ b/assets/work/dap.jpeg
diff --git a/assets/work/house-lafond.jpeg b/assets/work/house-lafond.jpeg
new file mode 100644
index 0000000..c5b9ac2
--- /dev/null
+++ b/assets/work/house-lafond.jpeg
diff --git a/assets/work/nando-nate.jpeg b/assets/work/nando-nate.jpeg
new file mode 100644
index 0000000..d744390
--- /dev/null
+++ b/assets/work/nando-nate.jpeg
diff --git a/assets/work/nickel.jpeg b/assets/work/nickel.jpeg
new file mode 100644
index 0000000..86624ce
--- /dev/null
+++ b/assets/work/nickel.jpeg
diff --git a/assets/work/uchu.jpeg b/assets/work/uchu.jpeg
new file mode 100644
index 0000000..5f6a0d1
--- /dev/null
+++ b/assets/work/uchu.jpeg
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4c63b50
--- /dev/null
+++ b/index.html
@@ -0,0 +1,446 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="author" content="Paul Anthony Webb"/>
+    <meta name="description" content="Digital Architechs for Ideas Never Cease and select clients"/>
+    <meta name="fediverse:creator" content="@netopwibby@social.coop"/>
+    <meta name="title" content="Design Services for the Good Natured"/>
+    <meta name="theme-color" content="oklch(25.11% 0.006 258.36)"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
+    <meta name="viewport-fit" content="cover"/>
+
+    <meta name="apple-mobile-web-app-title" content="Design Services for the Good Natured"/>
+    <meta name="application-name" content="Design Services for the Good Natured"/>
+    <meta name="msapplication-TileColor" content="oklch(25.11% 0.006 258.36)"/>
+    <meta name="msapplication-TileImage" content="/assets/apple-touch-icon.png"/>
+    <meta name="theme-color" content="oklch(25.11% 0.006 258.36)"/>
+
+    <meta property="og:image" content="/assets/og-image.png"/>
+    <meta property="og:image:height" content="720"/>
+    <meta property="og:image:width" content="1280"/>
+    <meta property="og:locale" content="en_US"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://inc.sh"/>
+
+    <title>Design Services for the Good Natured</title>
+
+    <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>
+    <link rel="mask-icon" href="/assets/favicon.svg" color="#010000"/>
+    <link rel="shortcut icon" href="/assets/favicon.ico"/>
+    <link rel="stylesheet" href="https://uchu.style/uchu.css"/>
+    <link rel="stylesheet" href="./assets/style/type.css"/>
+    <link rel="stylesheet" href="./assets/style/root.css"/>
+
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0; padding: 0;
+        box-sizing: inherit;
+      }
+
+      :root {
+        --line-height: calc(var(--font-size) * 1.5);
+      }
+
+      @media (max-width: 700px) {
+        :root {
+          --line-height: calc(var(--font-size) * 2);
+        }
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      body {
+        background-color: var(--uchu-yang);
+        display: flex;
+        flex-direction: column;
+        font-family: var(--font-mono);
+        font-size: 12px;
+        letter-spacing: -0.05rem;
+        line-height: var(--line-height);
+        min-height: 100vh;
+      }
+
+      .undershirt {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 800px;
+        width: 100%;
+      }
+
+      @media (max-width: 900px) {
+        .undershirt {
+          padding-left: 2rem;
+          padding-right: 2rem;
+        }
+      }
+
+      main {
+        color: var(--uchu-yin);
+        flex: 1;
+      }
+
+      a {
+        color: inherit;
+        font-weight: 600;
+      }
+
+      p + p {
+        margin-top: 0.5rem;
+      }
+
+      /*——— header */
+
+      header {
+        background-color: var(--uchu-yin-9);
+        color: var(--uchu-yang);
+        margin-bottom: 1rem;
+        padding-bottom: 0.5rem;
+        padding-top: 3rem;
+        text-transform: uppercase;
+      }
+
+      header h1 {
+        font-size: 1.5rem;
+        font-weight: 400;
+
+        span {
+          opacity: 0.3;
+        }
+      }
+
+      .smallcaps {
+        top: -2px; right: -2px;
+
+        border: 1px solid var(--uchu-yin);
+        border-radius: 0.5rem;
+        font-size: 0.8rem;
+        letter-spacing: 0.05rem;
+        line-height: 0;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        position: relative;
+        text-transform: uppercase;
+      }
+
+      /*——— intro */
+
+      .intro {
+        font-size: 1.25rem;
+        padding-bottom: 5rem;
+      }
+
+      /*——— sections */
+
+      .development,
+      .manifesto,
+      .research,
+      footer {
+        font-size: 1rem;
+        position: relative;
+        text-transform: uppercase;
+      }
+
+      .content {
+        flex: 1;
+        text-transform: none;
+        width: 100%;
+
+        h3 {
+          display: inline-block;
+          font-size: inherit;
+          margin-bottom: 1rem;
+        }
+
+        figure {
+          margin-top: 1rem;
+          width: 100%;
+
+          img {
+            width: 100%;
+          }
+        }
+
+        p {
+          line-height: 1.33;
+
+          span {
+            user-select: none;
+
+            &:not(.title) {
+              opacity: 0.15;
+            }
+
+            &.title {
+              opacity: 0.3;
+            }
+          }
+        }
+
+        .title {
+          margin-right: 1rem;
+          text-transform: uppercase;
+          white-space: pre;
+
+          @media (max-width: 600px) {
+            display: block;
+          }
+        }
+
+        li {
+          position: relative;
+        }
+
+        li p:first-of-type {
+          padding-top: 1rem;
+        }
+
+        li:not(:last-of-type) {
+          margin-bottom: 2rem;
+          padding-bottom: 2.5rem;
+
+          &::after {
+            width: 100%; height: 1px;
+            bottom: -1px; left: 0;
+
+            background-color: var(--uchu-yin-3);
+            content: "";
+            opacity: 0.3;
+            position: absolute;
+          }
+        }
+      }
+
+      .development::before,
+      .manifesto::before,
+      .research::before {
+        width: 100%; height: 1px;
+        top: 0; left: 0;
+
+        background-color: var(--uchu-yin-3);
+        content: "";
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      section:last-of-type::after {
+        width: 100%; height: 1px;
+        bottom: 0; left: 0;
+
+        background-color: var(--uchu-yin-3);
+        content: "";
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      /*——— rows */
+
+      .row {
+        padding-bottom: 0.5rem;
+        padding-top: 0.5rem;
+      }
+
+      @media (min-width: 701px) {
+        .row {
+          display: flex;
+          flex-direction: row;
+        }
+      }
+
+      @media (max-width: 700px) {
+        .row {
+          padding-bottom: 1.5rem;
+          padding-top: 1.5rem;
+        }
+      }
+
+      /*——— row content */
+
+      .row > p {
+        width: 200px;
+      }
+
+      @media (max-width: 700px) {
+        .row > p {
+          opacity: 0.3;
+        }
+      }
+
+      /*——— row lists */
+
+      .row ol,
+      .row ul {
+        list-style-type: none;
+      }
+
+      @media (max-width: 700px) {
+        .row ol,
+        .row ul {
+          padding-top: 0.25rem;
+        }
+      }
+
+      .row ol {
+        counter-reset: item;
+      }
+
+      .row ol li::before {
+        content: counter(item, decimal-leading-zero) ". ";
+        counter-increment: item;
+      }
+
+      @media (min-width: 701px) {
+        .row ul li {
+          cursor: default;
+        }
+      }
+
+      .row ol li:not(:first-of-type),
+      .row ul li:not(:first-of-type) {
+        padding-top: 0.5rem;
+      }
+
+      @media (min-width: 701px) {
+        .row ul li:not(:hover) span {
+          opacity: 0;
+        }
+      }
+
+      @media (max-width: 700px) {
+        .row ul li span {
+          opacity: 0.3;
+        }
+      }
+
+      /*——— footer */
+
+      footer {
+        color: var(--uchu-yin);
+        padding-bottom: 2rem;
+        padding-top: 5rem;
+        position: relative;
+      }
+    </style>
+  </head>
+
+  <body>
+    <header>
+      <div class="undershirt">
+        <h1>design services <span>for the</span> good natured.</h1>
+      </div>
+    </header>
+
+    <main>
+      <section class="intro">
+        <div class="undershirt">
+          <p>Digital Architechs for Ideas Never Cease</p>
+          <p><span class="smallcaps">and</span> <em>select clients</em></p>
+        </div>
+      </section>
+
+      <section class="development">
+        <div class="undershirt">
+          <div class="row">
+            <p>Mission</p>
+
+            <div class="content">
+              <p>At dsgn., we believe that design is not just about looks. What you <em>feel</em> and <em>experience</em> can and <strong>should</strong> be considered as well.</p>
+              <p>The Web is the great equalizer for ideas. One can easily get their own ideas realized and launched.</p>
+              <p>We exist to assist in this incredible process.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="research">
+        <div class="undershirt">
+          <div class="row">
+            <p>Contact</p>
+
+            <div class="content">
+              <a href="mailto:dsgn@inc.sh?subject=Let's work together">dsgn@inc.sh</a> |
+              <a href="https://tally.so/r/w4l7V5" target="_blank">client intake questionaire</a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="manifesto">
+        <div class="undershirt">
+          <div class="row">
+            <p>Work</p>
+
+            <ol class="content">
+              <li>
+                <p><span class="title">Client</span> ChronVer</p>
+                <p><span class="title">Focus </span> Developer Tooling</p>
+                <p><span class="title">Tasks </span> Art Direction <span>/</span> Web Design <span>/</span> Web Development</p>
+                <p><span class="title">URL   </span> <a href="https://chronver.org?ref=dsgn.inc.sh">chronver.org</a></p>
+
+                <figure>
+                  <img src="/assets/work/chronver.jpeg"/>
+                </figure>
+              </li>
+
+              <li>
+                <p><span class="title">Client</span> Dap</p>
+                <p><span class="title">Focus </span> Blockchain</p>
+                <p><span class="title">Tasks </span> Art Direction <span>/</span> Web Design <span>/</span> Web Development</p>
+                <p><span class="title">URL   </span> <a href="https://dap.sh?ref=dsgn.inc.sh">dap.sh</a></p>
+
+                <figure>
+                  <img src="/assets/work/dap.jpeg"/>
+                </figure>
+              </li>
+
+              <li>
+                <p><span class="title">Client</span> uchū</p>
+                <p><span class="title">Focus </span> Designer Tooling <span>/</span> Developer Tooling</p>
+                <p><span class="title">Tasks </span> Art Direction <span>/</span> Web Design <span>/</span> Web Development</p>
+                <p><span class="title">URL   </span> <a href="https://uchu.style?ref=dsgn.inc.sh">uchu.style</a></p>
+
+                <figure>
+                  <img src="/assets/work/uchu.jpeg"/>
+                </figure>
+              </li>
+
+              <li>
+                <p><span class="title">Client</span> Nickel</p>
+                <p><span class="title">Focus </span> Video Hosting</p>
+                <p><span class="title">Tasks </span> Art Direction <span>/</span> Web Design <span>/</span> Web Development</p>
+                <p><span class="title">URL   </span> <a href="https://nickel.video?ref=dsgn.inc.sh">nickel.video</a></p>
+
+                <figure>
+                  <img src="/assets/work/nickel.jpeg"/>
+                </figure>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div class="undershirt">
+        <p>
+          &copy; 2025&mdash;<script>
+            (() => {
+              const x = document.getElementsByTagName("script");
+              const y = x[x.length - 1];
+              const z = document.createTextNode((new Date()).getFullYear());
+
+              y.parentNode.insertBefore(z, y);
+            })();
+          </script><noscript>&infin;</noscript> Ideas Never Cease, LLC d/b/a dsgn. All Rights Reserved.
+        </p>
+
+        <p>Last updated 2026.06.05</p>
+      </div>
+    </footer>
+  </body>
+</html>