Frog UI
The Frog design system was designed with the goal of "expressing styles through language, not code". When developers implement UI, it allows them to apply styles like drawing a picture using natural sentences, instead of cryptic tokens or abbreviations.
Semantic CSS Close to Natural Language
In this system, class naming is structured to directly describe the visual characteristics of components. For example, a sentence like "a small primary button with rounded corners and a left icon" is broken down directly into classes such as button, primary, round, icon, left, and small. This allows developers to translate UI images in their minds into code using language close to natural language, without having to memorize separate abbreviation rules.
Applying Styles Like Drawing
The Semantic CSS approach focuses on "what to show", making the implementation process intuitive, like sketching. When creating a button, visual elements such as color, size, shape, and icon position are stacked and combined word by word, so design intent and code correspond 1:1.
As a result, both designers and developers can discuss components using the same language, and new team members can quickly understand the structure and role just by looking at class names.
Enhanced Usability and Consistency
This approach reduces the need to memorize complex utility abbreviations or framework-specific acronyms, lowering the learning curve. At the same time, by establishing a common vocabulary based on words with clear meanings like button, primary, and round, style usage naturally maintains consistency throughout the project. This consistency leads to maintainability and scalability, and the advantages of semantic CSS become more pronounced as the system grows.