Besides M3 tokens, it also covers container based responsive layout and speech tokens.
Damn proud of myself 😜
And sincere gratitude 🙏 to ChatGPT and Claude Code products. Without them—and without taking dollars out of my family budget—this would have taken a year (or years) instead of a month.
Next up: Theme Builder…
github.com/EPA-WG/custom-element-dist/blob/develop/src/material/theme/tokens/cem-m3-parity.md
Continue to work on Consumer Semnatic Theme principles...
Stroke thickness is allowed to vary *by density mode* as a **non-breaking** adjustment, as long as semantics stay intact:
- Dense UI may need **stronger strokes** because small targets and reduced whitespace reduce separability.
- Comfort UI can remain at hairline boundaries in more places because whitespace carries part of the separation work.
Work in progress. Only "explicit actions", i.e. "normal buttons" background and text colors implemented.
Hover by mouse over headings for description.
| explicit | primary | contextual | alternate | destructive | |
|---|---|---|---|---|---|
| disabled | |||||
| readonly | |||||
| editable | |||||
| required | |||||
| default | |||||
| indeterminate | |||||
| target | |||||
| focus | |||||
| hover | |||||
| selected | |||||
| active | |||||
| pending |
https://www.linkedin.com/pulse/consumer-semantic-theme-design-ai-sasha-firsov-iy5pc
It is often difficult to find partnets on rare subjects and ideas which is not (yet?) popular. AI become a handy tool in bottle neck of communication limit. Here is a session for naming convension for Cunsumer-centric vocabulary UI theme. The result is a part of Semantic Theme for <custom-element>, a no-JS web app development stack.
Trying to keep the UX design tokens type checked to ensure the each token in theme variation is overridden and uses proper value types. JSON version or figma does not allow to keep such checks. In C++ or Java you can define the interface and initialize the abstract fields in implementation. TypeScript has a bit similar approach of interface and object of its type.
TS and Java are given an API to access those programmatically and generate as token JSON as HTML docs for those. TS is part of UI devs stack ...The significance of seven seems to cross cultural, spiritual, and practical domains. 7 notes, 7 colors of rainbow, 7 deadly sins, 7 days of the week… The 2 power 7 (128 ) is the number of phonemes in most of human languages .
The number seven seems to have a fascinating connection to human cognition, and there are a few key theories to explain why it might feel "optimal" or special:
Short-term Memory Capacity: Renowned cognitive psychologist George Miller suggested in his classic 1956 paper The Magical Number Seven, Plus or Minus Two that the human mind has a capacity to handle about seven items in short-term memory. This limitation might explain why lists, groupings, or concepts of seven feel manageable and memorable.
Pattern Recognition: Seven strikes a balance between simplicity and complexity—it’s just enough to challenge our cognitive abilities without overwhelming them. Whether it's musical notes or colors in a rainbow, seven offers variety but avoids excess.
Cultural Reinforcement: Over centuries, the symbolic and spiritual significance of seven has been ingrained into human society. This ubiquity may make our minds naturally attuned to recognizing and organizing concepts in groups of seven.
Does this strike a chord with you? Or do you think there's another layer to seven's mystique?
The HTML5 have given a 7 as a magic count for variations of web safe fonts, font size, font weight, font variant, font variant caps.
In UX in order to have a clear distinction on variations of theme entity, the number of variations need to be limited and the “distance” between variations maximized for better visual recognition of each especially when those shown next to each other. The seven variations is the golden rule there.
Can the expenses for creating mock data in unit tests become a source of business profit? Absolutely! Here’s how.
Most web applications, whether they are healthcare portals or shopping carts, require seed data with a user set that reflects all variations of application data associated with those users. This set is a crucial part of the deployment process to run integration and end-to-end tests. It is also essential for smoke testing before A/B deployment activates the infrastructure components with new code.This is a well-known pattern used in most enterprise-quality software products.
Restricting such valuable data solely to the deployment process is a missed opportunity in various business use cases and throughout the Software Development Life Cycle (SDLC).
You might wonder how this data can have any business value?It seems like just an unavoidable product maintenance cost. And you would be right—until your app needs to be indexed by search engines and operable by AI assistants for user-specific parts of the application. Of course, exposing private user data is not an option. This is where synthetic personas from seed data become invaluable. Since this data set does not contain any real personal information, it is safe to expose to search engines and AI crawlers. If the app is developed with accessibility compliance and SEO in mind, these business goals can be achieved.
In SDLC the seed data can ( IMO should ) be propagated into mock data for the UI components and pages to be used in
* StoryBook
* unit tests
* serverless UI run
* e2e integration tests.
Data can be saved as a module, better with strict typing in place. If your project uses TypeScript, Java, or C#, that is the format to use.
One of the advantages of GraphQL is its ability to generate client code for target languages such as TypeScript or Java. In similar fashion your script can crawl through all graphql queries in application and execute them on behalf of each synthetic persona in the data seed. The same mock generation routine should also generate the Mock Service Worker (MSW) handler to be used in StoryBook, unit tests, and serverless mode.
If your mocking frame with seed data that can be created ahead of UI components, it would be a huge time saver for developers and QA as there will be no difference on data protocol on all those aspects of application front-end.
Once the mocking is available for each synthetic persona, the MSW would help to run the front-end without back-end helping to validate the UI in isolation with the same test set as the full e2e/integration test. It would enable you to identify the tier which is responsible for the failed test without the need for manual troubleshooting for finding the guilty front-, back-, or DB side and forwarding to responsible team members if your tiers are implemented by different folks. Or just simplify the fix if your people are full stack developers.
While SEO, search engine indexing, and AI vectors are separate topics, here I just want to point out that pages with synthetic persona data would be publicly available, improving your site visibility and empowering your application users with AI assistants.
My team has implemented most of the design outlined above, and is currently finalizing the business use. I would be glad to discuss the impact of such an approach on your product.
Happy coding!
