# Nothing Tech

라이트 그레이(#f5f5f5) 위에 도트 폰트와 블랙 CTA가 만드는 뉴모피즘 감성의 테크 브랜드 — 미니멀하면서도 촉각적이다.

- taxonomy: neumorphism · dot-font, light-grey, soft-shadow, tech-minimal, inset-outset, bitmap-type, product-showcase · complexity=medium
- page types: ecommerce, landing, marketing
- best for: 테크 하드웨어 브랜드, 뉴모피즘 UI 프로젝트, 미니멀 제품 쇼케이스, 독특한 타이포 실험
- avoid for: 컬러풀 소비자 앱, 따뜻한 에디토리얼 매거진, 데이터 밀도 높은 대시보드, 레트로 빈티지 감성
- provenance: website (Nothing | UK) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, dark=vision-inferred, light=computed-css

## Design rules

# Nothing Tech — Design Specification
## Overview
Nothing's website embodies neumorphism with a tech-minimal twist. Light grey (#f5f5f5) canvas with dual neumorphic shadows creates soft, embossed surfaces. The dot-matrix "Nothing Dot" font IS the brand identity. Greyscale palette lets colorful product photos pop.
## Color Architecture
- Light grey #f5f5f5 = canvas (neumorphic base)
- Black #000000 = text, CTAs
- Greyscale only — no chroma in UI; product photos provide all color
## Signature Elements
- Neumorphic dual shadows (light highlight + dark shadow)
- Dot-matrix/bitmap brand font
- Uppercase headings throughout
- Product photos as only color source
## Agent Prompt Guide
> Light grey canvas, neumorphic dual shadows, dot-matrix font, greyscale palette. Product photos for color. Minimal, tactile, futuristic.
## Known Gaps
- Nothing Dot font proprietary (DotGothic16 fallback)
- Country selector modal in captured screenshot
- Dark mode synthesized


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Nothing Tech — theme.css (generated, do not edit) */
:root {
  --radius: 12px;
  --radius-selector: 8px;
  --radius-field: 8px;
  --font-sans: Nothing Dot, -apple-system, sans-serif;
  --font-mono: Nothing Dot, Courier New, monospace;
  --font-display: Nothing Dot, monospace;
  --spacing: 8px;
  --shadow: 5px 5px 20px -5px color-mix(in oklab, oklch(0.800 0.000 0) 30%, transparent);
  --ks-display-weight: 700;
  --background: oklch(0.970 0.000 0);
  --foreground: oklch(0.000 0.000 0);
  --card: oklch(0.970 0.000 0);
  --card-foreground: oklch(0.000 0.000 0);
  --popover: oklch(0.985 0.000 0);
  --popover-foreground: oklch(0.000 0.000 0);
  --primary: oklch(0.000 0.000 0);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.930 0.000 0);
  --secondary-foreground: oklch(0.200 0.000 0);
  --muted: oklch(0.930 0.000 0);
  --muted-foreground: oklch(0.466 0.003 197.1);
  --accent: oklch(0.600 0.200 30);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.880 0.000 0);
  --input: oklch(0.950 0.000 0);
  --ring: oklch(0.000 0.000 0);
}

.dark {
  --background: oklch(0.130 0.000 0);
  --foreground: oklch(0.970 0.000 0);
  --card: oklch(0.170 0.000 0);
  --card-foreground: oklch(0.970 0.000 0);
  --popover: oklch(0.170 0.000 0);
  --popover-foreground: oklch(0.970 0.000 0);
  --primary: oklch(1.000 0.000 0);
  --primary-foreground: oklch(0.000 0.000 0);
  --secondary: oklch(0.220 0.000 0);
  --secondary-foreground: oklch(0.800 0.000 0);
  --muted: oklch(0.220 0.000 0);
  --muted-foreground: oklch(0.550 0.000 0);
  --accent: oklch(0.600 0.200 30);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.300 0.000 0);
  --input: oklch(0.220 0.000 0);
  --ring: oklch(1.000 0.000 0);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<section style="background: var(--background); color: var(--foreground); padding: 4rem 2rem; text-align: center;">
  <p style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.5rem;">EXPLORE OFFERS</p>
  <h1 style="font-size: 2.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2rem;">NOTHING PHONE (3)</h1>
  <div style="max-width: 400px; margin: 0 auto; background: var(--card); border-radius: 12px; padding: 2rem; box-shadow: 5px 5px 20px oklch(0.800 0 0 / 0.3), -5px -5px 20px oklch(1 0 0 / 0.8);">
    <div style="width: 200px; height: 300px; background: var(--secondary); border-radius: 8px; margin: 0 auto 1.5rem;"></div>
    <a href="#" style="display: inline-block; background: var(--primary); color: var(--primary-foreground); padding: 0.75rem 2rem; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.875rem; text-decoration: none;">BUY NOW</a>
  </div>
</section>
<section style="background: var(--secondary); padding: 3rem 2rem;">
  <div style="max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
    <div style="background: var(--card); border-radius: 12px; padding: 1.5rem; box-shadow: 3px 3px 10px oklch(0.800 0 0 / 0.2), -3px -3px 10px oklch(1 0 0 / 0.7);">
      <h3 style="font-size: 1rem; font-weight: 700; text-transform: uppercase; margin: 0 0 0.5rem;">GLYPH INTERFACE</h3>
      <p style="color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.6; margin: 0;">A unique light system that communicates without a screen.</p>
    </div>
    <div style="background: var(--card); border-radius: 12px; padding: 1.5rem; box-shadow: 3px 3px 10px oklch(0.800 0 0 / 0.2), -3px -3px 10px oklch(1 0 0 / 0.7);">
      <h3 style="font-size: 1rem; font-weight: 700; text-transform: uppercase; margin: 0 0 0.5rem;">NOTHING OS</h3>
      <p style="color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.6; margin: 0;">Clean, fast, and customizable. Android, but better.</p>
    </div>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/nothing.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.