---
name: Verse Sh
description: "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."
version: alpha

colors:
  background: "#000000"
  primary: "#D4D4D4"
  secondary: "#737373"
  neutral: "#737373"
  line: "rgba(23, 23, 23, 1)"

typography:
  display:
    fontFamily: monospace
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  h1:
    fontFamily: monospace
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: monospace
    fontSize: 11px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A minimalist portfolio for a creative developer focusing on React and Three.js experiments.

*A developer's dark-mode workspace showcasing 3D experiments.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#D4D4D4`)** — uses `ink` token
- **Secondary text (`#737373`)** — uses `ink-soft` token
- **Muted (`#737373`)** — uses `muted` token
- **Borders (`rgba(23, 23, 23, 1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Consistent 16px padding and gaps for a structured grid layout.

## Elevation & Depth

- Borders: Thin 1px solid borders (#171717) used to create a strict grid of cells.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Simple text-based links in brackets like [LINK] or [CODE] within cells.
- **card:** Bordered grid cells containing a preview image and a footer row with tech stack and links.
- **chip:** None visible.
- **input:** None visible.
- **hero:** A minimal top cell containing the brand name, tagline, and contact links.

## Do's and Don'ts

**Don't:**
- 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).

---

## System Prompt (paste into AI agent)

```
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.
```