JOSHUA BUTNER

Case study · 2026 · My own studio

GOTHS

Created for GOTHS, LLC. Type: Uncut Sans and Respira. Stardust art generated from approved stills, then baked by hand.

I rebuilt my studio’s site in five days. One comp became goths.co, a design system and a social kit, all speaking the same language.

Delivered
October 2026, for GOTHS, LLC, my own studio
Scope
Six-page site, the Grimoire design system, the Dust motion language, a social rendering kit
Role
Owner: art direction, design and engineering, with AI agents working under my review
Built with
Astro 7, Sanity, plain CSS, three.js, Style Dictionary, Storybook, Netlify
goths.co, top to bottom16s · 30 fps · Silent

A continuous scroll of the goths.co homepage at launch: the raven hero, the manifesto, the three doors, selected work and the contact close, with the stardust in motion. Silent, real time.

days from the plan reset to the production swap
5
pages, prerendered, rebuilt on publish in about ninety seconds
6
tokens in three tiers, the source of truth for site and kit
70
axe violations across six pages at thirteen widths
0

01One comp, six pages

A site that does the selling, so the studio can do the work.

Pixel-matched to one 1440 comp, prerendered, edited in Sanity. Six pages on one grid, one ink, one bone, and a rationed violet.

Art direction · Design · Front-end · Content model

goths.co homepage: a stardust raven over ink, the headline Product design and engineering, from concept to complete, with Book a call and See the work.
goths.co1440

goths.co / 1440

Design, art direction and engineering: Josh Butner, GOTHS. Type: Uncut Sans and Respira. Dust art generated from approved stills, then baked by hand. Captured from goths.co on October 4, 2026.

goths.co homepage: a stardust raven over ink, the headline Product design and engineering, from concept to complete, with Book a call and See the work.
goths.co on a phone: the raven above the headline, the lede, Book a call and See the work, and the Pause motion pill.
On a phone390
The Work page: a page hero with a violet glow and the first case study on the twelve-column grid.
goths.co/work1440

goths.co/work / 1440

Design, art direction and engineering: Josh Butner, GOTHS. Type: Uncut Sans and Respira. Dust art generated from approved stills, then baked by hand. Captured from goths.co on October 4, 2026.

The Work page: a page hero with a violet glow and the first case study on the twelve-column grid.
The Work page on a phone: the page hero, then the first case study card.
On a phone390
The Services page: the three doors laid out as numbered offers with hairline rules.
goths.co/services1440

goths.co/services / 1440

Design, art direction and engineering: Josh Butner, GOTHS. Type: Uncut Sans and Respira. Dust art generated from approved stills, then baked by hand. Captured from goths.co on October 4, 2026.

The Services page: the three doors laid out as numbered offers with hairline rules.
The Services page on a phone: the three doors stacked as numbered offers.
On a phone390
The About page: a stardust tome bleeding off the right edge under the headline Where design and code meet.
goths.co/about1440

goths.co/about / 1440

Design, art direction and engineering: Josh Butner, GOTHS. Type: Uncut Sans and Respira. Dust art generated from approved stills, then baked by hand. Captured from goths.co on October 4, 2026.

The About page: a stardust tome bleeding off the right edge under the headline Where design and code meet.
The About page on a phone: the tome above the headline Where design and code meet.
On a phone390

02Grimoire

The site, pulled into a system, so every new page and post comes out looking like GOTHS.

Seventy tokens in three tiers, nine documented components, a Storybook and a Figma library, each component with an accessibility matrix of its own.

Tokens · Components · Storybook · Figma

The Grimoire color foundation: ink, bone, five greys, a control boundary, a hairline rule and the violet magic accent, each with its contrast ratio against ink and a usage note.
Colors34 primitive · 28 semantic · 8 component

Colors / 34 primitive · 28 semantic · 8 component

Grimoire design system by Josh Butner, GOTHS. Specimens rendered from the Storybook and the Figma library, October 2026.

The Grimoire color foundation: ink, bone, five greys, a control boundary, a hairline rule and the violet magic accent, each with its contrast ratio against ink and a usage note.
The Grimoire type foundation: label, body, body large, three display sizes in Uncut Sans, and the Respira flourish on the word hex.
TypographyUncut Sans · Respira

Typography / Uncut Sans · Respira

Grimoire design system by Josh Butner, GOTHS. Specimens rendered from the Storybook and the Figma library, October 2026.

The Grimoire type foundation: label, body, body large, three display sizes in Uncut Sans, and the Respira flourish on the word hex.
A Grimoire component sheet in Figma: the Hero’s anatomy, usage, content rules and accessibility notes above the desktop and phone renders.
The Hero, documentedFigma library

