nothing-design-system-skill

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Nothing Design System Skill

Skill by ara.so — Design Skills collection.

A reusable design system for Claude Code that generates UI following Nothing's visual language: monochrome palettes, Swiss typography hierarchy, industrial widgets, and OLED-optimized blacks.

由ara.so开发的Skill——设计技能合集。

这是一个可复用的设计系统，供Claude Code生成遵循Nothing视觉语言的UI：单色调色板、瑞士风格排版层级、工业风组件，以及针对OLED优化的纯黑效果。

What This Does

功能介绍

This skill teaches AI agents to generate UI components following Nothing's design principles without repeatedly describing the same rules. It provides:

Three-layer visual hierarchy: Display, body, metadata typography scales
Monochrome token system: True blacks (#000000), grays, and full dark/light modes
Industrial components: Segmented progress bars, mechanical toggles, dot-matrix patterns
Multi-platform output: HTML/CSS, SwiftUI, React/Tailwind with consistent design tokens

该技能教会AI Agent遵循Nothing的设计原则生成UI组件，无需重复描述相同规则。它提供：

三层视觉层级：展示级、正文级、元数据级排版尺度
单色令牌系统：纯黑（#000000）、灰色调，以及完整的深色/浅色模式
工业风组件：分段进度条、机械开关、点阵图案
多平台输出：HTML/CSS、SwiftUI、React/Tailwind，搭配一致的设计令牌

Installation

安装步骤

undefined

undefined

Clone the repository

git clone https://github.com/dominikmartn/nothing-design-skill.git

Copy to Claude Code skills directory

cp -r nothing-design-skill/nothing-design ~/.claude/skills/

Or create skills directory if it doesn't exist

mkdir -p ~/.claude/skills cp -r nothing-design-skill/nothing-design ~/.claude/skills/


Restart Claude Code to activate the skill.

mkdir -p ~/.claude/skills cp -r nothing-design-skill/nothing-design ~/.claude/skills/


重启Claude Code以激活该技能。

Core Design Principles

核心设计原则

Typography Hierarchy

排版层级

Three layers only:

Display: Space Grotesk, 32-48px, 700 weight — Headlines, hero text
Body: Space Grotesk, 14-18px, 400-500 weight — Primary content
Metadata: Space Mono, 11-13px, 400 weight — Labels, captions, timestamps

Dot Matrix: Doto font for special callouts and dot-matrix aesthetic

仅设三层：

展示级：Space Grotesk字体，32-48px，字重700 —— 标题、主视觉文本
正文级：Space Grotesk字体，14-18px，字重400-500 —— 主要内容
元数据级：Space Mono字体，11-13px，字重400 —— 标签、说明文字、时间戳

点阵字体：使用Doto字体实现特殊标注和点阵美学效果

Color Tokens

颜色令牌

Dark Mode (Default)

css

--nothing-bg-primary: #000000;      /* True OLED black */
--nothing-bg-secondary: #0A0A0A;    /* Elevated surfaces */
--nothing-bg-tertiary: #141414;     /* Cards, panels */

--nothing-text-primary: #FFFFFF;    /* Headlines, body */
--nothing-text-secondary: #A0A0A0;  /* Supporting text */
--nothing-text-tertiary: #606060;   /* Metadata, disabled */

--nothing-border: #1F1F1F;          /* Dividers, outlines */
--nothing-accent: #FF0000;          /* Rare accent color */

Light Mode

css

--nothing-bg-primary: #FFFFFF;
--nothing-bg-secondary: #F5F5F5;
--nothing-bg-tertiary: #EBEBEB;

--nothing-text-primary: #000000;
--nothing-text-secondary: #606060;
--nothing-text-tertiary: #A0A0A0;

--nothing-border: #E0E0E0;
--nothing-accent: #FF0000;

深色模式（默认）

css

--nothing-bg-primary: #000000;      /* True OLED black */
--nothing-bg-secondary: #0A0A0A;    /* Elevated surfaces */
--nothing-bg-tertiary: #141414;     /* Cards, panels */

--nothing-text-primary: #FFFFFF;    /* Headlines, body */
--nothing-text-secondary: #A0A0A0;  /* Supporting text */
--nothing-text-tertiary: #606060;   /* Metadata, disabled */

--nothing-border: #1F1F1F;          /* Dividers, outlines */
--nothing-accent: #FF0000;          /* Rare accent color */

浅色模式

css

--nothing-bg-primary: #FFFFFF;
--nothing-bg-secondary: #F5F5F5;
--nothing-bg-tertiary: #EBEBEB;

--nothing-text-primary: #000000;
--nothing-text-secondary: #606060;
--nothing-text-tertiary: #A0A0A0;

--nothing-border: #E0E0E0;
--nothing-accent: #FF0000;

Spacing Scale

间距尺度

css

--nothing-space-xs: 4px;   /* Tight inline gaps */
--nothing-space-s: 8px;    /* Component padding */
--nothing-space-m: 16px;   /* Standard spacing */
--nothing-space-l: 24px;   /* Section gaps */
--nothing-space-xl: 40px;  /* Major sections */

css

--nothing-space-xs: 4px;   /* Tight inline gaps */
--nothing-space-s: 8px;    /* Component padding */
--nothing-space-m: 16px;   /* Standard spacing */
--nothing-space-l: 24px;   /* Section gaps */
--nothing-space-xl: 40px;  /* Major sections */

Component Patterns

组件示例

HTML/CSS Example: Segmented Progress Bar

HTML/CSS示例：分段进度条

html

<div class="nothing-progress">
  <div class="nothing-progress-track">
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment active"></div>
    <div class="nothing-progress-segment active"></div>
    <div class="nothing-progress-segment active"></div>
  </div>
  <span class="nothing-progress-label">60%</span>
</div>

<style>
.nothing-progress {
  display: flex;
  align-items: center;
  gap: var(--nothing-space-s);
}

.nothing-progress-track {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
  height: 4px;
}

.nothing-progress-segment {
  background: var(--nothing-bg-tertiary);
  border-radius: 0; /* Hard edges */
}

.nothing-progress-segment.active {
  background: var(--nothing-text-primary);
}

.nothing-progress-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--nothing-text-tertiary);
  letter-spacing: 0.05em;
}
</style>

