# Wrdlss Club · Design system migration spec

> Source: https://wrdlss.club  ·  Curated by OpenDesign  ·  en

> A unique intersection of brutalist web design and generative ASCII art, demonstrating extreme restraint in visual language while maintaining artistic expression

## 1. Identity DNA

The system is built as a hacker's terminal that doubles as an artistic canvas. Its identity is defined by a strict adherence to a brutalist, monochrome aesthetic where every element serves a dual purpose of function and form.

**One-liner:** An interactive ASCII art playground that responds to user presence and interaction.
**Keywords:** ASCII · Brutalist · Terminal · Generative · Interactive
**Analogy:** A hacker's terminal that doubles as an artistic canvas

## 2. Color

The color system is a discipline of absence, operating on a strict monochrome principle of black ink on a white background. The palette is binary, with high contrast serving as the primary tool for hierarchy and definition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(229,231,235,1.0)` | divider |

**Color principle:** Strict monochrome, high-contrast black on white

This strict constraint ensures all visual communication emerges purely from form, weight, and the negative space between characters.

## 3. Typography

The typographic voice is singular and monospaced, creating an inherent grid for all content. Light font weights and an all-caps transformation for UI elements establish a consistent, technical tone.

- **Display:** monospace
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.15 | 400 | 0px | Large ASCII art elements |
| body | 16px | 1.15 | 100 | 0px | UI text and metadata |

**Type rules:**
- All text is monospaced, creating a strict grid-based alignment
- Light font weights (100) are used extensively for the primary content
- All-caps transformation is applied to UI elements

## 4. Spacing

Spacing and rhythm are governed by the inherent grid of the monospaced typeface itself.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Monospace characters establish an inherent typographic grid

## 5. Surfaces

Surfaces are flat and borderless, defined only by thin, solid lines that demarcate space. The design eschews depth, relying on crisp geometric boundaries and the stark contrast of the palette for separation.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Borders:** 1px solid rgb(229,231,235)

## 6. Layout

The layout is a single-column, full-width container designed as a canvas for ASCII art. This skeletal structure prioritizes the generative artwork, allowing it to occupy and define the entire spatial context.

- **Container max:** 1440px
- **Paragraph max:** 1440px
- **Grid:** 1 columns, gutter 8px
- **Breakpoints:** 390 / 768 px

**Skeleton:** Single-column full-width layout for ASCII canvas

## 7. Motion & Interaction

Motion is purposeful and subtle, reserved for revealing content and acknowledging interaction. Transitions are smooth fades for text, while the core animation is the continuous, generative flow of ASCII characters responding to user presence.

- **Durations:** micro 300ms · small 500ms · medium 1000ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Fade-in transitions for text elements
  - Continuous generation of ASCII characters

- **Hover:** Pointer cursor indicates clickable elements
- **Click:** Triggers generation of new ASCII art characters
- **Transition:** All elements have transition: all applied
- **Keyboard:** Not specified in screenshots

## 8. Voice & Don'ts

The editorial voice is technical, direct, and artistic, expressed through large-scale ASCII compositions and minimal, bracket-enclosed UI elements. The system avoids decorative flourishes, favoring the raw communication of data and form.

- **Tone:** Technical, artistic, and direct
- **Headline style:** Large ASCII art compositions
- **CTA style:** Minimal bracket-enclosed UI elements
- **Avoid:** Colorful gradients / Decorative typography / Complex navigation menus

### Don'ts
- ❌ Don't use colorful gradients — screenshot shows strict black and white
- ❌ Don't use serif fonts — screenshot shows monospace throughout
- ❌ Don't add drop shadows — screenshot shows completely flat surfaces
- ❌ Don't use heavy font weights — screenshot shows weight 100 dominant
- ❌ Don't add rounded UI elements — screenshot shows sharp geometric forms
- ❌ Don't use colorful accents — screenshot shows no accent color

It deliberately omits color, decorative typography, complex navigation, and any element that would dilute the stark, terminal-inspired aesthetic.

## System Prompt (paste into AI tool)

```
A minimalist, brutalist digital canvas that uses ASCII art as its primary visual language. The design is strictly monochromatic, relying on a black (#000000) and white (#FFFFFF) palette with subtle light gray borders. Typography is exclusively monospaced, using light font weights (100) and uppercase transformations for UI elements. The layout is a single-column full-width container that prioritizes the generative ASCII artwork. Interactive elements are minimal, using bracket-enclosed metadata tags. The site functions as both an artistic statement and a technical playground, tracking user interactions like clicks and long presses. Critical constraints include avoiding all color, maintaining strict monospace typography, and preserving the raw, terminal-inspired aesthetic. The system tracks user presence and interaction metrics, displaying them as bracketed data points in the UI.
```
