8 ms·

LiftKit – UI where "everything derives from the golden ratio"

helterskelter 8mo ago
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.
- Garrett_Mack 8mo ago
  You don't actually HAVE to use phi. That's just the default global scale factor. You're correct that it's kinda marketing spiel. I figured I needed an angle to stand out in the crowded design system world and now I'm paying the consequences in this absolute roastfest, lol. 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.
moonlighter 8mo ago
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.
- khimaros 8mo ago
  this seems to be for custom design services. IANAL but the libraries and design language seems to be open source and free to use.
  - khimaros 8mo ago
    https://github.com/Chainlift/liftkit https://github.com/Chainlift/liftkit
    - cchance 8mo ago
      Next.js without Tailwind ... why not just make it a fuckin tailwind plugin lol
      - Garrett_Mack 8mo ago
        Because I didn't/don't know tailwind super well. There is a community plugin, though. https://github.com/jellydeck/liftkit-tailwind https://github.com/jellydeck/liftkit-tailwind
  - lelandfe 8mo ago
    Indeed; if you look at the top nav this is a site that's an agency first and a design system second. This design system really deserves its own site.
    - Garrett_Mack 8mo ago
      Agreed. New docs are under construction and they'll be posted on a separate website. The agency came first and then liftkit came after, which is why it's hosted on there now. But I'm shutting down agency operations and so the whole thing will be liftkit eventually.
cush 8mo ago
While the golden ratio thing is a bit of a gimmick, the components look gorgeous and really well laid out
- Garrett_Mack 8mo ago
  Thanks! Yep, super gimmick. I picked golden ratio because I thought it was a good eyecatcher. 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.
candiddevmike 8mo ago
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.
- cluckindan 8mo ago
  Agreed. I’ve spent considerable time on scale-based design, and 1.618 always feels too large of an interval.
  - carshodev 8mo ago
    Yeah I tried using a similar "golden rule" after reading a design article about it. I based my css variable sizes on it but I kept having to use manual px and rem values instead because stuff just never felt correct.
  - stevage 8mo ago
    1.618 is complete nonsense that people hang on to because they want it to be true. It doesn't stack up, neither in ancient Greek times, nor in the renaissance, nor today. It's a dumb idea that needs to die.
    - Garrett_Mack 8mo ago
      but nautilus shells pretty
      - jheriko 8mo ago
        [dead]
  - Garrett_Mack 8mo ago
    Yep. It's way too large in linear scales. but if youre using an asymmetrical scale, it can be quite useful indeed. 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. https://youtu.be/r1DANFZYJDw https://youtu.be/r1DANFZYJDw
nickradford 8mo ago
I wouldn't trust a UI framework where all of the components are shown as images instead of instances of the actual UI framework...
- tkzed49 8mo ago
  I clicked on Dropdown, thinking it's one of the more complex things to implement. It doesn't even have a picture.
  - deepfriedrice 8mo ago
    I did the same with Select. No picture and the API doesn't make sense. The options are specified twice. https://www.chainlift.io/components/select https://www.chainlift.io/components/select
    - Garrett_Mack 8mo ago
      Yeah it's a huge problem. Not accessible either. Idk what I was thinking. The next release will use radix primitives.
      - tkzed49 8mo ago
        Hey man, if you ever see this, not your fault it ended up on HN early! I'm sure this is solid for your usecase. That's just something that would dissuade me from choosing it!
      - nickradford 8mo ago
        Hey! I didn't realize this wasn't even posted by the creator of the library. Building shit and launching is hard, don't let it dissuade you from putting stuff out there though! Also, check out base-ui. Radix is fine, but base ui has generally better primitives and is being actively developed
- MomsAVoxell 8mo ago
  Yes, I too felt that way as I began to read, it was an immediate disappointment, kind of, that the UI wasn’t on full display, front and center. 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…
Nekorosu 8mo ago
There is a great research paper on the topic https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=The%20golden%20ratio%20or%20golden,the%20golden%20number) https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=T...
absqueued 8mo ago
Wow AGPL for CSS ui framework!!
tom_ 8mo ago
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-between-Undo-and-Step-Backwards-The-consequence-of-this-is-that-you-cant-repeatedly-hit-Control-Z-to-undo-but-rather-the-awkward-Control-Z-Control-Alt-Z-Control-Alt-Z 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.)
- accoil 8mo ago
  I've been wondering that myself. The descriptions seem to indicate that fully dragged to the left is liftkit, but my first assumption was that would be fully dragged to the right.
  - reactordev 8mo ago
    it's bad UX. There's a little tiny arrow on the line's grab indicator showing which "side" you should look at. You can barely see it. Below there's the two labels floated to either side...
    - tom_ 8mo ago
      If you're referring to the <·> thing, you could well be right? I figured that was merely an indication that you could drag the thing sideways! (And I'm clearly not the only one that feels this aspect of the site would benefit from another pass...)
