# Nan · Design system migration spec

> Source: https://www.nan.xyz  ·  Curated by OpenDesign  ·  en

> A standout example of how typography can define an entire brand identity and user experience.

## 1. Identity DNA

NaN operates as a bold, unconventional type foundry, treating typography not as a mere labeling system but as the primary structural and expressive material. The design is exploratory and service-driven, built around a raw, experimental aesthetic where type forms the entire architecture of the experience.

**One-liner:** An exploratory and service-driven type design practice.
**Keywords:** exploratory · service-driven · type design · weird · wise · wonderful
**Analogy:** A bold, unconventional type foundry website.

## 2. Color

The palette is defined by a high-contrast, neon-driven scheme, centered around a vivid, almost acidic green background paired with dark charcoal text. This combination creates a raw, high-visibility field that pushes content forward with immediate visual impact.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#B7FFB4` | main background |
| `--ink` | `#262626` | body text |
| `--muted` | `#9D968E` | placeholder |
| `--line` | `rgba(38, 38, 38, 0.2)` | divider |

**Color principle:** High-contrast neon green background with dark charcoal text for a raw, experimental aesthetic.

The principle is one of stark contrast and unapologetic vibrancy, rejecting subtlety for a clear, loud signal.

## 3. Typography

The typographic system is the hero, employing a transitional serif for massive, tight-tracking display headlines that dominate the viewport. This expressive choice is grounded by geometric sans-serif and mono fonts reserved strictly for UI elements and metadata, creating a clear functional hierarchy.

- **Display:** transitional-serif
- **Body:** geometric-sans
- **Mono:** mono-linear

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 162px | 1.0 | 500 | -1px | Hero headline display text |
| body | 16px | 1.5 | 400 | 0px | General body copy and UI elements |
| mono | 13px | 1.8 | 400 | 0.9px | Navigation links and technical specifications |

**Type rules:**
- Use high-contrast sizes for dramatic typographic hierarchy.
- Mono fonts are strictly for UI and metadata.

## 4. Spacing

An 8px vertical rhythm provides the foundational grid for vertical spacing, ensuring consistent alignment and structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px vertical rhythm.

## 5. Surfaces

Surfaces are flat and high-contrast, utilizing sharp 1px borders rather than soft shadows. This approach reinforces the raw, constructed feel of the system, where depth is implied through color and type rather than atmospheric effects.

- **Radius:** sm 2px · md 8px · lg 18px · pill 999px
- **Shadows:**
  - 0px -1px 10px 0px rgba(172, 171, 171, 0.3)
- **Borders:** 1px solid #262626

## 6. Layout

The layout employs an asymmetric, bold grid defined by large type blocks and stark color fields. This structure prioritizes typographic elements over traditional, balanced compositions, allowing the scale of the type to dictate the visual flow.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric, bold grid with large type blocks and stark color fields.

## 7. Motion & Interaction

Motion philosophy favors quick, functional transitions that provide immediate feedback without distraction. Animations are smooth opacity fades and subtle transforms, applied to interactive elements to confirm their state change clearly.

- **Durations:** micro 100ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth opacity fades for hover states.
  - Subtle transforms on interactive elements.

- **Hover:** Opacity reduces or color shifts.
- **Click:** Immediate visual feedback.
- **Transition:** All properties transition smoothly.
- **Keyboard:** Standard focus outlines.

## 8. Voice & Don'ts

The editorial voice is playful, experimental, and confident, matching the visual boldness of the system. Headlines are extremely large and tight-tracked, while calls to action remain straightforward and functional, often underlined or bordered.

- **Tone:** Playful, experimental, and confident.
- **Headline style:** Extremely large, tight-tracking, and bold.
- **CTA style:** Straightforward, often underlined or bordered.
- **Avoid:** Overly corporate language / Complex gradients / Standard corporate layouts

### Don'ts
- ❌ Don't use soft, rounded corners — screenshot shows sharp 2px borders.
- ❌ Don't use subtle pastel backgrounds — screenshot shows a vivid #B7FFB4 green.
- ❌ Don't use a standard sans-serif for everything — screenshot shows a distinct transitional serif for headlines.
- ❌ Don't hide the type — screenshot shows typography as the primary visual element.
- ❌ Don't use complex drop shadows — screenshot shows flat, high-contrast surfaces.
- ❌ Don't use small font sizes for emphasis — screenshot shows oversized display text.

The system deliberately avoids overly corporate language, complex gradients, and standard layouts to preserve its unconventional, type-driven identity.

## System Prompt (paste into AI tool)

```
NaN is a bold, type-driven design practice with a raw, experimental aesthetic. The core palette features a vibrant neon green (#B7FFB4) background contrasted with dark charcoal (#262626) text. Typography is the hero, using a transitional serif for massive display headlines and a geometric sans/mono for UI. Critical donts: do not use soft or corporate visuals, avoid small type sizes for emphasis, and never hide the typographic personality behind standard templates. This system supports expressive, unconventional layouts where type is the primary visual tool.
```