Brand kit

ReportKit brand

The mark shows the product in one picture: two databases streaming into a merge node, emerging as a single report. Every asset is vector-first and transparent.

Logos

Primary mark

Transparent. Use everywhere the product name already appears in text.

SVG PNG

Horizontal lockup

Mark + wordmark + tagline, for light backgrounds.

SVG PNG

Lockup (inverse)

For dark backgrounds and dark-mode docs.

SVG PNG

App icon

Emerald badge. Social avatars and app tiles.

SVG PNG

Small-size icon

Simplified glyph that stays legible at 16–32px. Source of favicon.ico.

SVG PNG

Animated SVG

Vector animations with CSS keyframes. Inline or use <object type="image/svg+xml"> so motion plays. Respects prefers-reduced-motion. GIF fallbacks live beside these in /brand/animated/.

Kit-Larva idle

Eye blink, neon panel pulse, subtle peristalsis. Docs hero & README.

SVG

Kit-Larva prepare

Segment wave + data flow during prepare. Async loader overlay.

SVG

LLDP flow

Prepare → Secure Store → Compose → Deliver phase rail.

SVG

ReportKit loader

Compact 128px spinner for inline loading states.

SVG

Palette

Accent / live

#0b7a4b

Mint

#34c98a

Mint light

#8ef0c4

Archive signal

#f0ad4e

Ink deep

#08130f

Typography

Display: Sora · Body: Manrope · Mono: JetBrains Mono. The lockups reference this stack, so they render in the brand font wherever those fonts are loaded.

Usage

Keep clear space around the mark equal to the height of one database cylinder.
Don’t recolour, rotate, stretch, or add effects to the mark.
On dark backgrounds use the inverse lockup rather than the light one.
Below 32px use the small-size icon — the detailed mark loses legibility.

Product of Lorapok Labs. Assets ship under the project license.