Orchard Sky Digital

Colophon

How this site is made, for the curious.

The name

An orchard works at the pace we like to work: things get planted deliberately and picked when they’re actually ready. The sky is where software lives now. The logo puts the two together, an apple resting on a cloud, and this site grows out of that drawing.

The drawing

Every illustration on this site is an SVG <path> written by hand: the apple, the cloud, the blossoms, the branch. There are no image files and no icon library; someone sat down and typed the curves. The mark on the home page draws itself with one old trick done carefully. Each path carries pathLength="1", so a single dash animation inks every stroke at the same pace.

<path d="M 225 80 C 214 66 194 60 176 66
         C 148 76 134 106 142 138 …"
      pathLength="1" class="draw-path" />

.draw-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;   /* invisible          */
  animation: ink-draw .9s forwards;  /* drawn   */
}

If your system asks for reduced motion, the ink arrives already dry. And you can view source on any page; the whole orchard is text.

The ink

Five inks, mixed once and used everywhere. Nearly everything is drawn in Ink on Paper; Leaf is spent only where something responds to you. After dark (the switch is in the corner) the same drawings are re-inked in bone on night paper, and the app screenshots swap to their dark-mode captures.

  • Paper #FBFAF4
  • Ink #26302B
  • Faded ink #5C6B62
  • Rule #D9D6CA
  • Leaf #557A5E

The type

Fraunces for display, an old-style serif with a little pulp to it, like the wordmark. Newsreader for reading. IBM Plex Mono for the specimen labels, because every good field notebook has neat captions.

The build

Next.js, TypeScript, and Tailwind, with Vitest tests written before anything visual was drawn. The product registry is one typed file, and every specimen page, legal route, and sitemap entry derives from it. The animations are plain CSS. There’s no backend and no analytics: the day/night switch, the newsletter hand-off to your own mail app, and the greeting in your console are the only JavaScript running here.