# 099 Supply · Design system migration spec

> Source: https://099.supply  ·  Curated by OpenDesign  ·  en

> Worth including as a masterclass in how a monospaced font can create a highly distinctive and professional UI when applied with strict discipline.

## 1. Identity DNA

099 Supply operates as a digital warehouse for design assets—a marketplace where the scaffolding itself is the product's focus. Its visual system is a masterclass in disciplined minimalism, stripping away decoration to let 3D mockups and Framer components speak for themselves.

**One-liner:** A clean, systematic marketplace for 3D mockups and interactive components.
**Keywords:** 3D Mockups · Framer Components · Digital Assets · UI Kit · Design Supply
**Analogy:** A digital warehouse for high-quality design assets.

## 2. Color

The color system is strictly achromatic, built on a foundation of pure white, deep black, and two intermediate grays. This monochromatic restraint ensures that the product renders and digital assets are the sole carriers of color and visual interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#101010` | body text |
| `--ink-soft` | `#555555` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--muted-soft` | `#E0E0E0` | weak hint |
| `--line` | `rgba(224, 224, 224, 1)` | divider |

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

This principle of chromatic discipline is non-negotiable; color is reserved exclusively for the assets being sold, never for the interface itself.

## 3. Typography

Typography is handled with industrial precision, utilizing a single monospaced family for all interface text. Headings and labels are consistently set in uppercase, with generous letter-spacing applied to smaller text to maintain legibility and reinforce the systematic, technical voice.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 54px | 1.0 | 400 | 0.96px | Large numerical counters and section titles |

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

## 4. Spacing

Spacing follows a strict rhythmic logic, anchored by consistent 40px and 80px outer padding for major sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 40 / 80 px
- **Rhythm:** Consistent 40px and 80px outer padding for main sections.

## 5. Surfaces

Depth is communicated through subtle, nearly invisible cues rather than pronounced shadows. A hairline 1px border and the faintest of drop shadows define surface edges, maintaining the system's flat, architectural clarity.

- **Radius:** sm 4px · md 8px · lg 8px · pill 999px
- **Shadows:**
  - 0 1px 2px rgba(0,0,0,0.05)
- **Borders:** 1px solid #E0E0E0

## 6. Layout

The layout skeleton is a responsive grid of equally sized cards, forming a dense, utilitarian matrix. Each product is housed in a white card with a thin border, creating a clean, sortable catalog that prioritizes the asset over brand flourish.

- **Container max:** 1400px
- **Grid:** 5 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Responsive grid of equally sized cards.

## 7. Motion & Interaction

Motion philosophy favors speed and subtlety over spectacle. Quick 120ms transitions provide immediate, tactile feedback on interactive elements, ensuring the interface feels responsive and precise without demanding attention.

- **Durations:** micro 120ms · small 140ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Quick 120ms transitions for border and color changes.
  - Subtle opacity and color fades on interactive elements.

- **Hover:** Subtle border-color or background-color changes.
- **Click:** Immediate visual feedback with fast transitions.
- **Transition:** 0.12s ease-out for most state changes.
- **Keyboard:** Focus states follow standard browser outlines.

## 8. Voice & Don'ts

The editorial voice is utilitarian, technical, and efficient, matching the monospaced typography's inherent character. Language is direct, often employing numerical prefixes and clear, bounded calls-to-action.

- **Tone:** Utilitarian, technical, and efficient.
- **Headline style:** Uppercase monospaced text, often with numerical prefixes.
- **CTA style:** Clear, bordered buttons or simple text links.
- **Avoid:** Decorative flourishes / Rounded, friendly shapes / Colorful gradients / Serif typefaces

### Don'ts
- ❌ 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.

What it deliberately avoids—serif type, colorful gradients, rounded friendly shapes, and decorative flourishes—defines its identity as clearly as what it includes.

## System Prompt (paste into AI tool)

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