DESIGN.md inspired by CodeRabbit

---
name: CodeRabbit
tagline: Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs.
updated_at: 2026-05-28T23:12:25.568Z
published_at: 2026-05-28T23:12:25.568Z
author: webdesignhot
source_url: https://www.coderabbit.ai
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [dev-tools, ai]
tags: [dark, structured, sans, developer, code-review]
preview_swatch: ['#09080c', '#ff570a', '#ffffff']
related: [linear, vercel, github]
description: 'CodeRabbit runs its marketing surface like a terminal at midnight — a near-black `#09080c` canvas, pure-white type set in Plus Jakarta Sans, and a single warm orange `#ff570a` borrowed from the rabbit mascot as the one chromatic anchor. The primary CTA inverts to a white chip with black ink and a sharp 4px corner; brand orange is reserved for accents, highlights, and the AI-review storytelling. The system reads as developer-grade, dense, and confident — the page is built to convince engineers that the bot reviewing their PRs is as serious as they are.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent
  border: border
  ring: border-brand
  muted: text-secondary
colors:
  # Page grounds
  bg: '#09080c'                  # canvas — near-black with a faint violet warmth, not #000
  bg-deep: '#050409'             # deepest band — footer, full-bleed sections
  bg-level-1: '#0f0d14'          # first elevation (cards, panels)
  bg-level-2: '#16131d'          # second elevation (hover, emphasized)
  bg-level-3: '#1d1926'          # third tier — popovers, raised tooltips
  bg-overlay: 'rgba(9,8,12,0.72)'  # modal scrim
  # Surfaces & containers
  surface: '#0f0d14'
  surface-strong: '#16131d'
  surface-tinted-brand: 'rgba(255,87,10,0.08)'  # orange-tinted callout wash
  # Text
  text: '#ffffff'                 # body copy, headlines — pure white (live)
  text-secondary: '#c9c5d2'       # supporting copy
  text-tertiary: '#8b8794'        # metadata, captions
  text-quaternary: '#5e5a68'      # placeholder, faint helpers
  text-disabled: '#3a3742'
  # Brand & accent (CodeRabbit orange — the mascot)
  brand: '#ff570a'                # CodeRabbit orange — accent + storytelling
  brand-hover: '#ff6f2e'          # lighter on hover
  brand-press: '#e64a00'          # pressed / active
  brand-soft: 'rgba(255,87,10,0.16)'  # tinted backdrop
  accent: '#ff8a4c'               # amber-leaning accent for glows / highlights
  link: '#ff8a4c'                 # link copy on dark
  link-hover: '#ffa873'
  # Borders
  border: '#262433'               # default 1px hairline
  border-strong: '#36333f'        # emphasized
  border-subtle: 'rgba(255,255,255,0.06)'  # near-invisible
  border-brand: '#ff570a'
  # CTA chrome (the signature primary — inverted white chip)
  cta-fill: '#ffffff'             # white pill/chip button
  cta-fill-hover: '#ededed'
  cta-fill-press: '#d8d8d8'
  cta-text: '#000000'             # black ink on the white chip
  # Semantic (PR-review flavored)
  success: '#3fb950'              # additions / approved — GitHub-green family
  success-bg: 'rgba(63,185,80,0.12)'
  warning: '#d29922'              # caution / needs-attention
  warning-bg: 'rgba(210,153,34,0.12)'
  danger: '#f85149'               # deletions / blocking
  danger-bg: 'rgba(248,81,73,0.12)'
  info: '#ff570a'                 # informational — uses the brand orange
  info-bg: 'rgba(255,87,10,0.12)'
  # Diff ink (code-review signature)
  diff-add: '#3fb950'
  diff-add-bg: 'rgba(63,185,80,0.15)'
  diff-del: '#f85149'
  diff-del-bg: 'rgba(248,81,73,0.15)'
  on-brand: '#ffffff'             # text on orange fills

