# Microwaver59 · Design system migration spec

> Source: https://microwaver59.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in restrained, brutalist web design, proving that a limited palette and strong typography can create a deeply memorable and premium experience.

## 1. Identity DNA

Microwaver59 operates with the precision of a stark, experimental design studio, where every element serves a structural purpose. The system is a masterclass in restraint, proving that a limited palette and strong typography can define a deeply memorable and premium digital environment.

**One-liner:** A monochrome, typographically driven, and highly interactive portfolio interface.
**Keywords:** minimal · brutalist · experimental · monochrome · typographic
**Analogy:** A stark, experimental design studio landing page.

## 2. Color

The color system is a strict, high-contrast monochrome palette. It utilizes only absolute black and a slightly warm off-white, with no other hues present.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FCFCFA` | body text |
| `--line` | `rgba(252, 252, 250, 0.2)` | divider |

**Color principle:** High-contrast monochrome, utilizing only black, white, and a single subtle gray.

The principle is one of extreme contrast and absolute chromatic discipline.

## 3. Typography

The typographic voice is exclusively monospaced and heavy-weight, applied in uppercase with generous tracking. This choice for a technical, uniform aesthetic creates a brutalist foundation where text functions as both content and structural element.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| body | 19.2px | 1.0 | 700 | 3.456px | Primary UI text and navigation |

**Type rules:**
- All text is uppercase
- Monospaced typeface used throughout for a technical, uniform aesthetic
- Generous letter spacing applied to all text elements

## 4. Spacing

Rhythm is established through a strict 4px base grid, providing a tight and consistent internal cadence to all components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strictly aligned to a 4px base grid with tight, consistent internal padding.

## 5. Surfaces

Surfaces are defined by depth and structure, not shadow or color. Subtle 1px borders are used to delineate interactive elements and create sharp, rectangular divisions.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0 0 0 1px rgba(252, 252, 250, 1)
- **Borders:** 1px solid borders used for interactive elements and structural divisions.

## 6. Layout

The layout skeleton is a single-column, full-bleed structure. All content is centered within heavily padded sections, relying on massive negative space to create a focused, symmetrical composition.

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

**Skeleton:** Full-bleed, single-column layout with heavily padded sections.

## 7. Motion & Interaction

Motion philosophy is functional and branded, used sparingly but with high intention. Transitions are smooth and slightly springy, with custom animations like the logo morphing into a progress indicator serving as key interaction points.

- **Durations:** micro 240ms · small 370ms · medium 620ms
- **Easing:** `cubic-bezier(0.68, -0.6, 0.32, 1.6)`
- **Patterns:**
  - Morphing logo animation into a progress spinner
  - Smooth, slightly springy cubic-bezier transitions on hover states
  - Opacity fades for loading states

- **Hover:** Subtle opacity or underline shifts on interactive elements.
- **Click:** Cursor changes to pointer on interactive elements.
- **Transition:** All properties transition smoothly, often with a slight spring effect.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

The editorial voice is technical, direct, and highly restrained, matching the visual austerity. All copy is rendered in the same uppercase, monospaced, heavily tracked style as the interface itself.

- **Tone:** Technical, direct, and highly restrained.
- **Headline style:** All-caps, monospaced, and heavily tracked.
- **CTA style:** Direct, uppercase, and minimal.
- **Avoid:** Rounded shapes / Soft gradients / Decorative imagery / Multiple colors

### Don'ts
- ❌ Don't use colorful gradients — screenshot shows a strict monochrome black and white palette.
- ❌ Don't use rounded corners on main elements — screenshot shows sharp, rectangular edges.
- ❌ Don't use varied font weights — screenshot shows a uniform heavy weight for almost all text.
- ❌ Don't use left-aligned text — screenshot shows a centered, symmetrical layout.
- ❌ Don't use standard sentence casing — screenshot shows everything in uppercase.
- ❌ Don't use wide letter spacing — screenshot shows tightly packed, condensed text.

The system deliberately avoids rounded shapes, soft gradients, decorative imagery, multiple colors, varied font weights, and standard sentence casing.

## System Prompt (paste into AI tool)

```
This is a stark, experimental portfolio interface characterized by a strict monochrome palette (black #000000 and off-white #FCFCFA). The typography is exclusively monospaced, heavy-weight, uppercase, and tightly tracked, creating a technical and brutalist aesthetic. The layout is centered and minimalist, focusing heavily on interactive animations like the morphing logo and progress indicator. Critical donts include avoiding rounded corners on containers, using colorful gradients, applying standard sentence casing, or employing varied font weights. The design relies on extreme contrast and subtle, springy transitions rather than decorative elements or multiple colors.
```