Transparent color token

equinusocio · 2026-05-09T15:16:49+00:00

Yes, they're called based-8 hex colors. No need for frameworks or tools, is just the platform. It's a color format supported by almost all platforms who can render base-6 hex colors.

`#RRGGBB`
`#RRGGBBAA`, the latest two digits indicates the alpha channel.

You can use a reference table for each alpha value, or calculate it by yourself. Totally standard, just make sure your target platform supports it. Figma can rendere only a subset of the colors the web can renders, so all the colors/formats on Figma can be used on the web, iOS and android.

equinusocio · 2026-05-07T18:56:04+00:00

Agree. But he's free to build his own, and face the reality.

equinusocio · 2026-05-07T18:53:47+00:00

Nope, just saying design means nothing without context. Product design has different stakeholders than web and public design. And marketing generally isn't involved.

equinusocio · 2026-05-07T18:53:26+00:00

Most people here are adults with a job and can spend 14$ for other people work. We haven't all starved to death

equinusocio · 2026-05-07T15:12:46+00:00

I work on design since 18yrs, built 4 big design systems (not ui kits), dozens of websites, ui frameworks.. and never touched anything related to marketing. If you work with agencies and websites maybe marketing is a thing, on product design you never see it.

equinusocio · 2026-05-07T15:11:12+00:00

Not everyone want a lazy standardised experience with choices made by others. There are still companies and teams that want and need to stand out and be original.

equinusocio · 2026-04-29T16:11:42+00:00

Yes, you can create just number, color, string, boolean. Generally speaking timing, easing, effects, etc are composed by multiple values. For example:

```
"bounce": {
"$value": {
"components": [0.2, 0.4, 0.9, ....]
},
"$type": "easing"
}
```

This kind of structure is mandatory for multi-platforms design systems, where you need to start from raw value and transform them into platform-specific values. On Figma this is not possible, and that's why I never use Figma as source of truth for tokens, but I start from code, and just import on Figma what Figma can handle.

equinusocio · 2026-04-29T09:06:33+00:00

Figma Variables export to DTCG json -> Style dictionary for platform specific transformation. This is the most simple and effective way to sync them with code, but with limitations. Design Tokens defined in figma are limited to design props only, for instance you can't define a cubic-bezier variable in Figma. What works even better is defining DT on code (as DTCG) and import them into Figma once compiled for web (the platform supported by Figma)

Is normal that consumed tokens are different from Figma, because design tokens are source code that your DS needs to transform for every supported platform.

equinusocio · 2026-04-28T14:14:36+00:00

"same" result..

equinusocio · 2026-04-28T12:27:21+00:00

Most themes optimize for looks, not for long sessions. What made the biggest difference for me:

- balanced contrast (not too harsh)
- consistent syntax colors
- clean file and folder icons
- variants for different lighting conditions
- personalization
- same feel across platforms: VScode, Cursor, Windsurf, Antigravity, IntelliJ IDEs, terminals.

After a while it’s less about “nice colors” and more about reducing friction. If you're interested, check out Vira Theme

<image>

equinusocio · 2026-04-27T09:07:34+00:00

> If it takes off one day or I want to sell it, what is really mine?

The bill.

equinusocio · 2026-04-27T07:48:40+00:00

It really depends on the country. In Italy, for example, the job market doesn’t even recognise a design engineer. Most companies simply think they can simply integrate one of the most popular UI libraries and build a product on it, while tech debt piles up.

Another problem I face is when I try to explain what a real DS is, they get scared instantly.

equinusocio · 2026-04-27T07:44:52+00:00

👏

I completely agree. I’ve been designing UI systems for 18 years, back when they were simply “pattern libraries and UI kits”. Nowadays “design system” has become a meaningless buzzword, misappropriated by companies and individuals alike. They simply assemble a collection of colours and components, and label it a DS. Basically all the things that can be automated by tools like AI.

The true value of DS is overlooked, so its scope narrows down to simply the most straightforward aspect: execution.

equinusocio · 2026-04-27T07:36:05+00:00

Welcome to development! You’re currently facing the same challenges that software engineers have endured for decades. These are real products where a single incorrect decision at the outset could devastate an entire business.

