CODE PUP Code Pup home

Code Pup / Brandbook 01

BUILT TO
SPOT IT.

A sharp eye for code.
A constructive voice for the human behind it.

Meet the identity Download the kit
Angular. Alert. Useful.By Frisky
Code Pup’s original identity: an angular magenta cyber pup with green code goggles, an amber eye, and a cyan pen, between oversized CODE and PUP lettering.
THE REFERENCE / PRESERVED
READ THE DIFF.NAME THE RISK.SHOW THE FIX.

01 / The point

Personality with a purpose

ALL BARK.
REAL
EVIDENCE.

Code Pup has attitude. Every review still earns its place with a specific observation and a useful next step.

The mascot brings the energy. The writing brings the clarity. Show what changed, explain how it can fail, and suggest a concrete fix. Let a reader understand the issue without translating a personality.

Sharp
Point to the changed behavior and the relevant line.
Constructive
Explain the consequence. Make the next action clear.
Honest
Separate what was checked from what remains unknown.
Playful
One small bark can sign off. The finding stays readable.
Voice in practice / illustrative

“This path accepts an empty value, then tries to parse it. Validate at the boundary and return a clear error.”

Specific observation → consequence → fix

02 / Identity

Keep the source recognizable

ONE PUP.
ONE POINT
OF REFERENCE.

The supplied artwork is the identity anchor. Its shape, expression, code goggles, and punctuation define the system.

The complete supplied Code Pup lockup on its original black background.
Original referenceFull composition / black field

Keep these together

THE FACE.
THE TYPE.
THE STOP■

The compact, heavy CODE / PUP lettering carries the same force as the angular face. The amber square acts as a deliberate full stop.

  • Preserve the original lockup when using the supplied reference.
  • Keep the lettering, mascot, and square visible. Leave a calm margin around the whole composition.
  • Use status derivatives as supporting marks. Let the full identity introduce the brand.
  • Retain the reference file separately from all new exports.
Download the reference

The live type on this page is a display treatment. The supplied artwork remains the reference for the original wordmark.

03 / Color

Production tokens derived from the reference

PINK LEADS.
BLACK HOLDS.

Magenta is the signature. Black gives it space. Green, cyan, and amber carry small, deliberate signals.

Signal Pink

01 / Primary

Signature expression, major moments, mascot highlights.

Core Black

02 / Foundation

The stage for the identity. Quiet, deep, and spacious.

Paper

03 / Reading

Long-form guidance and a clean light-surface companion.

Pink Shade

Charcoal

Matrix Green

Code Cyan

Amber

Build the hierarchy. Use black and paper for most of the page. Give magenta a confident role. Reserve the electric accents for the goggles, pen, eye, and small functional cues.

Keep text readable. Use paper on black and black on light or electric surfaces. Pink Shade supports smaller text on paper. A color never carries a status by itself.

These are working brand tokens derived from the visual reference, rather than a claim that every source pixel uses these exact values.

04 / Typography

Big personality. Easy reading.

LET THE
HEADLINE
BARK.

Then let the details speak clearly.

Heavy, condensed capitals give the display system its weight. Body copy stays open, calm, and direct. Monospace is reserved for code, values, and compact metadata.

System fonts / no external font requests

DisplayImpact → Arial Narrow → sans-serif

BARK.
BUILD.

Short uppercase statements. Tight tracking. Strong scale contrast. This is a practical web stack, not a replacement wordmark file.

BodySystem UI → Segoe UI → sans-serif

Every finding
needs a reason.

Use sentence case, short paragraphs, and descriptive links. Put the behavior before the joke.

Code / metadatastatus: "reviewing"
evidence > decoration

05 / Mascot anatomy

The details that make it Code Pup

RECOGNITION
IS IN THE
DETAILS.

Pose and expression may evolve. The visual DNA travels with them.

  1. 01

    Angular magenta silhouette

    Faceted planes, a strong muzzle, and asymmetric ears. Keep the expressive geometry.

  2. 02

    Black code goggles

    A substantial dark frame, electric green edge, and matrix-like code texture.

  3. 03

    The amber eye

    Alert, focused, slightly skeptical. Curious enough to inspect the next line.

  4. 04

    The cyan code pen

    A recognizable tool and a bright counterpoint to the face. Keep it purposeful.

  5. 05

    Controlled accents

    Small starbursts and the amber square support the identity without filling every gap.

For small status marks

Simplify the detail.
Keep the character.

Clear silhouette · familiar goggles · native text label

06 / Status system

Transparent PNGs / GitHub-ready composition

SMALL PUP.
CLEAR SIGNAL.

Four supporting marks. One consistent silhouette. The image brings recognition; real text carries the meaning.

PNG with alpha192 × 192 source64 × 64 displayStatic by default

Light surface

Illustrative states

  • Reviewing

    A review is actively in progress.

  • Approved

    An explicit approval has been recorded.

  • Changes requested

    The reviewer has requested changes.

  • Blocked

    A concrete blocker needs attention.

Dark surface

Illustrative states

  • Reviewing

    A review is actively in progress.

  • Approved

    An explicit approval has been recorded.

  • Changes requested

    The reviewer has requested changes.

  • Blocked

    A concrete blocker needs attention.

Review complete does not mean approved. Match every label to confirmed facts. Keep states such as paused, ignored, and skipped draft explicit. Put the blocker in words. Keep headings readable even when images do not load.

07 / Review anatomy

The work comes first

MAKE IT
EASY TO
ACT.

A compact Verdict, a specific finding, and a clear next step. Supporting detail stays close to the claim.

  1. Lead with the factual state.One mark beside a readable heading.
  2. Explain the behavior.Use the relevant source link and reviewed commit in real reviews.
  3. Name the next action.Keep commands and evidence as native text.

Illustrative layout / does not describe a real PR

Code PupExample review

Verdict

Changes requested

Validate input at the boundary.

In this example, raw input reaches a parser without a check. A malformed value can stop the request. Validate before parsing and return a clear error.

Evidence & scope

This is a visual example. It reports no actual finding, approval, or test run.

01 MAX

Motion is optional. Use at most one GIF, only in the Verdict slot, with the equivalent static PNG as fallback. The default remains static.

08 / In practice

Keep the system intentional

KEEP THE EDGE.
LOSE THE NOISE.

Do

  • Preserve the reference. Store the original artwork alongside approved working exports.
  • Give the mark space. Keep its silhouette clear and its labels outside the image.
  • Use contrast deliberately. Check every new export on both dark and light surfaces.
  • Keep evidence readable. Write counts, commands, findings, and limits in native text.
  • Tell the truth about state. Use approval marks only for explicit approvals.

Avoid

  • Replacing the character. Soft beige fur, generic husky heads, and rounded goggles lose the identity.
  • Changing the signature. Do not recolor the main face to match each status or invent a new wordmark.
  • Turning accents into wallpaper. Matrix code, glow, and starbursts work best in small doses.
  • Animating every header. Keep motion contained to the optional single Verdict.
  • Using decoration as proof. A checkmark cannot stand in for a real review or a completed check.

09 / Take it with you

Reference + status system

READY TO
LEAVE A MARK.

The reference, transparent status PNGs, and the guidance to use them with intention.

Download brand kit Download brandbook PDF

The site includes a print layout for saving a readable copy of this brandbook.

Individual filesReference JPG ↗Reviewing PNG ↗Approved PNG ↗Changes requested PNG ↗Blocked PNG ↗