---
name: Nan
description: "A standout example of how typography can define an entire brand identity and user experience."
version: alpha

colors:
  background: "#B7FFB4"
  primary: "#262626"
  neutral: "#9D968E"
  line: "rgba(38, 38, 38, 0.2)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 162px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  mono:
    fontFamily: geometric-sans
    fontSize: 13px
    lineHeight: 1.8
    fontWeight: 400
    letterSpacing: "0.9px"

rounded:
  sm: 2px
  md: 8px
  lg: 18px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

An exploratory and service-driven type design practice.

*A bold, unconventional type foundry website.*

## Colors

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

- **Background (`#B7FFB4`)** — uses `bg` token
- **Primary text (`#262626`)** — uses `ink` token
- **Muted (`#9D968E`)** — uses `muted` token
- **Borders (`rgba(38, 38, 38, 0.2)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* 8px vertical rhythm.

## Elevation & Depth

- 0px -1px 10px 0px rgba(172, 171, 171, 0.3)
- Borders: 1px solid #262626

## Shapes

- `sm`: 2px
- `md`: 8px
- `lg`: 18px
- `pill`: 999px

## Components

- **button:** Minimal borders or solid fills, often small and functional.
- **card:** Large, color-saturated blocks with bold typography overlays.
- **chip:** Small bordered tags or labels.
- **input:** Styled with sharp borders and specific mono fonts.
- **hero:** Maximalist, oversized typography dominating the viewport.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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