NatDS Styles

A collection of design tokens and themes from the Natura Design System for projects that don’t use React.

Overview

@naturacosmeticos/natds-styles provides raw design tokens and theme configurations without React components. This package is ideal for:

Non-React JavaScript projects
Vanilla JS applications
Vue, Angular, or other framework projects
Custom component libraries
Design token integration

If you’re building a React application, we recommend using @naturacosmeticos/natds-react or @naturacosmeticos/natds-web instead, as they include ready-to-use React components.

Design Tokens

Access color, typography, spacing, and other design tokens

Multi-Brand Themes

Pre-configured themes for all Natura brands

TypeScript Support

Full type definitions included

Framework Agnostic

Use with any JavaScript framework or vanilla JS

Installation

npm install @naturacosmeticos/natds-styles

Dependencies

This package includes:

@naturacosmeticos/natds-themes (v0.84.0) - Theme definitions
hex-to-rgba (v2.0.1) - Color conversion utility

Basic Usage

Importing Tokens

import { tokens } from '@naturacosmeticos/natds-styles'

console.log(tokens.spacing.small)
console.log(tokens.color.primary)

Using Themes

import { themes } from '@naturacosmeticos/natds-styles'

// Access specific brand theme
const naturaLightTheme = themes.natura.light
const avonDarkTheme = themes.avon.dark

// Use in your styling
const styles = {
  backgroundColor: naturaLightTheme.color.background,
  color: naturaLightTheme.color.onBackground,
  padding: naturaLightTheme.spacing.medium
}

Available Tokens

The package exports comprehensive design tokens across multiple categories:

Color Tokens

import { tokens } from '@naturacosmeticos/natds-styles'

// Primary colors
tokens.color.primary
tokens.color.secondary

// Semantic colors
tokens.color.success
tokens.color.warning
tokens.color.error
tokens.color.info

// Surface colors
tokens.color.background
tokens.color.surface
tokens.color.onBackground
tokens.color.onSurface

Typography Tokens

Font Families
Type Styles

import { tokens } from '@naturacosmeticos/natds-styles'

tokens.typography.fontFamily
tokens.typography.fontWeight

// Display styles
tokens.typography.display.large
tokens.typography.display.medium

// Body styles
tokens.typography.body.large
tokens.typography.body.medium
tokens.typography.body.small

// Heading styles
tokens.typography.heading.h1
tokens.typography.heading.h2
// ... h3-h6

Spacing Tokens

import { tokens } from '@naturacosmeticos/natds-styles'

tokens.spacing.micro    // Extra small spacing
tokens.spacing.tiny     // Tiny spacing
tokens.spacing.small    // Small spacing
tokens.spacing.medium   // Medium spacing (base)
tokens.spacing.large    // Large spacing
tokens.spacing.xlarge   // Extra large spacing
tokens.spacing.xxlarge  // 2x large spacing
tokens.spacing.huge     // Huge spacing

Elevation (Shadows)

import { tokens } from '@naturacosmeticos/natds-styles'

tokens.elevation.none
tokens.elevation.micro
tokens.elevation.tiny
tokens.elevation.small
tokens.elevation.medium
tokens.elevation.large
tokens.elevation.xlarge
tokens.elevation.huge

Border Radius

import { tokens } from '@naturacosmeticos/natds-styles'

tokens.radius.none
tokens.radius.small
tokens.radius.medium
tokens.radius.large
tokens.radius.circle   // 50% for circular elements

Opacity

import { tokens } from '@naturacosmeticos/natds-styles'

tokens.opacity.transparent   // 0
tokens.opacity.lower         // 0.08
tokens.opacity.low           // 0.12
tokens.opacity.mediumLow     // 0.24
tokens.opacity.medium        // 0.48
tokens.opacity.mediumHigh    // 0.72
tokens.opacity.high          // 0.88
tokens.opacity.opaque        // 1

Icon Sizes

import { tokens } from '@naturacosmeticos/natds-styles'

tokens.iconSizes.micro
tokens.iconSizes.tiny
tokens.iconSizes.small
tokens.iconSizes.medium
tokens.iconSizes.large
tokens.iconSizes.xlarge

Avatar Sizes

import { tokens } from '@naturacosmeticos/natds-styles'

tokens.avatarSizes.tiny
tokens.avatarSizes.small
tokens.avatarSizes.medium
tokens.avatarSizes.large
tokens.avatarSizes.xlarge

// Each size includes:
// - width, height
// - fontSize
// - borderRadius

Button Sizes

import { tokens } from '@naturacosmeticos/natds-styles'

tokens.buttonSizes.small
tokens.buttonSizes.medium
tokens.buttonSizes.large

// Each includes height, padding, fontSize

Component Sizes

import { tokens } from '@naturacosmeticos/natds-styles'

tokens.sizes.tiny
tokens.sizes.small
tokens.sizes.medium
tokens.sizes.large

Overlay

import { tokens } from '@naturacosmeticos/natds-styles'

tokens.overlay.color        // Overlay color
tokens.overlay.opacity      // Default opacity

TypeScript Support

The package includes comprehensive TypeScript definitions:

import { 
  tokens, 
  themes, 
  ITheme,
  ITypography,
  ISpacing,
  IElevation,
  IOpacity,
  IRadius,
  IIconSizes,
  IAvatarSizes,
  IButtonSizes,
  ISizes
} from '@naturacosmeticos/natds-styles'

// Type-safe token access
const spacing: ISpacing = tokens.spacing
const elevation: IElevation = tokens.elevation

// Typed themes
const theme: ITheme = themes.natura.light

Theme Structure

Each theme object contains:

import { themes } from '@naturacosmeticos/natds-styles'