typography:
  display:
    family: '"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif'
    weights: [500, 600, 700]
  body:
    family: '"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, "JetBrains Mono", SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 80, weight: 600, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-lg:      { size: 64, weight: 500, lineHeight: 1.05, tracking: '-0.025em', family: display }
    h1:              { size: 64, weight: 500, lineHeight: 1.0,  tracking: '-0.025em', family: display }
    h2:              { size: 40, weight: 600, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h3:              { size: 28, weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h4:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '-0.005em', family: display }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0.01em',   family: body }
    eyebrow:         { size: 13, weight: 600, lineHeight: 1.4,  tracking: '0.06em',   family: body, transform: uppercase }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    code-inline:     { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: mono }
    code-block:      { size: 13, weight: 400, lineHeight: 1.6,  tracking: '0',        family: mono }
    button:          { size: 15, weight: 500, lineHeight: 1,    tracking: '0',        family: body }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  card: 20
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64
  section-y: 96
  gutter: 24
  grid-columns: 12

components:
  button-primary:
    backgroundColor: '#ffffff'
    textColor: '#000000'
    rounded: sm
    padding: '12px 20px'
    height: 44
    font: '15px Plus Jakarta Sans, weight 500'
    hover: 'bg #ededed — slight dim'
    active: 'bg #d8d8d8'
    focus: 'ring 2px #ff570a offset 2px on bg'
    use: 'Get started / Try for free — high-contrast white chip, sharp 4px corner'
  button-brand:
    backgroundColor: '#ff570a'
    textColor: '#ffffff'
    rounded: sm
    padding: '12px 20px'
    height: 44
    font: '15px Plus Jakarta Sans, weight 500'
    hover: 'bg #ff6f2e'
    active: 'bg #e64a00'
    use: 'rare — brand-coded emphasis (install GitHub App, request demo)'
  button-ghost:
    backgroundColor: transparent
    textColor: '#ffffff'
    border: '1px solid #262433'
    rounded: sm
    padding: '12px 20px'
    height: 44
    hover: 'bg rgba(255,255,255,0.04); border #36333f'
    use: 'secondary nav, "Learn more"'
  button-link:
    backgroundColor: transparent
    textColor: '#ff8a4c'
    rounded: micro
    padding: '0'
    hover: 'text #ffa873; underline'
    use: 'inline text actions, "Read the docs →"'
  card:
    backgroundColor: '#0f0d14'
    border: '1px solid #262433'
    rounded: lg
    padding: 24
    shadow: none
    hover: 'border #36333f; bg #16131d'
    use: 'feature blocks, integration cards — never shadowed'
  card-hero:
    backgroundColor: '#0f0d14'
    border: '1px solid #262433'
    rounded: card
    padding: 40
    use: 'product-screenshot frames, PR-review demo splits'
  input:
    backgroundColor: '#0f0d14'
    textColor: '#ffffff'
    placeholderColor: '#5e5a68'
    border: '1px solid #262433'
    rounded: sm
    height: 44
    padding: '0 14px'
    focus: 'border #ff570a; ring rgba(255,87,10,0.28) 0 0 0 3px'
    font: '15px Plus Jakarta Sans 400'
    use: 'email capture, search — sharp 4px corner matches buttons'
  badge:
    backgroundColor: 'rgba(255,87,10,0.12)'
    textColor: '#ff8a4c'
    border: '1px solid rgba(255,87,10,0.22)'
    rounded: sm
    padding: '4px 10px'
    font: '12px Plus Jakarta Sans 600 uppercase'
    use: 'New / Beta / category labels — orange-tinted'
  navbar:
    backgroundColor: 'rgba(9,8,12,0.72)'
    backdrop-filter: 'blur(12px) saturate(160%)'
    border-bottom: '1px solid #262433'
    height: 64
    use: 'sticky top — border edge only, no shadow on scroll'
  tooltip:
    backgroundColor: '#1d1926'
    textColor: '#ffffff'
    border: '1px solid #36333f'
    rounded: md
    font: '13px Plus Jakarta Sans 500'
    shadow: '0 8px 24px rgba(0,0,0,0.5)'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-out: 'cubic-bezier(0, 0, 0.2, 1)'
  duration-instant: 80
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  hover-button: 'bg shift over 150ms ease-out; no transform on the white chip'
  hover-card: 'border + bg lift over 240ms ease-standard; no transform'
  page-transition: 'opacity 200ms ease-standard; no slide'
  scroll-fade: 'opacity 0 → 1 over 320ms with translateY(12px) → 0'
  reduced-motion: 'respects prefers-reduced-motion: reduce — transitions collapse to opacity-only'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none'
  ambient: '0 1px 2px rgba(0,0,0,0.5)'
  popover: '0 8px 24px rgba(0,0,0,0.5)'
  modal: '0 24px 48px rgba(0,0,0,0.6)'
  glow-brand: '0 0 32px rgba(255,87,10,0.25)'   # rare — hero orange bloom
  ring-focus: '0 0 0 3px rgba(255,87,10,0.28)'

accessibility:
  contrast-text-on-bg: 20.1               # #ffffff on #09080c — AAA
  contrast-cta-text: 21.0                 # #000000 on #ffffff — AAA
  contrast-brand-on-bg: 4.9               # #ff570a on #09080c — AA (large/UI)
  contrast-on-brand: 4.3                  # #ffffff on #ff570a — AA (large), not body-AAA
  focus-ring: '3px solid rgba(255,87,10,0.28) offset 2px'
  reduced-motion-honored: true
  keyboard-nav: 'visible focus on every interactive; tab cycles header → hero CTA → feature grid → footer'
  aria-patterns: 'dialog uses role=dialog + aria-modal=true; menus use role=menu; badges use aria-label for state'

dark-mode: native        # CodeRabbit is dark-first; the marketing site ships dark only

---

## 1. Visual Theme & Atmosphere

CodeRabbit is dark-canvas developer marketing tuned for an audience
that lives in a terminal. The page opens on a near-black `#09080c`
ground — not pure `#000`, but a hair warmer with a faint violet cast
that keeps the white type from crunching — and lets a single warm
orange `#ff570a`, lifted straight from the rabbit mascot, carry all
the chromatic weight. Type is Plus Jakarta Sans, a geometric humanist
sans that reads cleanly at the 64px display sizes the hero uses and
stays legible at 14px in dense feature copy. The atmosphere is that
of a code editor at midnight: focused, high-contrast, nothing
decorative competing with the message.

What makes it distinctive against nearby dev-tool sites is the
restraint of the colour budget paired with the warmth of the one
accent. Linear runs cool indigo on near-black; CodeRabbit runs warm
orange on near-black. That single hue choice is the brand — it shows
up in the mascot, in highlighted words, in tinted callouts, and in
the focus rings — but it is deliberately kept off the primary CTA.
The dominant action inverts instead to a crisp white chip with black
ink and a sharp 4px corner, giving each screen exactly one
maximum-contrast eye anchor while the orange does the storytelling.

The mood is engineering credibility. CodeRabbit sells an AI agent
that reviews pull requests, so the site has to convince skeptical
developers that the bot is rigorous. It does this by looking like a
tool, not a toy: tight 4px geometry, monospace diff snippets,
green-and-red diff ink that any engineer reads instantly, and product
screenshots of real PR comments. There are no playful gradients or
floating orbs — the visual seriousness is the argument.

The 4px sharp corner is the quiet signature. Where most dark dev
sites round to 8–12px, CodeRabbit keeps buttons, inputs, and badges
at a tight 4px (`sm`), which reads more like an IDE chrome than a
consumer SaaS. Cards relax slightly to 12–20px to frame screenshots,
but the interactive surfaces stay sharp. The result is a system that
feels precise and tool-like rather than soft and marketing-flavoured.

**Key Characteristics**
- Near-black `#09080c` ground (warm violet cast, never `#000`)
- Pure-white `#ffffff` type for maximum contrast against the canvas
- Plus Jakarta Sans throughout — geometric humanist sans, 500 display weight
- CodeRabbit orange `#ff570a` (the mascot) as the single accent hue
- Inverted CTA: white `#ffffff` chip with black `#000000` ink
- Sharp 4px (`sm`) radius on buttons, inputs, and badges — IDE-grade
- Diff-coloured semantic ink (green additions / red deletions)
- Tonal layering, not shadows, for depth (`#09080c` → `#0f0d14` → `#16131d`)
- Monospace reserved for code/diff snippets — credibility vocabulary
- Marketing site reads like the product: dense, precise, tool-like

## 2. Color Palette & Roles

### Primary

- **bg** `#09080c` — page canvas, near-black with a faint violet warmth
- **text** `#ffffff` — primary copy and headlines, pure white (live token)
- **cta-fill** `#ffffff` — primary button background (the inversion move)
- **cta-text** `#000000` — black ink on the white chip

### Brand & Accent

- **brand** `#ff570a` — CodeRabbit orange, accent + storytelling, not CTA fill
- **brand-hover** `#ff6f2e` — lighter on hover for branded buttons
- **brand-press** `#e64a00` — pressed / active
- **accent** `#ff8a4c` — amber-leaning accent for glows, highlighted words
- **link** `#ff8a4c` — link copy on dark, brighter than brand for legibility
- **link-hover** `#ffa873`
- **brand-soft** `rgba(255,87,10,0.16)` — tinted callout backdrops

### Surface & Elevation

- **surface** `#0f0d14` — default card
- **surface-strong** `#16131d` — emphasized panel / hover
- **bg-deep** `#050409` — deepest band (footer, full-bleed sections)
- **bg-level-1** `#0f0d14` — first elevation (cards, panels)
- **bg-level-2** `#16131d` — hover state, second elevation
- **bg-level-3** `#1d1926` — popovers, tooltips, third elevation

### Neutral Scale

- **text** `#ffffff` — body and headlines
- **text-secondary** `#c9c5d2` — supporting copy
- **text-tertiary** `#8b8794` — captions, metadata
- **text-quaternary** `#5e5a68` — placeholders, faint helpers
- **text-disabled** `#3a3742` — disabled labels

### Borders

- **border** `#262433` — default 1px hairline
- **border-strong** `#36333f` — emphasized rule
- **border-subtle** `rgba(255,255,255,0.06)` — barely-visible
- **border-brand** `#ff570a` — active input outline / focus

### Shadow Colors

Shadows are *almost never used on cards.* When they appear (popovers,
modals), they are pure-neutral black, multi-layer. The one tinted
shadow is the rare hero orange bloom:

- **shadow-popover** `0 8px 24px rgba(0,0,0,0.5)`
- **shadow-modal** `0 24px 48px rgba(0,0,0,0.6)`
- **shadow-ambient** `0 1px 2px rgba(0,0,0,0.5)` — sticky-header subtle lift
- **glow-brand** `0 0 32px rgba(255,87,10,0.25)` — rare hero accent bloom

### Semantic (PR-review flavored)

- **success** `#3fb950` + **success-bg** `rgba(63,185,80,0.12)` — additions / approved
- **warning** `#d29922` + **warning-bg** `rgba(210,153,34,0.12)` — needs-attention
- **danger** `#f85149` + **danger-bg** `rgba(248,81,73,0.12)` — deletions / blocking
- **info** `#ff570a` + **info-bg** `rgba(255,87,10,0.12)` — uses the brand orange

Because CodeRabbit reviews code, it leans on the universally-read diff
palette — **diff-add** `#3fb950` on `rgba(63,185,80,0.15)` and
**diff-del** `#f85149` on `rgba(248,81,73,0.15)`. These ride alongside
the brand orange without competing with it: green/red live only inside
code surfaces, orange lives in chrome and storytelling.

## 3. Typography Rules

### Font Family

- **Primary (display + body)**: Plus Jakarta Sans, with `system-ui`,
  `-apple-system`, `"Segoe UI"`, `sans-serif` fallback chain. A
  geometric humanist sans with open counters that holds up at both
  64px display and 14px dense copy.
- **Mono**: `ui-monospace`, `"JetBrains Mono"`, `SFMono-Regular`,
  `"SF Mono"`, `Menlo`, `monospace` — reserved for code and diff
  snippets, the credibility vocabulary of a code-review product.
- **Weight strategy**: the hero H1 runs at `500` (medium), not bold —
  the size carries the hierarchy. `600` is the heaviest weight used in
  headings; `700` is reserved for rare emphasis.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Tracking | Notes |
|---|---|---|---|---|---|---|
| display-hero | Plus Jakarta | 80 | 600 | 1.0 | -0.03em | Landing splash only |
| display-lg | Plus Jakarta | 64 | 500 | 1.05 | -0.025em | Section heroes |
| h1 | Plus Jakarta | 64 | 500 | 1.0 | -0.025em | Page title (live: 64/500) |
| h2 | Plus Jakarta | 40 | 600 | 1.1 | -0.018em | Major sections |
| h3 | Plus Jakarta | 28 | 600 | 1.2 | -0.012em | Sub-sections |
| h4 | Plus Jakarta | 20 | 600 | 1.3 | -0.005em | Card titles |
| eyebrow | Plus Jakarta | 13 | 600 | 1.4 | 0.06em uppercase | Section markers |
| body-lg | Plus Jakarta | 18 | 400 | 1.6 | 0 | Hero subhead |
| body | Plus Jakarta | 16 | 400 | 1.6 | 0 | Default body |
| body-sm | Plus Jakarta | 14 | 400 | 1.55 | 0 | Dense copy (live body) |
| label | Plus Jakarta | 13 | 500 | 1.4 | 0.01em | Form labels |
| caption | Plus Jakarta | 12 | 500 | 1.4 | 0.02em | Metadata |
| button | Plus Jakarta | 15 | 500 | 1 | 0 | Button label |
| code-inline | JetBrains Mono | 14 | 400 | 1.5 | 0 | Inline code |
| code-block | JetBrains Mono | 13 | 400 | 1.6 | 0 | Diff blocks |

### Principles

- **Medium, not bold, carries the hero.** The live H1 is 64px at
  weight `500`. Size and tracking do the hierarchy work; reaching for
  `700` on a headline reads as consumer SaaS, not developer tool.
- **Tracking tightens with size.** Display-hero at `-0.03em` is far
  tighter than body at `0`. The 64px H1 needs the negative tracking to
  feel engineered rather than bloated.
- **Pure white type, full stop.** Unlike Linear's `#f7f8f8`,
  CodeRabbit uses `#ffffff` for headlines and body — the live token.
  Secondary copy steps down to `#c9c5d2`, never a softened white.
- **Mono is code vocabulary.** Monospace appears only in code and diff
  snippets. It is never used for marketing eyebrows or labels — the
  separation keeps code surfaces unmistakable.
- **Generous body line-height.** Body runs at `1.6` — looser than the
  product-dense Linear `1.55` — because the marketing copy explains a
  workflow and benefits from breathing room.
- **Reading width caps at 720px.** Within the 1280px page frame,
  multi-paragraph copy is always constrained for comfortable rag.

## 4. Component Stylings

### Buttons (4 variants)

**Primary (the signature inversion)**
- Background: `#ffffff`
- Text: `#000000` at 15/500
- Padding: `12px 20px`
- Height: 44
- Radius: 4 (`sm`) — sharp corner
- Border: none
- Hover: bg dims to `#ededed`; no transform (the chip stays planted)
- Active: bg `#d8d8d8`
- Focus: `ring 2px #ff570a offset 2px`
- Use: "Get started", "Try for free" — the *one* CTA per screen

**Brand (rare)**
- Background: `#ff570a`
- Text: `#ffffff` at 15/500
- Radius: 4 (`sm`)
- Hover: bg `#ff6f2e`; Active: `#e64a00`
- Use: only when the action must read as brand-coded — "Install GitHub
  App", "Request a demo". Most pages don't have one.

**Ghost**
- Background: transparent
- Text: `#ffffff` at 15/500
- Border: `1px solid #262433`
- Radius: 4 (`sm`)
- Hover: bg `rgba(255,255,255,0.04)`; border `#36333f`
- Use: secondary nav, "Learn more" (the live secondary CTA)

**Link**
- Background: transparent
- Text: `#ff8a4c` at 15/500
- Radius: 2 (`micro`)
- Hover: text `#ffa873`; underline appears
- Use: inline text actions — "Read the docs →"

### Cards (3 variants)

**Standard card**
- Background: `#0f0d14`, Border: `1px solid #262433`, Radius: 12 (`lg`)
- Padding: 24, Shadow: none
- Hover: border `#36333f`, bg `#16131d`
- Use: feature blocks, integration cards

**Hero card**
- Background: `#0f0d14`, Border: `1px solid #262433`, Radius: 20 (`card`)
- Padding: 40
- Use: PR-review demo frames, product-screenshot splits

**Tinted brand card**
- Background: `rgba(255,87,10,0.08)`, Border: `1px solid rgba(255,87,10,0.22)`
- Radius: 12
- Use: rare brand-coded callouts (highlighted features, launch banners)

### Badges, Tags, Pills

**Brand badge** — 4px (`sm`) radius, `rgba(255,87,10,0.12)` bg,
`rgba(255,87,10,0.22)` border, `#ff8a4c` text at 12px/600 uppercase.
Used for "New", "Beta", category labels — orange-tinted.

**Status badge** — same shell, semantic colour swap: success
`#3fb950`, warning `#d29922`, danger `#f85149`, each on its 12%-alpha
tinted background with a 22%-alpha border.

**Diff tag** — inside code surfaces, additions render `#3fb950` on
`rgba(63,185,80,0.15)`, deletions `#f85149` on `rgba(248,81,73,0.15)`,
in JetBrains Mono. Reads as a real diff.

### Inputs / Forms

**Text input**
- Background: `#0f0d14`, Border: `1px solid #262433`, Radius: 4 (`sm`)
- Height: 44, Padding: `0 14px`
- Font: `15px Plus Jakarta Sans 400`
- Placeholder: `#5e5a68`
- Focus: border `#ff570a`; ring `rgba(255,87,10,0.28) 0 0 0 3px`
- Disabled: bg `#09080c`, text `#3a3742`

**Email capture** — the sharp 4px input pairs flush with the white
primary button to its right, forming a single capture unit on the
hero and footer.

**Select** — same shell as input plus a 12px chevron in `#8b8794`;
the dropdown follows tooltip styling at `bg-level-3`.

**Checkbox / Radio** — 18 × 18, `1px solid #36333f`, 4px radius
(checkbox) or pill (radio); checked fill is brand `#ff570a`.

### Navigation

**Top nav**: 64px tall, `rgba(9,8,12,0.72)` bg with `backdrop-filter:
blur(12px) saturate(160%)`, 1px bottom border `#262433`. Sticky on
scroll — no shadow added, just the border edge. Logo + wordmark on the
left, links centred, ghost "Sign in" plus white-chip CTA on the right.

**Footer**: deepest band at `bg-deep #050409` with low-contrast
`#5e5a68` link text and a 1px top border `#262433`.

**Side nav (docs)**: tonal column at `bg-level-1` with a `#262433`
rule on the right; active item gets `bg-level-2` plus a 2px brand-orange
left border.

### Tooltips & Popovers

Tooltip: `#1d1926` bg, `#36333f` border, 8px radius, `13px Plus
Jakarta 500` text, 6 × 10 padding, shadow `0 8px 24px rgba(0,0,0,0.5)`.
Popover (menus, comboboxes): same shell at 12px radius, max-width 320,
list items use 6/10 padding.

## 5. Layout Principles

### Spacing System

- **Base unit**: 4px
- **Scale**: `[0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]`
- The ladder is the classic 4px doubling system. Small steps (4, 8,
  12) govern in-component spacing; large jumps (96, 128) govern
  section rhythm.
- Density is developer-grade but not cramped: 12px between form rows,
  8px between an icon and its label, 24px between cards, 96–128px
  between marketing sections.

### Grid & Container

- **Page width**: 1280px max
- **Prose width**: 720px — multi-paragraph copy is capped here within
  the 1280 frame
- **Gutter**: 24px
- **Grid**: 12 columns on tablet+, single-column on mobile
- Hero treatment: full-bleed near-black bg + centred 1280 content;
  the PR-review demo lives inside its own framed card, not full-bleed
- Feature grid: alternating asymmetric splits (screenshot vs. copy)
  with the screenshot taking the wider track

### Whitespace Philosophy

CodeRabbit balances developer density with marketing generosity.
Sections breathe at 96–128px vertical gutters; *within* sections the
spacing tightens to product values (8–24px). The contrast is the
tempo: macro-relaxed so the page scans, micro-tight so each module
reads as a precise tool.

### Section Cadence

The site stays on `#09080c` throughout — no light/dark alternation.
Section breaks are tonal: `bg-level-1` panels stand against the
canvas, and the footer drops to `bg-deep #050409`. The brand orange
appears as punctuation between bands (highlighted headings, tinted
callout cards) rather than as a background fill.

## 6. Shapes & Radius Scale

| Tier | px | Use |
|---|---|---|
| Micro | 2 | Decorative slashes, link underline offset |
| Standard | 4 | Buttons, inputs, badges — the signature sharp corner |
| Comfortable | 8 | Tooltips, icon buttons, small chips |
| Relaxed | 12 | Cards, panel containers |
| Large | 16 | Modal bodies, large panels |
| Featured | 20 | Card-hero (PR-review demo frames) |
| Pill | 9999 | Avatars, the occasional rounded tag |

The 4px sharp corner is the system's signature. Interactive surfaces
— buttons, inputs, badges — all hold at `sm` (4px), which reads more
like IDE chrome than consumer SaaS. Cards relax to 12–20px to frame
screenshots comfortably, but the chrome stays tight. The pill is used
sparingly (avatars, the odd tag); it is *not* the dominant geometry
the way it is in Linear.

Compound radii appear only in modal headers (`16 16 0 0` to lock to
the body) and in flush input + button capture units where the inner
edges square off.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 | flat — `#09080c` only | page canvas |
| 1 | `#0f0d14` + 1px `#262433` border | cards, panels |
| 2 | `#16131d` + 1px `#36333f` border | hover, emphasized |
| 3 | `#1d1926` + ambient shadow `0 1px 2px rgba(0,0,0,0.5)` | sticky header |
| 4 | `#1d1926` + popover shadow `0 8px 24px rgba(0,0,0,0.5)` | tooltips, menus |
| 5 | `#16131d` + modal shadow `0 24px 48px rgba(0,0,0,0.6)` + scrim | modals, dialogs |

### Shadow Philosophy

CodeRabbit uses **tonal stacking** as its default depth language.
Each elevation step lifts lightness by a few points
(`#09080c` → `#0f0d14` → `#16131d` → `#1d1926`) — readable as a stack,
never loud. Borders pick up where tone alone is too subtle:
`#262433` → `#36333f` is the two-step border ladder.

Drop shadows are **floating UI only**: popovers, tooltips, menus,
modals. Cards never carry shadows — the border plus tonal lift do the
work. Shadows are pure neutral black, multi-layer on modals. The one
exception is the rare **glow-brand** bloom
(`0 0 32px rgba(255,87,10,0.25)`) used behind a hero element to make
the orange feel alive — used at most once per page.

## 8. Interaction & Motion

### Easing curves

- **ease-standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for
  hover/state transitions
- **ease-emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — page enters,
  modal slide-in
- **ease-out**: `cubic-bezier(0, 0, 0.2, 1)` — settling motions

### Duration buckets

- **instant**: 80ms — focus-ring appearance
- **fast**: 150ms — button hover, state changes
- **standard**: 240ms — card hover, popover open
- **slow**: 320ms — modal enter, scroll-fade

### Per-component micro-states

- **Button (white chip) hover**: bg dims `#ffffff → #ededed` over
  150ms ease-out; *no transform* — the chip stays planted
- **Button (brand) hover**: bg `#ff570a → #ff6f2e` over 150ms; active
  presses to `#e64a00`
- **Card hover**: border `#262433 → #36333f` + bg `#0f0d14 → #16131d`
  over 240ms ease-standard; no transform
- **Link hover**: colour shift `#ff8a4c → #ffa873` over 150ms;
  underline fades in
- **Popover open**: opacity 0 → 1 + scale 0.97 → 1 over 240ms
  ease-emphasized
- **Modal enter**: scrim fade 320ms + dialog slide from
  `translateY(12px)` to 0 over 320ms ease-emphasized

### Page transitions

CodeRabbit avoids slide transitions on marketing — page changes are
full opacity 0 → 1 over 200ms. Scroll-fade for in-view content uses
opacity + 12px translateY → 0 over 320ms, so feature blocks settle in
as the reader scrolls.

### Reduced motion

Respects `prefers-reduced-motion: reduce`. All transforms disabled,
all transitions reduced to opacity-only at the same durations. The
sticky-header backdrop-blur stays on (it is not motion). Any
auto-playing demo loop freezes on its first frame.

## 9. Accessibility & A11y

### Contrast pairs

Computed from the live tokens (`bg #09080c`, `text #ffffff`,
`brand #ff570a`):

- **#ffffff on #09080c (text on bg)**: 20.1 — AAA at all sizes
- **#000000 on #ffffff (CTA text)**: 21.0 — AAA, the maximum
- **#c9c5d2 on #09080c (secondary on bg)**: 14.6 — AAA
- **#8b8794 on #09080c (tertiary on bg)**: 6.4 — AA body, fine for metadata
- **#ff570a on #09080c (brand on bg)**: 4.9 — AA for large text and UI;
  pair orange with white or a darker fill for body-size text
- **#ff8a4c on #09080c (link on bg)**: 7.6 — AAA, why links use the
  lighter amber rather than raw brand orange
- **#ffffff on #ff570a (text on brand fill)**: 4.3 — AA large; brand
  buttons use 15px medium, which clears AA

### Focus indicators

All interactive elements ship a focus ring: `3px solid
rgba(255,87,10,0.28)` with a 2px offset, rendered as a box-shadow ring
(never an outline) so it composites cleanly over borders on the dark
surface. The orange ring doubles as a brand signal on focus.

### ARIA patterns

- **Dialog**: `role=dialog` + `aria-modal=true` + `aria-labelledby`
  pointing to the title node
- **Menu** (nav dropdowns): `role=menu` with `role=menuitem` children,
  arrow-key navigation, Esc to dismiss
- **Badges**: state-bearing badges carry an `aria-label` (e.g.,
  `aria-label="Status: approved"`)
- **Diff regions**: marked with `role=region` + `aria-label` so a
  screen reader announces "added line" / "removed line" context

### Keyboard nav

Tab order: skip-to-content → header logo → nav links → header CTA →
hero CTA → in-page feature sections → footer. All buttons and links
are keyboard-reachable; focus is always visible via the orange ring.

### Screen reader hints

- Icon-only buttons carry `aria-label` (e.g., `aria-label="Search"`)
- Decorative icons and the mascot illustration get `aria-hidden=true`
- Code/diff snippets used as illustration are marked `aria-hidden`
  when a plain-language summary precedes them

### Reduced motion

Honoured globally; see §8. Demo loops and scroll-fade transforms
disable under `prefers-reduced-motion: reduce`.

## 10. Responsive Behavior

| Breakpoint | px | Layout |
|---|---|---|
| mobile | < 640 | single-column, 16px gutter, h1 → 36px |
| tablet | 640–1023 | 2-column on splits, 24px gutter, h1 → 48px |
| desktop | 1024–1279 | 12-col grid, h1 → 56px |
| wide | ≥ 1280 | full 1280 layout, h1 → 64px, page caps at 1280 |

### Touch targets

Minimum 44 × 44 on mobile — convenient, since buttons and inputs
already ship at 44px height. Icon buttons grow to 40 × 40 on touch.
Tap targets keep the same 4px geometry so the fingerprint matches
desktop.

### Collapsing strategy

- Header collapses to a hamburger at ≤ 1024
- Feature grids switch from asymmetric screenshot/copy splits to a
  single-column stack at ≤ 768
- Comparison tables become card lists at ≤ 640
- The PR-review demo frame swaps from side-by-side to stacked
  before/after below 768

### Image behavior

Product screenshots use `aspect-ratio: 16 / 10` and `object-fit:
cover` with `loading=lazy`, framed inside their hero cards. SVG
illustrations (the mascot, integration logos) are inline and respect
`currentColor` where monochrome. No screenshot exceeds the 1280 frame.

### Container queries

Used in card-hero variants where the demo frame switches from a
landscape PR diff to a stacked layout based on container width below
520px, independent of the page breakpoint.

## 11. Content & Voice

### Tone

Confident, technical, benefit-forward. CodeRabbit writes like a senior
engineer explaining a tool to a peer: declarative, present-tense, and
specific about what the bot does ("reviews every pull request",
"catches bugs before they merge"). Hype is minimal; claims are
grounded in the review workflow developers already know.

### Microcopy patterns

- **Button verbs**: "Get started", "Try for free", "Install GitHub
  App", "Learn more", "Read the docs" — short, imperative,
  present-tense
- **Feature headings**: lead with the outcome ("Catch bugs before they
  merge"), not the mechanism
- **Errors**: format `<noun> couldn't be <verbed>. <one-sentence
  reason>.` — e.g., "Repository couldn't be connected. Check your
  GitHub permissions."
- **Success confirmations**: terse, no exclamation marks — "Connected."

### Empty states

Empty review/demo views show a short headline ("No open pull requests
yet"), one line of orientation, and a single CTA to connect a repo. No
upbeat illustration filler.

### CTA verb conventions

The verb ladder, in observed frequency:
1. **Get started** — top-of-page hero CTA (white chip)
2. **Try for free** — landing / pricing surface
3. **Learn more** — secondary, ghost button (the live secondary CTA)
4. **Install GitHub App** — integration / setup pages (brand button)
5. **Request a demo** — enterprise surface

The free-tier fact lives in the copy beneath the CTA, not inside the
verb — the button stays a clean imperative.

## 12. Dark Mode & Theming

CodeRabbit is **dark-first by design**. The marketing site ships dark
only — there is no light toggle. The brand identity *is* the near-black
canvas with the warm orange accent; inverting it would break
recognition and weaken the engineering-tool credibility the dark
ground signals.

If a downstream system needs to derive a light variant from these
tokens (e.g., for a light-mode docs portal):

```yaml
colors-light:
  bg: '#ffffff'
  bg-level-1: '#f7f6f9'
  bg-level-2: '#efedf2'
  text: '#09080c'
  text-secondary: '#3a3742'
  text-tertiary: '#5e5a68'
  brand: '#e64a00'                 # darken orange one step for AA on white
  border: '#e4e2ea'
  cta-fill: '#09080c'              # inverts the inversion → dark chip on light
  cta-text: '#ffffff'
```

Note the brand orange darkens to `#e64a00` in light mode so it clears
AA against white; the public marketing surface, however, stays dark.

## 13. Lineage & Influences

CodeRabbit's marketing surface sits squarely in the modern dark-canvas
dev-tool lineage — the near-black ground, the single restrained accent,
the product-screenshot-as-hero pattern shared by Linear, Vercel, and
the wider Bay-Area engineering-tool aesthetic. What it inherits is the
conviction to keep the page dark and tool-like rather than softening it
for marketing. What it adds is the warm orange mascot accent (most peers
run cool blues and indigos) and the tight 4px IDE-grade corner that
reads as editor chrome rather than consumer SaaS rounding.

It also draws directly on the language of code review itself. The
green-and-red diff palette is lifted from GitHub's PR interface, which
every target developer already reads fluently; the monospace snippets
and PR-comment screenshots borrow GitHub's vocabulary to establish that
CodeRabbit speaks the same language. What it rejects: Stripe-class
chromatic gradients, glassy Apple chrome, and playful illustration-heavy
landing pages. The mascot is the one warm, human note in an otherwise
strictly engineered system.

**Influences:**
- **Linear** — Dark-canvas dev-tool marketing; near-black ground with
  a single restrained accent and product-as-hero framing
  ([linear.app](https://linear.app))
- **GitHub** — The PR-review interface and diff palette
  (green additions / red deletions) that CodeRabbit's vocabulary
  mirrors for instant developer recognition
  ([github.com](https://github.com))
- **Vercel** — Adjacent dark dev-tool system; shared discipline of
  near-black grounds and tightly framed product screenshots
  ([vercel.com](https://vercel.com))
- **Plus Jakarta Sans** — The geometric humanist sans that gives the
  system its open, modern voice at display and body sizes
  ([fonts.google.com/specimen/Plus+Jakarta+Sans](https://fonts.google.com/specimen/Plus+Jakarta+Sans))
- **JetBrains Mono** — The code/diff monospace whose ligature-free
  clarity reinforces the engineering-tool credibility
  ([jetbrains.com/lp/mono](https://www.jetbrains.com/lp/mono/))

## 14. Do's and Don'ts

### Do

- Use near-black `#09080c` as the ground — warm violet cast, never
  `#000`. The warmth keeps the white type from crunching.
- Set type in pure white `#ffffff` for headlines and body — this is
  the live token; step down to `#c9c5d2` only for secondary copy.
- Reserve CodeRabbit orange `#ff570a` for accents, highlights, focus
  rings, and storytelling — never the primary CTA fill.
- Invert the primary CTA to a white `#ffffff` chip with black
  `#000000` ink for the single maximum-contrast anchor per screen.
- Keep buttons, inputs, and badges at a sharp 4px (`sm`) radius — the
  IDE-grade corner is the signature.
- Set the hero H1 at 64px / weight 500 in Plus Jakarta Sans with
  `-0.025em` tracking. Size carries the hierarchy, not weight.
- Use the diff palette (green additions, red deletions) inside code
  surfaces — it reads instantly to developers.
- Layer depth tonally (`#09080c` → `#0f0d14` → `#16131d`); keep cards
  shadowless.
- Use monospace only for code and diff snippets — keep it out of
  marketing eyebrows and labels.
- Honor `prefers-reduced-motion` — collapse all transforms to
  opacity-only.
- Pair links with the lighter amber `#ff8a4c` (AAA on the canvas)
  rather than raw `#ff570a`.

### Don't

- Use brand orange `#ff570a` as the primary CTA fill. The CTA inverts
  to a white chip; orange is for accents and links.
- Soften the dark canvas for marketing — the product is a developer
  tool, the site should feel like one.
- Use pure `#000` for the ground. The canvas is `#09080c`, a hair
  warmer.
- Round buttons or inputs past 4px. The sharp corner is what
  separates this from consumer SaaS rounding.
- Add drop shadows to cards. Use tonal layering and the border ladder
  (`#262433` → `#36333f`).
- Reach for weight 700 on headlines. The hero is 500; bold reads as
  marketing fluff here.
- Set body-size text in raw `#ff570a` on the dark canvas — at 4.9 it
  only clears AA for large/UI; use white or amber instead.
- Introduce a second saturated marketing hue. The chromatic budget is
  one orange plus the semantic/diff colours.
- Let the brand orange glow appear more than once per page. The bloom
  is a rare hero accent, not a recurring effect.
- Use slide-in page transitions. Opacity-only matches the system.
- Stretch product screenshots past the 1280 frame — they sit inside
  framed cards, never full-bleed.

## 15. Agent Prompt Guide

### Quick Color Reference

```
bg:           #09080c
text:         #ffffff
text-muted:   #8b8794
brand:        #ff570a
brand-hover:  #ff6f2e
accent:       #ff8a4c
link:         #ff8a4c
border:       #262433
cta-fill:     #ffffff
cta-text:     #000000
diff-add:     #3fb950
diff-del:     #f85149
```

### Example Component Prompts

1. **Hero**: "Create a hero section on a near-black `#09080c`
   background with a left-aligned 64px Plus Jakarta Sans headline at
   weight 500 and `-0.025em` tracking in pure white `#ffffff`, body
   copy at 18px/400 in `#ffffff` capped at 720px reading width, with a
   single primary CTA: a sharp 4px-corner chip filled `#ffffff` with
   black `#000000` text reading 'Get started', plus a ghost 'Learn
   more' button beside it."

2. **Feature card**: "Design a feature card with `#0f0d14` background,
   1px `#262433` border, 12px radius, 24px padding, no shadow. Title at
   20px Plus Jakarta Sans 600 in white, body at 16px/400 in `#c9c5d2`.
   On hover, transition the border to `#36333f` and bg to `#16131d`
   over 240ms ease-standard, no transform."

3. **PR-review demo block**: "Build a code-review demo frame: a
   `#0f0d14` card with 20px radius and 40px padding showing a diff in
   JetBrains Mono — added lines in `#3fb950` on `rgba(63,185,80,0.15)`,
   removed lines in `#f85149` on `rgba(248,81,73,0.15)` — with an
   orange `#ff570a` accent bar marking the AI comment."

4. **Brand badge**: "Render a badge with 4px (`sm`) radius,
   `rgba(255,87,10,0.12)` background, `rgba(255,87,10,0.22)` border,
   `#ff8a4c` text at 12px Plus Jakarta Sans 600 uppercase, 4px × 10px
   padding, reading 'NEW'."

5. **Email capture**: "Create a flush email-capture unit on `#09080c`:
   a 44px-tall input with `#0f0d14` background, 1px `#262433` border,
   4px radius on the left edges, `#5e5a68` placeholder, and a flush
   white `#ffffff` primary chip with black `#000000` text reading 'Try
   for free' on the right. Focus the input with a 3px
   `rgba(255,87,10,0.28)` orange ring."

6. **Sticky nav**: "Make a 64px-tall sticky nav with
   `rgba(9,8,12,0.72)` background, `backdrop-filter: blur(12px)
   saturate(160%)`, and a 1px bottom border `#262433`. Logo on the
   left, centred links, a ghost 'Sign in' and a white-chip CTA on the
   right; on scroll the border edge stays — no shadow added."

### Iteration Guide

1. **Near-black, not pure black.** If your `bg` reads as `#000`, warm
   it to `#09080c` (a faint violet cast). The warmth keeps pure-white
   type from crunching.
2. **CTA inverts to white.** If your primary action is orange, you've
   missed the central move. Flip it: white chip, black ink, sharp 4px
   corner. Orange lives on accents, links, and tinted backgrounds.
3. **Keep the corner sharp.** If buttons or inputs are rounding past
   4px, tighten them — the IDE-grade `sm` corner is the signature. Let
   cards relax to 12–20px to frame screenshots, but keep chrome tight.
4. **Medium hero weight.** Set the headline at weight 500, not 700.
   Let size and `-0.025em` tracking do the hierarchy. Bold reads as
   consumer SaaS.
5. **One orange, plus diff colours.** If a second saturated marketing
   hue creeps in, remove it. The budget is `#ff570a` for chrome and
   the green/red diff palette inside code surfaces only.
6. **No card shadows.** If a card needs depth, lift its bg one tonal
   step (`#0f0d14 → #16131d`) and tighten the border. Shadows belong
   to floating UI only.
7. **Links use amber, not raw orange.** Body-size `#ff570a` only
   clears AA on the dark canvas; switch text-on-canvas accents to
   `#ff8a4c` for AAA legibility.
8. **Reduced motion always.** Respect `prefers-reduced-motion` on
   every transition — collapse transforms to opacity-only at the same
   durations.

---

*Theme-toggle audit: score=2, signals=[tailwind-dark-class]*