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.
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.
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.