u/roundabout-design

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?

Overview:

Elements colored (stroke or fill) using the "Swatch" option under stroke and fill paints are not rendering in the browser when you export the illustration as an SVG. Opening the SVG back in Inkscape renders the colors just fine. Anyone know why this is happening? Or know of a fix?

Details:

This is a follow up to a question I had yesterday with some elements in an illustration not appearing in the browser.

I've found out the issue has to do with the "swatch" option in fill and stroke paints.

I've created a rather complex illustration leveraging the 'swatch' options underneath fill and stroke paint tabs. The reason is I can easily update the entire color palet later without having to manually change every element.

Turns out I wasn't entirely perfect at doing this and some of the elements just got colored using the standard 'flat' colors.

When I went to export this to then view in a browser, the illustration was incomplete. After some digging, I realized that the elements I had colored with 'flat' colors were showing, but anything colored with the 'swatch' colors had no color at all, so wasn't appearing.

As a test, I went back and changed every element in the illustration from 'swatch' color to 'flat' color and now it works just fine in the browser. Of course, I've now lost all the benefits of using swatches in inkscape in terms of future editing.

Anyone know why this is happening? Known issue? Any workarounds?

I have some fairly detailed illustrations I've created that I'm trying to export as plain SVGs to render in the browser.

Only about half of the objects that are in the SVG are rendering in the browser. And I don't know why that is.

If I open the exported SVG in Inkscape, it looks exactly as it should. So the information is there somewhere. But the browser is confused it seems.

I've pasted elements into a new inkscape document and re-exported. I've used the 'cleanup document' option. I've ran the exported SVG through an SVG validator. None of that has fixed anything or flagged any issues.

Any idea what might be going on? Things I should look into?

UPDATE:

So after messing around some more, I think I know what the issue is related to. This is the first time I've utilized the swatches tool. I made a color pallet of swatches and have been using those for most of the fills and strokes.

I opened up the SVG, and deleted all the swatches. This didn't change the illustration, but just wiped out the swatches from the swatches pallet.

I then re-exported and...now about 80% of the illustration is there!

Going back bit by bit if I change the colors of the missing objects manually so they aren't the original color picked in the swatches, they come back.

So this is a swatches thing. Is there a way to keep using the swatches tool internally in inkscape, but upon export have it somehow ignore the swatches and manually set the colors on export?

I thought at one time you could go into prototype mode and then just navigate the frames in order via the keyboard arrow keys. Made for quick presentations/skipping through a multi-frame prototype easy.

That does not seem to work anymore.

Did something change? Or is this just a temp glitch?

We're rebuilding one of our apps in Flutter to speed up development. I must admit our flutter team is doing a pretty good job.

Alas, Flutter pretty much depends on prebuilt libraries like their version of Material Design or Apple's UI design.

In the name of speed, we've decided to leverage Material Design as the Flutter library to use, with us pretty much just skinning it with brand colors and the like.

This seems to be a common recommendation (vs. rolling-our-own UI library).

That said, I kind of forgot about how Material Design likes to create field labels. It uses that ridiculously small text on the field border:

https://preview.redd.it/tnjday0agslh1.png?width=1158&format=png&auto=webp&s=0d04b6c3624586d39e7a89237a9ac57506b6d785

There seems to be debate about how accessible this is. For me, I'd default argue that it's just not meeting basic type size requirements--especially for mobile design.

And in our case, we're using some pretty complex forms that require often somewhat verbose labels.

I'm advocating for us to change the design here, but given the dev overhead to do so, I'd love to find some data/documentation to back me up on these default designs by google just being poor design and not accommodating readability and accessibility very well. Has anyone successfully fought this and, if so, have some ammo they'd be willing to share?

