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.

---

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.

---

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.

---

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.

---

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.

---

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.

---

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.

---

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.

---

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.

---

Graph Colors

Graph colors are applied for data visualization diagrams. They are accessible to users with different types of color blindness.

---

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.

---

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.

---

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.

Headline

---

Paragraph

---

Link

---

Button

---

Label

---

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.

---

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.

---

Outer Spaces

Outer spaces are used in cards, notification messages, alerts, snack-bars, footers/headers, and blocks.

---

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.

---

Sizes

Sizes establish guidelines for consistent element dimensions, such as button sizes, icon sizes, and component dimensions.

---

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.