Brand
Back to siteBrand kit

The CodeGecko brand book

A small gecko with very good eyesight.

How CodeGecko looks, sounds and shows up. Start with the overview, then pin the poster you need.

Start with the overviewBrand kit
CodeGecko mascot with glasses, with its parts labeled

  1. 01 Spots

    Orange #F08A24

  2. 02 Eyes

    Eye black #1D180E

  3. 03 Tail

    Moss #728B1B

  4. 04 Glasses

    Pose · Studious

  5. 05 Skin

    Gecko #94B72D

  6. 06 Belly

    Cream #F4EAC5

Overview

The brand at a glance.

Every part on one screen. Open a tile for the detail, or grab the kit and go.

Logo

Details

Mascot · 15 poses

Details

15 poses, one job each.

Brand kit

Details

Logos, mascots and colors in one place.

Download

Color · 11 swatches

Details

Type

Details

Aa

0→1

Voice

Details

“v1.2.8 regressed one metric.”

“🚨 Your site is broken!”

Verdicts

Details
ImprovedRegressedMixedUnchangedInconclusive

In use

Details

The brand, out in the world.

Catch performance regressions in every deploy.

The posters

One poster per topic.

Wide posters, read top to bottom. The gecko on each one tells you the mood.

No. 01 — Name

One word, two capitals.

How we write the name, and the words we use to describe the product. Copy these instead of writing your own.

CodeGecko

  • Codegecko

    Lowercase g

  • Code Gecko

    Two words

  • CODEGECKO

    All caps, except in the eyebrow style

  • CG

    Never abbreviate in public copy

Boilerplate · copy, don’t retype

One line

CodeGecko catches performance regressions in every deploy.

Short

CodeGecko compares each release of your site with the one before, using real visitors’ Core Web Vitals, and shows what got faster, what got slower, and the exact page to fix.

Long

CodeGecko is release performance monitoring for web teams. One script tag collects Core Web Vitals from real visitors; one step in CI tells it which commit is live. Every release is compared with the one before, page by page and device by device, with a plain verdict — improved, regressed, mixed, unchanged or inconclusive — and the load steps, bytes, third parties and commits behind it. No cookies, no personal data.

No. 03 — Mascot

A gecko with a job, not a sticker.

Fifteen poses, each tied to a moment. Pick the one that matches what the reader is feeling right then. Every pose downloads as a transparent WebP.

Peek

Logo lockup, favicon, footer. The only pose beside the wordmark.

At work

Investigating

Thinking

Hello

Welcome screens, sign-in, first visit.

On the hunt

In the zone

Studious

Celebrating

A release improved. Milestones.

Delighted

All clear

Confident

Wink

Cool

Launch posts, changelog, social.

Climbing

Upgrades, plan limits, growth.

One gecko per view

It reacts to the content; it never decorates it.

Match the moment

Celebrating for wins, Thinking for inconclusive. Never celebrate a regression.

Give it room

Plain backgrounds, never over charts or body text.

Never alter it

No recoloring, cropped eyes, speech bubbles or outfits.

No. 04 — Color

Pulled from the gecko itself.

Two themes share one palette: Graphite for dark, Olive Shade for light. Click any swatch to copy its hex.

CodeGecko mascot with its colors labeled

Dark · Graphite (default)

Light · Olive Shade

One green per theme.Lime on dark, Olive Shade on light. Never both on one page.
Orange means regressed.Spot orange is reserved for bad news. Green is for action and good news.
Lime is never text on light.It is 1.5:1 on the light page. Use Olive Shade instead.

No. 05 — Accessibility

4.5:1

Readable first, pretty second.

The one number to remember. Below it, text is for headlines only. Large text (24px and up, or 19px bold) can go down to 3:1.

CodeGecko mascot in sunglasses

Every pairing we ship

  • Text on light page16.6:1AAA
  • Text on dark page14.4:1AAA
  • Lime on dark page9.9:1AAA
  • Button text on lime9.6:1AAA
  • Muted on dark5.8:1AA
  • Button text on olive4.2:1AA large
  • Olive on light page3.9:1AA large
  • Lime on light page1.5:1Fail

No. 06 — Typography

Poppins for words, JetBrains Mono for numbers.

Big, tight, confident headlines. Data, commits and code always in mono so numbers line up.

Primary · Poppins

Aa

Geometric and friendly. Headlines 600 with tight tracking; body 400. Weights 400 · 500 · 600 · 700.

ABCDEFGHIJKLM abcdefghijklm 0123456789

Data & code · JetBrains Mono

01

LCP 2.71s +5.0%
INP 161ms −18.7%
CLS 0.036 −29.4%

Display

68 / 1.04 · 600 · −4.5%

Every deploy, checked.

Heading

44 / 1.08 · 600 · −3.5%

Three questions. Every release.

Title

20 / 1.4 · 600

What changed between v1.2.7 and v1.2.8?

Body

18 / 1.7 · 400

CodeGecko compares each release with the one before.

