Comet Design System

Overview

Comet's marketing site anchors itself on a deep navy-black canvas and a periwinkle-violet accent, but the page's true chromatic workhorse is neither — it is a lavender-gray secondary tone that outpaces every other color on the page by a 10:1 margin. Secondary-dominant branding. The lavender-gray secondary appears 972 times across text, border, and hover roles, while the periwinkle accent appears 87 times in CTAs and highlights. This inversion — where the secondary color is more visible than the primary — produces a page that reads as deliberately cool and restrained, closer to an academic research tool than to the brighter, higher-chroma ML platforms like Weights & Biases.

The comparison to competitors is precise: Weights & Biases uses gold-yellow on black with heavy visual density; MLflow sits on white with plain navy typography; Neptune.ai uses a teal-on-white system. Comet's periwinkle-on-dark-navy with lavender-gray borders is the quietest visual approach in the ML tracking category — the color says "infrastructure for engineers" rather than "dashboard for everyone."

The Roboto Mono counter section is the single most distinctive typographic moment: "19,000+ GitHub Stars" and "150,000+ Users" rendered in monospace at 50px / weight 700, making social proof read as instrument output rather than marketing copy. No other platform in the directory uses monospace as the vehicle for social-proof numbers.

Key Characteristics:

• Deep navy-black canvas ({colors.canvas} — #02081b) — cooler and slightly bluer than Spline's pure near-black or Earthly's navy-blue canvas.
• Lavender-gray secondary ({colors.secondary} — #afafce) outpaces the periwinkle accent by 10:1 in total frequency — the dominant border and muted-text tone.
• Periwinkle accent ({colors.primary} — #6064ff) reserved for CTA fills, active tab highlights, and gradient stop-points.
• Roboto Mono at 50px / weight 700 for social-proof counters — the most distinctive typographic move in the system.
• Binary radius: 12px for content cards, 9999px for CTA pill buttons. No 20–24px middle tier.
• Sub-product Opik gradient (--gradient-opik, orange-to-red at 280°) marks the AI observability layer with a warm orange-to-red identity strip.
• Card hover state flips the lavender-gray border to periwinkle — the only hover signal in the system.

Colors

Brand

• Primary ({colors.primary} — #6064ff): frequency 87. Used as text (38), bg (10), border (39). The CTA button fill, active tab, inline text highlight, gradient stop. Wired as --wp--preset--color--accent.
• Primary Dark ({colors.primary-dark} — #4d50e8): frequency 5. Gradient stop in the accent-background and dark-heading-highlight gradients. Wired into --wp--preset--gradient--custom-accent-background.
• Primary Light ({colors.primary-light} — #7377ff): frequency 4. The light stop on the heading-highlight-dark gradient. Appears in gradient-only contexts.
• Secondary ({colors.secondary} — #afafce): frequency 972. Text (494), border (474), bg (4). The dominant surface-level color — card outlines, secondary button borders, muted text, hover-state border for interactive elements. Wired as --wp--preset--color--secondary and multiple button-hover variables.

Text

• Ink ({colors.ink} — #ffffff): frequency 326. Primary heading and body text. Pure white on the dark navy canvas.
• Ink Muted ({colors.ink-muted} — #5f677e): frequency 22. Secondary body copy, footer text, nav submenu labels. Wired as --wp--preset--color--foreground and --wp--custom--color--foreground.
• Ink Soft ({colors.ink-soft} — #8c95a8): frequency 10. Tertiary text — the medium-gray body tier below muted.

Surface

• Canvas ({colors.canvas} — #02081b): frequency 15. The primary page floor and section backgrounds. Wired as --wp--preset--color--custom-background-dark.
• Surface-1 ({colors.surface-1} — #1a1e2d): frequency 15. Elevated card and tile surfaces — the card background above the deep-navy floor. Wired as --wp--preset--color--custom-alt-background-dark.
• Surface-2 ({colors.surface-2} — #262c3e): frequency 9. The secondary elevated surface — testimonial cards, feature-tile overlays. Wired as --wp--custom--color--tertiary and --wp--preset--color--tertiary.

Hairline

• Hairline ({colors.hairline} — #212d54): frequency 22, all as border. The structural card-divider tone — a mid-navy between the canvas and the surface-1 card color. Wired as --wp--preset--color--custom-decorative-border-dark.

Accent

• Teal Accent ({colors.teal-accent} — #12a4b4): frequency 8. Text (4) and border (4). Used for the teal accent tier in feature labels and category chips — not a primary or secondary brand tone, but present in the product-feature grid.
• Blue Soft ({colors.blue-soft} — #5899da): frequency 18. Text (9) and border (9). A sky-blue accent used in secondary link and highlight contexts — the softer blue in the periwinkle family.

Typography

Font Families

The system runs Roboto for every editorial surface — display, heading, body, button, nav, caption, label — with no second display family. The fallback stack is sans-serif only. Roboto Mono handles code blocks and the social-proof counter section. The Roboto Mono counter section ({typography.mono-xl} — 50px / weight 700 / line-height 80px) is the standout: rendering "19,000+" in a fixed-width font at this size makes the number read as a precisely measured instrument value rather than a marketing claim.

Hierarchy

Principles

The display tier tops at weight 600 — Comet avoids the 700+ display-weight arms race. The hero h1 at 58px / 600 is the loudest typographic moment, and its authority comes from size rather than weight. The monospace counter at 50px / 700 is actually heavier but narrower — the fixed-width rhythm of Roboto Mono reads as technical precision rather than marketing boldness. Body copy runs at weight 400 throughout.

Note on Font Substitutes

Roboto is open-source (Google Fonts). For the display and body tier, Inter maps directly at the same sizes and weights. For Roboto Mono at the counter tier, JetBrains Mono or IBM Plex Mono at weight 700 read similarly — the key is preserving the fixed-width character at 50px. The counters should remain in a monospace family; switching to a proportional sans at that size removes the "instrument output" reading.

Layout

Spacing System

• Base unit: 8px (xs).
• Tokens: {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 40px · {spacing.2xl} 50px · {spacing.3xl} 80px.
• Card internal padding: {spacing.xl} × {spacing.2xl} (40×36px) on feature cards and testimonial blocks.
• Section padding (vertical): 50–80px between major sections.
• Nav padding: 0×36px horizontal; the nav bar sits at 56px height.

Grid & Container

• Max content width: ~865px content column (--wp--style--global--content-size: 865px), 1228px wide-size for full-bleed sections.
• Hero: two-column layout at desktop — text column left (~40%) with the hero h1, sub-copy, and primary CTA; visual column right with animated product screenshot.
• Feature sections: alternating left/right two-column layout for the product feature rows.
• Counter strip: horizontal row of three Roboto Mono counter blocks (19,000+ Stars / 150,000+ Users / 19,000+ Tests).
• Social proof: 3-column customer testimonial grid at desktop.

Rhythm

The page uses consistent dark canvas throughout — no section inversion to white, no alternating light/dark bands. Section separation comes from slight surface elevation ({colors.surface-1} card fills on {colors.canvas} floor) and from the periwinkle accent reappearing as section heading emphasis. The monotone-dark rhythm reinforces the "infrastructure tool" positioning — it reads as a dashboard, not a campaign.

Elevation

The system uses tonal lift with a subtle drop shadow declared in CSS presets:

• Flat (no shadow): hero, nav, editorial text sections, footer.
• Tonal lift: {colors.surface-1} and {colors.surface-2} cards on {colors.canvas} — the 10–20 lightness-point gap between canvas and surface reads as elevation.
• CTA pill shadow: --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2) — a soft black shadow on the primary CTA pill, barely visible against the dark canvas. One of the few shadow declarations in the system.
• Deep shadow: --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4) — declared but not visually prominent on the marketing surfaces.

Shapes

The radius scale is binary: conservative small-step for content, full pill for CTAs.

• {rounded.none} 0px — hero section edges, full-width banner strips.
• {rounded.xs} 3px — the smallest chip (1 occurrence).
• {rounded.sm} 5px — form input borders (--wp--custom--button--border--radius: 4px, captured as 5px).
• {rounded.md} 8px — secondary card tier and tag chips (15 occurrences).
• {rounded.lg} 10px — medium content tiles (5 occurrences).
• {rounded.xl} 12px — the dominant card radius (26 occurrences — used on feature cards, testimonial cards, code demo blocks).
• {rounded.2xl} 32px — large promotional container (2 occurrences).
• {rounded.pill} 9999px — primary and secondary CTA buttons (19 occurrences). The single warm surface in the system.
• {rounded.full} 100% — avatar and logo circles (12 occurrences).

The 12px-to-9999px jump is the defining shape decision — there is no 20 or 24px transitional tier. Every content surface uses 12px; every interactive CTA uses the full pill.

Components

button-primary — Periwinkle {colors.primary} fill, white text, Roboto 18px / 700, full-pill {rounded.pill} 9999px radius, 12×20px padding, 52px height. "Try Comet Free" and "Log" are canonical instances.

button-secondary — Transparent fill, white text, 2px lavender-gray {colors.secondary} border, same pill radius and padding. Used for secondary CTAs adjacent to the primary.

top-nav — Dark canvas surface, 56px height, 0×36px padding. Comet wordmark flush left, product links (Platform, Pricing, Customers, Blog, Docs, Company, Log in), "Try for Free" primary CTA flush right.

nav-link — Transparent, white text at Roboto 16px / 500, 0×7.5px padding. The nav links render in pure white rather than the brand accent — ink is the nav default, not the violet.

hero-heading — Pure white text, Roboto 58px / 600 / line-height 65px. The hero h1 on the dark navy canvas.

section-heading — White text, Roboto 40px or 34px / 600 depending on section prominence.

body-paragraph — White text at Roboto 20px / 400. Feature row lead copy.

body-paragraph-muted — Muted {colors.ink-muted} text at Roboto 18px / 400. Secondary descriptions, footer categories.

card — {colors.surface-1} fill, white text, 2px lavender-gray {colors.secondary} border, 12px radius, 40×36px padding. The default feature card — lavender border in resting state.

card-hover — Same card but border flips to periwinkle {colors.primary} on hover. The only hover signal in the system; the color shift from lavender to violet is the interaction cue.

counter-stat — Transparent background, white text, Roboto Mono 50px / 700 / line-height 80px. The social-proof counter row (19,000+, 150,000+, 19,000+).

testimonial-card — {colors.surface-2} (#262c3e) fill, white text, mid-navy {colors.hairline} border, 12px radius, 40×36px padding.

text-input — Transparent fill, white text, 2px {colors.secondary} border, 5px radius, 12px padding, 48px height. Email / form inputs in the contact and demo-request flows.

footer — Deep canvas {colors.canvas} floor, muted text, Roboto 16px / 400, 50×36px padding.

Do's and Don'ts

Do let the lavender-gray secondary ({colors.secondary}) carry the border and muted-text roles. Its 10:1 frequency advantage over the periwinkle accent is not a mistake — the system achieves its cool, restrained quality precisely because the secondary dominates the visible border surface. Replacing lavender-gray borders with periwinkle borders would produce a page that reads as aggressive rather than technical.

Do keep the Roboto Mono counter section at 50px / weight 700. The monospace-at-scale move is the system's most distinctive typographic choice; swapping to Roboto Regular at 50px removes the instrument-output reading and turns the counter into a conventional marketing number.

Do use the card hover state exactly as specified — lavender-gray border at rest, periwinkle border on hover. This is the only interactive-state signal in the system. Introducing a background-color hover (e.g., a purple fill) would add a second hover cue on top of the border signal.

Do reserve the Opik gradient (--gradient-opik) exclusively for Opik-branded identity moments — header strips, product-tier labels, and Opik-specific CTAs. It reads as a warm energetic burst against the cold navy canvas; deploying it elsewhere weakens the sub-product identity distinction.

Don't introduce a light-mode or white-canvas variant without also defining alternative lavender-gray and canvas tokens. The lavender-gray secondary ({colors.secondary}) is calibrated for legibility against the dark navy canvas; it would read as washed-out and low-contrast against a white surface.

Don't use {colors.teal-accent} (#12a4b4) or {colors.blue-soft} (#5899da) as primary or secondary brand accents. Both appear at low frequency (8 and 18 occurrences respectively) in specific product-surface contexts; treating them as general-purpose accents would create a five-color system with no clear hierarchy.

Don't add a mid-range card radius between 12px and the full pill. The binary system is its own design statement — conservative content surfaces vs. warm pill CTAs. Adding a 20px or 24px transitional card variant dissolves the categorical distinction.

Don't render the hero h1 above weight 600. The display tier is calibrated at size 58px / weight 600 — bumping to 700 or 800 on Roboto at that size would tip from confident to heavy and lose the academic-instrument aesthetic.

Known Gaps

• Light mode: the captured marketing surface is dark-only. Comet's product dashboard may carry a light-mode token set not represented here.
• Hover and focus matrix: the card hover state (lavender border → periwinkle border) is captured; the full interactive-state matrix (button active, input focus ring, nav link hover, link underline) is not fully visible on the static captured surface.
• Form validation states: {component.text-input} captures the resting state; error, success, and focus-ring variants are not exposed.
• Opik sub-product token set: the Opik gradient (--gradient-opik), the Opik amber-orange, and the Opik signal-red form the beginning of a sub-brand palette, but the complete Opik design system is not captured here.
• Motion and animations: the hero product screenshot animates, and the counter section may use count-up animation. Easing curves and duration values are not represented.
• Product surfaces: this DESIGN.md captures the comet.com marketing site. The Comet experiment tracking dashboard and the Opik platform UI carry their own denser token systems for charts, experiment cards, metric plots, and annotation tools.
• WordPress-scoped variables: Comet's site is built on WordPress; many CSS custom properties are prefixed --wp--preset-- and --wp--custom--, which limits portability. The tokens in this file strip the WP namespace for direct usability in React projects.