Okay so I finally got around to digging into this Ruben Berrios guy everyone seems to buzz about. Wanted to see what his big projects actually look like and try something similar, you know? Figured I’d just start building something step-by-step.
First Impressions & Finding Stuff
Started simple. Just typed his name into the search bar. Man, so much stuff popped up. Tons of articles, videos, even some kind of weird community forum talking about his projects. Felt a bit overwhelming. I clicked on a few that sounded technical.
One thing that kept showing up was his approach to design systems. Folks talked about it like it was magic or something. So I focused on that first. Watched a couple of videos where he broke down his thinking. Honestly? A lot of it seemed… well, basic common sense? But maybe that’s the point.
My Half-Baked Attempt
Feeling inspired (or maybe just restless), I fired up my code editor. Thought, “Okay, let’s try making a tiny little design system for a dummy site, like Ruben might.”
- Started small: Literally just defined two colors for buttons. Blue for “do it” actions, grey for “cancel.”
- Tried adding spacing rules: Ugh, this is where it got messy. How much padding around a small button vs a big button? Kept changing the numbers.
- Thought about typography: Decided to pick just two fonts. One for headings (went with something bold) and one for body text (something plain). Set sizes… this took way longer than I thought.
Ended up with a small CSS file full of my own made-up rules. Did it look as polished as his examples? Absolutely not. Mine looked kinda… bootleg. But hey, I defined the colors myself!
Key Thing I Noticed He Does
While watching more videos, this pattern kept hitting me. He doesn’t just build things randomly. He builds blocks. Like actual Lego pieces. A button style. A card layout. A navigation bar. Then he takes these blocks and puts them together in different ways for different projects.
Seemed obvious once I saw it, but honestly, it’s smarter than starting every single project completely from scratch. He just uses his own blocks over and over. Tweak a color? Change a font? Easy.
Putting It Together (Sort Of)
Feeling brave, I tried making a simple contact page using my own half-made “design system.”
- Dropped in a big heading (using my bold font).
- Wrote some body text (using my plain font).
- Slapped in a form field block (I hadn’t really defined this well… it looked off).
- Added my blue “Submit” button. At least that part looked consistent!
The page itself was… functional? But comparing it to screenshots of his work? Yeah, mine looked like a kid built it. The spacing was uneven, the text felt cramped in some places. But I did manage to use my own buttons!
What I Think Makes His Projects Key
Finally piecing it together, here’s what stuck with me:
- Blocks First: Seriously, he focuses on making rock-solid reusable parts. That’s the core.
- Documentation is King: Seeing how he writes down the rules for how to use those blocks? That’s the glue. Makes it useful for teams.
- Not Just Pretty: He actually uses his own systems to build things, not just show them off.
- Evolution: Looks like his stuff gets updated all the time. He tweaks it.
So yeah, I spent a whole evening basically making a messy little set of rules and using it on a wonky contact page. It’s a start. Learned more doing that than just reading articles. Might keep fiddling with my own mini-system thing. Maybe. My eyes started crossing by the end.