moribvndvs 8mo ago
Requires nextjs, :(
- theusus 8mo ago
  It doesn’t
  - cchance 8mo ago
    Next.js without Tailwind
- Garrett_Mack 8mo ago
  The CSS is vanilla at least. Look up liftkit-core.css in the repo and you can adapt it easily to any other project that supports CSS.
claytongulick 8mo ago
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.
- Garrett_Mack 8mo ago
  I didn't know what web components were until after I'd released it for React. I was working in a complete vacuum until I put this out there, and then I started to get involved with the community. Before that I was pretty much the only designer/techie I knew. I'm not a professional developer. I'm just a designer who knows enough TS to piece things together. 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.
Garrett_Mack 8mo ago
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 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_months_building_a_design_system_that/ 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 https://www.youtube.com/watch?v=r1DANFZYJDw I'll reply to folks as best I can.
- rablackburn 8mo ago
  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 :(
  - Garrett_Mack 8mo ago
    Aw. Got me emotional over here. Thank you for the support! Definitely won't give up. And definitely do take the feedback as a compliment!
    - redanddead 8mo ago
      Yeah seriously, clearly seeing the heart that went into this To the moon Macky boy!
dmd 8mo ago
Pepsi would love it. https://www.goldennumber.net/wp-content/uploads/pepsi-arnell-021109.pdf https://www.goldennumber.net/wp-content/uploads/pepsi-arnell...
learyjk 8mo ago
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 https://youtu.be/9ElrcTtAxzA?si=kbAzQDGQSCCqymTO Party on
- Garrett_Mack 8mo ago
  hi fren
stevage 8mo ago
>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.
- Garrett_Mack 8mo ago
  Hi, I'm the author, it me. You're right, I need to be clearer that golden ratio doesn't automatically equal beautiful. It's not sacred geometry. It's just pretty. I like it. And studies show people at large tend to find the proportions pleasing. 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.
  - stevage 8mo ago
    > And studies show people at large tend to find the proportions pleasing. I don't think that's the case - or at least, not well-designed studies. There's nothing to suggest that people prefer 1.618 more than 1.61 or even 1.6, and probably not 1.5. It's like if we found people like the colour blue and then claimed that people like the shade of Mary's veil or something.
    - zigzag312 8mo ago
      Brains are great at pattern recognition (lots of studies). This includes ratios. Your shade of color is not a good example, because it's just a single value, not relative to anything on its own. But if you have multiple colors, there will be various relationships/ratios between physical properties of the colors (wavelength, intensity etc.). Similar in music, 1:2 frequency ratio is recognized as an octave. Strongest ratios (i.e. strong pattern) are usually the simple ratios like 1:2, 1:3 & 2:3, etc. However, science hasn't been able to find out, if we can recognize Golden ratio because of the Fibonacci sequence pattern that is often found in nature or if it's to us just a ratio that is close to a simpler ratio like 5:3.
gavmor 8mo ago
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.
- Garrett_Mack 8mo ago
  Thanks! It'll get there eventually, for sure. Feedback like the stuff in this thread helps a lot.
gmurphy 8mo ago
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
- chrismorgan 8mo ago
  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.)
  - pjmlp 8mo ago
    You only have to watch the WWDC videos from the designers regarding Liquid Glass, and appreciate how much "improved" the macOS with Tahoe experience feels like in practice. Same applies to sessions on Fluent or Material designs, and how they end up on the respective OSes.
    - gyomu 8mo ago
      The whole design rhetoric of the recent years is just so bad. It's all vague feel-words that are straight out of a marketing playbook and don't communicate anything concrete. The Liquid Glass guidance is so emblematic of this. What in the slop is "providing a more dynamic and expressive user experience that elevates the content" even supposed to mean when we're talking about an app that shows a scrollview with a tab bar and a few buttons? Reading the early 2010s HIGs is such a breath of fresh air in comparison, where it's just a succession of clear statements like "Controls should look tappable. iOS controls, such as buttons, pickers, and sliders, have contours and gradients that invite touches". Just two entirely different schools of thought. One based on research, evidence, clear actionable items; the other is just pure vibes. Something of value's been truly lost along the way.
efskap 8mo ago
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.
- Garrett_Mack 8mo ago
  You've got it. It doesn't have to be golden. That was just useful for other personal preference reasons.
tehsuk 8mo ago
This scrolls alright in Chrome but lags horribly when scrolling on Firefox. Especially when the larger animations come into view.
- Garrett_Mack 8mo ago
  That's it. I'm switching to unstyled HTML. I can't take this anymore
vasco 8mo ago
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.
baalimago 8mo ago
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
Yasuraka 8mo ago
Just in time for Steel Ball Run
jheriko 8mo ago
[dead]
cantalopes 8mo ago
Doesn't look bad but it's not semantic and using utility classes like tailwind
- Garrett_Mack 8mo ago
  It KINDA does. But if you read the current docs you'll see it's clearly a rudimentary precursor to the sophistication tailwind has
nottorp 8mo ago
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.
- Garrett_Mack 8mo ago
  Well obviously you need to buy an M4. /s
voidUpdate 8mo ago
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
Hendrikto 8mo ago
> 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.
- aetherspawn 8mo ago
  I’m not sure, the moment I opened the page there was something unusually satisfying about the buttons (that had bothered me about shadcn), so I guess there is some method to the madness.
Surac 8mo ago
ok npm. so it's a web thing. I had hoped it would be a UI kit for computers
- Garrett_Mack 8mo ago
  I wish so badly that I knew how to do that
notenlish 8mo ago
Seems like a good project, too bad it uses next.js
Netcob 8mo ago
That's pseudoscientific nonsense for people who like to look at pictures with spiral overlays and go "woah, everything is connected!"
amadeuspagel 8mo ago
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/ https://tailwindcss.com/
_el1s7 8mo ago
"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.
- Garrett_Mack 8mo ago
  Weird joke is kinda my whole vibe so sounds like mission accomplished!
findalex 8mo ago
> 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.
- laksjhdlka 8mo ago
  This line alone made me want to read the rest of the page, so good work! Hilarious and self-deprecating is how I took it.
  - findalex 8mo ago
    It tickled me too - and TBH I got sidetracked by the misspelling when my browser pointed it out in the HN comment box :)
