Skip to content
ThorbisInterface Guidelines (opens in a new tab)

Logo

The Thorbis mark is a shield with three nodes joined by traces: a job protected, and the people wired to it. It is the one piece of the system that never adapts. Type scales, chrome themes, platforms swap their grammar. The mark stays the same drawing, the same blue, and the same room around it on every surface we ship: web, Windows, macOS, iOS, Android, Xbox, PlayStation, print, and the side of a van. 27 rules.

Download LOGO.mdPreparing…Download requestedFailed

The mark

One drawing. Taken from the files, never redrawn.
  • One mark: the shield. The mark is the shield outline with three open nodes and the traces between them. It is never redrawn, traced from a screenshot, simplified by hand, or rebuilt in an icon set. Use the files listed under Files. If a size or format is missing, ask for it; do not export one from a mockup.

    Why: A hand-traced shield drifts a pixel per redraw. After ten surfaces the van wrap, the invoice, and the app icon are three different companies.

  • Below 20px, use the small cut. Under 20px the master traces fill in. From 16px to 19px use the small cut in favicon.svg: heavier strokes, fewer turns, drawn for pixels. From 20px up always use the master. Never scale the small cut up into hero art.

    Why: A 16px browser tab is where an owner finds us among twenty open tabs. A muddy blob there reads as a broken site.

  • The mark is not an icon. The mark never stands in for an action, a status, or a place. It is not a security badge, a protected-job indicator, a loader, or a bullet. Interface icons stay Phosphor.

    Why: If the shield means Thorbis in the header and Warranty on a job row, it means nothing in either place.

Color

Mark blue, and two single-color fallbacks. Nothing else.
Mark blue
Cream mono
Ink mono
Blue on canvas. Cream on photography. Ink on paper.
  • Mark blue is fixed. The mark is drawn in mark blue, #2b6df4. It is an asset color, not a token: it does not follow the accent token, the theme, or a customer's brand setting. The interface accent stays the accent token for focus and selection. Do not swap one for the other to make them match.

    Why: The logo on a printed invoice, a truck door, and an app icon must be the same blue a customer saw on the website. Tokens move; the mark does not.

  • Three colorways only. Blue on canvas or paper is the default. Cream mono, #f7f4ee, goes on photography, video, and dark color. Ink mono, #0a0a0a, goes on light color, one-color print, embroidery, engraving, and fax. The mark is always one solid color. No gradients, no two-tone nodes, no olive, forest, pumpkin, burnt, or status colors.

    Why: Shirts, decals, and stamped invoices cannot print a gradient. One color everywhere means the mark survives every vendor.

  • Contrast, or switch to mono. If mark blue does not clearly separate from what is behind it, switch to cream or ink mono. Never add an outline, glow, or shadow to rescue contrast. On a busy photo, place the mark where the image is calm or on a canvas plate; do not blur the photo behind it.

    Why: A blue shield on a blue sky disappears. A glow around it looks like a cheap sticker. Mono is the honest fix.

Space and size

The mark gets room and a floor.
Mark
ThorbisLockup
482416 cut
Floors
Dashed line: a quarter of the mark on every side. Below 20px, the small cut takes over.
  • Clear space is a quarter of the mark. Keep empty space on every side equal to at least a quarter of the mark's height. Nothing enters it: no type, edges, rules, buttons, other logos, or crop. In a lockup the clear space wraps the whole lockup, not just the mark.

    Why: A mark jammed against a nav link or a card edge looks like part of the UI. The room is what makes it read as a signature.

  • Never below 16px. On screen the master mark is at least 20px tall and the small cut at least 16px. In print the mark is at least 10mm tall. The full lockup is at least 20px tall on screen. If a surface cannot fit these, show the mark alone, never a shrunken lockup.

    Why: A 12px shield on a phone footer is a smudge. Better no logo than one that looks broken on a technician's screen.

  • Size by height, never by width. Set the mark and lockups by height and keep the aspect ratio locked. When the mark sits beside a partner logo, match optical height, not bounding box.

    Why: Sizing by width makes the lockup shrink every time a product name gets longer. Height keeps it steady across every product.

Wordmark and lockups

Mark first, then the word. One lockup per surface.
ThorbisHorizontal
ThorbisStacked
Thorbis FieldProduct name
Gap is a third of the mark. Word is 60% of the mark. Product names follow in marker.
  • The wordmark is “Thorbis.” The wordmark is Thorbis in Inter, weight 500, tracking −0.03em, sentence case. Never THORBIS, thorbis, ThorBis, italic, outlined, or set in another face. In running text Thorbis is just a word; it is not replaced with the mark.

    Why: One spelling and one face is what makes the word a name. A shop owner should recognize it on a receipt with no shield beside it.

  • Horizontal lockup. The mark sits left, the wordmark right, both vertically centered. The gap is a third of the mark's height. The wordmark's size is about 60% of the mark's height. This is the default lockup for headers, documents, decks, email, and print.

    Why: Headers, letterheads, and invoices all scan left to right. Fixed proportions mean the lockup never needs to be redrawn per surface.

  • Stacked lockup for square spaces. When the space is square or tall, such as a splash screen, a console boot screen, or a shirt chest, stack the wordmark centered under the mark. The gap is a quarter of the mark's height. Do not use it in a header.

    Why: A horizontal lockup in a square badge shrinks to a sliver. Stacking keeps the word readable without changing the drawing.

  • Product names follow, in marker. A product or surface name, such as Interface Guidelines, Field, or Network, follows the wordmark at the same size in the marker color and the same weight. There is no second mark, sub-brand logo, product color, or divider. On narrow screens drop the product name first, then the wordmark, and keep the mark.

    Why: Every product is Thorbis. A separate logo per product teaches customers they bought five things from five companies.

  • Partners sit apart. In a co-branded space Thorbis comes first, then a hairline divider or the word “with,” then the partner. Match optical heights. Each logo keeps its own clear space and colors. Never merge marks, recolor a partner, or place the shield inside another logo.

    Why: A supplier or integration partner is a guest on the page. Merged marks imply ownership neither side has.

