Skip to content
DesignMunkDesignMunk Submit a site

Kubit

kubit.ai
Track agents with user intent and behavior, right where you code.
AI Analytics Framer Homepage Instrument Sans Inter
Share Visit site
kubit.ai DESKTOP · 1440
Kubit

AI Breakdown

Design export

---
version: alpha
name: Kubit
description: Track agents with user intent and behavior, right where you code.
colors:
  primary: "#fafafa"
  secondary: "#0776ec"
  tertiary: "#00ffb2"
  neutral: "#08070e"
  border: "#374151"
  brand-broken-blue: "#7cbcf4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Instrument Sans
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Instrument Sans
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: -0.05em
  headline-sm:
    fontFamily: sans-serif
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.2
  headline-xs:
    fontFamily: sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 3.3
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#111018"
    rounded: "{rounded.full}"
    padding: 6px 21px
    height: 26px
  button-secondary:
    textColor: "#f5f5f5"
    rounded: "{rounded.full}"
    padding: 6px 21px
    height: 26px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Kubit: Dark Developer Canvas with Electric Accent CTAs

## Overview

Kubit's UI is a dark-mode system designed for developers. It uses a restrained palette with one bright accent to direct attention to primary actions and data. Typography is modern and utilitarian, prioritizing scan speed over flourish. Spacing is moderate-to-roomy so dense topics (telemetry, funnels) remain readable on dark surfaces.

## Colors