graypegg 8mo ago
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 https://www.chainlift.io/components/snackbar [1] https://i.imgur.com/uPuTtNb.png https://i.imgur.com/uPuTtNb.png
djfdat 8mo ago
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.
replwoacause 8mo ago
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?
upcoming-sesame 8mo ago
just want to say the website is VERY good looking imo
EricRiese 8mo ago
Looks like the work of modern Pythagoreans
vivzkestrel 8mo ago
- 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

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.

Garrett_Mack 8mo ago
You don't actually HAVE to use phi. That's just the default global scale factor. You're correct that it's kinda marketing spiel. I figured I needed an angle to stand out in the crowded design system world and now I'm paying the consequences in this absolute roastfest, lol. 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.

moonlighter 8mo ago

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.

khimaros 8mo ago
this seems to be for custom design services. IANAL but the libraries and design language seems to be open source and free to use.
- khimaros 8mo ago
  https://github.com/Chainlift/liftkit https://github.com/Chainlift/liftkit
  - cchance 8mo ago
    Next.js without Tailwind ... why not just make it a fuckin tailwind plugin lol
    - Garrett_Mack 8mo ago
      Because I didn't/don't know tailwind super well. There is a community plugin, though. https://github.com/jellydeck/liftkit-tailwind https://github.com/jellydeck/liftkit-tailwind
- lelandfe 8mo ago
  Indeed; if you look at the top nav this is a site that's an agency first and a design system second. This design system really deserves its own site.
  - Garrett_Mack 8mo ago
    Agreed. New docs are under construction and they'll be posted on a separate website. The agency came first and then liftkit came after, which is why it's hosted on there now. But I'm shutting down agency operations and so the whole thing will be liftkit eventually.

cush 8mo ago

While the golden ratio thing is a bit of a gimmick, the components look gorgeous and really well laid out

Garrett_Mack 8mo ago
Thanks! Yep, super gimmick. I picked golden ratio because I thought it was a good eyecatcher. 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.

candiddevmike 8mo ago

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.

cluckindan 8mo ago
Agreed. I’ve spent considerable time on scale-based design, and 1.618 always feels too large of an interval.
- carshodev 8mo ago
  Yeah I tried using a similar "golden rule" after reading a design article about it. I based my css variable sizes on it but I kept having to use manual px and rem values instead because stuff just never felt correct.
- stevage 8mo ago
  1.618 is complete nonsense that people hang on to because they want it to be true. It doesn't stack up, neither in ancient Greek times, nor in the renaissance, nor today. It's a dumb idea that needs to die.
  - Garrett_Mack 8mo ago
    but nautilus shells pretty
    - jheriko 8mo ago
      [dead]
