back
155 comments
When we designed Chrome, since minimalism was our thing and screens used to be small, A LOT of time was spent on the total vertical space - thin titlebar, slightly bigger tabstrip, and a large toolbar. Lots of discussion, lots of questions

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

My favorite genre of graphic design is when you take a logo and work backwards to show the "very deeply thought about" construction, completely made up after the fact. The golden ratio is useful in that with a bit of fiddling you can fit pretty much anything to it. This is like catnip for "spiritual" types.
maybe the golden ratio was the friends we made along the way
I loved the minimalism of early Chrome, thank you so much for your work on that!

I wish this was still a priority for modern Chrome. Just because screens are bigger now doesn’t mean I want to waste that space.

Ah, explanations that are treated as justifications without actually justifying anything.

“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.)

What was the reasoning about not implementing vertical tabs much, much earlier? I use them now in the canary builds, but on 4k 32" screen it is not that critical as it was on the small 16:9 full hd screen. The vertical space used to be much scarcier than the horizontal.
Chrome is so much not a reference in design that we should take this take carefully
Ironically many of the website’s examples look worse than what they compare against. Taste is personal, I guess.
"lighting, rounding, color, and visual strength" along with "clarity, content-focused" etc. are used as hollow buzzwords just as much as "golden ratio"

The whole minimalism/flat movement from iOS 7 and Google's Material and Microsoft's Metro crap was frankly a lazy and weak copout, a give-up on trying to make nice looking UI that could also be functional.

Why is it that sci-fi has always had such beautiful UI since Star Trek but the real world is still so boring?

Hi everyone, I'm the creator of LiftKit. This project is EXTREMELY early and, as everyone has pointed out, not ready for production use. It's a solo project I work on in my free time. I'm a self-taught, so a lot of the weird choices you're seeing can be attributed to the decisions of someone who had never built something like this before.

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.

Hi Garrett,

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 :(

I like your design idea in principle but you said in the reddit thread 7 months ago in regards to rendering the components that "Besides the landing page itself, not yet. That's the next priority". Now you don't mention it as a priority anymore. It's a pretty big red flag for ui frameworks not to be able to render their ui components in their own docs.
This is a great idea and satisfying is the correct word to describe the homepage. Have you written about your process at all? I’ve been trying to use the golden ratio in iOS apps for a while and any insight might help
Here's a tip: any time you've got before/after screen grabs, don't do this thing where you've got to drag a line to switch between the two, don't have a fade, don't have a sliding transition, or anything like that. Just have it display one, then have a single button that you click to have it immediately display the other. Then when you click the button again, it goes back to displaying the first one again. Click, click, click - and your eyes do all the work for you.

(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 thought this was an unhinged parody of a design site, kinda surprised it's a real thing. Unfortunately the design isn't for me, things look off center and the overall "weight" of components feels off.
I wouldn't trust a UI framework where all of the components are shown as images instead of instances of the actual UI framework...
With the optical correction none/top thing, is that manually measuring the height of capital letters to correctly space everything, or just relying on the height of the font to be correct and respected in the glyphs? Because having worked with the internals of fonts, a lot of them just make up numbers for stuff and then don't actually respect them. You can see how the glyphs don't have to actually abide by any of the numbers from the h in "Checklist", which extends above the capital letters. It makes the font look better, but it makes them a nightmare to work with
I tried to find pricing for it (the top "contact sales" is a no-starter; too much initial friction. Just tell me how much it costs?! At the footer is a pricing calculator... I asked for pricing for 10 top-level pages and 5 sub-level pages (they explain the difference)... came out to a whopping $16,500 (you're reading that right... SIXTEEN THOUSAND). No thanks.
There is a great research paper on the topic https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=T...
While the golden ratio thing is a bit of a gimmick, the components look gorgeous and really well laid out
> In LiftKit, everything derives from the golden ratio, from margins to font size to border radius and beyond. Everything renders in perfect proportion to everything else, creating a unique sense of harmony you can’t get anywhere else.

Not sure if this is irony or not.

One tiny thing I don't see many UI libraries do when loaded with rounded corners: fix nested rounded boxes by adding the size of the gap between the outer and inner boxes to the border radius. Otherwise, you end up with the slightly off-kilter appearance of the snackbar component for example. [0] Chrome recently added this two-up pane layout for tabs, and it has this exact issue as well. [1]

[0] https://www.chainlift.io/components/snackbar

[1] https://i.imgur.com/uPuTtNb.png

I don't think their homepage looks good, and for so much attention to detail the padding around text titles and other spacing, specially on mobile, doesn't look good. Not of the elements they showcase but of their own landing page.
Interesting idea, but I haven't found a compelling reason that phi is inherently superior, aesthetically speaking. Seems more like a marketing spiel.

That said, it still looks good.

I really wish they would start with "this is for next.js/react".

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.

I'd expect the website for a design system to look beautiful (or oddly satisfying, if that's the goal here) but this one doesn't. Tailwind's website looks better.

[1]: https://tailwindcss.com/

You got some shitty comments in here but you handled them well. While I think there is _some_ valid criticism, I think what you've built is pretty cool. I'd like to be able to test this without next JS. Is a CDN option planned for those wanting a quick start?
Doesn't look bad but it's not semantic and using utility classes like tailwind
Cool stuff, I think I'll never be able to unsee the extra top padding all over the web now haha

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.

> Confusing. Inscrutible. But groundbreaking if we can pull it off.

You know what gets lift? Correct spelling (inscrutable)! Unless they chose that word specifically to misspell but that's meeting more than halfway.

If the site stutters when I scroll in my browser [1], it's a great endorsement for the underlying library, right?

[1] M3Pro, Firefox. No, I'm not trying in Chrome.

Things I look for in a UI library:

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.

- put an agent with it and that would make for one hell of a bolt, lovable and v0 competitor that only generates golden ratio UIs
This scrolls alright in Chrome but lags horribly when scrolling on Firefox. Especially when the larger animations come into view.
Wow AGPL for CSS ui framework!!
ok npm. so it's a web thing. I had hoped it would be a UI kit for computers
Seems like a good project, too bad it uses next.js
"golden ratio" my ass, excuse my french, but you should let the design speak for itself, and the design here is just mediocre at best.

What a weird joke of a company is this.

Looks like the work of modern Pythagoreans
>In LiftKit, everything derives from the golden ratio,

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.

Just in time for Steel Ball Run
The creator of this is a friend of mine and just gonna chime in that he’s a fantastic and talented dude. Nice surprise to see his project listed here! I think he’s working on something new called Liftkit Studio too I’m looking forward to.

He has a cool YouTube channel too. Check out “The Secret Science of Perfect Spacing”

https://youtu.be/9ElrcTtAxzA?si=kbAzQDGQSCCqymTO

Party on

That's pseudoscientific nonsense for people who like to look at pictures with spiral overlays and go "woah, everything is connected!"
just want to say the website is VERY good looking imo
Sorry to pile on, but I also think that changing the background color in the before/after feels like you're purposefully trying to make the before one look worse. Like when in weight loss photos people don't smile and pose nicely in the before photos but they do in the after.
Requires nextjs, :(
I can't tell which one is supposed to be good, and the design is not intuitive enough for me to know which is the LiftKit (the one I'm supposed to prefer).

I'll stick to LLM design, thank you very much