# Verse Sh · Design system migration spec

> Source: https://www.verse.sh  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a 'code-first' portfolio, using a strictly monospaced typographic system and a grid-based layout to showcase technical projects.

## 1. Identity DNA

Verse functions as a developer's dark-mode workspace, rendered as a public portfolio. Its identity is built from the constraints of code: a monospaced type system, a strict grid, and a palette reduced to its most essential values.

**One-liner:** A minimalist portfolio for a creative developer focusing on React and Three.js experiments.
**Keywords:** creative developer · web3D · experimental · minimal
**Analogy:** A developer's dark-mode workspace showcasing 3D experiments.

## 2. Color

The color system is an exercise in reduction, operating on a pure black background with light gray text. There are no accent colors; contrast and clarity are the only chromatic concerns.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#D4D4D4` | body text |
| `--ink-soft` | `#737373` | secondary text |
| `--muted` | `#737373` | placeholder |
| `--line` | `rgba(23, 23, 23, 1)` | divider |

**Color principle:** Extreme minimalism using pure black background with light gray monospaced text and subtle dark borders.

The principle is functional minimalism, where every hue is either the void of the background or the light of the information.

## 3. Typography

Typography is a uniform voice: **Commit Mono** set predominantly in uppercase, with no weight exceeding 400. This choice frames the content as technical data rather than editorial copy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 16px | 1.5 | 400 | normal | Brand name |
| h1 | 16px | 1.5 | 400 | normal | Main tagline |
| body | 11px | 1.5 | 400 | normal | Tech stack labels |

**Type rules:**
- Text is predominantly uppercase.
- All text uses the 'Commit Mono' monospace font.
- No font weights above 400 are visible.

## 4. Spacing

A consistent 16px rhythm governs all padding and gaps, creating a predictable structural cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 16px padding and gaps for a structured grid layout.

## 5. Surfaces

Depth is conveyed solely through thin, 1px solid borders that carve the interface into a grid of cells. There are no shadows or gradients; the surface is flat and diagrammatic.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Thin 1px solid borders (#171717) used to create a strict grid of cells.

## 6. Layout

The layout skeleton is a two-column grid with zero gutters, defined entirely by the visible borders between its uniform cells. Each cell becomes a discrete container for a project or piece of information.

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

**Skeleton:** A 2-column grid layout with uniform cell sizes and zero gutters between the bordered cells.

## 7. Motion & Interaction

Motion is restrained to subtle opacity transitions on interactive elements, typically lasting half a second. The primary dynamic element is the interactive 3D object, which operates as an isolated experiment within its cell.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity transitions (0.5s) on interactive elements.
  - The 3D skull object likely has continuous rotation or hover interactions.

- **Hover:** Subtle opacity change on links and interactive elements.
- **Click:** Standard link navigation.
- **Transition:** CSS transitions for opacity with a 0.5s duration.
- **Keyboard:** Standard browser focus behaviors.

## 8. Voice & Don'ts

The editorial voice is direct, technical, and self-contained. It uses short, all-caps phrases and bracketed labels like [LINK] or [CODE] as functional UI elements, rejecting any persuasive or decorative language.

- **Tone:** Direct, minimalist, and developer-focused.
- **Headline style:** Short, all-caps monospaced text (e.g., 'VERSE', 'I MAKE COOL WEBSITES').
- **CTA style:** Technical and understated, using brackets like [LINK] or [CODE].
- **Avoid:** Marketing fluff or persuasive language. / Decorative or serif typography. / Bright or colorful UI accents. / Complex layout structures. / High font weights. / Rounded corners or soft shadows.

### Don'ts
- ❌ Don't use serif or sans-serif fonts — the entire site uses a monospace typeface.
- ❌ Don't use bright accent colors — the palette is strictly black, gray, and white.
- ❌ Don't use rounded corners — all elements and borders are sharp-edged.
- ❌ Don't use complex, multi-column layouts — the site uses a strict 2-column grid.
- ❌ Don't use drop shadows — the design relies on flat borders and background contrast.
- ❌ Don't use bold or heavy font weights — the text is uniformly light (weight 400).

This system deliberately excludes rounded corners, shadows, varied typography, and accent colors to maintain its rigid, code-first aesthetic.

## System Prompt (paste into AI tool)

```
This is a minimalist developer portfolio for 'Verse'. It features a stark black (#000000) background with light gray (#D4D4D4) monospaced text (Commit Mono). The layout is a strict 2-column grid of bordered cells (#171717) containing 3D experiments and project links. Key elements include uppercase labels for technology stacks (e.g., 'REACT + REACT-THREE-FIBER') and bracketed links like '[CODE]'. Critical don'ts: Avoid using serif or sans-serif fonts, avoid rounded corners or shadows, and avoid bright accent colors. The design is purely functional and technical, prioritizing clear project presentation over decorative elements.
```