- Garrett_Mack 8mo ago
  Yep. It's way too large in linear scales. but if youre using an asymmetrical scale, it can be quite useful indeed. 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. https://youtu.be/r1DANFZYJDw https://youtu.be/r1DANFZYJDw

nickradford 8mo ago

I wouldn't trust a UI framework where all of the components are shown as images instead of instances of the actual UI framework...

tkzed49 8mo ago
I clicked on Dropdown, thinking it's one of the more complex things to implement. It doesn't even have a picture.
- deepfriedrice 8mo ago
  I did the same with Select. No picture and the API doesn't make sense. The options are specified twice. https://www.chainlift.io/components/select https://www.chainlift.io/components/select
  - Garrett_Mack 8mo ago
    Yeah it's a huge problem. Not accessible either. Idk what I was thinking. The next release will use radix primitives.
    - tkzed49 8mo ago
      Hey man, if you ever see this, not your fault it ended up on HN early! I'm sure this is solid for your usecase. That's just something that would dissuade me from choosing it!
    - nickradford 8mo ago
      Hey! I didn't realize this wasn't even posted by the creator of the library. Building shit and launching is hard, don't let it dissuade you from putting stuff out there though! Also, check out base-ui. Radix is fine, but base ui has generally better primitives and is being actively developed
MomsAVoxell 8mo ago
Yes, I too felt that way as I began to read, it was an immediate disappointment, kind of, that the UI wasn’t on full display, front and center. 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…

Nekorosu 8mo ago

There is a great research paper on the topic https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=The%20golden%20ratio%20or%20golden,the%20golden%20number) https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=T...

absqueued 8mo ago

Wow AGPL for CSS ui framework!!

tom_ 8mo ago

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-between-Undo-and-Step-Backwards-The-consequence-of-this-is-that-you-cant-repeatedly-hit-Control-Z-to-undo-but-rather-the-awkward-Control-Z-Control-Alt-Z-Control-Alt-Z 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.)

accoil 8mo ago
I've been wondering that myself. The descriptions seem to indicate that fully dragged to the left is liftkit, but my first assumption was that would be fully dragged to the right.
- reactordev 8mo ago
  it's bad UX. There's a little tiny arrow on the line's grab indicator showing which "side" you should look at. You can barely see it. Below there's the two labels floated to either side...
  - tom_ 8mo ago
    If you're referring to the <·> thing, you could well be right? I figured that was merely an indication that you could drag the thing sideways! (And I'm clearly not the only one that feels this aspect of the site would benefit from another pass...)

moribvndvs 8mo ago

