# Vibe Nothing UI Design > Zero-dependency Nothing-inspired UI design system with monochrome styling, dot-matrix typography, and signal-red accents for web interfaces - Skill: `aradotso/vibe-nothing-ui-design` (Agent Skill) - Install (CLI): `npx skillmds@latest add aradotso/vibe-nothing-ui-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/aradotso/vibe-nothing-ui-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: aradotso (https://skillmd.com/u/aradotso) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/aradotso/vibe-nothing-ui-design --- # Vibe-Nothing-UI-Design Skill > Skill by [ara.so](https://ara.so) — Design Skills collection. ## Overview Vibe-Nothing-UI-Design is a zero-dependency UI component library inspired by Nothing's visual language. It provides ready-to-use HTML/CSS components with: - **Monochrome surfaces** (black, grey, white hierarchy) - **Round-dot typography** (Doto font) and iconography - **Single signal-red accent** (#D71921) for critical states only - **Dark/light themes** via single attribute - **No build step** — pure HTML, CSS custom properties, vanilla JS Perfect for creating distinctive, minimal interfaces without framework dependencies. ## Installation ### Direct Integration 1. **Copy files** into your project: ``` your-project/ ├── css/ │ └── nothing-ui.css ├── js/ │ └── nothing-ui.js └── fonts/ └── open/ ├── doto/ ├── geist/ ├── geist-mono/ └── newsreader/ ``` 2. **Link in HTML**: ```html ``` ### Theme Control Set theme on any ancestor element: ```html
...
``` Toggle programmatically: ```javascript // Toggle theme document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark'; ``` ## Core Components ### Buttons ```html ``` ### Form Inputs ```html
``` ### Cards ```html

Deployment Status

Your application is running on 3 instances.

Build Pipeline

Blocked

Requires manual approval to proceed.

``` ### Badges & Status Pills ```html Active Pending Failed Idle
Deploying
``` ### Tables ```html
Agent Status Last Run Actions
content-generator Active 2m ago
image-processor Blocked 14m ago
``` ### Alerts ```html
Note: Deployment will begin in 5 minutes.
Deployed: Version 2.1.0 is now live.
Action Required: API key expires in 3 days.
Build Failed: Check logs for details.
``` ### Navigation ```html
Dashboard Agents Deployments Settings
Projects / my-agent / Runs
``` ### Modal Dialog ```html

Confirm Deletion

This action cannot be undone. Delete agent "content-gen"?

``` ### Code Blocks ```html

Run npm start to begin.

{
  "model": "gpt-4",
  "temperature": 0.7,
  "max_tokens": 2000
}
``` ## Typography System ### Heading Hierarchy ```html

Main Title

Section Title

Subsection

Component Title

``` ### Font Families ```html

Dashboard

Interface copy

API_KEY=xyz

A more personal, conversational tone.

``` ## CSS Custom Properties ### Colors ```css /* Access theme colors */ .custom-element { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); } /* Signal red (use only for critical states) */ .critical { color: var(--color-accent); } /* Available variables: --color-bg Background --color-bg-elevated Surface --color-text Primary text --color-text-muted Secondary text --color-border Dividers --color-accent Signal red (#D71921) */ ``` ### Spacing ```css .custom-spacing { padding: var(--spacing-4); /* 16px */ margin-bottom: var(--spacing-6); /* 24px */ gap: var(--spacing-2); /* 8px */ } /* Scale: --spacing-1: 4px --spacing-2: 8px --spacing-3: 12px --spacing-4: 16px --spacing-5: 20px --spacing-6: 24px --spacing-8: 32px */ ``` ### Border Radius ```css .custom-card { border-radius: var(--radius-md); /* 8px */ } /* Scale: --radius-sm: 4px --radius-md: 8px --radius-lg: 12px --radius-full: 9999px (pills) */ ``` ## Common Patterns ### Dashboard Layout ```html

My App

Dashboard Agents Settings
Home / Dashboard
``` ### Data Table with Status ```html

Active Deployments

Service Status Version Updated
api-gateway Running v2.1.0 2 hours ago
worker-queue Deploying v1.8.3 5 minutes ago
analytics Failed v3.0.0 12 minutes ago
``` ### Form with Validation States ```html
Key is valid
Must be a valid URL
``` ### Loading States ```html
``` ## Design Principles ### Signal Red Usage **DO use signal red for:** - Critical errors (`badge-danger`, `alert-error`) - Destructive actions (`btn-danger`) - Live/blocked/needs-input states - Items requiring immediate attention **DON'T use signal red for:** - Primary CTAs (use black/white inversion) - Decorative elements - Multiple items on screen (reserve for true signals) ```html Requires Approval ``` ### Depth & Hierarchy Use borders, whitespace, and elevation — never shadows: ```css /* Elevated surface */ .elevated-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); padding: var(--spacing-6); } /* Frosted glass effect (built-in) */ .glass-panel { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } ``` ## Troubleshooting ### Fonts Not Loading Ensure the `fonts/open/` directory is correctly positioned relative to CSS: ``` project/ ├── css/ │ └── nothing-ui.css ← references ../fonts/open/ └── fonts/ └── open/ ├── doto/ ├── geist/ └── ... ``` If fonts are in a different location, update CSS: ```css @font-face { font-family: 'Doto'; src: url('/path/to/fonts/open/doto/Doto-Regular.woff2') format('woff2'); } ``` ### Theme Not Switching Ensure `data-theme` is on an ancestor of all components: ```html
...
...
``` ### Accent Color Overused If everything looks red, you're overusing the signal color. Review: ```html
Active
Needs Review ← Only signal
...
Failed
``` ### Custom Components Not Matching Style Extend using CSS custom properties: ```css .my-custom-widget { font-family: var(--font-ui); background: var(--color-bg-elevated); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-4); } ``` ## Integration Examples ### With Static Site Generator ```html {% block content %}{% endblock %} ``` ### With Vanilla JS App ```javascript // app.js class App { constructor() { this.theme = localStorage.getItem('theme') || 'dark'; this.applyTheme(); } applyTheme() { document.body.dataset.theme = this.theme; } toggleTheme() { this.theme = this.theme === 'dark' ? 'light' : 'dark'; localStorage.setItem('theme', this.theme); this.applyTheme(); } } const app = new App(); ``` ### Dynamic Content ```javascript // Generate table rows dynamically function renderAgents(agents) { const tbody = document.querySelector('#agents-table tbody'); tbody.innerHTML = agents.map(agent => ` ${agent.name} ${agent.status} ${agent.lastRun} `).join(''); } ``` ## Additional Resources - **Live Demo**: https://wangbh030722.github.io/vibe-nothing-ui-design/ - **Component Reference**: https://wangbh030722.github.io/vibe-nothing-ui-design/index.html - **SPEC.md**: Generation contract and token reference - **DESIGN.md**: Design rationale and principles