Browsers have a mini design system

With this base stylesheet we can utilise a browsers system color and css keywords implementation. Let's build on top of that.

This project has a number of goals

1. Provide a default style via system.css for basic html pages
2. Provide the means to style the default using custom properties
3. No dependencies
4. Based on system colors and CSS keywords (The browser has defaults, so lets use those)

Additionally, system.css also provides a simple form layout and validation setup.

Compatibility

This solution uses features that might cause issues. Consider the following: Container Units, CSS nesting, Sub Grid, color-mix(), :has(), @property, and @layer.

These features work in following browsers:

• Chrome 117+
• Safari 16.5
• Firefox 124+

Acknowledgments

With Sara Joy's enthusiasm about styling markup without class names and her hue based theming demo, I decided to complete my own endeavour to style basic web pages without class names.

system.css is originally based on new.css. It has been modified to the point where there are not many similarities left. But I wouldn't have been able to jump start without it!

For fonts we use what we are given by the OS. My thanks to Modern Font Stacks for their wonderful resource.

Inspiration

My admiration and other recommendations to consider are:

• water.css
• pico.css
• simple.css