Brand kit

Everything you need to show Connecto

The logo, the app icon, the agent in motion and the guidelines, ready for press, partners, sponsors, event organizers and designers.

Every logo, app icon and badge is on this page as SVG. The full kit (PNGs, the agent's moments as GIF, WebP and MP4, social images, email signatures and the guidelines) comes by email from support@getconnecto.app.

The mark is also Connecto's agent. Move your cursor near it, or tap it.

Logo

A badge on a lanyard, tucked into a pocket and peeking out. Pick the version made for your ground: SVG for anything that scales, transparent PNG for everything else.

  • Connecto horizontal lockup, light

    Light

    The default, on white and light grounds.

    SVG

  • Connecto horizontal lockup, dark

    Dark

    On ink and every dark ground.

    SVG

  • Connecto horizontal lockup, on green

    On green

    On the brand green only.

    SVG

  • Connecto horizontal lockup, one colour, ink

    One colour, ink

    Single-ink print, embossing, invoices, sponsor decks.

    SVG

  • Connecto horizontal lockup, one colour, white

    One colour, white

    One colour on dark grounds and photos.

    SVG

Clear space is the pocket's height on every side. Keep the mark at least 24 px tall and a lockup at least 120 px wide; smaller than that, use the app icon.

Colour and type

Ink and green carry the brand

Click a colour to copy its HEX value. CMYK values are a plain conversion: proof them on press.

Figtree

The wordmark is Figtree SemiBold, lowercase, tracked to −3.5% and outlined in every file: never retype it. For your own words, Figtree is free on Google Fonts under the SIL Open Font License: SemiBold for headlines, Medium for labels, Regular for text.

App icon

The tile's bottom edge is the pocket

The icon crops into the badge so the eyes still hold at the smallest sizes. Night is the default. The favicons and the rounded Android icon are in the kit too.

The agent

One state, one meaning

The same badge rises, glances and tucks away to say what it needs, so people know what it wants without reading. Each moment is in the kit as a loop on light and on ink, and as a still.

  • Here

    peek

    The resting pose: eyes over the edge, blinking. The default.

  • Hello

    hello

    A first meeting: a hand comes up out of the pocket and waves.

  • Look at this

    glance-left

    Toward the card or button on its left. Holds at least 600ms.

  • Look at this

    glance-right

    Toward the card or button on its right.

  • Look below

    glance-down

    Down at the one action under an empty state.

  • Searching

    search

    Looking for something: the magnifying glass sweeps across the eyes.

  • Thinking

    think

    Working on it: only while a request is in flight.

  • Writing

    write

    Writing for you: a pencil writes along the pocket's edge.

  • Listening

    listen

    While someone speaks or types a note.

  • Done

    saved

    A step done: saved, sent, verified. Two hops and a happy squint.

  • A big done

    celebrate

    Registered, checked in, all caught up: the hops, and confetti. Rare, so it lands.

  • Met someone

    meet

    Two badges turn to each other and hop, and a spark pops between them.

  • Needs you

    up

    Time-sensitive: someone has to act now. Never for marketing.

  • Away

    tucked

    Offline, invisible, unavailable. Nowhere else.

Tucked away in the pocket means away, and nothing else. Animate only the agent being watched, and always say its state in words too.

Powered by Connecto

Show that your event runs on Connecto

Pick the badge for your background and paste the code into your event's site. The badges are static, and stay at these addresses.

Light background

Powered by Connecto

Embed code

<a href="https://getconnecto.app" target="_blank" rel="noopener noreferrer">
  <img src="https://getconnecto.app/badges/v2/powered-by-connecto-light.svg" alt="Powered by Connecto" height="80" />
</a>

Image URL

https://getconnecto.app/badges/v2/powered-by-connecto-light.svg

SVG

Dark background

Powered by Connecto

Embed code

<a href="https://getconnecto.app" target="_blank" rel="noopener noreferrer">
  <img src="https://getconnecto.app/badges/v2/powered-by-connecto-dark.svg" alt="Powered by Connecto" height="80" />
</a>

Image URL

https://getconnecto.app/badges/v2/powered-by-connecto-dark.svg

SVG

  • Link it to getconnecto.app and keep its alt text.
  • Scale it by height only: 32 px at the least, 80 px in a footer.
  • Light badge on light backgrounds, dark badge on dark ones.
  • Never animate, recolour or redraw it.

Usage

Use the files as they are

Do

  • Use the light version on light grounds and the dark version on dark ones.
  • Keep the pocket's height clear around the mark.
  • Scale by height only.
  • Use the one-colour mark for invoices, dashboards and sponsor decks.
  • On a busy photo, put the mark on a white plate.
  • Don't rotate the mark

    The badge carries the only tilt. The mark itself always stands upright.

  • Don't straighten the badge

    It leans 8° to the left, always. Upright, it is just a rectangle.

  • Don't recolour it

    Green, ink, mint, white, off-white and slate. Nothing else, no gradients.

  • Don't stretch or squash it

    Scale it by its height only; the width follows.

  • Don't give it a mouth

    Two eyes are the only feature, in every pose. No mouth, ever.

  • Don't use the light version on dark

    On ink and dark photos, use the dark colourway: mint, off-white, slate.

Need something else?

Ask us first, and we'll help

A file in another format, a co-branded piece, or a question about how to show Connecto. The Connecto name, logo, badge and agent are trademarks of Connecto: use the kit's files unmodified, and ask for anything else.

Write to us

support@getconnecto.app