# Designing Basedash

Basedash · May 1, 2025

[Original publication](https://youtube.com/watch?v=euypZWNvyGE)

A meeting didn't happen, and enough people had asked me how I made the footer on the [Basedash](https://www.tomjohn.design/content/basedash) website, so I opened the Unicorn Studio file and tried to rebuild it from memory [(0:00)](https://www.youtube.com/watch?v=euypZWNvyGE&t=0s). It's totally off the cuff. Partway through, something stopped working and I had to start a new file, which happens to me a lot in Unicorn [(4:11)](https://www.youtube.com/watch?v=euypZWNvyGE&t=251s). It's built by one person and it can be a little finicky, but it's an unbelievable tool, so I give it all the grace in the world.

The footer is only six or seven layers [(1:05)](https://www.youtube.com/watch?v=euypZWNvyGE&t=65s): a black background, the Basedash wordmark, a blinds effect with the frequency down to about 1% so it distorts and fades out at the sides, a Bayer 8×8 dither with the threshold pushed from 50% to 100% [(4:56)](https://www.youtube.com/watch?v=euypZWNvyGE&t=296s), a duotone that strips everything down to black and white, a progressive blur that follows the cursor, with a bit of momentum so it sways instead of tracking it exactly [(8:43)](https://www.youtube.com/watch?v=euypZWNvyGE&t=523s), and a vignette. It's a lot more like Photoshop than Figma, because everything is layered and the order matters. The blur goes under the dither, so the pixels stay crispy.

![The wordmark through the blinds and dither effects in Unicorn Studio, captioned as I say: “with default 50% mix. I just blitz that all the way up to 50% or to 100% from 50. So, uh, what you see”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/basedash-footer-in-unicorn-studio/threshold-8rCBwBLi2soItKBoIBhHsodkltuqlT.mp4 "Clip")

The vignette is the one I use all the time [(10:13)](https://www.youtube.com/watch?v=euypZWNvyGE&t=613s). It looks like an Instagram filter at first, but it's what lets these sit on the page without looking like a box. I skew it into an oval and drag it so the tiny pixels at the bottom never reach the edge and everything diffuses into the page [(11:22)](https://www.youtube.com/watch?v=euypZWNvyGE&t=682s). None of it is round numbers. I scrub the sliders until it looks right, and a lot of the more interesting looks are past 100 or below zero [(13:14)](https://www.youtube.com/watch?v=euypZWNvyGE&t=794s).

![The wordmark fading into the page under a vignette, captioned as I say: “want this edge to be super cut. I want it to feel like it's part of the page and it just it's floating there. Okay. So, what the vignette allows”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/basedash-footer-in-unicorn-studio/vignette-DicLT8oieqkSklrDDfIXcE57uUXYYH.mp4 "Clip")

To get it on the site I export an embed and paste the component into Framer, and there's a code export for the app [(14:23)](https://www.youtube.com/watch?v=euypZWNvyGE&t=863s). They're tiny and really performant, with hardly any dependencies, so I use them a lot, probably too much. I also showed a few of the loading and empty states I've made for the app, how I make light and dark versions [(15:33)](https://www.youtube.com/watch?v=euypZWNvyGE&t=933s), and then shared the file so anyone can remix it [(16:47)](https://www.youtube.com/watch?v=euypZWNvyGE&t=1007s). I talked about more of them, and the footer, on [Dive Club](https://www.tomjohn.design/content/unicorn-studio-cheat-code).

![My Unicorn Studio files of loading and empty states for Basedash, captioned as I say: “is what it looks like when we got no charts inside of Basedash. This is an empty state. It's got this cool like 3D stacked grid. It's just”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/basedash-footer-in-unicorn-studio/unicorn-files-oHjvhuKXRYFu4Eqge7FzwPv6bjvITI.mp4 "Clip")