What are the three layers of the Elementary Design System?

Elementary consists of Layer 1 (Token Naming System/The Contract), Layer 2 (Theme Implementations like Polished or Sketch), and Layer 3 (Optional Component Classes).

Does Elementary support dark mode automatically?

Yes, the Polished theme uses the CSS light-dark() function and the color-scheme property to support both manual toggles and system preferences automatically.

How do I switch between high-fidelity and wireframe modes?

You can switch visual fidelity by simply changing the CSS import path from the 'polished.css' theme to the 'sketch.css' theme without changing any of your component code.

Can I use Elementary with Tailwind CSS?

Mixing Tailwind with Elementary is discouraged. Elementary is designed as a standalone token-based system to prevent utility-class bloat and maintain strict design system constraints.

Elementary Design System

Name: Elementary Design System
Author: million-views

bymillion-views

•

Design Tools

Implements a three-layered, token-based styling framework for building themeable, professional user interfaces with interchangeable visual fidelity.

About

Elementary is a specialized design system skill that establishes a rigorous contract between token names and values. By separating design tokens into three orthogonal layers—naming conventions, theme implementations, and component patterns—it allows developers to switch between high-fidelity production styles (Polished) and low-fidelity wireframes (Sketch) through a single CSS import change. This approach ensures design system compliance and consistency across React-based frameworks while providing built-in support for light/dark modes and rapid prototyping.

Key Features

Automatic light/dark mode support using the CSS light-dark() function
Interchangeable theme implementations including Polished and Sketch modes
Standardized CSS custom property naming system for consistent design contracts
Pre-built, optional component classes for buttons, cards, and layout patterns
Seamless integration script for local asset installation in React projects
2 GitHub stars

Use Cases

Building themeable web interfaces that require centralized control over design tokens
Rapidly prototyping low-fidelity wireframes that can be upgraded to production UI instantly
Maintaining a consistent design system across multiple Next.js, Remix, or Vite projects

About

Key Features

Automatic light/dark mode support using the CSS light-dark() function
Interchangeable theme implementations including Polished and Sketch modes
Standardized CSS custom property naming system for consistent design contracts
Pre-built, optional component classes for buttons, cards, and layout patterns
Seamless integration script for local asset installation in React projects
2 GitHub stars

Use Cases

Building themeable web interfaces that require centralized control over design tokens
Rapidly prototyping low-fidelity wireframes that can be upgraded to production UI instantly
Maintaining a consistent design system across multiple Next.js, Remix, or Vite projects