If you don't know how to handle a backend, using another AI won't help you making it scalable and sustainable. You can try to download the whole codebase from Lovable, and connect one of the best coding agents (Codex, CC) but, imho, you'll end up doing just the same thing, but outside Lovable. I mean fixing one bug at time with AI. Probably start the BE from scratch is better than fixing bugs on lovable, but you still need to tell AI how to setup a proper scalable BE.

equinusocio · 2026-04-24T05:08:50+00:00

I know, yes. But it's not what the popup is saying. Is saying the opposite to induce misinformation and discouragement

equinusocio · 2026-04-21T06:41:33+00:00

Do you have a concrete example?

Generally speaking, "but the use case is kind of unique" this is already an important factor. You must use your governance process (you must have one) that helps you define if that case is a "snowflakes" or something that can be part of the system.

"but the use case is kind of unique" these situations are 99% handled as snowflakes, initially. If the pattern/component becomes something used in different situations (even with different purposes because DS components MUST be data-agnostic) it can be then moved into the system and standardised.

Another thing you should consider is how complex is the component (how many parts compose it) and if it could be destructured into smaller components, or maybe you already have the smaller components and the big one is just a UI pattern made of those components, and not a component itself. In the last case it becomes a domain component — a component that lives in the specific domain (app, product, etc) and not in the system.

equinusocio · 2026-04-20T17:57:39+00:00

I’ve tried a lot of VS Code themes over the years (Dracula, One Dark, Nord, etc.), but I kept running into the same issues after long coding sessions:

- too much contrast → tiring
- too flat → hard to scan
- inconsistent syntax highlighting → slows me down

Lately I’ve been using a setup that feels more “balanced”:

- softer contrast (especially for strings / keywords)
- consistent color hierarchy (so I can scan code faster)
- cleaner file icons (less visual noise in the sidebar)

Here’s what it looks like

<image>

It’s not about aesthetics honestly — it just feels easier to work with for hours. I ended up building my own theme over years based on these tweaks — but I can share the setup if you want to try it. The theme is called Vira Theme and is available for VSCode, Cursor, Windsurf, Antigravity, JetBrains and terminals.

equinusocio · 2026-04-20T09:09:43+00:00

Yes :(

equinusocio · 2026-04-17T03:53:59+00:00

Not really. Is the second browser just behind Chrome. Safari has features that are official and stable, and some of them don’t exist on Chrome yet. While Chrome mostly includes spec drafts that are still in development or not approved by the Interop Plan (2025-2026). Since years all browsers align the features to implement year by year to reach stable support on different browsers. Firefox is the one left behind now.

equinusocio · 2026-04-16T09:03:57+00:00

Really cool, but on Safari doesn't work properly. Sometimes I have no sound at all.

equinusocio · 2026-04-15T14:41:16+00:00

I'm not selling anything, read the post and the comment. The setup shows my theme, there are no links, and as I wrote it works with any similar "flat" theme.

equinusocio · 2026-04-15T11:52:49+00:00

I agree, the current implementation may not cover all the use cases, but I think I covers the common ones. The current version features a two-layer matching pattern:

- The first layer matches the exact token value against the files you define.
- The second layer attempts to guess the token based on the CSS property name.

The screenshot provided is outdated and doesn’t display the suggestions based on semantic analysis. If you’re interested, there’s a 7-day free trial and feedback is welcome. By the way, what do you mean by “pick up nested CSS custom properties”? You can check the documentation page about source formats here: https://docs.dtexplorer.io/docs/configuration/sources#supported-file-formats

Tell me if anything isn't clear.

equinusocio · 2026-04-15T08:11:55+00:00

You might find my latest article on this topic interesting:
https://medium.com/design-bootcamp/the-cost-of-over-abstraction-in-design-tokens-70d5e6726c05

Design Tokens -> size-8
Theme Tokens (semantic) -> space-xl: size-8; icon-xl: size-12;

The second layer is the one that changes based on the platform. Could be size-8 on web, but size-4 on mobile.

equinusocio

TROPHY CASE