r/DesignSystems

Am having a dilema and conversation with a dev I work with.

He doesn't want icons to have internal padding and has built the components without it. However all of out figma icons do, and we've defined 5 boundary box sizes where the icon sits inside.

Tbh I prefer not having internal padding, as it is cleaner to use even from a design perspective when aligning itmes etc.

However all design systems seem to use icons with internal padding, and guidance also says this. For example, Google Material UI recommends to have 24x24px frames for the icons and that you add padding so that your icon is 20x20px inside the frame

Any opinionated thoughts I can gather? Thanks!

https://preview.redd.it/eqelkuw7h2uh1.png?width=577&format=png&auto=webp&s=78b7e1a1e9665dc8df98e8819aee53685610e389

We have a pretty decent design system up and running for our AI based development at the component level. It currently consists of:

1. tokens (+ the CSS)
2. UI component library (react components along with some guidelines)
3. "Patterns" (which, at the moment, are essentially 'objects on a page that may consist of one or more components + additional layout elements)

For an example of patterns:

• site navigation
• custom data labelling
• page footer
• etc

We now want to accommodate a higher level of instructions. Essentially, building upon what we have to create content and object layouts and even full page templates.

I'm curious as to how you may be doing that. Some specific questions:

• Are you using any specific terminology? Right now we're thinking of sticking with 'patterns' and possibly 'page templates'. Maybe with some sort of 'content template' in between. But not sure how important these semantics are for an agent (let alone a human).
• Do these more application-centric page level guidelines exist in your design system? In the application development environment? A bit in both?
• Are you using any formal type of documentation for the agent to help it quickly figure out what it should be using for content type 'x' with minimal token usage?

I'm building a design system in vanilla CSS and web components (11ty, no framework), and I'm trying to find out where other people lose the most time. For me it was token naming, accessible date pickers, and carousels.

What's the one problem that cost you the most, and what did you wish existed to fix it?

Some detail on mine, in case it helps:

• Token naming and tiers (primitive → semantic → component). I rewrote my icon variables twice before the structure stopped fighting me.
• Accessible date pickers. Native input vs custom, ISO values, min/max, keyboard behaviour.
• Carousels. Moving to native scroll-snap deleted a lot of JS.

I'm thinking about writing short guides that each solve one specific problem like these, instead of another "complete guide". I'd rather hear what's actually painful before I write anything.

We're about to redo a frontend and keep arguing about whether the design language has to be locked first or if you can revamp screens in parallel and extract the system as you go. Product has chat/messaging plus some denser dashboard-adjacent UI, so consistency starts breaking fast once a few flows diverge.

Curious how people have sequenced this in practice. Did you start with tokens/components and freeze them early, or ship a few key flows first and only formalize the language after patterns settled? Also what usually bites you later - type/spacing drift, component variants exploding, or states that never got designed?

Not fishing for free work, just trying to avoid the classic "pretty screens, no system" trap before we commit more time.