# Nothing UI

> NothingUI (Nothing OS 4.1)

- Skill: `kerneldroid/nothing-ui` (Agent Skill, multi-file: 47 files)
- Install (CLI): `npx skillmds@latest add kerneldroid/nothing-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kerneldroid/nothing-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kerneldroid (https://skillmd.com/u/kerneldroid)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/kerneldroid/nothing-ui

---

# NothingUI (Nothing OS 4.1)

## Default stance

Act as an expert in the Nothing Design System, specifically targeting **Nothing OS 4.1** aesthetics. When applying styles, building UI components, or designing layouts, strictly adhere to Nothing's unique design principles. This applies to any framework or language (React, Kotlin, Flutter, Rust, etc.). Keep responses direct, strictly factual, and without filler.

## Core Principles (OS 4.1)

- **Dot Matrix:** The foundation of Nothing's typography and iconography. Used for large headers, clocks, and branding elements. OS 4.1 introduces dynamic "waking-up" animations for these dot elements.
- **Extra Dark & High Contrast:** Base palette relies on an "Extra Dark Mode" optimized for OLEDs (pure `#000000`) and pure white (`#FFFFFF`). Use precise shades of gray for depth and surfaces.
- **Red Accent:** Use Nothing Red (e.g., `#d71921` or `#ff0000`) sparingly for warnings, active states, or primary actions to create sharp contrast against the monochrome base.
- **Glassmorphism & Adaptive Blur:** OS 4.1 heavily features adaptive background blur (e.g., lock screen to passcode transitions) and translucent layered depth effects.
- **Live Pills & Widgets:** UI emphasizes persistent "Pill" shapes in status bars for live activities, and heavily rounded widgets (Relaxation Hub, Quick Settings).
- **Utilitarian Geometry:** Heavy use of rounded rectangles and perfect circles. Borders are often clearly defined (stroked) to separate sections without relying heavily on shadows.

## Typography & Text Sizes

You must use the proprietary fonts provided in the `fonts/` directory when generating UI artifacts.

- **NDot (55, 57, 77):** Large display text, primary widgets, clocks, extreme emphasis.
- **Lettera (LetteraMonoLL):** Secondary headers, technical data, timestamps, monospaced needs.
- **NType82 & NSegments:** Stylized display or specific numeric readouts.
- **Inter / Space Grotesk / Roboto:** Body text, paragraphs, dense UI elements.

**Standard Text Sizes (sp):**
- **Display:** 112sp (D4), 56sp (D3), 45sp (D2), 34sp (D1)
- **Headline:** 24sp
- **Large / Title:** 22sp / 20sp
- **Subtitle / Summary:** 16sp
- **Body / Button:** 14sp
- **Caption:** 12sp

## Color Palette Reference

- **Backgrounds:**
  - Dark Mode: `#000000` (Pure Black "Extra Dark"), `#1c1c1c` to `#232325` (Elevated surfaces).
  - Light Mode: `#FFFFFF` (Pure White), `#f0f2f2` to `#e3e3e3` (Elevated surfaces).
- **Text:**
  - Dark Mode: `#FFFFFF` (Primary), `#c8c8c8` or `#adadad` (Secondary).
  - Light Mode: `#000000` (Primary), `#484848` (Secondary).
- **Accent/Error:** `#d71921` (Nothing Red).
- **Borders/Dividers:** `#323232` (Dark Mode), `#e3e3e3` (Light Mode).

## Geometry & Spacing (Hard Facts)

Based on Nothing's source XML values, adhere to these exact dimensions:

**Corner Radii:**
- **Dialogs:** `20dp`
- **Widgets / Large Cards:** `24dp` (border_radius_l) or `32dp` (border_radius_xl)
- **Medium Cards:** `16dp` (border_radius_s) or `20dp` (border_radius_m)
- **Small Cards / Chips:** `8dp` (border_radius_xs)
- **Buttons & Status Pills:** `9999dp` (border_radius_full)
- **Minor Elements (checkboxes, badges):** `2dp` to `4dp`

**Spacing & Padding:**
- **Standard Card Spacing:** `8dp`
- **Dialog Button Spacing:** `8dp`
- **Standard Padding:** `16dp` or `24dp` (used for snackbars and layout margins)

## Implementation Guidelines

- **Surfaces & Separation:** Enclose widgets in rounded rectangles with the radii defined above. Prefer visible 1px borders (e.g., `#323232` in dark mode) over drop shadows. Shadows should be non-existent or extremely hard/sharp.
- **Glass & Blur:** Apply backdrop-filter blurs to floating panels, dialogs, and navigation elements to match OS 4.1's adaptive blur aesthetic.
- **Icons:** Use outlined, technical-looking icons (Material Symbols Outlined or custom dot-matrix icons). Keep stroke width consistent.
- **No generic AI aesthetics:** Avoid standard Material Design shadows, colorful gradients, soft pastel colors, or rounded blob aesthetics.
- **Direct Application:** When writing CSS, Compose, or XML, explicitly define the color hex codes and font sizes listed above. Do not use generic fallback colors. Always reference the fonts located in `fonts/`.