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

# 099 SUPPLY · Design System

> A precise archive of tools for making.

**Theme:** light · **Industry:** design · **Source:** https://099.supply/ · **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._

099 SUPPLY presents mockups, 3D models, and Framer components as a tightly organized visual archive. A monochrome palette and technical monospace typography keep attention on the assets rather than decoration.

## North star

Let a quiet, sharply indexed monochrome catalog frame the assets, never compete with them.

## Overview

The page uses a near-pure white canvas as a quiet gallery, with near-black text and fine pale borders defining navigation controls and asset cards. Mid-gray is reserved for subdued labels and metadata; the darker charcoal appears primarily in the asset imagery rather than as a broad page surface. Soehne Mono gives the interface a technical, catalog-like voice: headings and labels use uppercase styling and generous tracking, while item names and identifiers remain compact and orderly. The main content is a repeated five-column grid, with each image presented in a restrained rounded card and a slim metadata strip below. Product imagery is mostly monochrome, combining polished mockup renders with clean 3D object previews and simple component demonstrations. Generous white intervals separate the catalog sections without interrupting the browsing rhythm. The result feels more like a carefully indexed design archive than a conventional retail storefront.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant canvas behind navigation and all three asset catalog sections. |
| Archive Gray | `#999999` | `--color-archive-gray` | neutral | Low-emphasis captions, secondary labels, and subtle hover borders. |
| Catalog Ink | `#101010` | `--color-catalog-ink` | brand | Primary text, navigation, dark purchase badge, and strong interface details. |
| Rule Line | `#e0e0e0` | `--color-rule-line` | semantic | Fine outlines around controls, inputs, links, and asset cards. |
| Muted Graphite | `#555555` | `--color-muted-graphite` | neutral | Secondary text and subdued card metadata. |
| Dial Gray | `#c8c8c8` | `--color-dial-gray` | accent | Appears in the measured conic loader gradient, not as a defining page color. |
| Mockup Charcoal | `#222222` | `--color-mockup-charcoal` | surface | Dark areas within asset previews and occasional inverse card imagery. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#222222` (Mockup Charcoal) · `--color-text` → `#101010` (Catalog Ink) · `--color-text-muted` → `#999999` (Archive Gray) · `--color-text-subtle` → `#555555` (Muted Graphite) · `--color-border` → `#e0e0e0` (Rule Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#101010` | `#ffffff` | 19.03:1 | AAA |
| `#101010` | `#222222` | 1.2:1 | fail |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#222222` | 5.58:1 | AA |
| `#555555` | `#ffffff` | 7.46:1 | AAA |
| `#555555` | `#222222` | 2.13:1 | fail |

### Gradients

