A minimal, utilitarian, and modern UI design system for building simple and clear applications.
Note
Steel is in it's first alpha stage and we discourage it's usage in a production enviroment since it's most likely that every version will cause some type of undocumented breakage.
- 1. Purpose
- 2. Inspiration
- 3. Features
- 4. Getting Started
- 5. Examples
- 6. Contributing
- 7. Roadmap
- 8. Support
The creation of Steel comes from the excess of pre-built component-based libraries that come with their own design system and frustation on customization. Steel takes a different approach. It focuses on giving a set of guidelines together with it's own underlying core design system that bring modular design tokens and additional classes to help you build your components with Steel proven design or (our recommendation) apply them to headless component libraries like Bits UI and others.
It's simple! The underlying base of Steel consists of small pieces of CSS files that make the design system by implementing Steel guidelines and tokens. This makes Steel really easy to use because it does not rely on any dependencies like SCSS or Tailwind CSS and also has a lower barrier of entry for contributions because Steel is just vanilla CSS.
Simple diagram of how Steel works
The main inspirations of Steel come from minimalism, brutalist, and utilitarian design philosophies and UI design systems like Vercel Geist, IBM Carbon, and Adobe Spectrum that focus on clear interfaces with no distractions, the same goal Steel has.
- Styling Foundation: Steel provides a set of design tokens, utility classes, and guidelines, that makes it easy to build components with a consistent and modern design. It's not a component library; instead, it offers the base style and buliding blocks for creating a consistent UX and design.
- Headless UI Friendly: Steel is designed especifically to integrate with headless UI component libraries (like Bits UI and others in the future). (Addtional Context).
- Vanilla CSS: Steel is built with 100% vanilla CSS, so no dependencies and makes it compatible with any JavaScript framework. No JavaScript is included.
- Modular Design Tokens: Steel's design system is based on design tokens (colors, typography, spacing, etc.), making it easy to customize if needed.
- Utility-First Approach: Steel provides a wide range of utility classes for layout and content, allowing for quicker development and reducing the need for custom CSS.
- KISS Principle: Steel adheres to the KISS (Keep It Simple, Stupid) principle, focusing on simplicity and only focusing on what is needed.
Steel offers a lot of styles that can be implemented as components on various types of UI libraries (mainly headless ones), however unlike a UI design system where you get both the style of a component but also it's logic, in Steel you only get the style where you bring your own logic on in this case using the logic of a component from a headless UI. You can check what components Steel has trough our documentation.
At the moment we are focused on making a stable base and then focusing on building the components, so the following features will take a long time before being implemented into Steel.
- Light color scheme
- Support for themes