---
name: Xn  Smon Vpa
description: "A prime example of restrained, typography-driven design where scale and whitespace replace traditional UI ornamentation."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#FD8878"
  bg-soft: "#D6D0FF"
  line: "rgba(0,0,0,0.2)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 172px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 66px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 31px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A minimalist studio portfolio highlighting computational design through bold typography and soft color accents.

*A curated exhibition of digital artifacts on a pristine white gallery wall.*

## Colors

High-contrast black on white, punctuated by soft pastel and muted warm accents.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FD8878`)** — uses `accent` token
- **Borders (`rgba(0,0,0,0.2)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- Use Tex Gyre Heros for all primary display and body text.
- Reserve the serif typeface for brand marks only.
- Maintain tight negative letter-spacing for large display sizes.

## Layout

Full-width sections with distinct top borders separating rows in the portfolio list.

*Rhythm:* Consistent 4px base scale with generous whitespace between sections.

## Elevation & Depth

- Borders: Minimal borders used only to separate list items with a 2px top border.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Large pill-shaped interactive areas with full rounded corners (999px radius) serving as primary category toggles.
- **card:** Simple top-bordered list items containing index, title, and year columns.
- **hero:** A massive typographic hero section featuring stacked pill-shaped elements containing very large text.

## Do's and Don'ts

**Don't:**
- Don't use harsh borders — screenshot shows minimal 2px top borders only.
- Don't use drop shadows — screenshot shows completely flat surfaces.
- Don't use small button sizes — screenshot shows massive full-width pill shapes.
- Don't use centered navigation — screenshot shows left-aligned site name and right-aligned links.
- Don't use complex grids — screenshot shows a strict single-column linear list.
- Don't use bold weights — screenshot shows uniform 400 weight typography.

---

## System Prompt (paste into AI agent)

```
A minimalist computational design studio portfolio utilizing a high-contrast palette of black (#000000) on white (#FFFFFF), punctuated by soft lavender (#D6D0FF) and muted coral (#FD8878) accents. The typography relies on humanist-sans for massive, tightly tracked display text and clean body copy. Critical design rules include: maintain strict single-column layout with full-width interactive pills, avoid heavy shadows and drop effects entirely, and use generous whitespace between top-bordered list items.
```