CodeRabbit

Brand guidelines

Official logos, colors, and practical guidance for presenting CodeRabbit clearly and consistently.

CodeRabbit Logo

Use the full CodeRabbit logotype by default. Keep every asset intact, legible, and surrounded by clear space; use the standalone mark only when the full lockup cannot fit.

White logotype

Use the white logotype on dark backgrounds. Keep the artwork intact and preserve clear space around the full lockup.

SVGDownload

PNGDownload

Orange logotype

Use the orange logotype on light backgrounds. This is the primary lockup whenever the full CodeRabbit name fits.

SVGDownload

PNGDownload

White mark

Use the white mark on dark backgrounds only when the full logotype cannot fit. Never recreate or pair it with replacement text.

SVGDownload

PNGDownload

Orange mark

Use the orange mark on light and dark backgrounds only when the full logotype cannot fit. Keep the rabbit upright, uncropped, and unchanged.

SVGDownload

PNGDownload

Logo Guidelines

Keep every approved lockup upright, proportional, uncropped, and surrounded by clear space. Never redraw the rabbit or pair the mark with substitute typography.

Do not crowd the mark

Maintain clear space around the rabbit mark so nearby type, imagery, and container edges never compete with it.

CODERABBIT

Do not rotate, distort, or rebuild

Use only the supplied logo files. Do not rotate or stretch a lockup, change its proportions, or recreate the CodeRabbit name in another typeface.

Brand colors

Lead with CR Orange and mauve neutrals. Reserve CR Mint and CR Cobalt for supporting accents rather than treating every color as equal.

Primary

CR Orange

HEX: #FF570A
RGB: 255 / 87 / 10
CMYK: 0% / 66% / 96% / 0%

Secondary

CR Mint

HEX: #25E2A8
RGB: 37 / 226 / 168
CMYK: 84% / 0% / 26% / 11%

Tertiary

CR Cobalt

HEX: #687FF5
RGB: 104 / 127 / 245
CMYK: 58% / 48% / 0% / 4%

Color Rules

Keep color hierarchy, contrast, and neutral families intentional. These examples show combinations that weaken the CodeRabbit system.

Do not

Give every accent equal weight

Lead with orange and mauve. Keep mint and cobalt as supporting accents.

Do not

Layer one accent on another

Separate bright accents with a neutral surface.

Do not

Blend brand accents into gradients

Use colors as deliberate, discrete signals.

Do not

Make supporting colors the main event

Keep mint and cobalt focused on small, meaningful accents.

Do not

Mix neutral families in one interface

Choose a mauve-led or cream-led system and stay consistent.

Do not

Use low-contrast color-on-color type

Put readable foregrounds on neutral surfaces.

Supporting palette

Mauve and the Primary, Secondary, and Tertiary families form the core Carrot UI palette. Cream supports content marketing.

Mauve

Primary

Secondary

Tertiary

Cream

Typography

Geist and Hack have distinct purposes. Geist communicates the brand; Hack handles technical utility.

Primary typeface

Geist

Use Semi-bold 600 for headings. Use Regular 400 for body copy, navigation, calls to action, and all reading text.

Semi-bold 600 / Heading

Review code with confidence.

Regular 400 / Reading text

Clear explanations help teams understand what changed and why.

Download font License & copyright

Utility typeface

Hack

Use Bold 700 for labels and metrics. Use Regular 400 for code, data, metadata, and compact technical identifiers.

Bold 700 / Labels and metrics

LABEL · METRIC · TOKEN

Regular 400 / Code and data

--font-cui-mono: Hack;