Small

13 / 1.6 · 400

Sample project · p75 · not customer results

Eyebrow

12 · 600 · +1.6 px · caps

Release performance monitoring

Data

Mono 13 / 1.7 · 400

LCP 2.58s → 2.71s +5.0%

No. 07 — Shape & space

Soft corners, steady rhythm.

Fully rounded actions, 22 px cards, and a 4 px spacing scale.

v1.2.7Improved
LCP 2.37s−17.1%
TTFB 600ms−8.4%
Open the report
Account
Plan & billing
Sign out
  • Pill 999Buttons, chips, badges
  • Card 22Cards, panels
  • Dialog 22Modals, sheets
  • Menu 16Menus, popovers
  • Tile · row 14Rows, tiles, toasts
  • Input 12Fields, code blocks

Spacing · 4 px base

4
8
12
16
24
32
48
64
104

No. 08 — Interface

Pills, verdicts and quiet icons.

The pieces every CodeGecko screen is built from.

CodeGeckoN3

v1.2.7 · 4c1e7b0 · 690 visits

Collection pages got faster.

Improved2
/collections/[slug]−21.4%Improved
/products/[slug]+0.9%Unchanged
/cart+0.2%Unchanged
4
Open the reportOpen the commit1
1

Buttons

40 px by default: primary in lime, outline beside it. 48 px only for marketing heroes. One primary per view.

2

Verdict chip

Five words only: Improved, Regressed, Mixed, Unchanged, Inconclusive. Under 30 visits it’s Inconclusive, with an “18 / 30 visits” chip.

3

Account pill

Avatar and chevron, 40 px. Signed out, the header shows Sign in and Connect your site instead.

4

Icons

Lucide at 2 px stroke, in the text color. Never filled, never colored.

No. 09 — Voice

Say what changed. Then stop.

We write like a careful engineer explaining a diff to a teammate: concrete, honest about uncertainty, never breathless.

copy/voice.md+4 −4
@@ 1,2 @@ Specific over hype
−Blazing-fast insights!
+LCP +25% on /products/:slug, mobile.
@@ 5,2 @@ Honest about limits
−We’ve got you covered.
+Not enough data yet. This stays inconclusive.
@@ 9,2 @@ Calm, not alarming
−🚨 Your site is broken!
+v1.2.8 regressed one metric.
@@ 13,2 @@ Plain words
−Leverage holistic observability.
+Every page load is measured.

Word swaps

s/build/release/g
s/users/real visitors/g
s/broke/regressed/g
s/unknown/inconclusive/g
s/segment/page and device/g
s/change set/commit/g
CodeGecko mascot winking

No. 10 — In use

The brand, out in the world.

Reference layouts for the places the brand shows up most.

Fig. 01 — DashboardThe release report inside the app.
720 px
SSample storefront
OverviewReleases11SetupSettings
Sample storefront / Releases / v1.2.8N

v1.2.8 · latest

8f2a9c1 · Ship the new product gallery · 412 visits

Release verdict · vs v1.2.7

Mixed

Faster to respond, steadier layout. Images and JS got heavier.

3 improved · 4 regressed · 11 unchanged

LCPUnchanged

2.39s

INPImproved

118ms

CLSImproved

0.023

Fig. 02 — Regression alertSent when a release is Regressed or Mixed.
280 px

v1.2.6 made the site slower.

Two metrics regressed on shop.example.com after “Load full-size images up front”.

LCP2.38s2.86s+20.2%
Images768 kB1.42 MB+85.0%
Open the release report

Sent for Regressed and Mixed releases · Change alerts in Settings

Fig. 03 — CI deploy stepOne step marks the commit live.
300 px
Run codegecko/release
marking 8f2a9c1 as live (v1.2.8)
comparing with v1.2.7
release recorded · first verdict in ~2h
Fig. 04 — GitHub PR checkA check and one short comment.
300 px
CodeGecko · Release compared: mixed
codegecko bot commented

LCP got slower on /products/:slug (mobile).

LCP3.10s+25.0%
INP161ms−12.4%
CLS0.031−8.8%
Fig. 05 — SlackOne message per release, no noise.
300 px

CodeGecko APP 11:12 AM

Release v1.2.8 is mixed. LCP +25% on /products/:slug (mobile). INP and CLS improved.

Open reportView commit
Fig. 06 — Link previewAny codegecko.vercel.app link, shared.
380 px

Maya 2:14 PM
codegecko.vercel.app

CodeGecko · Catch performance regressions in every deploy

Real-visitor Core Web Vitals, compared release by release.

Catch performance regressions in every deploy.

Fig. 07 — IconsTab, app icon and avatars. Peek pose only.
380 px
CodeGecko · Releases
App icon
GitHub
X
Favicon
Sheet
10 / 15
Subject
Release v1.2.8
Verdict
Mixed
Rev
Oct 2026

End of sheet 15

Questions about the brand? Ask before you improvise.

Contact us
wordmark · full width
CodeGecko mascot winking