html

<div class="nothing-progress">
  <div class="nothing-progress-track">
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment active"></div>
    <div class="nothing-progress-segment active"></div>
    <div class="nothing-progress-segment active"></div>
  </div>
  <span class="nothing-progress-label">60%</span>
</div>

<style>
.nothing-progress {
  display: flex;
  align-items: center;
  gap: var(--nothing-space-s);
}

.nothing-progress-track {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
  height: 4px;
}

.nothing-progress-segment {
  background: var(--nothing-bg-tertiary);
  border-radius: 0; /* Hard edges */
}

.nothing-progress-segment.active {
  background: var(--nothing-text-primary);
}

.nothing-progress-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--nothing-text-tertiary);
  letter-spacing: 0.05em;
}
</style>

React/Tailwind Example: Nothing Button

React/Tailwind示例：Nothing按钮

jsx

// NothingButton.jsx
export default function NothingButton({ 
  children, 
  variant = 'primary', 
  size = 'md',
  onClick 
}) {
  const baseClasses = "uppercase tracking-wider font-medium transition-all duration-150";
  
  const variants = {
    primary: "bg-white text-black hover:bg-gray-200 active:bg-gray-300",
    secondary: "bg-transparent border border-white/20 text-white hover:bg-white/5",
    ghost: "bg-transparent text-white hover:bg-white/10"
  };
  
  const sizes = {
    sm: "px-4 py-2 text-xs",
    md: "px-6 py-3 text-sm",
    lg: "px-8 py-4 text-base"
  };
  
  return (
    <button
      className={`${baseClasses} ${variants[variant]} ${sizes[size]}`}
      onClick={onClick}
    >
      <span className="font-['Space_Grotesk']">{children}</span>
    </button>
  );
}

// Usage
<NothingButton variant="primary" size="md">
  Start Now
</NothingButton>

jsx

// NothingButton.jsx
export default function NothingButton({ 
  children, 
  variant = 'primary', 
  size = 'md',
  onClick 
}) {
  const baseClasses = "uppercase tracking-wider font-medium transition-all duration-150";
  
  const variants = {
    primary: "bg-white text-black hover:bg-gray-200 active:bg-gray-300",
    secondary: "bg-transparent border border-white/20 text-white hover:bg-white/5",
    ghost: "bg-transparent text-white hover:bg-white/10"
  };
  
  const sizes = {
    sm: "px-4 py-2 text-xs",
    md: "px-6 py-3 text-sm",
    lg: "px-8 py-4 text-base"
  };
  
  return (
    <button
      className={`${baseClasses} ${variants[variant]} ${sizes[size]}`}
      onClick={onClick}
    >
      <span className="font-['Space_Grotesk']">{children}</span>
    </button>
  );
}