- **Primary (#fafafa):** High-contrast text and icons on dark surfaces.
- **Secondary (#0776ec):** Cool blue accent for links, progress, and supportive highlights.
- **Tertiary (#00ffb2):** Electric mint reserved for primary actions and success states.
- **Neutral (#08070e):** Core background across the site and app surfaces.
- **Border (#374151):** Subtle separators on dark surfaces; use for cards, tables, and section dividers.
- **Brand-broken-blue (#7cbcf4):** Soft glow and illustrative accents; suitable for charts and halos.
- **Surface (#08070e):** Default canvas for pages and containers.
- **On-surface (#fafafa):** Default foreground for text and UI symbols.

## Typography

- Instrument Sans is the display family for headlines. It is a free Google font and may be loaded directly. Levels: headline-lg 40px/1.1 (-0.03em) for heros; headline-md 32px/1.38 (-0.05em) for section leads; headline-sm 25px/1.2 and headline-xs 20px/1.2 for subheads and component titles.
- Inter is the body family. It is a free Google font and may be loaded directly. Use body-md 16px with generous 3.3 line-height for paragraphs, lists, and supporting text.
- Generic sans-serif is used where specified; rely on system UI stacks (system-ui, Helvetica, Arial) as fallbacks when custom fonts are unavailable.

## Layout

Spacing follows an 8px logic with steps at 16, 24, 32, and 48px; a 6px token exists for micro gaps and icon alignment. Use md (24px) as the default gutter in multi-column layouts, lg (32px) for section padding, and xl (48px) for major vertical rhythm between sections. Content blocks generally run single-column on mobile and 2–4 cards per row on desktop. Maintain generous outer padding on dark backgrounds to keep edges clean.

## Elevation & Depth

Depth is restrained. Most hierarchy is achieved with tone and borders (#374151). The sm shadow adds a blue-tinged glow for hero imagery or featured cards, while md provides a soft dark drop for menus or overlays. Large shadow tiers are intentionally unused; rely on spacing and contrast instead.

## Shapes

Two radii define the language: 8px for containers and cards, and 9999px for pills. Use rounded.full for primary/secondary CTAs, input chips, and badges. Cards, modals, and testimonial blocks use rounded.sm (8px) for a consistent, tool-like feel.

## Components

Buttons and cards are the primitives used throughout.

- Button — Primary: background #00ffb2, text #111018, pill radius 9999px, padding 6px 21px, height 26px. Use for the main action per view.
- Button — Secondary: text #f5f5f5, pill radius 9999px, padding 6px 21px, height 26px. Transparent or subtle surface; pair with the primary.
- Button — Link: text #fafafa, no radius; inline emphasis within copy.
- Card: background #08070e, text #fafafa, radius 8px, padding 16px. Add a #374151 border when grouping multiple cards.

### Top Navigation
- Horizontal bar with brand at left and links to How it Works, Features, Docs, Pricing. Right-aligned actions use the button primitives.

### Hero with Analytics Halo
- Headline uses headline-lg (40px/1.1). Supporting text uses body-md (16px). Two CTAs side-by-side; the leading CTA uses the primary button spec. The hero image/card may receive the sm shadow for the subtle blue glow.

### Problem/Solution Stack
- Section titles use headline-md (32px) with tight letter spacing. Each block pairs a short paragraph in body-md. Use xl (48px) spacing between groups.

### Feature Grid
- 2x2 or 3x2 card grid. Each feature title set in headline-sm (25px) with body-md copy. Cards use 8px radius, 16px padding, optional #374151 border.

### How It Works List
- Four concise items: title in headline-xs (20px) and description in body-md. Use md (24px) gaps and lg (32px) outer padding.

### Enterprise Trust Row
- Small card or banner linking to the Trust Center. Use border #374151 and 8px radius to separate from content.

### Testimonials
- Quote card with company line, short sentence, and author/role. Use 8px radius, 16px padding, and body-md for copy.

### Footer
- Multi-column link lists with body-md. Use lg (32px) vertical padding and border #374151 at the top edge.

## Do's and Don'ts

- Do pair #fafafa text with the #08070e background for WCAG-safe contrast.
- Do reserve #00ffb2 for the primary action and positive states; keep usage sparse for focus.
- Do use #374151 borders instead of large shadows to separate sections and cards.
- Do keep headlines in Instrument Sans and body text in Inter to preserve the developer-tool tone.
- Don't present multiple competing accent colors in the same viewport; choose one accent for actions.
- Don't override the generous body leading when stacking dense content; if tighter text is required, create a distinct style rather than modifying body-md in place.

## Agent Prompt Guide

Quick reference — text: #fafafa; background: #08070e; border: #374151; accent: #00ffb2.

1) Build the hero
- Canvas: background #08070e.
- Heading: Instrument Sans, 40px, weight 400, line-height 1.1, letter-spacing -0.03em, color #fafafa.
- Body: Inter, 16px, line-height 3.3, color #fafafa at 80% opacity if needed.
- Buttons: primary pill — bg #00ffb2, text #111018, radius 9999px, padding 6px 21px, height 26px; secondary pill — text #f5f5f5, radius 9999px, padding 6px 21px, height 26px, transparent background, optional border #374151.
- Hero image/card: radius 8px, apply shadow rgba(84,159,250,0.24) 0 0 32px 0.

2) Problem/Solution section
- Section title: Instrument Sans 32px, weight 400, line-height 1.38, letter-spacing -0.05em, color #fafafa.
- Paragraphs: Inter 16px/3.3, color #fafafa.
- Spacing: use xl (48px) between major blocks and md (24px) between title and body.

3) Features grid
- Grid: 3 columns desktop, 1 column mobile; column gap md (24px), row gap lg (32px).
- Feature card: bg #08070e, border 1px #374151, radius 8px, padding 16px.
- Title: Instrument Sans 25px/1.2; body: Inter 16px/3.3.
- Inline links: color #0776ec for secondary accents.

4) Testimonials
- Card: bg #08070e, border 1px #374151, radius 8px, padding 16px.
- Quote: Inter 16px/3.3, color #fafafa.
- Attribution: Instrument Sans 20px/1.2 for name; Inter 16px/3.3 at 70% opacity for role.

5) Footer
- Top divider: 1px #374151.
- Link lists: Inter 16px/3.3, color #fafafa; hover color #0776ec.
- Section spacing: lg (32px) vertical padding inside the footer, xl (48px) outside margin from body content.

## Similar Brands

- Langfuse — dark, developer-first analytics with restrained color; Kubit is cooler in tone and leans harder into product storytelling.
- LangSmith — observability for LLMs with dark surfaces; Kubit adds end-user analytics and more prominent marketing sections.
- PostHog — analytics with strong typographic hierarchy; more playful and often light-themed compared to Kubit's consistently dark canvas.
- Sentry — monitoring with dark UI and thin dividers; Sentry's accent is warmer, Kubit's is cooler and more neon.
- Vercel — black canvas with crisp white type; Vercel is more minimal, Kubit is denser with feature copy.

More like this

Browse AI →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 15 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 15 minutes ago
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 2 hours ago
openlayer.com
Openlayer About AI
Openlayer About
A high-contrast hero dominates with a black card, elegant serif headline, and a single purple CTA, establishing a clear hierarchy and sleek…
About · 3 hours ago