CodeRabbit

---
version: alpha
name: CodeRabbit
description: Cut code review time & bugs in half, instantly.
colors:
  primary: "#ffffff"
  secondary: "#fb540c"
  tertiary: "#19d59e"
  neutral: "#09080c"
  border: "#374151"
  brand-squash-bisque: "#eab080"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.21
  headline-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.029em
  headline-xs:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.17
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 6px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 30px
  lg: 48px
  xl: 146px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#000000"
    rounded: "{rounded.sm}"
    padding: 8px 24px
    height: 64px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 24px
    height: 64px
  button-link:
    textColor: "#aba7b6"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# CodeRabbit: Dark review workflow with 64px CTAs

## Overview

CodeRabbit's interface is dark, code-first, and task-oriented. It serves engineering leaders and developers who live in PR tools and terminals. The tone is confident and succinct: fewer colors, larger modules, and minimal decoration. Space is purposeful—dense in data blocks, generous in the hero and section intros—to keep focus on review outcomes.

## Colors

- **primary (#ffffff):** Default text and primary surfaces for CTAs.
- **secondary (#fb540c):** Brand accent for highlights, badges, and subtle cues; use sparingly.
- **tertiary (#19d59e):** Success and live-status accents (e.g., "Open", health chips).
- **neutral (#09080c):** Page background and card surfaces in dark mode.
- **border (#374151):** Dividers, outlines, and card boundaries on dark surfaces.
- **brand-squash-bisque (#eab080):** Occasional warm brand accent for marketing callouts.
- **surface ({colors.neutral} → #09080c):** Standard container background in this mode.
- **on-surface ({colors.primary} → #ffffff):** Text and icons placed on surface containers.

## Typography

All type uses Plus Jakarta Sans. It is a Google font and can be loaded directly.
- Headline LG (40px/1.2, 500): Hero and top-level section headlines.
- Headline MD (34px/1.21, 500): Secondary section headings and feature intros.
- Headline SM (28px/1, 500, -0.029em): Card titles and widget headers where space is tight.
- Headline XS (24px/1.17, 500): Sub-heads and in-card section labels.
- Body MD (20px/1.4, 400): All descriptive copy and lists.
Substitutes if Plus Jakarta Sans is unavailable: Inter (Google) or Manrope (Google), both geometric-humanist sans with similar x-height and weights.

## Layout

Spacing follows an 8-based rhythm with deliberate jumps for dramatic sections: xs 8px, sm 16px, md 30px, lg 48px, xl 146px. Use xl for hero top/bottom padding and major banding; lg for section gutters; md for card padding stacks; sm/xs inside controls. Layout reads as a centered content column with full-bleed dark background and inset feature panels; a simple 12-column grid or two-column split works well for product + copy sections.

## Elevation & Depth

Shadows are off by default (sm–xl: none). Hierarchy is handled by tonal layers (neutral background vs. slightly lighter containers), 1px borders in #374151, and generous whitespace. Use the provided inset "inner" shadow for focus rings and high-contrast states on dark inputs and buttons where necessary.

## Shapes

Corners are compact: 6px for interactive controls (buttons) and 8px for containers (cards). Use 6px to signal action, 8px to indicate grouping and readable modules. Avoid pills and circles unless a system avatar or chip explicitly calls for it.

## Components

Buttons and cards:
- Primary Button: #ffffff background, #000000 text, 64px height, 8px × 24px padding, 6px radius.
- Secondary Button: transparent on dark, #ffffff text, 64px height, 8px × 24px padding, 6px radius.
- Link Button: #aba7b6 text only, 0px radius.
- Card: #09080c background, #ffffff text, 16px padding, 8px radius, 1px border in #374151 when separation is needed.

### Top Navigation Bar
- Height ~64px, dark background #09080c with #ffffff links. Primary CTA uses the Primary Button; secondary action is a text link. Spacing sm (16px) between items.

### Hero Section
- Headline uses Headline LG (40px/500) in #ffffff. Supporting copy in Body MD (20px). Primary CTA uses the Primary Button; place sm–md spacing between headline, body, and actions. Top/bottom padding xl (146px) to clear the dimmed product carousel.

### Product Workflow Strip (01–04)
- A horizontally scrollable or stepped panel showing Review, Prioritize, Understand, Secure. Each step sits in a Card with 8px radius and a #374151 border; captions use Headline XS (24px) and Body MD (20px). Use lg (48px) gap between steps.

### Triage Queue Table
- Dense table layout on dark. Header row in Headline XS (24px) or 20px bold; rows in Body MD (20px). Use #374151 for gridlines; status chips use #19d59e where appropriate.

### Change Stack Explainer
- Two-pane layout: step list at left, code panel at right. Container is a Card (8px radius, 16px padding). Section title in Headline MD (34px).

### Security Health Widget
- Card with charts and badges. Use #19d59e for "healthy" and #fb540c for critical notices. Titles in Headline XS; body in 20px. Borders only—no drop shadows.

### Social Proof & Stats Band
- Dark band with counters (e.g., 17K customers). Numbers in Headline MD or LG; labels in Body MD. Partner icons in #ffffff at reduced opacity.

### Footer
- Multi-column link lists in Body MD with sm (16px) vertical rhythm. Divider above footer uses #374151; buttons retain 6px radius when present.

## Do's and Don'ts

- Do keep text #ffffff on #09080c for primary reading surfaces; use #374151 for dividers only.
- Do reserve #fb540c for brand highlights, warnings, or small UI beacons—never for long paragraphs or full backgrounds.
- Do use 6px radius for buttons and 8px for cards; mixing larger radii will feel off-brand.
- Don't add drop shadows to cards; rely on borders and spacing for separation.
- Don't shrink CTAs below 64px height; consistency of the primary action is part of the visual language.
- Don't introduce new body sizes; body text is 20px for readability on dark.

## Agent Prompt Guide

Quick reference — dark mode
- Text: #ffffff
- Background: #09080c
- Border: #374151
- Accent: #fb540c (brand) / #19d59e (status)

1) Build the hero
"Create a full-width hero on background #09080c with 146px top/bottom padding. Set the h1 in Plus Jakarta Sans, 40px, weight 500, color #ffffff. Add a 20px body paragraph at 1.4 line height. Place a primary CTA button 64px tall, 8px × 24px padding, 6px radius, background #ffffff with #000000 text. Keep 16px gaps between text blocks."

2) Product workflow steps (01–04)
"Render four cards in a row on #09080c, each 8px radius, 16px padding, 1px border #374151, no shadow. Headings at 24px/500, body at 20px/1.4. Use #19d59e for 'Open/Healthy' chips and #fb540c for risk badges. Maintain 48px gaps between cards."

3) Triage table
"On a dark surface (#09080c), create a table with a sticky header. Header text: Plus Jakarta Sans 24px/500 #ffffff. Row text: 20px/400 #ffffff. Gridlines: 1px #374151. Use 6px radius on inline buttons and 8px on any row detail card. Avoid drop shadows."

4) Security overview widget
"Make a card (8px radius, 16px padding) with a small chart. Title: 28px/500 #ffffff. Labels: 20px/400 #ffffff at 80% opacity. Use #19d59e for 'healthy' and #fb540c for 'critical'. Apply an inset focus ring using the provided inner shadow on interactive elements."

## Similar Brands

- GitHub: Dark, code-first surfaces and restrained color; GitHub leans more neutral, while CodeRabbit uses a stronger orange accent and larger CTAs.
- Vercel: Monochrome palette and bold dark mode; Vercel is sparser with more whitespace, CodeRabbit is denser with app-like panels.
- Snyk: Security tooling with dark UI and bright accents; Snyk employs purple, whereas CodeRabbit uses orange/mint and stricter small radii.
- Sourcegraph: Developer search with dark sections and product-led screenshots; Sourcegraph's typography is heavier, CodeRabbit's is steadier at 500 weight across headings.

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #fb540c;
  --color-tertiary: #19d59e;
  --color-neutral: #09080c;
  --color-border: #374151;
  --color-brand-squash-bisque: #eab080;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 40px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 34px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 28px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1;
  --text-headline-sm-tracking: -0.029em;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.17;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --font-plus-jakarta-sans: "Plus Jakarta Sans";

  /* Rounded */
  --radius-sm: 6px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 30px;
  --spacing-lg: 48px;
  --spacing-xl: 146px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: #000000;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 24px;
  --button-primary-height: 64px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 24px;
  --button-secondary-height: 64px;
  --button-link-text-color: #aba7b6;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Cut code review time & bugs in half, instantly.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.984,
          0.329,
          0.047
        ],
        "hex": "#fb540c"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.098,
          0.835,
          0.62
        ],
        "hex": "#19d59e"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.035,
          0.031,
          0.047
        ],
        "hex": "#09080c"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.255,
          0.318
        ],
        "hex": "#374151"
      }
    },
    "brand-squash-bisque": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.918,
          0.69,
          0.502
        ],
        "hex": "#eab080"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.035,
          0.031,
          0.047
        ],
        "hex": "#09080c"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 30,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 48,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 146,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Plus Jakarta Sans",
        "fontSize": {
          "value": 40,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Plus Jakarta Sans",
        "fontSize": {
          "value": 34,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Plus Jakarta Sans",
        "fontSize": {
          "value": 28,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.029,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Plus Jakarta Sans",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Plus Jakarta Sans",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}