- `conic-gradient(rgb(16, 16, 16) 0deg, rgb(16, 16, 16) 80deg, rgb(200, 200, 200) 80deg, rgb(200, 200, 200) 360deg)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Soehne Mono | `--font-mono` | webfont | 400, 500 | All interface typography, headings, navigation, labels, metadata, and controls. | Space Mono |

- **Soehne Mono:** Monospace throughout; headings and utility labels often uppercase with wide tracking, while captions stay compact.

### Type scale — Custom (ratio ≈ 2.131, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54.5px | 400 | 1 | 0.025em | — | Soehne Mono | Large central wordmark or primary page heading. |
| h2 | 26px | 500 | normal | 0.18em | uppercase | Soehne Mono | Uppercase catalog section headings. |
| body | 12px | 400 | normal | 0.08em | uppercase | Soehne Mono | Uppercase catalog labels and short interface copy. |
| caption | 11px | 400 | 1.5 | 0 | — | Soehne Mono | Small card metadata and supporting captions. |
| button | 12px | 400 | 1 | 0.08em | uppercase | Soehne Mono | Uppercase text in compact bordered controls. |
| nav | 12px | 400 | 1 | 0.12em | uppercase | Soehne Mono | Uppercase navigation links and page controls. |
| eyebrow | 12px | 400 | normal | 0.08em | uppercase | Soehne Mono | Small uppercase labels introducing a section. |
| code | 12px | 400 | normal | 0.08em | uppercase | Soehne Mono | Technical identifiers and component-style labels. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 2, 3, 4, 6, 8, 10, 11, 12, 40 px.
- Section rhythm 40px · element gap 6px · card padding — · max content width 1360px.

The page is organized around a measured 1360px maximum content width and a compact five-column asset grid. Navigation sits in a slim top band, with controls grouped left, a centered wordmark, and utility actions right. Section headings align to the grid's leading edge. Three catalog bands follow one another with clear white intervals; cards repeat consistently, while their image areas and metadata rows remain visually distinct. Maintain the dense browsing rhythm without crowding the large white margins.

## Shape & elevation

- Radius: button `6px` · input `6px` · card `8px` · badge `9999px` · link `8px` · xs `4px` · sm `6px` · md `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.12s ease-out` on interactive elements.

The interface is largely flat: no measured shadows define the page. Thin #e0e0e0 outlines separate white cards and controls, with restrained corner rounding. Imagery supplies most of the depth through its own rendered lighting and dark backdrops; preserve a clean layer order and avoid adding dramatic elevation.

## Imagery

The archive relies on product mockup photography and rendered 3D objects, not lifestyle scenes. Previews are predominantly grayscale, often centered against simple studio backgrounds, with subtle shadows and crisp silhouettes. Component cards mix small interface demonstrations, diagrams, and typography samples. Keep imagery contained within uniform card frames and avoid decorative overlays that obscure asset details.

## Components

### Top navigation

Compact outlined category controls on the left, centered 099 wordmark, and small utility actions on the right.

### Catalog section

Uppercase monospace heading followed by a five-column grid of linked assets.

### Asset card

Rounded, finely bordered preview with a large image area and narrow metadata strip for identifier and asset name.

### Asset metadata

Small monospace item code and muted uppercase title aligned to opposite ends beneath each preview.

### Outlined control

White or transparent control with #101010 text, a 1px #e0e0e0 border, and compact rounded corners.

### Component preview tile

A bordered gallery card containing a small interface, device, diagram, or typography specimen.

### Measured component styles

- **Primary button** (“MOCKUPS”): transparent background · text #101010 · border 1px solid #e0e0e0 · radius 6px · padding 10px 12px 11px 12px · 400 12px Soehne Mono · uppercase
- **Link** (“M 015 PRO DISPLAY PREVIEW”): transparent background · text #0000ee · border 1px solid #e0e0e0 · radius 8px · padding 0px · 400 16px Soehne Mono
- **Input**: transparent background · text #101010 · border 1px solid #e0e0e0 · radius 6px · padding 10px 12px 11px 12px · 400 12px Soehne Mono · uppercase
- **Card** (“COMPANY FOUNDED 099 Supply Nov 2022 Fram”): transparent background · text #101010 · border 1px solid #e0e0e0 · radius 8px · padding 0px · 400 11px Soehne Mono
- **Badge** (“Buy”): background #101010 · text #ffffff · border 1px solid #101010 · radius 999px · padding 4px 12px 5px 12px · 400 10px Soehne Mono · capitalize
- **Navigation item** (“0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 ”): transparent background · text #101010 · radius 0px · padding 0px · 400 12px Soehne Mono · uppercase

## Do

- Use Gallery White as the dominant page canvas.
- Keep navigation, headings, and labels in a consistent monospace voice.
- Organize asset previews into an orderly five-column grid.
- Place concise identifiers and names beneath each preview.
- Use thin pale borders to define cards and controls.
- Keep preview imagery neutral and product-focused.

## Don't

- Don't add bright colors to the core interface palette.
- Don't use heavy shadows or layered card effects.
- Don't let decorative copy compete with the asset archive.
- Don't vary card framing from item to item.
- Don't use oversized rounded pills for ordinary controls.
- Don't fill the white space with unrelated promotional sections.

## Agent prompt

Build a new page in the 099 SUPPLY visual style: a precise, compact design-resource archive. Use Gallery White (#ffffff) as the canvas, Catalog Ink (#101010) for primary text, Rule Line (#e0e0e0) for fine borders, and Archive Gray (#999999) or Muted Graphite (#555555) for secondary metadata. Use a monospace family such as Space Mono throughout, with uppercase, tracked navigation and section labels. Center a small wordmark in a restrained top navigation, then organize content into clearly titled, five-column asset grids. Each asset card should pair a monochrome preview with a narrow identifier-and-name strip. Keep surfaces flat, corners modest, and spacing generous between sections but compact within the catalog. Avoid promotional clutter, colorful accents, and pronounced shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-grid | Five-column grid of bordered asset cards beneath a left-aligned section label. | browse linked previews, scan identifiers and names | monochrome mockup imagery, metadata strip, thin card outline |
| 2 | product-grid | Five-column grid of contained 3D object previews, with a final row partially filled. | browse model catalog, open customization entry | clean object silhouettes, white card surfaces, compact metadata |
| 3 | product-grid | Five-column component gallery with bordered tiles and consistent preview-to-metadata proportions. | scan component previews, open component entries | interface specimens, small diagrams, monospace item labels |

## Source CSS custom properties (selected)

```css
--bg: #ffffff;
--fg: #101010;
--border-subtle: #e0e0e0;
--border-subtle-hover: #999999;
--border-strong: #101010;
--border-soft: #c8c8c8;
--btn-primary-bg: #101010;
--btn-primary-bg-hover: #999999;
--btn-primary-border-hover: #999999;
--btn-primary-fg: #ffffff;
--btn-secondary-bg: #ffffff;
--footer-input-bg: #ffffff;
--footer-input-border: #e0e0e0;
--footer-input-border-hover: #999999;
--header-blend-color: #ffffff;
```

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