# Design Reference - Nothing
> Monochrome digital interface. Pure high contrast black and white with pixelated accents against an almost clinical white canvas.

## Source
- Original site: https://nothing.tech
- Captured: 2026-04-11T16:20:31.923Z

## Tags
- monochrome
- high-contrast
- retro-futuristic
- pixelated
- minimalist
- industrial
- text-dominant
- stark
- digital

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Pure White | `#ffffff` | neutral | Page backgrounds, elevated surfaces, default icon color. |
| Cloud Gray | `#f5f5f5` | neutral | Subtle background accents, provides minimal contrast for secondary panels. |
| Off White | `#e5e7eb` | neutral | Divider lines, subtle button borders, a nearly invisible accent against Pure White. |
| Ash Gray | `#979898` | neutral | Low-contrast primary button background, provides a subtle active state. |
| Carbon Gray | `#585a5a` | neutral | Secondary text, subtle interactive element outlines, provides clear legibility against light backgrounds. |
| Midnight Black | `#000000` | neutral | Primary text, critical calls to action, dominant interactive elements, creating maximum visual impact. |
| Vivid Red | `#c6102` | accent | Low prominence icon highlighting and rare, specific interactive elements. |

## Typography
- role: Primary UI font, used widely for body text, headings, and interactive elements. Its custom nature provides distinct character in a largely functional design.; sizes: 16px, 24px, 32px; family: NType82-Regular; weight: 100, 400; lineHeight: 1.10, 1.40; substitute: Inter, Arial
- role: Monospaced font for labels, secondary information, and subtle code-like elements. The tight letter-spacing (-0.04em) amplifies its technical, digital aesthetic.; sizes: 11px, 12px, 14px; family: LatteraMonoLL; weight: 400; lineHeight: 1.10, 1.33, 1.43; substitute: Menlo, Consolas; letterSpacing: -0.04
- role: Display font used sparingly for impactful headings, contributing to the retro-digital, pixelated machine aesthetic. Weight 55 for a lighter touch, 400 for bold statements.; sizes: 20px, 40px; family: Ndot-Regular; weight: 55, 400; lineHeight: 1.00, 1.08; substitute: VT323, Pixelify Sans
- role: Used for specific headlines, providing a slightly different visual texture than 'NType82-Regular' for emphasis, maintaining overall brand consistency.; sizes: 16px; family: NType82-Headline; weight: 400; lineHeight: 1.40; substitute: Inter, Arial

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "pills": "9999px",
      "buttons": "8px",
      "default": "0px"
    },
    "elementGap": "8-16px",
    "sectionGap": "64-80px",
    "cardPadding": "16px"
  },
  "radius": {
    "pills": "9999px",
    "buttons": "8px",
    "default": "0px"
  }
}
```

## Component Patterns
- name: Store Locator Modal
- name: Notification Banner
- name: Button Group Collection
- name: Primary Button; role: Call to action
- name: Secondary Button; role: Secondary action
- name: Ghost Button; role: Tertiary action or navigation
- name: Ghost Button Inverse; role: Tertiary action on dark backgrounds
- name: Active Button; role: Selected state

## Do
- Use Midnight Black (#000000) for all primary text and critical headlines, ensuring maximum contrast against light backgrounds.
- Apply NType82-Regular (weights 100, 400) for general text, reserving Ndot-Regular for impactful display headings to maintain the pixelated aesthetic.
- For all interactive elements requiring a default rounded corner, use 8px border-radius.
- Utilize LatteraMonoLL with letter-spacing -0.04em for small, utility text, such as timestamps or meta-information, to enhance the technical feel.
- Maintain high contrast (minimum AAA for text) by pairing Midnight Black text on Pure White or Cloud Gray backgrounds.
- Employ Off White (#e5e7eb) for subtle borders and dividers, providing visual structure without harsh lines.

## Don't
- Avoid introducing additional saturated colors; the palette is strictly monochrome with a single accent Vivid Red for specific, subtle functional highlights.
- Do not use letter-spacing on NType82-Regular or Ndot-Regular; their baseline tracking is optimized as-is.
- Do not vary from the established padding values (4px, 8px, 16px, 32px) for interactive elements; they create the system's spatial rhythm.
- Avoid soft shadows or gradients; flat design with stark contrast and minimal elevation is central to the visual identity.
- Do not use standard system fonts. The custom NType82 and Ndot maintain a core part of the brand's unique digital and retro identity.