Telling people the height ratios between them followed the golden ratio was a very convenient way to shortcut the bikeshedding and get to "aha, very nice"
The trick was it didn't follow the golden ratio at all because the golden ratio is not some magic number that leads to balance and peace - lighting, rounding, color, and visual strength all dramatically outweigh it
“Vertical rhythm” in website layout. Utter nonsense. Valuable in print layout (for adjacent columns or double-sided paper), completely useless in digital (unless you have side-by-side columns with headings or pictures mixed in, but this is seldom seen outside print, partly because the web doesn’t support it well).
“Modular scales” in choosing font sizes. Typically worse than utter nonsense, because you want heading levels to be distinctive, and modular scales will harm this by forcing lower heading levels to be too small.
Force all your app icons into a rounded square or squircle or circle, because consistency. No! Now you can’t find anything easily. Android was so much better before that nonsense started.
Monochrome icons deliberately designed to look the same. Now they’re unmemorable. Colour was a useful signal.
(This comment is generic; I’m not saying anything about LiftKit here, for or against.)
LIFTKIT IS FREE AND OPEN SOURCE. The website's just out of date.
https://github.com/Chainlift/liftkit
Most of the feedback folks are providing here was raised about 6 months ago on Reddit and is actively being worked on. You can check it out here: https://www.reddit.com/r/webdev/comments/1m41arx/i_spent_18_...
KNOWN ISSUES INCLUDE: - Docs are a nightmare, screenshots are ridiculous instead of real components - Components are inaccessible spaghetti
CURRENT PRIORITIES: - Rebuilding with radix primitives - Improving docs
TO LEARN MORE: - This youtube video explains the gist of the system (though it's also a little outdated) https://www.youtube.com/watch?v=r1DANFZYJDw
I'll reply to folks as best I can.
I love the project -- even if I agree with a lot of the critique in this thread. Critique that is very high quality, professional feedback that you should take as a very big compliment.
I think every Front End developer or designer dreams of this idea(+) at some point, but you're the madlad who actually did it. It feels like you've posted an implementation of everyone's baby and tugged at our heart-strings ;)
It's fantastic, keep going.
(+) a truly consistent design system that Just Works. See GEB for why not :(
Check out Base UI (or React Aria) instead.
Compare like with like, not a badly colored and low contrast version of the competition against yours.
(Not unrelated: answer from Andrei Herasimchuk at https://www.quora.com/Why-does-Adobe-Photoshop-differentiate...)
Also: I can't work out which image is which. Taking the first image as an example: we've got MATERIAL-STYLE on the left, and LIFTKIT on the right. But what's the left? Does this mean that when you drag the line to the right, revealing the left image, you're looking at MATERIAL-STYLE? Or does this mean you see MATERIAL-STYLE when you drag the line to the left?
(This might seem like pointless quibbling, but this thing bills itself as the The UI Framework for Perfectionists.)
I admit I don't do web stuff, so perhaps this is hard to do. But I think it's the ideal. Before/after comparisons are very easy to assess if you can flick between the two cases and let your eyes show you the differences. The value of having an image that's part one and part the other (and two completely separate parts!) seems a bit questionable.
(My line of work means I'm unlikely to end up a customer, so you don't have to pay attention to my opinions.)
I learnt about it in Japan where proof-readers and editors would (or do) quickly lift a top page up and down to spot mistakes with kanji (pictographs). And sure enough, even from a page of dense script the dissonance of the error really does pop out at you.
I likewise tucked that little trick into my belt -- it comes in useful anytime you're trying to manually spot a pattern across complex data. This technique has the same "vibe" as FFTs to me: it's just neat feeling like you're getting computation from the universe for free.
Solar PV in a similar category: free electrons if you can arrange the magic rocks just right :)
Instant "spot the difference" solve.
// Long time in print and digital agency
Don't even have a button. Just put both items next to each other.
OTOH, I'm on touch screen (iPad/iOS26/WebKit) and it didn't go up and down, it went side to side.
As other feedback, the dumpster fire and deprecation warnings in the docs make me want to try this. I find builder-to-builder candor refreshingly helpful, treating your doc reader like an actual partner instead of like a euphemism. Appreciate your same candor throughout these comments.
Chainlift > Agency Services > Team menu option seems inert.
I'm not on LinkedIn all that much but I'm there.
I see it a lot in photography, to show before/after processing - but what you want to be able to quickly compare are the same part of an image with and without the processing applied.
One of the photography tools I make is a LUT viewer/converter - and while I didn't have the slider at first, I guess it's standard enough at this point that people asked for it and I added it.
But I made two additions to it that make it more useful IMO:
- have labels on the left/right top corners, so it's immediately clear which version of the image you're looking at
- click and hold on the image to preview the full unprocessed version; release to revert to the view. That makes it easy to quickly compare the two versions of the same spot of a photo. (similar to what you suggest, but non-latching)
I have a video of it in action here:
(And I'm clearly not the only one that feels this aspect of the site would benefit from another pass...)
Suggestion to devs: put the label “material-style” in the lower left of its image and “liftkit” in the lower right of its image, and cover them appropriately as the slider moves, and then it'll be clear which framework the current image (or portion of it) belongs to.
If you were going to do this for the slider approach you can arrange the labels to the `block-start` and `block-end` of the image and support non-RTL scripts/languages natively.
You don't have to use it though. The system works with any scale factor. 1.618 is just the default.
This video explains in detail how the system works with lots of visual aids.
The next release will use radix primitives.
LiftKit's free forever to anyone. It's just early stages and bad.
The idea was that if a company wanted to hire us for direct support, we'd do that. But the problems are: [A] no enterprise in their right minds would use this thing in its current state and [B] "us" is me and I don't have time to do that anymore
I wouldn’t trust a framework that requires me to involve myself with JavaScript, nextJS, and React, also… but I am generally of the opinion that a framework pitching itself as a UI kit, must pretty much not be a plugin for a web browser…
This design system really deserves its own site.
There is a community plugin, though. https://github.com/jellydeck/liftkit-tailwind
That calculator is for agency services. LiftKit itself is free.
Good luck! I always wanted something like this, too.
I don't even know if the golden ratio itself is that magical, but I do see a lot of value in picking one ratio and sticking to it everywhere.
1. Clean, expressive interface, 2. Extensive documentation.
That being said, good on you for shipping! I would like to try it just for the mystery factor.
I'll stick to LLM design, thank you very much
That said, it still looks good.
The only real reason I use phi is because it's very useful in asymmetrical typography scaling. At small type levels, differences in font size are more visually apparent than at large sizes. In other words, 14px vs 16px looks more noticeable to me than 38px vs 40px. So, my goal was to find a rem coefficient that would provide large jumps at large sizes, but I could also use the square root of it to derive smaller increments. I tried phi on a whim one day and realized I liked it.
I also went to apple's HIG and looked at the type specs for MacOS and put them into a spreadsheet. I found that the proportions of line height to font size hovered around 1.272 (which is the sq root of 1.618, or phi). Then I found similar patterns in the ratios of difference font sizes to each other (I think. It was back in 2022).
I also did a bunch of personal tests where I'd try to eyeball line heights and padding and stuff without snapping or looking at the metrics, and my preferences kept landing around golden ratio proportions. Biased? 100%. But I haven't got access to focus groups, and every time I asked my boyfriend to try it for me he'd be all like "please get a job you promised you'd work on your resume today"
So then I looked into other research. I can't find the study because I unpublished the article where I linked it, like a dumbass, but studies have shown that laypeople can tell the difference between abstract art based on rules like fractal symmetry and the golden ratio versus art made by children or animals at a rate of about 60% accuracy. Im on my phone right now but if you're curious I'll gladly look it up for you. I took that to mean "well, if we're entering an age of AI generated interfaces, then eventually we'll need to distill the essence of what looks good into certain mathematical principles so that there's a quantifiable "baseline" for quality that models can rely on. Golden ratio!" (Note: I do not know how AI actually works)
Finally, I got obsessed with that damn material button. There were ads on BART for some Google thing showing a button and it just looked off center to me. It haunted me for weeks. I couldn't stop looking at it. So I thought I'd try finding a reliable way to achieve the correct optical offset, but programmatically, so a designer wouldn't just have to do eyeball every button every time.
So, it's not totally baseless. But it's not a magic number either.
To be clear; You don't HAVE to use the golden ratio. You can set your global scale factor to anything you want in /liftkit-core.css. I just use 1.618 because I like it.
He has a cool YouTube channel too. Check out “The Secret Science of Perfect Spacing”
https://youtu.be/9ElrcTtAxzA?si=kbAzQDGQSCCqymTO
Party on
I don't think the authors realise the extent to which their product, which looks well made and useful, is being completely undermined with this nonsensical pseudoscience.
It's just a rule of thumb, that's all. I just went crazy on the copywriting because I thought I'd need to in order to get the kit to stand out.
I have now been extremely informed that this is not the case.
I had to dig through the docs and get to the installation instructions just to find out that it's React only.
It looks great, but I'm always confused why design system folks wouldn't base everything off web components, which work with almost any framework.
So having it for React/NextJS isn't an affirmative decision. It's just the only thing I knew how to do at the time. After the first launch last summer I had a couple folks reach out to help port to SvelteKit and Vue, but you know how it is. People get busy.