Components
The design system of Deyel includes components that, when configured and used correctly, ensure the uniformity and visual quality of applications.
Elements
Within the "Elements" tab of the left panel, subtypes can be configured to standardize the behavior and appearance of user interface elements.
For the different types of elements of the design system of Deyel, their subtypes must be reviewed or configured.
Text
•Check the hierarchy of texts on the pages and configure the design system to match.
•Verify that the fonts match the defined typographic variables.
•If the default text subtypes are not sufficient, new ones can be built by assigning them a name and a clear description.
Button
•Define the width and the style of the buttons.
•Check the font used.
The procedure for configuring the subtypes of buttons is similar to that of texts.
Field
•Define width of work. For example, 12% or 100%.
•Detect the most representative field to take it to the SD.
•It is essential to check that the subtypes are not in a "modified" state on the pages; if so, the modified property should be reviewed and the subtype reassigned or the modification standardized in the SD if it is valid.
Other Types of Elements
For the remaining element types, the same principles of review, identification, and subtype configuration described for texts, buttons, and fields must be applied.
Once an element is identified, the properties can be copied and applied to the specific subtype in the design system.
Font Family
A font family is a set of typefaces that share the same basic design but vary in aspects such as weight (light, regular, bold), style (italic, condensed, extended), or width. On the other hand, it structures the interface, since it not only fulfills an aesthetic role, but also hierarchically organizes the information and guides the user's navigation within the application.
In the design system of Deyel, the following fonts are distinguished:
•Primary source: It is the main font that structures the interface, facilitates reading and contributes to a clear and orderly appearance. It should be sufficient for most application texts.
•Secondary source: Its use is exceptional and is reserved for situations where the hierarchy of the primary typographic variables is not sufficient to generate the desired contrast. Its definition is optional.
It is defined in the tab "Style variables" from the left panel.
Color Palette
The color palette is essential for visual identity and information hierarchy. In the design system of Deyel, colors are organized around the theme modeled in the application and according to specific criteria.
•Primary criterion: It occupies approximately 30% of the visual weight and is used for main interface elements.
•Secondary criterion: It occupies 10% of the visual weight and is used to highlight elements such as links, buttons, borders or specific parts of components (highlights).
•Tertiary criterion: It constitutes 60% of the visual weight and is the basis of the structure, that is, the background color of the interface.
It is defined in the tab "Style variables" from the left panel, below the font family.
