Animalia
A framework-agnostic design system supporting more than 250 products across different technologies.
Role
Staff Product Designer
Company
TOTVS
Platform
Web
Duration
2021–present
overview
Animalia is TOTVS's framework-agnostic design system, created to unify the experience across more than 250 products. Research revealed that 57% of product teams were working outside the technology supported by the existing system, forcing them to maintain separate component libraries and creating an inconsistent customer experience.
As Staff Product Designer, I led the design direction from its initial foundations to enterprise adoption. Working with design, product and engineering teams, we built an accessible and flexible system that teams could adopt without changing their technology stack. Animalia now has 86% product adoption, 54 production components and supports more than 120 designers.
core problem
of teams worked outside that supported stack.
Product teams were maintaining separate component libraries because the existing system only supported one frontend technology. This duplicated work and created an inconsistent experience across TOTVS products.
main goal
How might we deliver a unified customer experience regardless of the technology each team uses?
approach
Framework-agnostic
The system had to work regardless of the frontend stack a team had in place. A PoC was validated across 8 cross-functional teams — designers, developers, and product owners — and proved that components could be delivered through an invisible integration layer: teams kept calling components the way they always had, while the system provided the design contract underneath. No migration tax. No change in habits.
White-label design system
Full visual flexibility — with non-negotiables. A WCAG AAA baseline was championed as a team decision, not mandated from above. Teams could customize visual identity freely, but the system held firm on what couldn't be negotiated: contrast ratios, focus states, touch targets, motion sensitivity, and screen reader compatibility.
Foundation Values
We started with three components and focused on the login flow—a shared need across almost every product. This gave teams a practical way to adopt the system without committing to a large migration. By Q1 2022, Animalia had expanded to 22 core components, supported by a shared design language and a WCAG AAA accessibility baseline.
inspection mode
Team Daily Task
2 left today
Activity
Panther Jr.Request support
Mr. LizardIcon specialist
OncaComponent support
Everything above is live. Real components, no screenshots — every colour, radius and spacing value resolved from the same token layer the products consume. A few of the controls do more than they look like they do.
The component lobby gives every team a shared place to explore the system, understand its vocabulary, and start from patterns that have already been tested in production.
Scale & Innovation
As adoption increased, teams needed support for more complex workflows. We expanded the system into forms, tasks and tables, introduced motion standards and released the first documentation portal. We also launched the Animalia Icon Library with more than 3,000 icons in regular and filled styles.
Growth also meant giving teams more room to build on their own — more freedom to design their own components, not just consume the system's. That only worked because of what sat underneath: a shared token layer that became the system's contract.
Behind it, 836 schema variables held the detailed decisions each component needed; designers worked through a curated set of 183 semantic variables, a 78% reduction in the surface they had to navigate day to day.
The primitive and component layers stayed protected, and Portuguese-language descriptions in the metadata let designers search by intent and land on the right semantic value without needing to know the complexity underneath. That let teams build new components that stayed consistent across brands, themes and dark mode.
Enterprise Maturity
Once the system had meaningful adoption, the focus shifted toward governance, maintenance and organizational scale. A company-wide rebrand tested the flexibility of the token architecture. The system absorbed the change in two weeks of design work and one month of engineering rollout. We also upgraded the accessibility baseline to WCAG 2.2 and developed the documentation portal into a self-service resource for designers and developers.
component ecosystem
outcomes — deliver a basic login
- Simple form with email / password fields
- Basic HTML / CSS styling
- Form validation (required fields, email format)
- Submit handler with console output
- Basic responsive design
2–3 hours
other generic stack
35 min
with Animalia DS
3 big takeaways
Flexibility Through Abstraction
From token architecture to the promotion of core components across multiple teams, the system was built on a simple belief: flexibility comes from the ability to adapt to diverse contexts with consistency — not from rigid standards.
Accessibility as a Foundation
Accessibility was a core principle from day one — not a guideline bolted on later. WCAG AAA was the opening baseline; WCAG 2.2 became the operating standard. Every component was built to naturally meet diverse user needs.
A Unified Platform Accelerates M&A
The design system became a transformation accelerator, letting the company absorb acquisitions without compromising quality or cohesion. When agility and alignment are vital, a unified platform is essential.