// Usage
<NothingButton variant="primary" size="md">
  Start Now
</NothingButton>

SwiftUI Example: Mechanical Toggle

SwiftUI示例：机械开关

swift

struct NothingToggle: View {
    @Binding var isOn: Bool
    
    var body: some View {
        HStack(spacing: 2) {
            Rectangle()
                .fill(isOn ? Color.white : Color(hex: "141414"))
                .frame(width: 24, height: 24)
                .overlay(
                    Text(isOn ? "I" : "")
                        .font(.custom("Space Mono", size: 11))
                        .foregroundColor(.black)
                )
            
            Rectangle()
                .fill(isOn ? Color(hex: "141414") : Color.white)
                .frame(width: 24, height: 24)
                .overlay(
                    Text(!isOn ? "O" : "")
                        .font(.custom("Space Mono", size: 11))
                        .foregroundColor(.black)
                )
        }
        .onTapGesture {
            withAnimation(.linear(duration: 0.15)) {
                isOn.toggle()
            }
        }
    }
}

// Usage
@State private var enabled = false

NothingToggle(isOn: $enabled)

swift

struct NothingToggle: View {
    @Binding var isOn: Bool
    
    var body: some View {
        HStack(spacing: 2) {
            Rectangle()
                .fill(isOn ? Color.white : Color(hex: "141414"))
                .frame(width: 24, height: 24)
                .overlay(
                    Text(isOn ? "I" : "")
                        .font(.custom("Space Mono", size: 11))
                        .foregroundColor(.black)
                )
            
            Rectangle()
                .fill(isOn ? Color(hex: "141414") : Color.white)
                .frame(width: 24, height: 24)
                .overlay(
                    Text(!isOn ? "O" : "")
                        .font(.custom("Space Mono", size: 11))
                        .foregroundColor(.black)
                )
        }
        .onTapGesture {
            withAnimation(.linear(duration: 0.15)) {
                isOn.toggle()
            }
        }
    }
}

// Usage
@State private var enabled = false

NothingToggle(isOn: $enabled)

HTML/CSS Example: Dot Matrix Card

HTML/CSS示例：点阵卡片

html

<article class="nothing-card">
  <div class="nothing-card-header">
    <h3 class="nothing-display">Battery Status</h3>
    <span class="nothing-metadata">SYSTEM</span>
  </div>
  
  <div class="nothing-card-body">
    <div class="nothing-dotmatrix">
      <span class="nothing-dotmatrix-value">87%</span>
    </div>
    <p class="nothing-body">Estimated 4h 23m remaining</p>
  </div>
</article>

<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400&display=swap');

.nothing-card {
  background: var(--nothing-bg-secondary);
  border: 1px solid var(--nothing-border);
  padding: var(--nothing-space-l);
}

.nothing-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--nothing-space-m);
}

.nothing-display {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--nothing-text-primary);
  margin: 0;
}

.nothing-metadata {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--nothing-text-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nothing-body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: var(--nothing-text-secondary);
  margin: var(--nothing-space-s) 0 0;
}

.nothing-dotmatrix {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--nothing-border) 2px,
    var(--nothing-border) 3px
  );
  padding: var(--nothing-space-s);
  margin-bottom: var(--nothing-space-s);
}

.nothing-dotmatrix-value {
  font-family: 'Space Mono', monospace;
  font-size: 32px;
  font-weight: 700;
  color: var(--nothing-text-primary);
  display: block;
  text-align: center;
}
</style>

html

<article class="nothing-card">
  <div class="nothing-card-header">
    <h3 class="nothing-display">Battery Status</h3>
    <span class="nothing-metadata">SYSTEM</span>
  </div>
  
  <div class="nothing-card-body">
    <div class="nothing-dotmatrix">
      <span class="nothing-dotmatrix-value">87%</span>
    </div>
    <p class="nothing-body">Estimated 4h 23m remaining</p>
  </div>
</article>

<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400&display=swap');

.nothing-card {
  background: var(--nothing-bg-secondary);
  border: 1px solid var(--nothing-border);
  padding: var(--nothing-space-l);
}

.nothing-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--nothing-space-m);
}

.nothing-display {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--nothing-text-primary);
  margin: 0;
}

.nothing-metadata {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--nothing-text-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nothing-body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: var(--nothing-text-secondary);
  margin: var(--nothing-space-s) 0 0;
}