The Hero, documented / Figma library

Grimoire design system by Josh Butner, GOTHS. Specimens rendered from the Storybook and the Figma library, October 2026.

A Grimoire component sheet in Figma: the Hero’s anatomy, usage, content rules and accessibility notes above the desktop and phone renders.
The Engagements component in Storybook: three numbered ways to work with the studio on hairline rules.
EngagementsComponent

Engagements / Component

Grimoire design system by Josh Butner, GOTHS. Specimens rendered from the Storybook and the Figma library, October 2026.

The Engagements component in Storybook: three numbered ways to work with the studio on hairline rules.
The Contact component in Storybook: the headline Let’s fix your hex with a Respira flourish, the email and Book a call.
ContactComponent

Contact / Component

Grimoire design system by Josh Butner, GOTHS. Specimens rendered from the Storybook and the Figma library, October 2026.

The Contact component in Storybook: the headline Let’s fix your hex with a Respira flourish, the email and Book a call.

03Dust

Motion that earns its place, generated from approved stills, baked by hand, and kept inside WCAG 2.2 limits.

Seven stardust elements loop through the pages. Contrast is measured behind every line of text, a Pause pill is always a thumb away, and touch, reduced motion and Data Saver get stills.

Art direction · Generation · Bake pipeline · WebGL

The ravenBaked loop · Silent

The goths.co raven as a looping stardust clip: the bird holds its place while dust lifts off the wing. Silent, seamless, generated from the approved still.

The tomeBaked loop · Silent

The About page’s tome as a looping stardust clip: an open book in fine white particles, pages breathing. Silent and seamless.

The candleBaked loop · Silent

The 404 page’s candle as a looping stardust clip: a snuffed candle, its smoke curling up and right. Silent and seamless.

04The kit

The brand, posting itself, from the same tokens as the site, through a validator that refuses anything the site would.

Slides, link cards, PDFs and video, rendered from HTML canvases. One idea per slide, type never under 24px, contrast checked behind every line.

Portrait 1080×1350 · Link card 1200×627 · Landscape 1920×1080

Carousel slide one: One studio, three doors. Design and build, done by one team, over the stardust raven.
Three doors · 1 of 51080×1350

Three doors · 1 of 5 / 1080×1350

Social rendering kit by Josh Butner, GOTHS. Week 1 drafts rendered from the published Grimoire tokens, October 2026.

Carousel slide one: One studio, three doors. Design and build, done by one team, over the stardust raven.
Carousel slide two: Door one, For busy product teams. Your roadmap is bigger than your team, over a stardust quill.
Three doors · 2 of 51080×1350

Three doors · 2 of 5 / 1080×1350

Social rendering kit by Josh Butner, GOTHS. Week 1 drafts rendered from the published Grimoire tokens, October 2026.

Carousel slide two: Door one, For busy product teams. Your roadmap is bigger than your team, over a stardust quill.
Carousel slide three: Door two, For agencies at capacity. You sold the project, now you need the hands, over a stardust potion.
Three doors · 3 of 51080×1350

Three doors · 3 of 5 / 1080×1350

Social rendering kit by Josh Butner, GOTHS. Week 1 drafts rendered from the published Grimoire tokens, October 2026.

Carousel slide three: Door two, For agencies at capacity. You sold the project, now you need the hands, over a stardust potion.
The first frame of the relaunch scroll recording: the goths.co homepage with its header, the raven and the headline.
Relaunch loop, first frame1920×1080

Relaunch loop, first frame / 1920×1080

Social rendering kit by Josh Butner, GOTHS. Week 1 drafts rendered from the published Grimoire tokens, October 2026.

The first frame of the relaunch scroll recording: the goths.co homepage with its header, the raven and the headline.
A link card: Reserved capacity for your team, Fractional design engineering, with the GOTHS lockup and Josh Butner’s name.
Availability card1200×627

Availability card / 1200×627

Social rendering kit by Josh Butner, GOTHS. Week 1 drafts rendered from the published Grimoire tokens, October 2026.

A link card: Reserved capacity for your team, Fractional design engineering, with the GOTHS lockup and Josh Butner’s name.
The GOTHS LinkedIn banner: the lockup and a line of stardust on ink.
LinkedIn banner1584×396

LinkedIn banner / 1584×396

Social rendering kit by Josh Butner, GOTHS. Week 1 drafts rendered from the published Grimoire tokens, October 2026.

The GOTHS LinkedIn banner: the lockup and a line of stardust on ink.

Made for GOTHS, LLC, my own studio. The stardust art is generated from approved stills, not drawn; AI agents worked under my review. Client work on goths.co keeps its own credits.

goths.co →The Zions study, on goths.co →