Fundamentals
Border radius
Border radius is a property that defines the curvature of corners in various UI elements, providing a consistent and cohesive appearance throughout the design system.
Property | Variable Name | Default Value | Description |
---|---|---|---|
Border radius | --us-border-radius-m | 4px | Used for buttons, inputs, tabs, alerts, dropdown options, tooltips, and snack bars. |
Border radius | --us-border-radius-l | 8px | Used for larger components, pop-ups, calendars, and any other element where a more pronounced curvature is needed. |
Colors
The Colors section provides a comprehensive and harmonious palette of colors. Each color plays a distinct role, from conveying brand identity to giving visual cues for success, warnings, and errors. This thoughtfully crafted palette ensures consistency and coherence in our user interface, enhancing the overall user experience and reinforcing the brand's unique identity.
Main Hue Colors
Using Hue as the foundation ensures that all colors in the palette share a visual relationship, making it easier to create consistent designs. A hue-based approach enables efficient color coordination and simplifies selecting and applying colors across various components and layouts.
Name | Variable | Default Value |
---|---|---|
Neutral | --us-color-hue-neutral | 228 |
Primary | --us-color-hue-primary | 224 |
Secondary | --us-color-hue-secondary | 270 |
Success | --us-color-hue-success | 120 |
Warning | --us-color-hue-warning | 40 |
Danger | --us-color-hue-danger | 0 |
Main Colors
Neutral
Neutral colors form the foundational palette of our design system. They are versatile and work well with other color categories. Neutral colors are used for backgrounds, borders, and other elements that require a subtle and balanced appearance.
Example | Name | Variable | Default Value |
---|---|---|---|
Neutral/0 | --us-color-neutral-0 | hsl(var(--color-hue-neutral), 0%, 100%) | |
Neutral/100 | --us-color-neutral-100 | hsl(var(--color-hue-neutral), 25%, 98%) | |
Neutral/200 | --us-color-neutral-200 | hsl(var(--color-hue-neutral), 33%, 97%) | |
Neutral/300 | --us-color-neutral-300 | hsl(var(--color-hue-neutral), 11%, 91%) | |
Neutral/600 | --us-color-neutral-600 | hsl(var(--color-hue-neutral), 7%, 70%) | |
Neutral/700 | --us-color-neutral-700 | hsl(var(--color-hue-neutral), 3%, 44%) | |
Neutral/800 | --us-color-neutral-800 | hsl(var(--color-hue-neutral), 5%, 37%) | |
Neutral/900 | --us-color-neutral-900 | hsl(var(--color-hue-neutral), 6%, 28%) | |
Neutral/1000 | --us-color-neutral-1000 | hsl(var(--color-hue-neutral), 16%, 8%) |
Primary
Primary colors represent the core brand identity and play a significant role in creating visual impact. Primary colors are used for essential elements, such as call-to-action buttons and key interface components.
Example | Name | Variable | Default Value |
---|---|---|---|
Primary/100 | --us-color-primary-100 | hsl(var(--color-hue-primary), 100%, 95%) | |
Primary/200 | --us-color-primary-200 | hsl(var(--color-hue-primary), 100%, 88%) | |
Primary/600 | --us-color-primary-600 | hsl(var(--color-hue-primary), 100%, 60%) | |
Primary/800 | --us-color-primary-800 | hsl(var(--color-hue-primary), 78%, 46%) | |
Primary/1000 | --us-color-primary-1000 | hsl(var(--color-hue-primary), 100%, 31%) |
Secondary
Secondary colors complement the primary colors offering additional variety to the visual design. They are suitable for supporting elements and applied sparingly to highlight information.
Example | Name | Variable | Default Value |
---|---|---|---|
Secondary/100 | --us-color-secondary-100 | hsl(var(--color-hue-secondary), 100%, 95%) | |
Secondary/200 | --us-color-secondary-200 | hsl(var(--color-hue-secondary), 100%, 88%) | |
Secondary/600 | --us-color-secondary-600 | hsl(var(--color-hue-secondary), 100%, 60%) | |
Secondary/800 | --us-color-secondary-800 | hsl(var(--color-hue-secondary), 78%, 46%) | |
Secondary/1000 | --us-color-secondary-1000 | hsl(var(--color-hue-secondary), 100%, 31%) |
Success
The Success color palette signifies positive outcomes and successful actions. It is used to indicate the successful completion of tasks, validation messages, and other positive interactions.
Example | Name | Variable | Default Value |
---|---|---|---|
Success/100 | --us-color-success-100 | hsl(var(--color-hue-success), 37%, 93%) | |
Success/600 | --us-color-success-600 | hsl(var(--color-hue-success), 47%, 44%) | |
Success/800 | --us-color-success-800 | hsl(var(--color-hue-success), 53%, 35%) | |
Success/1000 | --us-color-success-1000 | hsl(var(--color-hue-success), 65%, 26%) |
Warning
The Warning color palette draws attention to important alerts or potential issues. It is used to indicate cautionary messages, warnings, or situations that require user attention.
Example | Name | Variable | Default Value |
---|---|---|---|
Warning/100 | --us-color-warning-100 | hsl(var(--color-hue-warning), 100%, 93%) | |
Warning/600 | --us-color-warning-600 | hsl(var(--color-hue-warning), 92%, 56%) | |
Warning/800 | --us-color-warning-800 | hsl(var(--color-hue-warning), 83%, 44%) | |
Warning/1000 | --us-color-warning-1000 | hsl(var(--color-hue-warning), 73%, 29%) |
Danger
The Danger color palette is reserved for critical alerts and errors. It is used to indicate errors, problems, or actions that may result in irreversible consequences.
Example | Name | Variable | Default Value |
---|---|---|---|
Danger/100 | --us-color-danger-100 | hsl(var(--color-hue-danger), 80%, 96%) | |
Danger/600 | --us-color-danger-600 | hsl(var(--color-hue-danger), 70%, 60%) | |
Danger/800 | --us-color-danger-800 | hsl(var(--color-hue-danger), 59%, 50%) | |
Danger/1000 | --us-color-danger-1000 | hsl(var(--color-hue-danger), 65%, 35%) |
Text+Icon Colors
Text + Icon colors are carefully selected to ensure optimal readability and clarity. These colors are primarily used for text content and icons throughout the user interface.
Example | Name | Variable | Default Value |
---|---|---|---|
Text+Icon/Neutral/0 | --us-color-neutral-0 | hsl(var(--color-hue-neutral), 0%, 100%) | |
Text+Icon/Neutral/300 | --us-color-neutral-300 | hsl(var(--color-hue-neutral), 11%, 91%) | |
Text+Icon/Neutral/600 | --us-color-neutral-600 | hsl(var(--color-hue-neutral), 7%, 70%) | |
Text+Icon/Neutral/700 | --us-color-neutral-700 | hsl(var(--color-hue-neutral), 3%, 44%) | |
Text+Icon/Neutral/900 | --us-color-neutral-900 | hsl(var(--color-hue-neutral), 6%, 28%) | |
Text+Icon/Neutral/1000 | --us-color-neutral-1000 | hsl(var(--color-hue-neutral), 16%, 8%) |
Graph Colors
Graph colors are applied for data visualization diagrams. They are accessible to users with different types of color blindness.
Example | Name | Variable | Default Value |
---|---|---|---|
Graph/1 | --us-color-graph-1 | # 3369FF | |
Graph/2 | --us-color-graph-2 | # 714FF5 | |
Graph/3 | --us-color-graph-3 | # 6E7DD4 | |
Graph/4 | --us-color-graph-4 | # 50A9FA | |
Graph/5 | --us-color-graph-5 | # 22C0FF | |
Graph/6 | --us-color-graph-6 | # D885FF | |
Graph/7 | --us-color-graph-7 | # 1EFAF8 | |
Graph/8 | --us-color-graph-8 | # 6EE3FA | |
Graph/9 | --us-color-graph-9 | # 0004DB | |
Graph/10 | --us-color-graph-10 | # 761AD1 |
Gradient Colors and Overlay
Gradient colors add depth and visual interest to the user interface. They applied for data visualization diagrams (especially for the Cash Flow Forecast component) and scrolling masks.
The Overlay color is used to help enhance the visual appeal of certain elements without overpowering the content. It is used for displaying pop-ups.
Example | Name | Variable | Default Value |
---|---|---|---|
--us-color-gradient-graph | --us-color-gradient-graph | linear-gradient(180.46deg, #F7EDFF -19.54%, rgba(255, 255, 255, 0) 99.6%) | |
--us-color-gradient-mask-top | --us-color-gradient-mask-top | linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) | |
--us-color-gradient-mask-top | --us-color-gradient-mask-top | linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%) | |
--us-color-overlay | rgba(18, 19, 25, 0.24) | rgba(18, 19, 25, 0.24) |
Social Media Colors
Social media colors represent our brand's presence on various social platforms. They are used in specific contexts, such as social media icons or links to social profiles.
Example | Name | Variable | Default Value |
---|---|---|---|
Social/Whatsapp | --us-color-whatsapp | # 65D072 | |
Social/Whatsapp-light | --us-color-whatsapp-light | # E6F7E6 | |
Social/Viber | --us-color-viber | # 745398 | |
Social/Viber-light | --us-color-viber-light | # E9E3EE | |
Social/Email | --us-color-email | # 006EC4 | |
Social/Email-light | --us-color-email-light | # D6E8F5 |
Typography
The Typography section establishes the fundamental principles and guidelines for text across the user interface. It presents a well-defined set of typefaces, font sizes, weights, and styles, ensuring visual consistency and readability throughout our digital products. Following these typographic standards creates a cohesive and user-friendly experience, enhancing content legibility and brand recognition.
Type Name | Variable Name | Default Value | Description |
---|---|---|---|
--us-font-family | "Work Sans" | Work Sans is a versatile and modern font family carefully chosen for the Design System. Its clean and contemporary aesthetic offers excellent legibility across various screen sizes and devices. |
Headline
Paragraph
Ex. | Type Name | Variable Name | Default Value | Description |
---|---|---|---|---|
Aa | Paragraph/XL | --us-text-p-xl | 400 18px/26px var(--font-family) | It is suitable for large blocks of text, such as article bodies or lengthy descriptions. It offers optimal readability for longer content. |
Aa | Paragraph/L | --us-text-p-l | 400 16px/24px var(--font-family) | It is used for sizeable text sections, ensuring clear legibility while maintaining a balanced appearance. |
Aa | Paragraph/M/Light | --us-text-p-m-light | 400 14px/20px var(--font-family) | It is similar to M-heavy but lighter, useful for softer emphasis or secondary text elements. It is the main style of web components. |
Aa | Paragraph/M/Heavy | --us-text-p-m-heavy | 600 14px/20px var(--font-family) | It is ideal for medium-sized text with a bold emphasis, like subheadings or callouts. |
Aa | Paragraph/S/Light | --us-text-p-s-light | 400 12px/16px var(--font-family) | It complements S-heavy with a lighter weight, perfect for less prominent or supporting text. |
Aa | Paragraph/S/Heavy | --us-text-p-s-heavy | 600 12px/16px var(--font-family) | It is designed for smaller text with a bold touch, suitable for captions or labels that need extra visibility. |
Aa | Paragraph/XS/Light | --us-text-p-xs-light | 400 10px/14px var(--font-family) | It is similar to XS-heavy but lighter, maintaining legibility for tiny text elements. |
Aa | Paragraph/XS/Heavy | --us-text-p-xs-heavy | 500 10px/14px var(--font-family) | It is used for tiny text requiring a bold appearance, such as fine print or legal disclaimers. |
Link
Ex. | Type Name | Variable Name | Default Value | Description |
---|---|---|---|---|
Aa | Link/L | --us-text-links-l | 400 16px/24px var(--font-family) | It is used for sizeable links, providing clear visual cues for clickable elements and facilitating user navigation. |
Aa | Link/M | --us-text-links-m | 400 14px/20px var(--font-family) | It is suitable for regular-sized links, maintaining a consistent link appearance across the interface. It is the main style for links, and this style is often used in footers. |
Aa | Link/S | --us-text-links-s | 500 12px/16px var(--font-family) | It is designed for smaller links in other space-limited sections. |
Aa | Link/XS | --us-text-links-xs | 500 10px/14px var(--font-family) | It is used for very small links, such as icons or inline actions. |
Button
Ex. | Type Name | Variable Name | Default Value | Description |
---|---|---|---|---|
Aa | Button/L | --us-text-button-l | 500 16px/24px var(--font-family) | It is rarely used for prominent buttons, ensuring they grab the user's attention and encourage interaction. |
Aa | Button/M | --us-text-button-m | 500 14px/16px var(--font-family) | It is suitable for regular-sized buttons, offering a balanced appearance for typical interactions. |
Aa | Button/S | --us-text-button-s | 500 12px/16px var(--font-family) | It is used for smaller buttons, often in compact layouts or secondary actions. |
Label
Ex. | Type Name | Variable Name | Default Value | Description |
---|---|---|---|---|
Aa | Label/L | --us-text-label-l | 500 16px/24px var(--font-family) | It is suitable for sizeable labels, providing clear identification and context to associated form fields or elements. |
Aa | Label/M | --us-text-label-m | 500 14px/16px var(--font-family) | It is suitable for sizeable labels, providing clear identification and context to associated form fields or elements. |
Aa | Label/S | --us-text-label-s | 500 12px/16px var(--font-family) | It is designed for smaller labels, ideal for compact forms or interfaces. |
Shadows
The Shadows component is a collection of visual effects that add depth and dimension to user interface elements, enhancing the overall aesthetics and usability of the design.
Ex. | Property | Variable Name | Default Value | Description |
---|---|---|---|---|
Box shadow | --us-box-shadow-100 | 0px 0px 2px rgba(18, 19, 25, 0.12) | It represents the most subtle shadow level. It provides a delicate and discreet elevation, subtly separating the element from its background. | |
Box shadow | --us-box-shadow-200 | 0px 0px 8px rgba(18, 19, 25, 0.12) | It is the default and most commonly used shadow level. This level is suitable for various components, including cards, buttons, and tiles, providing a visually appealing and interactive appearance. | |
Box shadow | --us-box-shadow-300 | 0px 0px 12px rgba(18, 19, 25, 0.16) | It creates a more pronounced and intense shadow effect, creating a vivid separation between the element and the background. | |
Box shadow | --us-box-shadow-input-focus | inset 0 2 4 0 rgba(51, 105, 255, 0.16) | It creates an inward shadow effect, drawing attention to the center of an element. | |
Box shadow | --us-box-shadow-input-error | inset 0 2 4 0 rgba(224, 82, 82, 0.16) | Inner-error shadows emphasize errors within the element. |
Spaces and Sizes
Spaces - define consistent and systematic spacing values used throughout the user interface. It provides a set of predefined spacing increments that help create harmonious layouts and maintain visual balance.
Sizes - define a set of standard sizing values for various UI elements.
Inner Spaces
Inner spaces are used in buttons, badges, chips, alerts, tabs, inputs, dropdown options, and cell-like containers.
Property | Variable Name | Default Value |
---|---|---|
Inner space | --us-space-inner-xs | 4px |
Inner space | --us-space-inner-s | 6px |
Inner space | --us-space-inner-m | 8px |
Inner space | --us-space-inner-l | 12px |
Inner space | --us-space-inner-xl | 16px |
Outer Spaces
Outer spaces are used in cards, notification messages, alerts, snack-bars, footers/headers, and blocks.
Property | Variable Name | Default Value |
---|---|---|
Outer space | --us-space-outer-xs | 16px |
Outer space | --us-space-outer-s | 24px |
Outer space | --us-space-outer-m | 40px |
Outer space | --us-space-outer-l | 64px |
Outer space | --us-space-outer-xl | 80px |
Inline Spaces
Inline spaces are used between text blocks, icons, text, tabs, and other elements to distribute contents ergonomically, ensuring better perception and alignment of the overall structure. They may stand alone or stack and mingle with other objects.
Property | Variable Name | Default Value |
---|---|---|
Inline space | --us-space-inline-xs | 2px |
Inline space | --us-space-inline-s | 4px |
Inline space | --us-space-inline-m | 8px |
Inline space | --us-space-inline-l | 12px |
Inline space | --us-space-inline-xl | 16px |
Sizes
Sizes establish guidelines for consistent element dimensions, such as button sizes, icon sizes, and component dimensions.
Property | Variable Name | Default Value |
---|---|---|
Size | --us-size-3xs | 2px |
Size | --us-size-2xs | 4px |
Size | --us-size-xs | 8px |
Size | --us-size-s | 12px |
Size | --us-size-m | 16px |
Size | --us-size-l | 24px |
Size | --us-size-xl | 32px |
Size | --us-size-2xl | 40px |
Size | --us-size-3xl | 48px |
Size | --us-size-4xl | 56px |
Size | --us-size-5xl | 80px |
Widget Container
Widget Container is a versatile and configurable container that provides visual depth and structure to various UI elements. It combines multiple design properties, including shadows, background colors, width, and radius of the border.
Property | Variable Name | Default Value | Description |
---|---|---|---|
Border radius | --us-widget-container-radius | var(--border-radius-l) | It defines the degree of corner rounding for web component containers. |
Box shadow | --us-widget-container-boxshadow | none | It creates a subtle or striking shadow effect behind web components. |
Border | --us-widget-container-border | 1px solid var(--widget-container-border) | It encompasses both the thickness and color of the border surrounding web components. |
Background color | --us-widget-container-background | var(--color-neutral-0) | It defines the color that fills the space behind web components. |
Updated 4 months ago