---
name: 099 Supply
description: "Worth including as a masterclass in how a monospaced font can create a highly distinctive and professional UI when applied with strict discipline."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#101010"
  secondary: "#555555"
  neutral: "#999999"
  muted-soft: "#E0E0E0"
  line: "rgba(224, 224, 224, 1)"

typography:
  display:
    fontFamily: monospaced
    fontSize: 54px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0.96px"

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

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

A clean, systematic marketplace for 3D mockups and interactive components.

*A digital warehouse for high-quality design assets.*

## Colors

Strictly achromatic, using pure black and grays to keep focus on the product renders.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#101010`)** — uses `ink` token
- **Secondary text (`#555555`)** — uses `ink-soft` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(224, 224, 224, 1)`)** — uses `line` token

## Typography

- **Display:** monospaced
- **Body:** monospaced
- **Mono:** monospaced

- All typography uses a single monospaced family.
- Headings and UI labels are consistently uppercase.
- Small text uses generous letter-spacing for legibility.

## Layout

Responsive grid of equally sized cards.

*Rhythm:* Consistent 40px and 80px outer padding for main sections.

## Elevation & Depth

- 0 1px 2px rgba(0,0,0,0.05)
- Borders: 1px solid #E0E0E0

## Shapes

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

## Components

- **button:** Outlined pill buttons with monospaced uppercase text.
- **card:** White cards with thin 1px borders, light hover states, and a bottom label bar.
- **chip:** Outlines only, used for top-level navigation.
- **input:** Simple outlined fields with monospaced text.
- **hero:** A dense grid of product cards, focusing on the asset over branding.

## Do's and Don'ts

**Don't:**
- Don't use a serif font — screenshot shows exclusive use of monospaced type.
- Don't use colorful backgrounds — screenshot shows a strict white and gray palette.
- Don't use heavily rounded card corners — screenshot shows tight 8px radii.
- Don't use drop shadows for depth — screenshot shows flat borders instead.
- Don't use mixed typography weights — screenshot shows consistent 400 weight.
- Don't use lowercase text for headers — screenshot shows all-caps UI labels.

---

## System Prompt (paste into AI agent)

```
099 Supply is a minimalist digital marketplace for design assets. Its visual DNA is defined by an achromatic palette (FFFFFF background, 101010 ink, 999999 muted, E0E0E0 line) and a strictly monospaced typographic system. All text is uppercase, creating a technical, systematic feel. The layout is a clean, responsive grid of white cards with thin 1px borders. Critical donts: never use a serif font, never introduce color, and never use heavy drop shadows. The brand positioning is technical and utilitarian, targeting designers who value precision and utility over decorative expression. Use generous letter-spacing for small text to maintain legibility in the monospaced system.
```