---
title: "Verse design system"
variant: extended
source: https://www.verse.sh/
captured_at: 2026-10-12
theme: dark
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/verse-sh)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Verse · Design System

> A dark, typographic frame for experimental web work.

**Theme:** dark · **Industry:** portfolio · **Source:** https://www.verse.sh/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Verse presents a developer’s work through a restrained black canvas, compact monospace labels, and a long, finely ruled project grid. High-contrast project previews supply nearly all of the page’s color and visual variation.

## North star

Keep the interface nearly black and typographically quiet; let a precise, thin-lined project grid frame the work without competing with it.

## Overview

The page is built around an almost entirely black canvas, with measured gray text and hairline borders providing its interface contrast. The opening identity block is small and understated; the portfolio grid, rather than a large hero, becomes the main event. Commit Mono gives headings, labels, links, and project captions a consistent coded, uppercase voice. At a glance, the page reads as a carefully organized index: two-column project cells, thin dividers, and compact captions keep the long collection legible without adding decorative chrome. Project thumbnails vary widely—storefront screenshots, code interfaces, abstract forms, and 3D objects—but they sit inside the same dark frame, so their brighter colors remain contained. Spacing is measured and calm, with generous separation between the canvas edge and the centered content, while the grid itself stays dense and repetitive. Flat surfaces and square corners preserve the utilitarian portfolio character.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Void Black | `#000000` | `--color-void-black` | brand | Full-page canvas and the dark field surrounding the introduction, project grid, and previews. |
| Quiet Gray | `#737373` | `--color-quiet-gray` | neutral | Muted project labels and small uppercase link text, keeping secondary navigation subdued. |
| Rule Charcoal | `#171717` | `--color-rule-charcoal` | surface | Thin card and grid borders that divide project cells without creating raised surfaces. |
| Soft Silver | `#d4d4d4` | `--color-soft-silver` | neutral | Primary introduction text, project names, and contact details against the black canvas. |

### Semantic aliases

`--color-canvas` → `#000000` (Void Black) · `--color-text` → `#737373` (Quiet Gray) · `--color-text-muted` → `#d4d4d4` (Soft Silver) · `--color-border` → `#171717` (Rule Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#737373` | `#000000` | 4.43:1 | AA-large |
| `#d4d4d4` | `#000000` | 14.17:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Commit Mono | `--font-mono` | webfont | 400, 600 | All measured text, including introduction, project captions, links, and contact details. | IBM Plex Mono |

- **Commit Mono:** Use regular weight throughout, with uppercase body, caption, link, and code text; button text remains mixed case.

### Type scale — Major Third (ratio ≈ 1.25, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 14px | 400 | 1.43 | 0 | uppercase | Commit Mono | Introductory copy and general page text, set in uppercase monospace. |
| caption | 11px | 400 | 1.5 | 0 | uppercase | Commit Mono | Small uppercase project captions and supporting labels. |
| button | 14px | 400 | 1.43 | 0 | — | Commit Mono | Contact action text in regular monospace, without forced uppercase. |
| link | 11px | 400 | 1.5 | 0 | uppercase | Commit Mono | Compact uppercase link labels beneath or beside project previews. |
| code | 11px | 400 | 1.5 | 0 | uppercase | Commit Mono | Small uppercase code-related labels associated with project entries. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 16, 20 px.
- Section rhythm 80px · element gap 16px · card padding 20px · max content width —.

A centered, narrow portfolio column sits within large black margins; the measured data gives no fixed maximum width. A compact identity and contact panel leads into a long, mostly two-column project grid. Fine borders divide rows and columns, while short captions align to the lower edge of each project cell. The grid repeats at a measured section rhythm, but its varied preview heights and occasional wide content keep the page from feeling mechanically uniform. Overall density is comfortable: open canvas around the column, closely organized work within it.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is flat: measured shadows and gradients are absent, and components use square corners. Thin #171717 borders provide the main separation between the introduction and portfolio cells. Avoid card elevation or layered effects; depth comes from the contrast and lighting inside the project artwork itself.

## Imagery

The portfolio mixes live-site captures, developer-tool screenshots, abstract graphics, and dark 3D renders. Each preview is framed as project content within the grid, not as a page-level background. Black surroundings suppress visual noise, while bright product imagery and saturated 3D details remain confined to their individual cells. Keep source artwork intact rather than applying a uniform filter.

## Components

### Identity panel

Compact bordered introduction with the VERSE name, a short uppercase statement, and aligned social and email contact rows.

### Project grid

Long two-column collection of portfolio entries separated by thin #171717 rules on a #000000 canvas.

### Project preview

Artwork or captured interface displayed inside a grid cell; previews range from 3D objects to commerce and code screenshots.

### Project caption

Small uppercase gray project or technology label aligned along the bottom of its entry.

### Link label

Compact uppercase #737373 link text, sometimes paired with a bracketed destination label.

### Contact link

Plain #d4d4d4 monospace email action with no filled button surface or visible border.

### Measured component styles

- **Primary button** (“ab@verse.sh”): transparent background · text #d4d4d4 · radius 0px · padding 0px · 400 14px Commit Mono
- **Link** (“LINK”): transparent background · text #737373 · radius 0px · padding 0px · 400 11px Commit Mono · uppercase
- **Card** (“VERSE I MAKE COOL WEBSITES TWITTER: @ver”): transparent background · text #d4d4d4 · border 1px solid #171717 · radius 0px · padding 20px · 400 14px Commit Mono · uppercase

## Do

- Use #000000 as the dominant canvas.
- Set interface copy in a consistent monospace face.
- Keep the identity block compact and low-key.
- Separate project entries with thin charcoal rules.
- Use subdued gray for secondary captions and links.
- Let project previews provide the page’s visual variety.

## Don't

- Do not add gradients or shadows to interface panels.
- Do not introduce rounded cards or pill controls.
- Do not compete with project artwork using bright interface accents.
- Do not turn the portfolio into oversized marketing hero sections.
- Do not use ornamental typefaces or mixed font families.
- Do not apply a single color treatment to varied project previews.

## Agent prompt

Build a new page in Verse’s portfolio style: use a #000000 canvas, a centered narrow content column, and a restrained introduction followed by a fine-ruled project grid. Use Commit Mono or a close monospace substitute throughout. Set primary copy in #d4d4d4; use #737373 for secondary links and captions, and #171717 for unobtrusive borders. Keep headings and supporting labels compact, often uppercase, and align captions consistently within each project cell. Use square, flat surfaces with no shadows or gradients. Project imagery may vary between screenshots, abstract graphics, and 3D renders, but keep each preview contained in its own grid area. Preserve generous outer black space and a steady, readable rhythm; avoid decorative interface elements that distract from the work.

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/verse-sh