099
dark theme
Independent Style Review

099-Style Design System

The 099 design system uses a dark-themed visual language. The primary brand color is Ghost White (#ffffff); text is Ghost White (#ffffff) on a Midnight Oil (#000000) background. Typography is set in Soehne Mono. This DESIGN.md contains 5 color tokens and a 1-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of 099.

Color Palette

FONTS

Typography

Component Previews

Independent Style Review

099-style design system: color codes and fonts

Theme
dark
Primary color
Ghost White (#ffffff)
Fonts
Soehne Mono
Source
099.supply

Terminal aesthetic, digital workbench. The UI feels like a high-contrast monospaced terminal environment for creative tools.

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.

Original style summary

099 color codes

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

Which fonts does 099 use?

FontWeightsFallback
Soehne Mono400Space Mono, Fira Code
RoleSizeLine heightToken
body16px19.2--text-body

How do I use this DESIGN.md?

  1. Download the DESIGN.md file and place it in your project root.
  2. Tell Claude Code, Cursor, v0 or Google Stitch: “Design the UI following the rules in DESIGN.md.”
  3. Use Fork & Customize to adapt the colors, fonts or components to your own brand.

Raw DESIGN.md file →

This page is MakeMyMD's independent review of the colors, typography and spacing visible on 099's public website (099.supply). It is not an official brand guideline; MakeMyMD is not affiliated with or endorsed by 099. The 099 name and trademarks belong to their owner; no brand imagery, logos or copy are used. Rights holders can request removal at [email protected].

Design Systems

Similar design systems