Hackathon project, 2026

A playful design system, built in six hours.

Role
Design and engineering
Timeline
6 hours, 7 October 2026
Built for
A hackathon project
Made with
Tailwind, Base UI, WebGL

The idea

Plain colors are not playful, and they already feel old-fashioned.

I was building a platform to manage creators and UGC campaigns. With the creator in mind, it had to be something non-technical and creative, because content is essentially creative. It is the output of people.

I wanted creators and their manager to have a platform where the vibes go towards content, not towards building something technical or some sort of SaaS. I wanted to do something innovative, so I took inspiration from Viewmax.

The Viewmax home page, now called Everygen: a soft blue glow behind the headline and a blue button with a lit top edge
Viewmax, now EverygenThe blue glows behind the page instead of sitting flat

The whole app

It was not only the button. Everything was playful.

The tabs, the navigation, the cards and the small colored numbers on every post are all round, and they all give a little when you press them. These are the real parts, running.

TabsPress one: the white pill slides to it
mi1@mira.makesMira, skincare94ScoreOnboarded
de2@deskbyjunJun, desk setups91ScoreContacted
to3@tovacooksTova, home cooking88ScoreOnboardedLate post
Creator cardsA pastel face, a medal and a big score
Program
Creators
Content
NavigationEvery screen is a round pill
  1. Research
  2. Sales
  3. Marketing
HandoffsEach agent keeps its color
ButtonsPrimary, secondary, quiet, in two sizes
Approved0:38Three steps, no filterm@mira.makes· Oct 4128K4.8%92
In review1:04My desk after one monthd@deskbyjun· Oct 541K6.1%85
Rejected0:52Dinner in ten minutest@tovacooks· Oct 69.2K1.3%40No paid label
Post cardsViews, engagement and brief score, each in its color
NeutralStrongGoodWarnBad
BadgesNo blue one: blue is for actions

The colors

The hardest part to get right was what to do with the other colors.

I think I nailed it. I decided to do the same kind of colors for different stuff. Every color has one job, so you can read the screen before you read a word.

StrategyBlue
ResearchGreen
SalesOrange
MarketingPink
A personGrey
SparePurple
SpareRed
  • A bright tile is who did the work.Four agents, one color each. Grey is a person.
  • Blue is something you can press.Only the main action gets it. Every other button is pale.
  • A pale pill is how it is going.Green is good, yellow needs a look, red is a problem.
50#eff5ff
100#dce8fe
200#bdd4fd
300#8fb6fa
400#5e93f0
500#356ed8
600#2a5bc0
700#23499b
800#1e3c7c
900#182f5e
Canvas#ffffff
Soft#fafafb
Fill#f2f2f4
Line#ececef
Faint#71747c
Muted#5b5e66
Ink#101114

Nothing is flat

Every colored thing gets the same three moves.

A deeper base, a lit edge and a glow underneath in its own color. It is the same on a button, a tile and a medal, which is why they look like one family.

  1. ApproveFlat
  2. ApproveA deeper base
  3. ApproveLight from above
  4. ApproveA lit edge
  5. ApproveA glow underneath
  1. Flat
  2. A deeper base
  3. A lit edge
  4. A glow underneath
The same rule on two partsEach step adds one move to the one before it

The motion

The blue moves.

The fieldA slow shader in three stops of the blue, with grain
The lightMove your pointer: the blue only shows inside the letters

Six hours

It had to be fast, so it had to be small.

The whole project was 23 commits in one afternoon. The system is one stylesheet and one file of parts. The tabs and the icons came from libraries, so the hours went into how it looks and feels.

Start to finish

11:15 to 17:18

The first commit and the last one, on 7 October.

The whole system

413 lines

216 of styles and 197 of parts. There is no dark mode yet.