Vibe·
Nothing-UI
Design
v1.0

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.

01Color System

Neutral

Black
#000000
Dark
#171717
Grey
#2A2A2A
Light
#5A5A5A
White
#FFFFFF

Accent

Signal Red
#D71921
02Typography

Primary · Dot Matrix

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*()_+

Secondary · Geist

Aa

Headline · Geist SemiBold

Headline

Editorial Accent · Newsreader Italic

Ideas should feel inevitable.
Brand lines · pull quotes · expressive moments only
03Iconography

System Icons · 9×9 Dot Grid

Scalable · --gs

Glyph (Dot Matrix)

0 1 2 3 4 5 6 7 8 9
A B C D E F

Punctuation · Round-Dot Units

COLON DOT ELLIPSIS
04Spacing System4pt
16
24 1616
05Buttons

Primary

Outline

Text · Icon

States

06Input Fields
Text Input
Focused
With Icon

Checkbox · Radio · Toggle

Checked
Unchecked
Option one
Option two
07Chips & Tags

Chips

ChipActiveAddClose

Tags

TagActive TagDisabled
08Sliders

Slider

Range

Progress · 60%

Circular · 60%

60%
09Navigation

Nav Bar

Tabs

Tab OneTab TwoTab Three

Pagination

10Alerts
Success
Your changes have been saved.
Warning
Please check your input.
Error
Something went wrong.
11Switches

Switch

Checkbox / Radio

12Avatar & Badge
N
13Cards
Card Title
Description of the card content.
Battery
78%
128 / 256 GB
Glyph interface
Minimal & intuitive by design.
14Lists
List Item
Subtitle
List Item
Subtitle
List Item
Subtitle
15Table
NameDateStatus
Item One2024-05-20Active
Item Two2024-05-19Inactive
Item Three2024-05-18Active
16Calendar
May 2024
17Tooltip
Tooltip text
Hover me
18Modal / Dialog
19Progress & Stepper

Linear · 60%

Stepper

1234
20Background · Dot Fieldlayers · rules · demo

The dot field is a sparse layer of fine dots that takes the local inverse of whatever surface sits beneath it — light over dark objects, dark over light ones. One continuous field crossing both reads correctly on each. Cards are the topmost layer and cover the dots; dots show only in the gaps between cards. Implementation: a fixed dot layer with mix-blend-mode:difference.

  • Local inverse — dots = inverse of the surface behind them (not one per-theme color); dark surface → light dots, light surface → dark dots
  • Layers — background / dots / card (topmost, covers dots)
  • Fine & sparse — ~1.3px dots, ~120px spacing; visible on inspection, never competing
  • Implementation — mix-blend-mode:difference auto-inverts; no per-theme dot color needed
  • Continuous alignment — viewport-anchored (background-attachment:fixed)
21Icon Library · Round-Dot Pixels
22Dropdown · Menu
23Accordion
What is nothing-ui?+

A zero-dependency, Nothing-inspired component library — pure CSS variables and a little vanilla JS.

Does it need a build step?+

No. Drop in the stylesheet and write HTML.

Can I re-skin it?+

Edit tokens.css — every component reads from the same variables.

24Breadcrumb
Section
25Avatar Group
A
B
C
+5
8 collaborators
26Skeleton
27Command Palette
ESC
Actions
Refactor selection⌘⇧R
Run agent⌘R
Recent
auth-module.ts
28Kbd & Code
Kopen palette
// run an agent
const r = await agent("refactor")
29Toast
Savedchanges synced
Agent finished2 files changed
30Segmented · Group

Segmented control

Button group

31Empty State
No agents yet
Create one to get started.
32Timeline
  • Task started
    21:30
  • Files analyzed
    21:32
  • Awaiting review
33Popover
Auto-approve
Trusted agents run without asking for confirmation each step.
34Rating · Stepper

Rating

Quantity

3
35Dropzone
Drop files or click to browse
36Banner
37Metric
Tokens
128K
↑ 12%
Errors
3
↓ 40%
38Tabs · Pill
OverviewLogsFiles
39Tree View
src
index.ts
auth.ts
40Glyph Matrix · 25×25 Circular Maskcanonical dot grid · white LEDs on black

Matches the Phone (3) Glyph Matrix: a 25×25 addressable grid, circularly masked (no LEDs in the corners), built from white round dots. Dim LEDs form the base texture, lit dots form the glyph; signal glyphs use brand red. This is the canonical grid for dot iconography — higher fidelity than the in-page 9×9 status icons.

41Rotary Knobdrag
50
GAIN
42Dot Loader
LOADING
43Verification Code
ENTER 4-DIGIT CODE
44Live Counter
0
↑ 12% THIS WEEK
45Activity Streamlive
46Copy Field
git clone github.com/wangbh030722/vibe-nothing-ui-design
CLICK TO COPY · CONFIRMS INLINE

Applied · Workspace

WORKSPACE

Projects

Projects
24
Active
18
Needs review
1
AllActiveArchived
NameStatusUpdated
auth-serviceActive2m ago
web-dashboardDEPLOYING
now
design-tokensNeeds review12m ago
billing-apiIdle1h ago
docs-siteActive3h ago