Requires nextjs, :(

theusus 8mo ago
It doesn’t
- cchance 8mo ago
  Next.js without Tailwind
Garrett_Mack 8mo ago
The CSS is vanilla at least. Look up liftkit-core.css in the repo and you can adapt it easily to any other project that supports CSS.

claytongulick 8mo ago

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.

Garrett_Mack 8mo ago
I didn't know what web components were until after I'd released it for React. I was working in a complete vacuum until I put this out there, and then I started to get involved with the community. Before that I was pretty much the only designer/techie I knew. I'm not a professional developer. I'm just a designer who knows enough TS to piece things together. 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.

Garrett_Mack 8mo ago

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 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_months_building_a_design_system_that/ 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 https://www.youtube.com/watch?v=r1DANFZYJDw I'll reply to folks as best I can.

rablackburn 8mo ago
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 :(
- Garrett_Mack 8mo ago
  Aw. Got me emotional over here. Thank you for the support! Definitely won't give up. And definitely do take the feedback as a compliment!
  - redanddead 8mo ago
    Yeah seriously, clearly seeing the heart that went into this To the moon Macky boy!

dmd 8mo ago

Pepsi would love it. https://www.goldennumber.net/wp-content/uploads/pepsi-arnell-021109.pdf https://www.goldennumber.net/wp-content/uploads/pepsi-arnell...

learyjk 8mo ago

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 https://youtu.be/9ElrcTtAxzA?si=kbAzQDGQSCCqymTO Party on

Garrett_Mack 8mo ago
hi fren

stevage 8mo ago

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

Garrett_Mack 8mo ago
Hi, I'm the author, it me. You're right, I need to be clearer that golden ratio doesn't automatically equal beautiful. It's not sacred geometry. It's just pretty. I like it. And studies show people at large tend to find the proportions pleasing. 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.
- stevage 8mo ago
  > And studies show people at large tend to find the proportions pleasing. I don't think that's the case - or at least, not well-designed studies. There's nothing to suggest that people prefer 1.618 more than 1.61 or even 1.6, and probably not 1.5. It's like if we found people like the colour blue and then claimed that people like the shade of Mary's veil or something.
  - zigzag312 8mo ago
    Brains are great at pattern recognition (lots of studies). This includes ratios. Your shade of color is not a good example, because it's just a single value, not relative to anything on its own. But if you have multiple colors, there will be various relationships/ratios between physical properties of the colors (wavelength, intensity etc.). Similar in music, 1:2 frequency ratio is recognized as an octave. Strongest ratios (i.e. strong pattern) are usually the simple ratios like 1:2, 1:3 & 2:3, etc. However, science hasn't been able to find out, if we can recognize Golden ratio because of the Fibonacci sequence pattern that is often found in nature or if it's to us just a ratio that is close to a simpler ratio like 5:3.

gavmor 8mo ago

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.

Garrett_Mack 8mo ago
Thanks! It'll get there eventually, for sure. Feedback like the stuff in this thread helps a lot.

gmurphy 8mo ago

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

chrismorgan 8mo ago
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.)
- pjmlp 8mo ago
  You only have to watch the WWDC videos from the designers regarding Liquid Glass, and appreciate how much "improved" the macOS with Tahoe experience feels like in practice. Same applies to sessions on Fluent or Material designs, and how they end up on the respective OSes.
  - gyomu 8mo ago
    The whole design rhetoric of the recent years is just so bad. It's all vague feel-words that are straight out of a marketing playbook and don't communicate anything concrete. The Liquid Glass guidance is so emblematic of this. What in the slop is "providing a more dynamic and expressive user experience that elevates the content" even supposed to mean when we're talking about an app that shows a scrollview with a tab bar and a few buttons? Reading the early 2010s HIGs is such a breath of fresh air in comparison, where it's just a succession of clear statements like "Controls should look tappable. iOS controls, such as buttons, pickers, and sliders, have contours and gradients that invite touches". Just two entirely different schools of thought. One based on research, evidence, clear actionable items; the other is just pure vibes. Something of value's been truly lost along the way.

efskap 8mo ago

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.

Garrett_Mack 8mo ago
You've got it. It doesn't have to be golden. That was just useful for other personal preference reasons.

tehsuk 8mo ago

This scrolls alright in Chrome but lags horribly when scrolling on Firefox. Especially when the larger animations come into view.

Garrett_Mack 8mo ago
That's it. I'm switching to unstyled HTML. I can't take this anymore

vasco 8mo ago

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.

baalimago 8mo ago

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

Yasuraka 8mo ago

Just in time for Steel Ball Run

jheriko 8mo ago

[dead]

cantalopes 8mo ago

Doesn't look bad but it's not semantic and using utility classes like tailwind

Garrett_Mack 8mo ago
It KINDA does. But if you read the current docs you'll see it's clearly a rudimentary precursor to the sophistication tailwind has

nottorp 8mo ago

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.

Garrett_Mack 8mo ago
Well obviously you need to buy an M4. /s

voidUpdate 8mo ago

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

Hendrikto 8mo ago

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

aetherspawn 8mo ago
I’m not sure, the moment I opened the page there was something unusually satisfying about the buttons (that had bothered me about shadcn), so I guess there is some method to the madness.

Surac 8mo ago

ok npm. so it's a web thing. I had hoped it would be a UI kit for computers

Garrett_Mack 8mo ago
I wish so badly that I knew how to do that

notenlish 8mo ago

Seems like a good project, too bad it uses next.js

Netcob 8mo ago

That's pseudoscientific nonsense for people who like to look at pictures with spiral overlays and go "woah, everything is connected!"

amadeuspagel 8mo ago

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/ https://tailwindcss.com/

_el1s7 8mo ago

"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.

Garrett_Mack 8mo ago
Weird joke is kinda my whole vibe so sounds like mission accomplished!

findalex 8mo ago

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

laksjhdlka 8mo ago
This line alone made me want to read the rest of the page, so good work! Hilarious and self-deprecating is how I took it.
- findalex 8mo ago
  It tickled me too - and TBH I got sidetracked by the misspelling when my browser pointed it out in the HN comment box :)

graypegg 8mo ago

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 https://www.chainlift.io/components/snackbar [1] https://i.imgur.com/uPuTtNb.png https://i.imgur.com/uPuTtNb.png

djfdat 8mo ago

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.

replwoacause 8mo ago

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?

upcoming-sesame 8mo ago

just want to say the website is VERY good looking imo

EricRiese 8mo ago

Looks like the work of modern Pythagoreans

vivzkestrel 8mo ago

- 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