.nothing-dotmatrix {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--nothing-border) 2px,
    var(--nothing-border) 3px
  );
  padding: var(--nothing-space-s);
  margin-bottom: var(--nothing-space-s);
}

.nothing-dotmatrix-value {
  font-family: 'Space Mono', monospace;
  font-size: 32px;
  font-weight: 700;
  color: var(--nothing-text-primary);
  display: block;
  text-align: center;
}
</style>

Common Usage Patterns

常见使用场景

When to Use This Skill

适用场景

Dashboard UIs: System monitoring, analytics, admin panels
Device Interfaces: Mobile apps with hardware aesthetic
Portfolio Sites: Tech-focused, minimal personal sites
Documentation: Technical docs with industrial feel
CLI Visualizations: Terminal-inspired web interfaces

仪表盘UI：系统监控、数据分析、管理后台
设备界面：具有硬件美学风格的移动应用
作品集网站：科技感、极简风格的个人网站
文档页面：工业风的技术文档
CLI可视化：终端风格的Web界面

Design Workflow

设计流程

Start with hierarchy: Define display, body, metadata layers first
Apply tokens: Use CSS variables or platform equivalents
Add mechanical elements: Segmented bars, toggles, hard edges
Optimize for OLED: True blacks, high contrast in dark mode
Test both modes: Ensure light mode has proper inverse tokens

先定义层级：首先确定展示级、正文级、元数据级三层结构
应用令牌：使用CSS变量或对应平台的等效方式
添加机械元素：分段进度条、开关、硬边角
OLED优化：深色模式下使用纯黑，保证高对比度
双模式测试：确保浅色模式的令牌反向映射正确

Configuration

配置说明

Font Loading (Web)

Web端字体加载

html

<!-- In <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

html

<!-- In <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

Theme Switching

主题切换

javascript

// theme-switcher.js
const toggleTheme = () => {
  const root = document.documentElement;
  const currentTheme = root.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  root.setAttribute('data-theme', newTheme);
  localStorage.setItem('nothing-theme', newTheme);
};

// Apply saved theme on load
const savedTheme = localStorage.getItem('nothing-theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);

css

:root {
  --nothing-bg-primary: #000000;
  --nothing-text-primary: #FFFFFF;
  /* ... dark mode tokens ... */
}

[data-theme="light"] {
  --nothing-bg-primary: #FFFFFF;
  --nothing-text-primary: #000000;
  /* ... light mode tokens ... */
}

javascript

// theme-switcher.js
const toggleTheme = () => {
  const root = document.documentElement;
  const currentTheme = root.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  root.setAttribute('data-theme', newTheme);
  localStorage.setItem('nothing-theme', newTheme);
};

// Apply saved theme on load
const savedTheme = localStorage.getItem('nothing-theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);

css

:root {
  --nothing-bg-primary: #000000;
  --nothing-text-primary: #FFFFFF;
  /* ... dark mode tokens ... */
}

[data-theme="light"] {
  --nothing-bg-primary: #FFFFFF;
  --nothing-text-primary: #000000;
  /* ... light mode tokens ... */
}

SwiftUI Theme Environment

SwiftUI主题环境

swift

// NothingTheme.swift
struct NothingTheme: EnvironmentKey {
    static let defaultValue = NothingColorScheme.dark
}

extension EnvironmentValues {
    var nothingTheme: NothingColorScheme {
        get { self[NothingTheme.self] }
        set { self[NothingTheme.self] = newValue }
    }
}

struct NothingColorScheme {
    let bgPrimary: Color
    let textPrimary: Color
    // ... other tokens ...
    
    static let dark = NothingColorScheme(
        bgPrimary: Color(hex: "000000"),
        textPrimary: Color.white
    )
    
    static let light = NothingColorScheme(
        bgPrimary: Color.white,
        textPrimary: Color(hex: "000000")
    )
}

swift

// NothingTheme.swift
struct NothingTheme: EnvironmentKey {
    static let defaultValue = NothingColorScheme.dark
}

extension EnvironmentValues {
    var nothingTheme: NothingColorScheme {
        get { self[NothingTheme.self] }
        set { self[NothingTheme.self] = newValue }
    }
}

struct NothingColorScheme {
    let bgPrimary: Color
    let textPrimary: Color
    // ... other tokens ...
    
    static let dark = NothingColorScheme(
        bgPrimary: Color(hex: "000000"),
        textPrimary: Color.white
    )
    
    static let light = NothingColorScheme(
        bgPrimary: Color.white,
        textPrimary: Color(hex: "000000")
    )
}

Troubleshooting

故障排除

Fonts not loading

字体未加载

Problem: Space Grotesk/Space Mono not rendering

Solution: Verify font URLs or use fallback stack:

css

font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

问题：Space Grotesk/Space Mono字体未正常渲染

解决方案：验证字体URL，或使用备用字体栈：

css

font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

OLED black not working

OLED纯黑效果失效

Problem: Background appears gray instead of true black

Solution: Ensure no transparency or overlays:

css

body {
  background: #000000; /* Not #000 or rgb(0,0,0) if using color profiles */
  color: #FFFFFF;
}

问题：背景显示为灰色而非纯黑

解决方案：确保没有透明度或覆盖层：

css

body {
  background: #000000; /* Not #000 or rgb(0,0,0) if using color profiles */
  color: #FFFFFF;
}

Segmented progress bar misaligned

分段进度条对齐异常

Problem: Segments have uneven spacing

Solution: Use CSS Grid with fixed gap:

css

.nothing-progress-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 2px; /* Fixed gap, not margin */
}

问题：分段间距不均匀

解决方案：使用CSS Grid并设置固定间距：

css

.nothing-progress-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 2px; /* Fixed gap, not margin */
}

