Basic Design System GitHub ↗
Basic Design System v1.0

Less is the system.

Just tokens, monospace typography, and hard borders — the essential components for building raw, honest interfaces.

Open source ↗

Installation

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/DavidMarioLC/basic-design-system@main/styles.css">

Components

Button
Radio
Checkbox
Input
Slider
Select
Avatar
JD JD JD
Badge
New Beta
Accordion
Section A
Content for section A.
Section B
Content for section B.
Table
Name Role
Ada Lovelace Engineer
Alan Turing Researcher
Spinner
Alert
!

Heads up

This is a default alert message.

!

Heads up

This is an inverted alert message.

Card

Basic Plan

Everything you need to get started, no frills attached.

Examples

User list
User Role Status
JD John Doe
Admin Active
JS Jane Smith
Editor Pending
AT Alan Turing
Viewer Pending
Sign up form
Plan
Pricing

Basic

For individuals getting started.

Popular

Pro

For teams that need more room to grow.

Enterprise

For organizations with custom needs.

FAQ
What is this design system?
A static, framework-free collection of brutalist components — raw, unadorned, and high-contrast.
Does it require a build step?
No. It's just index.html, styles.css, and app.js — open it directly or serve it as static files.
Can I use it with a framework?
Yes. The classes are plain CSS, so they work the same whether you're using vanilla HTML or a component framework.
Profile card
JD

Jane Doe

Admin

Product designer focused on brutalist interfaces.

Notifications
!

Deploy started

Building version 1.2.0.

!

Deploy finished

Version 1.2.0 is live.