https://github.com/zaxwebs/infra-design-system
An infrastructre-oriented design system document with demo.
https://github.com/zaxwebs/infra-design-system
Last synced: 6 days ago
JSON representation
An infrastructre-oriented design system document with demo.
- Host: GitHub
- URL: https://github.com/zaxwebs/infra-design-system
- Owner: zaxwebs
- Created: 2026-05-06T02:23:09.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-05-06T02:24:23.000Z (3 months ago)
- Last Synced: 2026-05-06T04:30:29.315Z (3 months ago)
- Size: 17.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Infra Design System
A design system for infrastructure interfaces — fast, technical, compact, and trustworthy.
Infra pairs a quiet SaaS marketing shell with product-like surfaces: terminal previews, dashboard walkthroughs, resource calculators, tables, docs navigation, and status-oriented controls.
## Quick start
Open [`demo/index.html`](demo/index.html) in your browser to explore the full component showcase.
## Structure
```
├── design-system.md # Complete design system specification
└── demo/
├── index.html # Interactive component demo page
├── styles.css # All design tokens and component styles
└── app.js # Theme toggle, tabs, calculator, animations
```
## Design tokens
The system uses semantic CSS custom properties with full light and dark theme support.
| Token | Purpose |
| ------------------ | -------------------------------------------- |
| `--primary` | Actions, selected state, progress, focus |
| `--muted` | Section backgrounds, inactive controls |
| `--border` | Structural borders throughout |
| `--destructive` | Errors and dangerous actions |
| `--warning` | Pending or caution states |
| `--card` | Elevated surface backgrounds |
## Typography
- **UI & marketing:** [Geist](https://fonts.google.com/specimen/Geist)
- **Code & numeric:** [Geist Mono](https://fonts.google.com/specimen/Geist+Mono)
## Components
The demo showcases the following components:
- **Layout** — Marketing header, hero, footer, container
- **Buttons** — Primary, secondary, destructive, account pill, marketing pill, disabled states
- **Badges** — Status dots (live, healthy, degraded, down), info badges
- **Cards** — App cards, feature cards, info panels (success, warning, destructive)
- **Forms** — Text inputs, number inputs with suffix, select pickers, range sliders
- **Data** — Responsive pricing table with ARIA roles
- **Terminal** — Terminal card with syntax-colored output, logs surface
- **Navigation** — Tabs with active states, smooth-scroll anchors
- **Theme toggle** — Light/dark switch with localStorage persistence
- **Pricing calculator** — Interactive cost estimator with live updates
## Design principles
- Use green only where it clarifies action, progress, or operational health
- Keep product UI dense, bordered, and scannable
- Prefer actual dashboard/terminal/data visuals over abstract illustrations
- Every surface must work in both light and dark themes
- Motion is functional and brief (150–500ms)
## License
MIT