whatisgithub

What is vibe-nothing-ui-design?

wangbh030722/vibe-nothing-ui-design — explained in plain English

Analysis updated 2026-05-18

127HTMLAudience · designerComplexity · 1/5LicenseSetup · easy

In one sentence

A zero-dependency, copy-in UI component library styled after the Nothing phone brand: monochrome, round-dot type, and a signal-red accent for real states only.

Mindmap

mindmap
  root((Vibe Nothing UI))
    What it does
      Copy-in components
      Monochrome style
      Signal-red accent
    Tech stack
      HTML
      CSS
      Vanilla JS
    Components
      Buttons and inputs
      Tables
      Glyph matrix icons
    Audience
      Designers
      Frontend builders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Drop the CSS and JS files into a static site to get a Nothing-styled UI instantly.

USE CASE 2

Build an admin or dashboard screen using the included buttons, tables, and navigation components.

USE CASE 3

Hand the SPEC.md file to an AI assistant so it generates new UI consistent with this design system.

USE CASE 4

Switch a page between dark and light themes with a single data-theme attribute.

What is it built with?

HTMLCSSJavaScript

How does it compare?

wangbh030722/vibe-nothing-ui-designhossein8360/cdn-ip-finderwebdevsimplified/javascript-simplified
Stars127126124
LanguageHTMLHTMLHTML
Last pushed2023-01-04
MaintenanceDormant
Setup difficultyeasyeasyeasy
Complexity1/52/51/5
Audiencedesignergeneralvibe coder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

Vibe Nothing UI Design is a component library for building web interfaces in the visual style of the Nothing phone brand: monochrome surfaces, round dot typography and icons, and a single signal red accent color used only for meaningful states. It is not a written specification you have to interpret yourself. It ships as actual, ready to use components such as buttons, inputs, tables, navigation, cards, and dialogs that you copy directly into a project and use. The library has zero dependencies. It is built from plain HTML, CSS custom properties, and a small amount of vanilla JavaScript, with no framework and no build step required. To use it, you link the CSS file, add a script tag, and set a data theme attribute on the page body to switch between dark and light modes on any element in the page. In total there are 46 components covering foundations like color and type, form controls, navigation, feedback elements, and data display, all available in both themes. The project also includes a complete example application screen built entirely from the library, showing a sidebar, breadcrumb, search bar, and a data table with status indicators, demonstrating how the accent color is reserved for genuine signals like something deploying or needing review rather than decoration. A distinct visual feature is the glyph matrix, a 25 by 25 circular dot grid used for a canonical icon, alongside smaller 9 by 9 dot icons used throughout the interface. The fonts bundled with the project, including a round dot display font, a general UI font, a monospace font for labels, and an italic font for editorial text, are all open licensed and self contained, so no proprietary fonts are needed. Documentation includes a SPEC file describing the exact design tokens and rules, meant to be handed to an AI assistant so it can generate compatible interfaces, and a DESIGN file explaining the reasoning behind the choices. The project is released under the MIT license and is an independent fan project, not affiliated with or endorsed by Nothing Technology Limited.

Copy-paste prompts

Prompt 1
Using the SPEC.md tokens and rules from this project, generate a settings page with the same monochrome, round-dot style.
Prompt 2
Show me how to add the nothing-ui.css and nothing-ui.js files to a static HTML page and render a primary button.
Prompt 3
Help me build an applied app screen using this library's sidebar, breadcrumb, and data table components.
Prompt 4
Explain how the data-theme attribute controls dark and light mode in this component library.

Frequently asked questions

What is vibe-nothing-ui-design?

A zero-dependency, copy-in UI component library styled after the Nothing phone brand: monochrome, round-dot type, and a signal-red accent for real states only.

What language is vibe-nothing-ui-design written in?

Mainly HTML. The stack also includes HTML, CSS, JavaScript.

What license does vibe-nothing-ui-design use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is vibe-nothing-ui-design to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is vibe-nothing-ui-design for?

Mainly designer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.