Light mode contrast too low

浅色模式对比度不足

Problem: Text not readable in light mode

Solution: Ensure proper token mapping:

css

[data-theme="light"] {
  --nothing-text-primary: #000000; /* Not gray */
  --nothing-text-secondary: #606060; /* Minimum WCAG AA */
}

问题：浅色模式下文本可读性差

解决方案：确保令牌映射正确：

css

[data-theme="light"] {
  --nothing-text-primary: #000000; /* Not gray */
  --nothing-text-secondary: #606060; /* Minimum WCAG AA */
}

Advanced Patterns

高级模式

Animated Segment Fill

分段填充动画

css

@keyframes nothing-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.nothing-progress-segment.active {
  animation: nothing-fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left;
}

css

@keyframes nothing-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.nothing-progress-segment.active {
  animation: nothing-fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left;
}

Dot Matrix Effect (CSS)

点阵背景效果（CSS）

css

.nothing-dotmatrix-bg {
  background-image: 
    radial-gradient(circle, var(--nothing-text-tertiary) 1px, transparent 1px);
  background-size: 4px 4px;
  background-position: 0 0;
}

css

.nothing-dotmatrix-bg {
  background-image: 
    radial-gradient(circle, var(--nothing-text-tertiary) 1px, transparent 1px);
  background-size: 4px 4px;
  background-position: 0 0;
}

Mechanical Counter (React)

机械计数器（React）

jsx

function NothingCounter({ value, digits = 4 }) {
  const formatted = String(value).padStart(digits, '0');
  
  return (
    <div className="flex gap-0.5">
      {formatted.split('').map((digit, i) => (
        <div 
          key={i}
          className="bg-[#141414] border border-[#1F1F1F] w-8 h-12 flex items-center justify-center"
        >
          <span className="font-['Space_Mono'] text-xl text-white">
            {digit}
          </span>
        </div>
      ))}
    </div>
  );
}

jsx

function NothingCounter({ value, digits = 4 }) {
  const formatted = String(value).padStart(digits, '0');
  
  return (
    <div className="flex gap-0.5">
      {formatted.split('').map((digit, i) => (
        <div 
          key={i}
          className="bg-[#141414] border border-[#1F1F1F] w-8 h-12 flex items-center justify-center"
        >
          <span className="font-['Space_Mono'] text-xl text-white">
            {digit}
          </span>
        </div>
      ))}
    </div>
  );
}

Output Examples

输出示例

When a user requests Nothing-style UI, generate complete, copy-paste-ready code with:

Design tokens defined as CSS variables or platform constants
Typography hierarchy using the three-layer system
Monochrome palette with proper dark/light mode support
Industrial components (segmented bars, mechanical toggles)
Hard edges — no border-radius unless specified
OLED optimization — true #000000 blacks in dark mode

Always provide working code, not pseudocode. Include necessary imports, font loading, and theme setup.

当用户请求Nothing风格UI时，需生成完整、可直接复制使用的代码，包含：

设计令牌：定义为CSS变量或平台常量
排版层级：使用三层系统
单色调色板：支持深色/浅色模式
工业风组件（分段进度条、机械开关）
硬边角：除非特别指定，否则不使用圆角
OLED优化：深色模式下使用纯#000000黑色

始终提供可运行的代码，而非伪代码。包含必要的导入、字体加载和主题设置。