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/.