const theme = themes.natura.light

// Theme properties:
theme.color          // All color tokens
theme.spacing        // Spacing scale
theme.typography     // Typography system
theme.elevation      // Shadow styles
theme.radius         // Border radius values
theme.opacity        // Opacity scale
theme.sizes          // Component sizes
theme.iconSizes      // Icon dimensions
theme.avatarSizes    // Avatar dimensions
theme.buttonSizes    // Button dimensions

Available Themes

Natura

themes.natura.light themes.natura.dark

Avon

themes.avon.light themes.avon.dark

Aesop

themes.aesop.light themes.aesop.dark

The Body Shop

themes.theBodyShop.light themes.theBodyShop.dark

Usage Examples

Vanilla JavaScript

import { tokens } from '@naturacosmeticos/natds-styles'

// Apply tokens to DOM elements
const button = document.createElement('button')
button.style.backgroundColor = tokens.color.primary
button.style.color = tokens.color.onPrimary
button.style.padding = `${tokens.spacing.small}px ${tokens.spacing.medium}px`
button.style.borderRadius = tokens.radius.medium
button.style.boxShadow = tokens.elevation.small

CSS-in-JS

import { tokens } from '@naturacosmeticos/natds-styles'

const styles = {
  button: {
    backgroundColor: tokens.color.primary,
    color: tokens.color.onPrimary,
    padding: `${tokens.spacing.small}px ${tokens.spacing.medium}px`,
    borderRadius: tokens.radius.medium,
    border: 'none',
    cursor: 'pointer',
    fontSize: tokens.typography.body.medium.fontSize,
    fontWeight: tokens.typography.body.medium.fontWeight,
    boxShadow: tokens.elevation.small,
    transition: 'all 0.2s ease',
    '&:hover': {
      boxShadow: tokens.elevation.medium
    }
  }
}

Vue.js

<script setup>
import { tokens } from '@naturacosmeticos/natds-styles'

const buttonStyle = {
  backgroundColor: tokens.color.primary,
  padding: `${tokens.spacing.small}px ${tokens.spacing.medium}px`,
  borderRadius: tokens.radius.medium
}
</script>

<template>
  <button :style="buttonStyle">
    Click me
  </button>
</template>

Angular

import { Component } from '@angular/core'
import { tokens } from '@naturacosmeticos/natds-styles'

@Component({
  selector: 'app-button',
  template: '<button [ngStyle]="buttonStyle">Click me</button>'
})
export class ButtonComponent {
  buttonStyle = {
    backgroundColor: tokens.color.primary,
    color: tokens.color.onPrimary,
    padding: `${tokens.spacing.small}px ${tokens.spacing.medium}px`,
    borderRadius: tokens.radius.medium
  }
}

Use Cases

Non-React Projects

Perfect for Vue, Angular, Svelte, or vanilla JavaScript projects that need Natura Design System tokens.

Custom Components

Build your own component library using Natura design tokens as the foundation.

Design Token Integration

Integrate Natura design language into existing projects without adopting React components.

Server-Side Rendering

Use tokens in SSR contexts where React components might not be suitable.

Design Tools

Export tokens for use in design tools, style guides, or documentation.

Comparison with Other Packages

vs natds-react

natds-react includes React components built with these tokens. Use natds-styles if you need tokens without React.

vs natds-web

natds-web is a React library that depends on natds-styles. Use natds-styles directly for non-React projects.

Additional Information

Dependency Note

Both @naturacosmeticos/natds-react and @naturacosmeticos/natds-web use this package internally. When using those packages, you automatically get access to these tokens through their theme systems.

Storybook Documentation

For visual examples of all design tokens:

View Token Documentation

Browse all available design tokens in Storybook

Resources

GitHub

View source code and contribute

npm Package

View on npm registry

natds-web Integration

See how natds-web uses this package

Contributing

Learn how to contribute

Package Info

Version: 3.8.3
License: ISC
Maintained by: Natura Cosméticos
Contact: [email protected]

For React projects, consider using the higher-level packages @naturacosmeticos/natds-react or @naturacosmeticos/natds-web which include pre-built components.

Get Started

Packages

Theming

Guides

​NatDS Styles

​Overview

Design Tokens

Multi-Brand Themes

TypeScript Support

Framework Agnostic

​Installation

​Dependencies

​Basic Usage

​Importing Tokens

​Using Themes

​Available Tokens

​Color Tokens

​Typography Tokens

​Spacing Tokens

​Elevation (Shadows)

​Border Radius

​Opacity

​Icon Sizes

​Avatar Sizes

​Button Sizes

​Component Sizes

​Overlay

​TypeScript Support

​Theme Structure

​Available Themes

Natura

Avon

Aesop

The Body Shop

​Usage Examples

​Vanilla JavaScript

​CSS-in-JS

​Vue.js

​Angular

​Use Cases

​Comparison with Other Packages

vs natds-react

vs natds-web

​Additional Information

​Dependency Note

​Storybook Documentation

View Token Documentation

​Resources

GitHub

npm Package

natds-web Integration

Contributing

​Package Info

Build docs developers (and LLMs) love

NatDS Styles

Overview

Installation

Dependencies

Basic Usage

Importing Tokens

Using Themes

Available Tokens

Color Tokens

Typography Tokens

Spacing Tokens

Elevation (Shadows)

Border Radius

Opacity

Icon Sizes

Avatar Sizes

Button Sizes

Component Sizes

Overlay

TypeScript Support

Theme Structure

Available Themes

Usage Examples

Vanilla JavaScript

CSS-in-JS

Vue.js

Angular

Use Cases

Comparison with Other Packages

Additional Information

Dependency Note

Storybook Documentation

Resources

Package Info