(OR...maybe I'm way off base and these are perfectly OK? If so, if you have some good arguments/documentation for that, LMK!)

I'd like to share some visuals with team members on slack and the like. At the moment, I use QuickTime which does a reasonably good job with screen recording. However, the files are usually pretty huge and I need to post-process them to knock them down in size a bit.

Wondering if anyone has found a tool better than QuickTime (on Mac) that is useful for sharing quick videos of UI work with others.

We've had our HE toploader washer for about 6 years now. Been working well. But lately it's had that 'musty' smell and we finally decided to bite the bullet and dismantle it to see if it needed cleaning.

It needed cleaning. There was that pinkish/sludgy film all around the underside of the metal basket, as well as on the outside of the lower part. The outer plastic bin also had some stuff clinging to it and needed a scrub.

Yanked everything out, scrubbed it all, put it back together, and now we're good to go.

Aside from the usual cleaning cycles (which we've done) with cleaner, is there anything else I can do to try and prevent this in the future? Or is this just an inevitable chore every 6 years or so?

I'm curious as to what kind of versioning strategies people use for their design systems.

Specifically, in the component space.

Are you versioning the package as a whole? Individual components?

Our DS is AI-centric, meaning it's mainly there for AI to use. We have tokens, documented rules, and an React component system.

The design is in progress, though, so things may change regularly over the next few months as we see more screens built and make more adjustments to individual components as needed to accommodate the context they are being used in.

My original thought was for each component to have a version number embedded. Over time, teams could run an audit on their application to compare their component version numbers to the latest in the DS and make a decision as to which ones should be updated.

This seems annoyingly complex for manual updating, but since Claude is doing most of the work, seemed like an idea worth considering. Is anyone doing something like that? If so, would love to hear how you are implementing it.

OR...are people just versioning the UI library package as a whole?

I finally have a subscription to Mobbin. Been meaning to do this for a long while.

It's useful but...I'm rather underwhelmed by how useful it is in terms of finding things. And I'm hoping it's just me being dumb and missing something obvious (but have a hunch it's not).

For those of you that use it, how are you finding specific UI elements or particular patterns?

For example, I was looking for some "checklist" navigation UI widgets. But there does not seem to be a way to search for UI elements. Just screens as a whole, or text that may be on a screen.

I typed in "Checklist" and it did find some pages--though I'm not sure how it did. Are images being tagged with keywords? Is there a way to see the keywords?

For being a site designed specifically for 'finding UX and UI elements' it sure seems to be lacking in the 'finding' part.

https://preview.redd.it/gih72n3aathh1.png?width=2667&format=png&auto=webp&s=995475365ce9d459b7109e74125ca054cf392380

Found 4 keepers in the goodwill bin on Tuesday. Happened to be back there yesterday and found a handful more. Most productive bargain digging week in a LONG while. :)

https://preview.redd.it/vydruxqwdlhh1.png?width=2674&format=png&auto=webp&s=db5d2ec515c5656feb547ef6493d241fa6edafa2

Been a really long time since I've found more than one or two worthy of trying out from the goodwill bins.

The sealed Blitzen Trapper and RST Popul Vuh were the surprises. I always grab MJQ when I find them. The Norteñas and Urbaniak just looked too interesting not to gamble a dollar on.

https://preview.redd.it/9us9832vydhh1.png?width=742&format=png&auto=webp&s=e651581cac08af66d15abf344de141007cae9076

I recently discovered the swatches tool (thanks to those that answered my previous question!)

I'm not taking an illustration and moving every object's color settings so that it's using one of the swatches I created. As you can see in the image, I have 6 shades of a purple I have custom named into swatches.

The catch is that every time I select an option, then the SWATCHES color option so that I can set the color, it automatically makes a new swatch based on the current selection. I can then pick one of my purples and it updates the object, but now I'm left with this auto-named swatch that I have no use for.

Is there a setting or technique or habit I can use to avoid this?

For now, I just deal with it and when I get annoyed with there being too many empty swatches, I open up the swatches pallet and one-by-one delete the unecessary ones. But this is tedious. Hoping there's an easier way to deal with this.

Is there a way to create editable colors in inkscape. Example, I want to create an illustration with 3 colors. But then decide when finished to change one of the colors...so all instances of that color (fill stroke, etc.) need to be updated automatically. Is that doable?

It finally happened. Got rear ended. Not high speed but it looks like everything plastic on the rear left side is shot. Fender, rear panel, rear bumper, rear sensors.

Taking it in Monday to see what the full damage report is.

Has anyone had recent body work done on their Ariya? Did it go OK or were you still dealing with huge parts waiting times? It seemed last year people were waiting months for things like fenders and bumpers.

I bought a new Macbook Air and want to transfer files from my old one. New one is an M4, old one is a M1.

I bought an OWC thunderbolt cable which seems to be the best rated 'unofficial' cable. So my issues *might* be the cable.

Here's what is happening:

- I connected both computers

- both, when I got to networking, show 'Thunderbolt Bridge Inactive' with a red dot.

Tried a few things. Googling (there seems to be a lot of cut-and-paste non-answers out there).

Eventually went with the "unplug and plug it back in" and then I got a pop up asking if I wanted to connect to this new device. I said "yes" and now I see my old macbook as a device. Cool!

However, when I open my old macbook on my new one, it just opens an empty folder that says "not connected".

Looking at both machine's networking tabs, I do see the 'Thunderbolt Bridge" labeled as "self-assigned IP" and with a yellow dot.

I'm guessing the yellow means "not quite working yet..."

Any suggestions as to what I should try to get this working?

This seems like something that should be google-able but I'm struggling! I have a 2025 Ariya that we suddenly can't get the charge door to open on.

Googling this mostly returns issues of chargers being stuck while charging. That's not the problem here...the door, itself, won't open so we can start charging.

Common fix seems to be to unlock the car a number of times. No luck with that. There are some mentions of a 'release cable in the frunk' but I can't find anything that looks like a release cable (and the port is well behind the frunk area anyways).

Help! Anyone know how to open this thing without prying it open with a screwdriver or something?

We're building out a design system for our enterprise.

One team is looking at using Flutter and I've begun investigating how flutter treats the UI layer. I'm not sure I fully understand but this is what I came away with:

• it's a lower-level (right term?) framework than react-native so can tie into native features better and is overall a bit more performant
• It has default Cupertino (iOS) and Material (Android) design systems that you can leverage.

But I'm not entirely sure of that second bullet point. It sounds like while those both exist, the Cupertino design system isn't literally native iOS widgets, but rather Flutter widgets emulating iOS Widgets. And that if you are building a dual-OS app, one should instead customize Material design.

Is that correct? And if one wanted to emulate the native UI of both Androind and iOS, you'd essentially need two separate Flutter apps?

I'm in charge of building out a design system for our org. Our org has gone all in on AI development.

I've been playing with different ideas...markdown files, MCP server, using a github repo, etc. but have yet to find any real consensus on any of this--probably because there isn't any.

But has anyone been building out a design system for primarily AI-centric work flows and found certain things working better than others?

Our biggest issue right now is that developers everywhere are just building their own things. They may grab the brand guidelines from marketing, which helps a little, but beyond that, consistency isn't there.

I'm trying to figure out how to get something...even if rudimentary...set up to have developers point their AI at to at least get the basics of a design system figured out.

But I haven't figured out a way to do this that seems proper yet.

I like the idea of a github repo...that gives us a central, team-based place for us to manage updates to the design system. But is there a better way to go about this?

I have been playing with Claude Design's design system feature...but we're pretty much in agreement internally that it's "neat" but not really a "solution" yet.

I guess this is a bit of a rambling all-over-the-place post. I guess I'm just seeking out any real world experience others have had creating an AI-centric design system. I can find plenty of demos/tutorials on youtube, but very few real world use cases.

I'm so confused.

Xfinity sold us on a new internet package that comes with Hulu/Disney+

It does not appear there's anyway to activate Hulu through the Hulu Roku app--at least not that I can find.

After googling it said to try the Xfinity Stream app on Roku, which I've installed, but there doesn't appear to be any way to watch Hulu on there.

Is this even doable? Did we get sold a useless bundle?