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.

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

01Automatic light/dark mode support using the CSS light-dark() function

02Interchangeable theme implementations including Polished and Sketch modes

03Standardized CSS custom property naming system for consistent design contracts

04Pre-built, optional component classes for buttons, cards, and layout patterns

05Seamless integration script for local asset installation in React projects

062 GitHub stars

Use Cases

01Building themeable web interfaces that require centralized control over design tokens

02Rapidly prototyping low-fidelity wireframes that can be upgraded to production UI instantly

03Maintaining a consistent design system across multiple Next.js, Remix, or Vite projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add million-views/skills elementary

For use in Claude.ai and ChatGPT

Download Skill