A lightweight framework-agnostic design system built with native HTML, CSS and JavaScript. It provides reusable UI components and patterns for building consistent and maintainable interfaces without relying on external frameworks.
Live demo: https://as-design-system.netlify.app
Repository: https://github.com/stacherski/design-system
AS Design System is a collection of reusable UI components designed to standardize interface development across web projects.
Instead of repeatedly building UI elements from scratch, this design system provides a shared set of components and styling conventions that improve:
- interface consistency
- development speed
- maintainability
- reusability of UI patterns
The system is intentionally framework-independent so it can be used in:
- plain HTML projects
- static websites
- CMS templates
- JS frameworks (React, Vue, etc.)
- internal tools and dashboards
Framework Agnostic Built using native browser technologies.
Lightweight Minimal code footprint and no runtime dependencies.
Reusable Components designed to work across multiple projects.
Consistent Shared design patterns reduce UI fragmentation.
Accessible by default Components are designed with accessibility considerations.
The demo page presents all available components and their visual behavior.
https://as-design-system.netlify.app
It can be used as:
- a component reference
- a development playground
- a visual documentation page
The design system includes UI elements commonly required in web interfaces.
Examples include:
- buttons
- forms
- inputs
- layout helpers
- navigation patterns
- UI utilities
More components will be added over time as the system evolves.
Clone the repository:
git clone https://github.com/stacherski/design-system.git
cd design-system
Open the demo page in your browser:
index.html
You can also run a local development server if preferred.
Include the required styles and scripts:
<link rel="stylesheet" href="css/styles.css">
<script src="js/components.js"></script>
Use components directly in your HTML:
<button class="ts-button ts-button-primary">
Primary Button
</button>
Refer to the demo page for working examples and patterns.
The design system is intended to be easy to adapt.
Common customization options include:
- modifying color tokens
- adjusting spacing scale
- extending existing components
- overriding styles for branding
Because the system uses plain CSS, it can be customized without build tools.
AS Design System works well for:
- internal admin tools
- prototypes
- dashboards
- static websites
- CMS-based projects
- lightweight web apps
Contributions are welcome.
Examples of useful contributions:
- new components
- accessibility improvements
- bug fixes
- performance improvements
- documentation updates
Workflow:
- Fork the repository
- Create a feature branch
- Commit your changes
- Open a pull request
Possible future improvements:
- additional UI components
- design tokens
- improved documentation
- accessibility audits
- component testing
This project is released under the MIT License.
See the LICENSE file for details.
Created and maintained by Andrzej Stacherski
GitHub: https://github.com/stacherski