Skip to main content

​
Introduction to Natura Design System

The Natura Design System (also known as GaYa Design System) is a comprehensive collection of React components and design tokens used by Natura Cosméticos to build consistent, accessible, and beautiful web experiences across multiple brands.

​
What is Natura Design System?

Natura Design System provides ready-to-use React components that implement the design language of Natura&Co brands including:
  • Natura - The flagship brand
  • Avon - Beauty products and cosmetics
  • The Body Shop - Natural beauty and skincare
  • Aesop - Premium skincare and fragrances
Each brand has its own unique visual identity, and the design system handles all the theming automatically through a unified API.

​
Key Features

Multi-Brand Support

Switch between Natura, Avon, The Body Shop, and Aesop themes seamlessly with the buildTheme function

React Components

40+ production-ready components including Buttons, Cards, Dialogs, Forms, Navigation, and more

Design Tokens

Comprehensive theming system with colors, typography, spacing, and elevation tokens from @naturacosmeticos/natds-themes

Accessibility First

Built with ARIA attributes and accessibility best practices baked in

TypeScript Support

Full TypeScript definitions for type-safe development (requires TypeScript >= 2.1)

Icon Library

Extensive icon set from @naturacosmeticos/natds-icons with 1000+ icons

​
Architecture

The Natura Design System is built as a monorepo using Lerna, containing multiple packages:
  • @naturacosmeticos/natds-react - React component library (main package)
  • @naturacosmeticos/natds-themes - Design tokens and theme definitions
  • @naturacosmeticos/natds-icons - Icon font and definitions
  • react-jss - CSS-in-JS styling solution
Installing @naturacosmeticos/natds-react automatically includes all dependencies: themes, icons, and react-jss.

​
Monorepo Structure

The source code is organized as follows: 
natds-js/
├── packages/
│   ├── react/          # React components
│   ├── styles/         # Theme and style library
│   └── web/            # Web component library
├── package.json        # Root configuration
└── lerna.json         # Monorepo management

​
Browser & Framework Requirements

React Version: The design system requires React >= 16.8.4 and React DOM >= 16.8.4 (hooks support)
  • Node.js: Version 8.0.0 or higher recommended
  • TypeScript: Version 2.1 or higher (if using TypeScript)
  • React: Version 16.8.4+ (peer dependency)
  • React DOM: Version 16.8.4+ (peer dependency)

​
Design Resources

Component Storybook

Interactive component documentation with live examples

Design Guidelines

Complete design specifications on Zero Height

​
What’s Next?

1

Install the Package

Get started by installing @naturacosmeticos/natds-react in your project
2

Configure Your Theme

Set up the ThemeProvider with your brand and color mode
3

Build Your UI

Start using components to build your application

Ready to Install?

Continue to the installation guide to get started

​
Community & Support

The Natura Design System is maintained by the Design System team at Natura Cosméticos with contributions from developers across the organization.
If you encounter issues, check the Troubleshooting Guide before opening an issue.

Build docs developers (and LLMs) love

Get started for freeTalk to us