Natura11y helps you make websites beautiful and accessible

An Open Source Design ECOsystem

Natura11y empowers you with modern tools, ready-to-use components, and accessibility resources to build websites and scalable design systems.

Naturally ecosystem powered by Webpack, HTML5, Sass, JavaScript, React, and Figma

Accessibility

Build websites everyone can use. Natura11y comes packed with accessibility features right out of the box.

Customizable CDN

Customize styles with simple CSS variables using Natura11y's CDN. Skip the Sass compilers and get straight to building.

Yellow, blue, red, and green bird in close-up photograph

Dynamic Color System

Beyond Dark Mode: Apply color themes to entire pages or components, even at specific breakpoints.

Figma UI Kit

Natura11y's free Figma UI Kit is perfect for design exploration or building a complete design system from the ground up.

Navigation

Build responsive navigation systems with ready-made headers, menus, dropdowns, and breadcrumbs.

Open Source Icon Library

Access 100+ open-source icons, or build your own custom icon font—all without creating an account or paying a dime.

Two great black-backed gulls on a rocky beach

React Starter Components

Jumpstart your next React project with Naturally’s starter components. Use exact same CSS as Naturally’s HTML components..

RTL Support

Create layouts that flow naturally in any reading direction. Natura11y ships with full right-to-left language support.

Typography

Naturally makes typography effortless—two variables control your entire scale and adapt seamlessly across breakpoints.

Easily Build Dynamic Layouts

Natura11y's ready-made components and intuitive utility classes make it easy to compose pages. The Backdrop example below shows how they work together.

This Emily Dickinson poem captures the fleeting beauty and speed of a hummingbird's flight, emphasizing the ephemeral nature of its movement and presence in a moment of vivid imagery.


                            <div class="backdrop backdrop--fixed">
                                <div class="backdrop__media">
                                    <img class="opacity-50" src="..." alt="..." />
                                </div>
                                <div class="backdrop__cover">
                                    <div class="container text-align-center">
                                        <h2 class="banner-headline">
                                            A Route of Evanescence
                                        </h2>
                                        <p>
                                            This Emily Dickinson poem captures the fleeting...
                                        </p>
                                        <a class="button">
                                            Read This Poem
                                        </a>
                                    </div>
                                </div>
                            </div>

GitHub NPM