zinch/vibe-nothing-ui-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebrand to Vibe-Nothing-UI-Design; redesign README with centered dot-font logo and component shots

Browse Source
This commit is contained in:
秉寒 2026-06-11 18:44:11 +08:00
parent 1dead351ee
commit e782383d8a
7 changed files with 70 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
README.md
View File

@ -1,55 +1,94 @@
# nothing-ui <div align="center">
<img src="docs/logo.png" alt="Vibe-Nothing-UI-Design" width="720">
[![MIT License](https://img.shields.io/badge/license-MIT-white.svg)](LICENSE) [![MIT License](https://img.shields.io/badge/license-MIT-white.svg)](LICENSE)
[![Zero dependencies](https://img.shields.io/badge/dependencies-0-D71921.svg)](#quick-start) [![Zero dependencies](https://img.shields.io/badge/dependencies-0-D71921.svg)](#quick-start)
[![Live demo](https://img.shields.io/badge/demo-GitHub%20Pages-black.svg)](https://wangbh030722.github.io/nothing-ui-design-system/) [![Live demo](https://img.shields.io/badge/demo-GitHub%20Pages-black.svg)](https://wangbh030722.github.io/nothing-ui-design-system/)
A **Nothing-inspired** UI system for the web. Monochrome surfaces, round-dot type and icons, a single signal-red accent, and a sparse dot field that inverts against whatever sits behind it. **A Nothing-inspired UI design system for the web.**
Zero dependencies — pure HTML, CSS custom properties, and a little vanilla JavaScript. No framework, no build step. Monochrome surfaces · round-dot type & icons · a single signal-red accent · a sparse dot field that inverts against whatever sits behind it. Zero dependencies — pure HTML, CSS custom properties, and a little vanilla JavaScript. No framework, no build step.
![Generic AI dashboard versus nothing-ui](docs/preview.png) **[Live demo](https://wangbh030722.github.io/nothing-ui-design-system/demo.html)** · **[All components](https://wangbh030722.github.io/nothing-ui-design-system/)** · **[SPEC.md](SPEC.md)** · **[DESIGN.md](DESIGN.md)**
**[Live demo](https://wangbh030722.github.io/nothing-ui-design-system/demo.html)** · **[All components](https://wangbh030722.github.io/nothing-ui-design-system/)** · **[SPEC.md](SPEC.md)** </div>
---
<div align="center">
### Generic AI output ⟷ Vibe-Nothing-UI
*Drag the divider — same content, default AI styling on the left, this system on the right.*
<img src="docs/demo-compare.gif" alt="Dragging between a generic AI dashboard and the Vibe-Nothing-UI version" width="900">
### Dark ⟷ Light — one attribute
<img src="docs/demo-theme.gif" alt="Dragging between dark and light themes of the same console" width="900">
</div>
## Quick start ## Quick start
```html ```html
<link rel="stylesheet" href="css/nothing-ui.css"> <link rel="stylesheet" href="css/nothing-ui.css">
<body data-theme="dark"> <!-- or "light" --> <body data-theme="dark">
<button class="btn btn-primary">Button</button> <button class="btn btn-primary">Run agent</button>
</body> </body>
<script src="js/nothing-ui.js"></script> <script src="js/nothing-ui.js"></script>
``` ```
## What's inside Keep the bundled `fonts/open/` folder next to the CSS, and switch theme on any ancestor:
- **40+ components** — forms, navigation, feedback, data display, applied dashboards ```html
- **Dark / light** through one `data-theme` attribute <main data-theme="light">…</main>
- **Two dot systems** — scalable 9×9 interface icons and a 25×25 circular Glyph Matrix ```
- **Self-hosted OFL fonts** — Doto, Geist, Geist Mono, Newsreader
- **`SPEC.md`** — a generation contract precise enough to reproduce the look with zero drift
![Glyph Matrix](docs/glyph-matrix.png) No package manager, no compiler — copy the files into any static site, or take the tokens into your own stack.
## Components
Foundations, forms, navigation, feedback, data display, and an applied dashboard — 40+ components, all in two themes.
![Foundations — color, dot-matrix type, iconography](docs/components.png)
![Controls — buttons, inputs, sliders, navigation, alerts, switches](docs/controls.png)
### Applied console
A real-world layout: live session clock, breathing CPU gauge, an event spark, and segmented bars — the accent red appears only on genuine signals.
![Applied agent console](docs/console.png)
### Glyph Matrix
A canonical 25×25 circular-masked dot panel (the Phone (3) grid), plus scalable 9×9 interface icons.
![25×25 Glyph Matrix](docs/glyph-matrix.png)
## Principles ## Principles
Black, grey, and white carry hierarchy. Red `#D71921` appears only as a signal — live, blocked, needs-input — never as decoration. Controls invert black↔white instead of colorizing. Depth comes from hairlines and whitespace, not shadows. Every dot is a complete circle. - Black, grey, and white carry the hierarchy; the accent is reserved for live / blocked / needs-input signals.
- Controls use black↔white inversion, never the accent color.
## Docs - Depth comes from hairlines, whitespace, and frosted glass — no shadows, no gradients.
- One round-dot geometry runs through type, icons, and status glyphs.
| File | What it's for | - Functional UI stays sans-serif; an editorial italic appears only in page-level copy, never inside a component.
|---|---|
| `index.html` | Visual reference — the ground truth |
| `SPEC.md` | Normative rules, tokens, and per-component recipes |
| `DESIGN.md` | The reasoning behind the system |
## Fonts ## Fonts
Self-contained and open: Doto, Geist, Geist Mono, and Newsreader Italic — all under the SIL Open Font License 1.1 (see [`fonts/README.md`](fonts/README.md)). Proprietary Nothing typefaces are never bundled. Self-contained and open: **Doto** (round-dot display), **Geist** (UI & headlines), **Geist Mono** (labels & data), and **Newsreader Italic** (editorial accent). All bundled files are SIL OFL 1.1 — sources and licenses in [`fonts/open/`](fonts/open). No proprietary fonts are included or required.
## License ## Documentation
[MIT](LICENSE). An independent project inspired by Nothing's visual language — not affiliated with, endorsed by, or sponsored by Nothing Technology Limited. - **[SPEC.md](SPEC.md)** — the normative generation contract: exact tokens, hard rules, component recipes, and a release checklist. Hand it to an AI assistant to generate compatible UI.
- **[DESIGN.md](DESIGN.md)** — the design rationale and decision history.
The rendered `index.html` is the visual source of truth.
## License & trademark
Code under the [MIT License](LICENSE). This is an independent, community project inspired by Nothing's visual language — not affiliated with, endorsed by, or sponsored by Nothing Technology Limited. "Nothing", "NDot", and "NType" are trademarks or assets of their respective owners; none are included here.

4
demo.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nothing-ui · interactive demo</title> <title>Vibe-Nothing-UI-Design · interactive demo</title>
<link rel="stylesheet" href="css/nothing-ui.css"> <link rel="stylesheet" href="css/nothing-ui.css">
<style> <style>
/* ===== demo chrome ===== */ /* ===== demo chrome ===== */
@ -101,7 +101,7 @@ section.stage:active{cursor:grabbing}
<symbol id="d-check" viewBox="0 0 24 24"><path d="M4 12l5 5L20 6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol> <symbol id="d-check" viewBox="0 0 24 24"><path d="M4 12l5 5L20 6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
</defs></svg> </defs></svg>
<div class="demo-brand"><span class="w">NOTHING-UI</span><span class="s">INTERACTIVE DEMO</span></div> <div class="demo-brand"><span class="w">VIBE·NOTHING-UI</span><span class="s">INTERACTIVE DEMO</span></div>
<div class="stage-step" id="step">01 / 02</div> <div class="stage-step" id="step">01 / 02</div>
<!-- dashboard template — cloned into every comparison layer --> <!-- dashboard template — cloned into every comparison layer -->

BIN
docs/components.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 101 KiB

BIN
docs/console.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
docs/controls.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
docs/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

7
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nothing-ui — a Nothing-inspired component library</title> <title>Vibe-Nothing-UI-Design — a Nothing-inspired component library</title>
<!-- Bundled open-source fonts: Doto + Geist + Geist Mono + Newsreader Italic. --> <!-- Bundled open-source fonts: Doto + Geist + Geist Mono + Newsreader Italic. -->
<link rel="stylesheet" href="css/nothing-ui.css"> <link rel="stylesheet" href="css/nothing-ui.css">
</head> </head>
@ -57,8 +57,7 @@
<!-- MASTHEAD --> <!-- MASTHEAD -->
<div class="mod s3 brand"> <div class="mod s3 brand">
<div class="wm">NOTHING-UI</div> <div class="wm" style="font-size:clamp(26px,3.2vw,36px);line-height:1.08">Vibe·<br>Nothing-UI<br>Design</div>
<div class="ds">DESIGN SYSTEM</div>
<div class="v">v1.0</div> <div class="v">v1.0</div>
<p>A Nothing-inspired open-source design language — dot-matrix type, monochrome surfaces, a single signal accent, frosted borderless cards on a sparse adaptive dot field.</p> <p>A Nothing-inspired open-source design language — dot-matrix type, monochrome surfaces, a single signal accent, frosted borderless cards on a sparse adaptive dot field.</p>
</div> </div>
@ -515,7 +514,7 @@
</div> </div>
</div></div> </div></div>
<footer><span>NOTHING-UI · ZERO-DEPENDENCY COMPONENT LIBRARY · MIT</span><span>NDOT · NTYPE82 · HELVETICA · GEIST MONO · #D71921</span></footer> <footer><span>VIBE-NOTHING-UI-DESIGN · ZERO-DEPENDENCY COMPONENT LIBRARY · MIT</span><span>DOTO · GEIST · GEIST MONO · NEWSREADER ITALIC · #D71921</span></footer>
<script src="js/nothing-ui.js"></script> <script src="js/nothing-ui.js"></script>
</body> </body>
</html> </html>