099

# 099 — Style Reference
> Terminal aesthetic, digital workbench. The UI feels like a high-contrast monospaced terminal environment for creative tools.

**Theme:** dark

**Site:** https://099.supply

This design system presents as a 'digital workbench' – dark, stark, and highly organized, creating an atmosphere of focused, technical precision. The reliance on extreme achromatic contrast combined with a monospace system font defines its aesthetic, making it feel less like a brand and more like an interface for a command-line tool. Sharp 10px corner radii on interactive elements provide a subtle softening against the otherwise rigid grid, allowing functional elements to feel grounded yet approachable.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Midnight Oil | `#000000` | `--color-midnight-oil` | Page background, primary text on white surfaces, icon active state. This provides the deep, commanding backdrop for all content. |
| Ghost White | `#ffffff` | `--color-ghost-white` | Primary text, headers, icons, button text. Provides maximum contrast against dark backgrounds for clear information hierarchy. |
| Steel Gray | `#1d1d1d` | `--color-steel-gray` | Card backgrounds, selected button states, input fields. Creates a subtle, secondary surface level for interactive components and content blocks. |
| Muted Ash | `#383838` | `--color-muted-ash` | Outlined button borders, subtle dividers. A lighter gray for visual separation without being too jarring on dark surfaces. |
| Dim Gray | `#888888` | `--color-dim-gray` | Subtle text, secondary information, card borders for visual grouping. Used for less prominent content that still needs to be legible against dark backgrounds. |

## Tokens — Typography

### Soehne Mono
- **Substitute:** Space Mono, Fira Code
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1, 1.2, 1.4
- **Letter spacing:** 0.24px
- **Role:** All text elements, including body copy, headings, and interactive elements. The consistent use of a monospace font across the entire UI is a signature choice, reinforcing the technical, command-line aesthetic.

## Tokens — Type Scale

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| body | 16px | 19.2px | 0.24px |

## Tokens — Spacing

- **Max width:** 1600px
- **Section gap:** 48px
- **Element gap:** 16px

## Tokens — Radius

- **Default:** 0px
- **Buttons:** 10px
- **Inputs:** 10px
- **Cards:** 10px

## Components

### Filter Button Group

### Product Card Grid

### Hero Info Card

### Text Button (Invisible)
*Primary interactive element for navigation and inline actions*

Background: transparent, Text: Ghost White (#ffffff), Border: none, Padding: 0px. Used for 'Menu', 'Cart 0' in header.

### Ghost Button (Outlined)
*Secondary interactive element, filtering, or calls to action*

Background: transparent, Text: Ghost White (#ffffff), Border: 1px solid Muted Ash (#383838), Border Radius: 10px, Padding: 19.2px 25.6px. Example: 'Show All', 'Mockups (M)'.

### Subtle Filled Button
*Tertiary action or selected state within a group*

Background: Steel Gray (#1d1d1d), Text: Ghost White (#ffffff), Border: none, Border Radius: 10px, Padding: 19.2px 25.6px. Example: 'Components (C)' when selected.

### High-Contrast Filled Button
*Primary call to action in specific contexts (e.g., checkout)*

Background: Ghost White (#ffffff), Text: Midnight Oil (#000000), Border: none, Border Radius: 10px, Padding: 19.2px 25.6px. (No visible example in screenshot, but specified in data).

### Content Card (Rounded)
*Container for product items or featured content*

Background: transparent, Border Radius: 10px, Box Shadow: none, Padding: 0px. Used for product listings, allows content to define its own padding.

### Info Card (Padded)
*Descriptive content blocks, like hero text areas*

Background: transparent, Border Radius: 0px, Box Shadow: none, Padding: 26.5px. Used for the main text description on the left.

### Elevated Card
*Interactive elements with a background to signify interaction or state*

Background: Steel Gray (#1d1d1d), Border Radius: 10px, Box Shadow: none, Padding: 0px. Used for the product image 'T-Shirt (Bestseller)'.

### Text Input (Search)
*Form element for user input*

Background: Steel Gray (#1d1d1d), Text: Ghost White (#ffffff), Border: none, Border Radius: 10px (left side), Padding: 6.4px 19.2px. Typically paired with a button.

## Guidelines

### Do

- Use Midnight Oil (#000000) as the primary page background color across all layouts.
- Always use the Soehne Mono font at 16px weight 400 for all text elements.
- Apply 10px border-radius to all interactive components like buttons, cards, and input fields.
- Maintain a clear visual hierarchy by limiting text colors to Ghost White (#ffffff) for primary information and Dim Gray (#888888) for secondary details.
- Ensure generous spacing: a minimum of 16px between elements and 26.5px internal padding for information cards.
- For content blocks, apply Steel Gray (#1d1d1d) for explicit background distinction, maintaining a 10px radius.

### Don't

- Do not use any chromatic colors; visuals must remain strictly achromatic.
- Avoid box shadows or complex elevation; depth is created through varying shades of gray and explicit borders.
- Do not introduce any additional font families; exclusively use Soehne Mono.
- Do not use border-radius values other than 0px or 10px.
- Do not vary line-height significantly from the base 1.2 or 1.4 for readability, especially on long blocks of text.
- Do not use images or graphics that break the high-contrast, dark mode aesthetic; ensure all visuals integrate seamlessly.

## Agent Prompt Guide

### Quick Color Reference
- Text (primary): #ffffff (Ghost White)
- Background (page): #000000 (Midnight Oil)
- Background (card/input): #1d1d1d (Steel Gray)
- Border (ghost btn): #383838 (Muted Ash)
- Secondary Text: #888888 (Dim Gray)

### 3-5 Example Component Prompts
1. Create a product hero section: Full background is Midnight Oil (#000000). On the left, an Info Card: transparent background, 26.5px padding, containing '099 Supply' headline (Soehne Mono, 16px, #ffffff) and body text 'Discover digital tools...' (Soehne Mono, 16px, #ffffff). On the right, an Elevated Card: Steel Gray (#1d1d1d) background, 10px radius, image of a T-Shirt (0px padding), with 'T-Shirt (Bestseller)' below (Soehne Mono, 16px, #ffffff).
2. Create a Ghost Button: transparent background, text 'Show All' (Soehne Mono, 16px, #ffffff), 1px solid Muted Ash (#383838) border, 10px border radius, 19.2px vertical padding, 25.6px horizontal padding.
3. Create a product listing grid: Three columns, each item within a Content Card (transparent background, 10px radius, 0px padding). Product image within is 88x88px, then product title 'C 000 Theme Toggle' (Soehne Mono, 16px, #ffffff) and price 'From $9' (Soehne Mono, 16px, #888888), both below the image and left-aligned.
4. Create a Text Input: Steel Gray (#1d1d1d) background, 10px border radius (left side only, e.g., border-top-left-radius: 10px; border-bottom-left-radius: 10px;), text color Ghost White (#ffffff), font Soehne Mono 16px, 6.4px vertical padding, 19.2px horizontal padding.
5. Create an Info Card for details: transparent background, 26.5px padding, containing primary text '099 Supply' (Soehne Mono, 16px, #ffffff) and secondary text 'Discover digital tools...' (Soehne Mono, 16px, #ffffff).