App icons and platforms

Every platform gets the same tile: the mark centered on canvas. The host decides the shape and the size; we never fight it. Each platform's own icon guide wins on format, inside these rules.
iOS · macOS · web
Android adaptive
Windows taskbar
Xbox · PlayStation tile
ThorbisConsole hero art: lockup, doubled clear space, TV-safe
Same tile everywhere. The host cuts the shape; we never bake it in.
  • One tile: the mark on canvas. The app icon is mark blue centered on a canvas tile, #0a0a0a, with the mark at 72% of the tile, which leaves 14% on every side. The light tile is #fffdf8 and is used only where the host asks for a light variant. No wordmark, no gradient, no texture, no badge, no outline on the tile.

    Why: On a crowded home screen the tile is the brand. One tile on every device means a tech who switches phones still finds Thorbis without reading.

  • Web and PWA. Tabs use favicon.svg, which follows the system light or dark preference. The PWA and Apple touch icons are the rounded tile with a 22% corner radius, served from /icons/{size}.png. Social cards use og.jpg. Do not ship a different mark for the web.

    Why: Most customers meet Thorbis in a browser tab first. That first impression has to match the installed app.

  • iOS and iPadOS. Supply the full-bleed square tile at 1024px. No transparency, no baked corners, no gloss, no shadow; the system cuts the shape. Provide dark and tinted variants the way the host asks: the dark variant is the canvas tile, the tinted variant is the mark alone in mono. Follow Apple's app icon guidance over this page where they disagree on format.

    Why: Baked corners show as a double rounded rectangle on iOS. The tile has to look native next to Messages and Maps.

  • Android. Ship an adaptive icon: the canvas as the background layer and the mark as the foreground layer, kept inside the 66dp safe zone so any mask the launcher uses keeps the whole shield. Ship the monochrome layer as the mark alone for themed icons. Do not draw your own circle or squircle.

    Why: Launchers cut circles, squircles, and teardrops. Inside the safe zone the shield survives all of them.

  • Windows and macOS. On Windows the taskbar and Start icon is the mark alone on transparent at small sizes, and the tile at store and large sizes. On macOS use the tile in the host's rounded-rectangle shape at the host's sizes. Supply every size the host lists; never let the system scale one large bitmap down.

    Why: A downscaled 1024px bitmap goes soft at 16px on a dispatcher's taskbar, the one place they look all day.

  • Xbox and PlayStation. Console tiles, store art, and hub art use the same canvas tile with the mark centered. Wide and hero art use the horizontal lockup centered on canvas with clear space doubled, because it is read from across a room. Keep every lockup inside the host's TV-safe area. Platform certification rules win on sizes and formats.

    Why: Ten feet from a TV the mark is a few dozen pixels on a busy dashboard. Extra room is what keeps it legible next to game art.

  • Launch and splash screens. A launch screen shows the mark alone, centered, on canvas, at the size the host recommends. No wordmark, no tagline, no animation beyond the host's own transition. Never hold the user on a splash to show the brand.

    Why: A tech opening the app in a driveway wants the job, not a logo. The splash is a bridge, not an ad.

Inside the product

The workbench stays quiet. The mark appears once.
  • Once per screen, in the corner. In the workbench the mark appears once, at the top-leading corner of the shell, at 22px, and links home. It never repeats in a sidebar, an empty state, a watermark, a card corner, or a footer of a working view.

    Why: Every extra shield is noise on a dispatch board. The work is the dominant region, not the brand.

  • Documents carry the lockup. Invoices, estimates, reports, and proposals carry the horizontal lockup at the top-leading corner. A customer's own logo, when they upload one, replaces ours on their customer-facing documents; ours then moves to a small Powered by Thorbis line in the footer in marker color.

    Why: A homeowner should see the plumber's brand on the invoice. Thorbis is the tool, not the contractor.

  • The mark does not dance. On Showcase surfaces the mark may fade or scale in once, as a whole, in under 300ms. It never spins, bounces, draws its traces, or loops, and it never acts as a loader. With reduced motion it simply appears.

    Why: A spinning shield reads as a stuck app. Motion on the logo spends attention the work should get.

Misuse

If it changes the drawing, the color, or the room, it is wrong.
Stretched
Rotated
Recolored
Glow
Gradient
Crowded, all caps
Every one of these is a different logo. Do not ship them.
  • Never alter the drawing. Do not stretch, squash, skew, rotate, flip, crop, outline, or re-weight the mark. Do not move, add, or remove nodes or traces. Do not put the mark inside another shape, except the app tile.

    Why: Each edit looks small. Together they are a different logo, and a different logo is a counterfeit.

  • Never decorate it. No shadows, glows, bevels, gradients, glass, textures, animations of parts, seasonal costumes, or emoji. Do not put type, numbers, or badges on or inside the shield.

    Why: Decoration ages fast. The calm system around the mark only works if the mark is calm too.

  • Never recolor it. No accent token, extras, status colors, partner colors, or customer brand colors on the mark. Only mark blue, cream mono, or ink mono.

    Why: A green shield reads as success, a red one as an error. The mark cannot carry status.

Files

Take the mark from here. Do not screenshot it from a page.

Loading search…

Loading search. You can close this message and keep reading.