# Nofilter · Design system migration spec

> Source: https://www.nofilter.space  ·  Curated by OpenDesign  ·  en

> A strong example of minimalist editorial design, focusing on content and typography.

## 1. Identity DNA

Nofilter operates like a high-end fashion magazine translated to the web, where the absence of decoration becomes the primary design statement. Every element exists to serve the content, creating a space where photography and typography command full attention against a field of deliberate negative space.

**One-liner:** A clean, typography-driven editorial platform for fashion and photography.
**Keywords:** fashion · editorial · photography · minimal · premium
**Analogy:** High-end fashion magazine website

## 2. Color

The color system is a strict monochrome, built entirely on the contrast between black text and a white background. This binary approach eliminates chromatic noise, making the imagery itself the sole source of visual variety.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#333333` | body text |
| `--muted` | `#333333` | placeholder |
| `--line` | `rgba(51, 51, 51, 1)` | divider |

**Color principle:** Monochrome palette emphasizing content through high-contrast black text on white.

The principle is absolute: color never competes with content; it only provides the stark contrast needed for legibility.

## 3. Typography

Typography is handled with a single pragmatica sans-serif family, used in multiple weights to establish hierarchy. Navigation is set in uppercase, creating a clear functional distinction from the body copy, while scale shifts define the reading journey from headline to body text.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 1.0 | 400 | -2px | Main Title |
| heading | 35px | 1.1 | 400 | 0px | Article Title |
| body | 24px | 1.25 | 400 | 0px | Article Excerpt |
| small | 15px | 1.46 | 400 | 0px | Navigation |

**Type rules:**
- Use pragmatica sans-serif for all text.
- Navigation links are uppercase.
- Author and date lines are set in a smaller body size.

## 4. Spacing

Spatial rhythm is maintained through a strict multiple of 4px for all padding and margin values.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent padding and margin multiples of 4px.

## 5. Surfaces

Surfaces are defined by sharp, 1px solid borders rather than shadows or elevation. This creates a flat, graphic plane where content containers are delineated by clean lines, not atmospheric depth.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid rgb(51, 51, 51) on primary containers.

## 6. Layout

The structural skeleton is a grid-based editorial layout that favors asymmetric columns and large-scale imagery. This framework supports a dynamic flow of content while maintaining a sense of orderly, architectural composition.

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

**Skeleton:** Grid-based editorial layout with large imagery and asymmetric columns.

## 7. Motion & Interaction

Motion is intentionally absent; all durations are set to zero with linear easing. The interface is static, presenting content as fixed editorial spreads rather than an animated experience.

- **Durations:** micro 0ms · small 0ms · medium 0ms
- **Easing:** `linear`

- **Hover:** Cursor pointer indicates clickable elements.
- **Click:** Cursor pointer indicates clickable elements.
- **Transition:** All elements have a transition property defined.
- **Keyboard:** Standard navigation.

## 8. Voice & Don'ts

The editorial voice is authoritative and sophisticated, communicated through direct, impactful headlines and understated, text-based calls to action. The tone is minimalist, letting the visual composition and content carry the narrative weight.

- **Tone:** Authoritative, sophisticated, minimalist.
- **Headline style:** Direct and impactful, large typography.
- **CTA style:** Understated, text-based navigation.
- **Avoid:** Don't use decorative fonts. / Don't add background gradients. / Don't use drop shadows on cards. / Don't use rounded corners. / Don't introduce vibrant accent colors. / Don't clutter the layout with unnecessary elements.

### Don'ts
- ❌ Don't use decorative fonts — screenshot shows pragmatica sans-serif throughout.
- ❌ Don't add background gradients — screenshot shows a solid white background.
- ❌ Don't use drop shadows on cards — screenshot shows flat, bordered containers.
- ❌ Don't use rounded corners — screenshot shows sharp, rectangular elements.
- ❌ Don't introduce vibrant accent colors — screenshot shows a monochrome palette.
- ❌ Don't clutter the layout with unnecessary elements — screenshot shows ample whitespace.

The system deliberately forgoes decorative fonts, background gradients, drop shadows, rounded corners, vibrant accent colors, and any layout clutter.

## System Prompt (paste into AI tool)

```
This is a premium fashion editorial website featuring a minimalist, monochrome design. The design relies on bold typography using a pragmatica sans-serif font and high-contrast imagery against a clean white background. Key colors are #FFFFFF for the background and #333333 for text and borders. Critical donts: Do not use decorative fonts; Do not add background gradients; Do not use drop shadows on cards; Do not use rounded corners; Do not introduce vibrant accent colors. The layout is grid-based, emphasizing large-scale typography and editorial photography.
```