Comet Design System

Comet's marketing site runs on a deep navy-black canvas with a periwinkle-violet accent and a lavender-gray secondary that, unusually, outpaces the accent in raw frequency — 972 uses of lavender-gray versus 87 uses of the periwinkle accent. The secondary tone is not a faded version of the accent; it is a distinct color occupying the muted-text, border, and secondary-button roles simultaneously. The effect is a page that feels cooler and more restrained than competitors like Weights & Biases (which uses brighter gold on black) or MLflow (which sits on white). The periwinkle accent is reserved for CTAs, active highlights, and gradient stop-points; the lavender-gray handles everything in between.

The typography system is fully Roboto — no display-family switch, no editorial serif. What distinguishes it is the specific deployment of Roboto Mono for the social-proof counter section: "19,000+ GitHub Stars", "150,000+ Users", and "19,000+ Tests" render at 50px / weight 700 in Roboto Mono, making the numbers read as precise machine-generated output rather than marketing copy. This is the inverse of most platforms that render large numbers in a display sans at maximum weight. Roboto's regular body at 18–24px / weight 400–600 handles all editorial sections.

The sub-product Opik — Comet's open-source AI observability layer — has its own visual signature: a warm orange-to-red gradient (wired as --gradient-opik) that decorates its header strip, distinct from the periwinkle-violet of the parent brand. The two identities share the same canvas, type system, and radius scale, but the gradient marks the boundary clearly. Feed this file to an AI coding tool and it reproduces the periwinkle-lavender dark-navy system, the Roboto Mono counter section, and the Opik gradient strip.