DOCSEARCHbyAlgolia
Submit Docs

Animalia Design System

website·Indexed 32 days ago

https://doc.animaliads.io

A comprehensive design system providing guidelines and components for building consistent user interfaces. It includes a library of components such as datepickers, tooltips, and pagination, along with foundation documentation on typography, color, spacing, and design tokens.

Tokens
60.6K
Snippets
81
Records
494
Agent score
54%

What's inside Animalia DS

  1. Overview of Animalia DS Design System

    Animalia DS (Animalia Design System) is an open-source design system created by TOTVS. It is designed to improve the development performance of corporate applications by streamlining communication between designers and developers through practical component documentation, ensuring better usability for end customers and allowing teams to focus on business logic.

  2. Overview of Animalia Design System (Animalia DS)

    Animalia DS is an open-source design system created for the TOTVS community and beyond. It provides a library of ready-to-use components, a design token system for visual consistency, and comprehensive documentation to accelerate development. The system is built on principles of accessibility (WCAG and Brazilian Inclusion Law), collaboration, and business impact.

  3. Overview of Animalia DS Design System

    Animalia DS (Animalia Design System) is an open-source design system created by TOTVS. Its primary goal is to enhance the development performance of corporate applications by streamlining communication between designers and developers through practical component documentation, ensuring better usability for end customers and allowing teams to focus on business logic.

  4. Overview of Animalia Design System (Animalia DS)

    Animalia DS is an open-source design system created for the TOTVS community and external users to ensure consistent user experiences. It provides a library of ready-to-use components, a design token system for visual consistency, and comprehensive documentation. The system is built to be accessible and inclusive, adhering to WCAG standards and the Brazilian Inclusion Law.

  5. Overview of Animalia DS

    Animalia DS (Animalia Design System) is an open-source design system created by TOTVS. It is designed to improve the performance of corporate application development by streamlining communication between designers and developers through practical component documentation, ensuring better usability for end customers and allowing teams to focus on business logic.

  6. Overview of Animalia DS

    Animalia DS (Animalia Design System) is an open-source design system created by TOTVS. Its primary goal is to enhance the performance of corporate application development by streamlining communication between designers and developers through practical component documentation, ensuring better usability for end customers and allowing teams to focus on business logic.

  7. Understand Text Field component variants

    The Text Field is a single-line data entry component used in forms. It comes in two modular compositions:

    • Text Field (Standard): The full version containing all structural elements (label, field, help text, and error text).
    • Text Field (Single): A minimal version consisting only of the input field.

  8. Understand spacing principles in Animalia Design System

    Spacing is used to define the size, weight, and hierarchy of components. It can be applied to margins, height, weight, and padding. All spacing tokens are based on the browser's default font size.

    Key design principles for applying spacing include:

    • Proximity: Items placed close to each other are perceived as part of the same group, sharing similar functions or traits.
    • Common Region: Items contained within a visible boundary are perceived as a group and are assumed to share common characteristics or functionality.

  9. Radio button component overview

    The radio button component is used to select a single option from a set of mutually exclusive choices. Selecting a new item automatically deselects the previously selected one.

  10. Apply TOTVS Brand Values in Communication

    TOTVS communications should reflect its core values, which include being innovative, pioneering, and passionate about technology and performance. Additionally, the brand emphasizes empathy, diversity & inclusion, social responsibility, and transparency.

  11. Understand Animalia typographic style types

    Animalia provides three primary typographic styles to ensure visual hierarchy and consistency across the interface:

    • Heading: Used to create hierarchical levels of content. There are 6 levels of headings, ranging from the largest (H1) to the smallest (H6). They are critical for page scanning, search engines, and screen readers.
    • Body: The default interface style used for all text that does not require specific treatment, including text blocks and text within components.
    • Code: Used to highlight specific content as code, such as a snippet or a keyword within a sentence. This style includes a background color for visual distinction.

  12. Understand Animalia DS behavior patterns

    Behavior patterns in Animalia DS are best-practice standards for how users achieve specific goals. They consist of reusable combinations of components and mental models designed to create intuitive sequences and flows, ensuring high usability and a consistent appearance across the ecosystem in alignment with Animalia DS Principles.