# Designing from scratch in Unicorn Studio

Tom Johnson · 2025-04-21

[Basedash](https://x.com/tomjohndesign/status/1914438069555540441)

I'd just pushed a new section to the [Basedash](https://www.tomjohn.design/content/basedash) site, and it needed some Unicorn Studio juice, so I designed it live, from scratch, with no idea how it would turn out [(0:21)](#t=21). It's 31 minutes and I didn't edit it.

![The new section on the Basedash site, captioned as I say: “But it needs some Unicorn Studio juice, so I'm just gonna design it live and treat it kind of like a tutorial I have no idea how”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/unicorn-studio-from-scratch/design-it-live-SiVwSslbs6BPVyBvmWWW10oERBlpR4.mp4 "Clip")

It starts the way I always use Unicorn: throw stuff at the wall and see what happens [(1:56)](#t=116). A duotone and dither, sine waves I'd never used before, a 3D shape, a vignette, a blur. Then I put it in Framer as an embed behind the section [(8:05)](#t=485), and it was way too much. I'd been going for a circular shape, and that would work if there were one thing in the middle, but not with the two strong horizontals in the layout [(9:39)](#t=579).

![Trying sine waves in Unicorn Studio, captioned as I say: “so this is like exactly how I use Unicorn I just throw stuff at the wall and see what”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/unicorn-studio-from-scratch/throw-it-at-the-wall-WOSaA5phktE6t8U8laPbtkJiUr79F5.mp4 "Clip")

So I took out the ripple, added a beam, and kept going back and forth between Unicorn and Framer. I tried a gradient map, which I don't really understand yet, and found an effect I liked for somewhere else [(16:25)](#t=985).

![The first version behind the section, too circular, captioned as I say: “looking at this now I think I'm trying to I was trying to go for the circular shape a little bit too much There's not if there was a like a focal point like if there was like a single integration in the”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/unicorn-studio-from-scratch/too-circular-auxSMQblLoeyVJxbxEoJGFcPifCfZS.mp4 "Clip")

Then blending modes. Fifteen years I've been using these and I can never remember which one is which [(20:18)](#t=1218). And the duotone said it was black when it wasn't. I know black when I see it [(22:13)](#t=1333). I hid it on mobile and turned the opacity down [(26:48)](#t=1608), and got it about 95% of the way there.

![Trying blending modes on the embed in Framer, captioned as I say: “does Nope, not screen 15 years. I've been using these I can never remember Which one is which?”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/unicorn-studio-from-scratch/blending-modes-6JRvRlyUKgSMqVmnEyi33Y34u4xaa3.mp4 "Clip")

I wasn't sure I'd keep it, but I wasn't going to spend more time on a video nobody was going to watch that long [(30:38)](#t=1838). A few days later I made [one about the gold logo](https://www.tomjohn.design/content/gold-logo-unicorn-studio).

![The finished background behind the new section, captioned as I say: “I'm not sure if I'll keep this I think I might keep tuning it But I'm not gonna spend any more time on this video that no one is gonna watch this long and Yeah, there's my process.”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/unicorn-studio-from-scratch/no-one-will-watch-AWO793mijpVW9LyWcUjsyU98ERcrDS.mp4 "Clip")

When I posted it on X I wrote:

> The Unicorn Studio tutorial on Friday went well so I figure why not push something from scratch so you can see the full workflow. It’s long. I didn’t edit it at all. But it’s a real workflow trying to make something from scratch in unicorn for our Framer site. So watch me slowly and randomly stumble towards a design. If you want to see it live, check out the Basedash website. -- recorded with Screen Studio