BrandThe roach, the glow and everything that clicks into place

The identity

A little strange. Entirely deliberate. The RoachNet signature doesn't look like a typical software logo, because it has somewhere to be. The roach leans forward, six legs caught mid-stride, heading right. Beside it sits the RoachNet wordmark: wide, sturdy letters with a green-lit o that echoes the light in the roach's cap. That small link is the whole idea in miniature: the character, the name and the interface belong to the same world. Kernel violet gives the identity its backbone, signal green makes it feel switched on, and Anybody gives the letters their unapologetic shape. Use the full signature wherever there's room. When space gets tight, the compact lockup and the micro-mark keep it recognizable, on a navigation bar as much as on a billboard.

The lockup

One character, one wordmark, three ways to keep them together. Every lockup uses the same roach and the same outlined wordmark; only the arrangement changes. The horizontal lockup is the signature: the roach to the left of the wordmark, centred on the line, 2.5 times the wordmark's size in width, for page headers, heroes and larger placements. The compact lockup is the small-space specialist: the micro-mark takes the roach's place at the wordmark's own size, for navigation, title bars and anything under about 160 px wide. The stacked lockup is the square deal: the roach above the wordmark at 0.6 of its width, for splash screens, covers and social cards.

HorizontalThe signature

CompactThe small-space specialist

StackedThe square deal

Five finishes, one identity

• Full color, on nightThe whole crew, properly lit. This is the default.
• Lit ink, on lightDark letters, with the cap and the LED in deep green #007A39 so they stay visible. Still unmistakably RoachNet.
• Reversed, on Kernel violetPale letters and a green signal against violet.
• One color, inkInk throughout, the LED included, on light grounds. It needs no special effects to be recognized.
• One color, paleThe same drawing in pale on dark grounds, in a quieter voice.

The wordmark on its own follows the same finishes, and it is always the supplied outlined drawing, never "RoachNet" typed out in Anybody. Typing it is close the way a photocopy of your house key is close.

Give it room to breathe

The mark already has plenty of character; it doesn't need anything crowding its antennae. Clear space is measured in x, the height of the wordmark's o.

xxxx

Clear space

• Lockups and the wordmarkx on every side. Files that come with a ground already include it.
• The roach alone15% of its width
• The micro-markAn eighth of its size

Minimum size on screen

• Horizontal lockupwordmark 20 px or more, so the roach is 50 px wide
• Stacked lockupwordmark 16 px or more
• Compact lockup16 px
• Wordmark alone12 px
• Full roach48 px wide
• Micro-mark16 px

Minimum size in print

• Horizontal lockup45 mm wide, so the roach is 12.6 mm
• Stacked lockup20 mm wide
• Compact lockup25 mm
• Wordmark alone20 mm
• The roach12 mm

Meet the roach

Six legs. Excellent timing. Questionable sleep schedule. This is RoachNet's one and only character: an oddly endearing roach, drawn from three quarters and already halfway into its next step. Three legs on either side; yes, someone counted. Unlike a mascot pasted onto a landing page, this one belongs to the interface. It notices you, gets curious, has a job to do, and now and then decides it has done enough for one day.

A roach for every background

Six ways to set the roach, one for every ground the docs use. Point at one to see it scurry in place.

Small enough to fit

The full-color roach starts at 48 px wide. Below that, use the micro-mark: a compact drawing with the wing case's lit edge, the pale collar, the green cap and four legs instead of six. That is a deliberate simplification, not a drawing error. At 16, 20, 24 and 32 px it is hinted pixel by pixel, so use the file made for the exact size rather than scaling one; between those sizes, use its vector.

Where it turns up

This isn't a logo that appears on the first page and then goes home.

⌘K

⌘K

Your hardware. Your intelligence. Your data. Your network. Your control.Made by RoachWares LLC.

DocsGet started / Install on a Mac

Color

Kernel violet has the wheel. Signal green knows when things are moving. RoachNet doesn't need a rainbow of competing actions; it needs a visual language you learn without thinking about it. Kernel violet, #703093, is the one action color: the button worth pressing, the selected state, the keystone at the centre of the docs. It comes as a ramp of eleven steps in one hue, enough range for a page that's nearly black or nearly white. The ratios below are measured against each theme's page ground.

Three signals you should never mix up

Cords

Color with a job description. Patchbay gives every docs chapter its own cord: a ground, a contrasting ink and an accent that stays readable on the page around it. That's how Guides can feel different from Reference without the interface turning into a scavenger hunt for the right button. The keystone wears Kernel violet. Pick a card to inspect its values and its contrast, measured live in the theme you're using.

A cord's ground and ink stay paired in every theme. Its accent adjusts to the page around it so the words stay readable: the environment can change, the meaning shouldn't. The nine themes are further down.

Type

Three typefaces, three very different personalities. A page should know when to speak up, when to explain and when to show you an exact command without getting creative about the characters. Anybody handles the big moments: headlines, module names and the display language that gives RoachNet its silhouette. It stretches, carries weight and isn't afraid to take up space. Schibsted Grotesk does the long-distance work, the paragraphs and instructions that get you from curiosity to understanding. JetBrains Mono handles anything machine-facing: commands, paths, keys, ports and these little eyebrows. All three are self-hosted under the SIL Open Font License, so the docs never call a font service to look like themselves.

DisplayAaAnybody · 700 to 900 · width 50 to 150

TextAaSchibsted Grotesk · 400 to 750

MachineAaJetBrains Mono · 400 to 700

WordmarkAn outlined drawing · cues: Anybody 850, 112%

The production wordmark is a custom outlined drawing inspired by Anybody, at about 850 weight and 112% width, with its own LED o. Those are construction cues, not a recipe for retyping the logo in live text.

The type scale, in the wild

1. --t-megaSpecs
2. --t-displayStart here
3. --t-h1Find the port
4. --t-h2What leaves your Mac
5. --t-bodyRoachNet goes online to fetch what you ask for and to check GitHub for its own updates.
6. --t-micro~/RoachNet/storage

Motion

Give things an entrance. Then let people read. Motion is part of the identity, but it doesn't get to be the main character in every paragraph. The interface assembles itself, shows you where things came from and settles down when there's work to do. Most animation happens once, on arrival. The field and the roach are the exceptions: environmental, responsive and a little more curious. Reduce Motion removes the performance without withholding any content. Every demo below replays and pauses, and says where you'll meet it.

Reduce Motion is on, so each demo shows where it ends, with the moments in between as stills.

Curves and durations

• Durations120 · 220 · 420 · 760 ms, and 1200 ms for a scene
• Staggerabout 60 to 90 ms between neighbours
• Reduce MotionEverything resolves to its finished state at once. The roach holds a still pose and the field draws one still frame.

The field and themes

There's something happening behind the page. Look past the words and you'll find the field: one WebGL canvas behind everything, layered at three depths, with its pixels drawn through the theme's own dither pattern (Bayer, blue noise, halftone or scanlines). Sometimes it reads as LED contours; sometimes as fog, terrain, scanlines or sparks. It isn't meant to compete with the text, so it goes quiet behind anything you read and keeps its wandering for the margins. This window lifts the quiet: point at it, click it and scroll past it.

Themes

Nine themes, nine different moods. A theme changes more than the wallpaper: it brings its own ground and surfaces, text accents, field composition, dither pattern, light and tempo. The interface stays familiar while the atmosphere changes around it. Choose one here or with the selector in the dock. Your choice is kept in this browser, for this site only, and nothing is sent anywhere. Until you choose, the docs follow your system's light or dark setting, and High Contrast when you've asked your system for more contrast. All nine are available all year, the five Halloween themes included. Only the default changes with the season: from 24 October to 1 November, anyone who hasn't chosen gets Spectral on a dark system or Bone on a light one.

Aa

Core · Dark

Kernel Night

The lights are low, but the circuitry is awake. Violet weather rolls behind green LED contours, with a fine lattice of dots giving the dark its structure. The familiar RoachNet after-hours look.

Use Kernel Night

Aa

Core · Light

Daylight

For seeing your notes without feeling you're in a server room at midnight. Paper, graphite, a violet-grey atmosphere and a quiet dotted texture. Bright, clear and still very much RoachNet.

Use Daylight

Aa

Core · Dark

Phosphor

A green-phosphor CRT that never quite left the workbench: one colour of glow, scanline dithering and a slow roll across the field. Familiar to anyone who has trusted a terminal more than a dashboard.

Use Phosphor

Aa

Halloween · Dark

Witchlight

A little green light should be comforting. This one drifts up through violet fog, unravelling into filaments and sparks. Beautiful, technically. Less reassuring.

Use Witchlight

Aa

Halloween · Dark

Spectral

Purple fog recedes into three layers of depth. Pale shafts of light come down from somewhere you can't see, and the whole scene breathes very slowly, as if it has been there a lot longer than the browser tab.

Use Spectral

Aa

Halloween · Dark

Hollow Circuit

Half terrain map, half haunted circuitry. Contour lines draw a strange landscape while pulses run along paths that look a little too intentional.

Use Hollow Circuit

Aa

Halloween · Dark

Moonlit

Cool halftone light, clouds drifting past violet edges and a few faint stars. Quieter than the other Halloween scenes, in the way that makes you glance at the window for no reason.

Use Moonlit

Aa

Halloween · Light

Bone

Old paper, soft halftone fog and contour lines in sepia violet. A bright theme with the faint feeling that these pages came out of a locked drawer.

Use Bone

Aa

Accessibility · Dark

High Contrast

No atmospheric guessing games. Black and white lead, violet and green keep their meaning, the focus ring stays prominent and the field holds still. Clear comes first.

Use High Contrast

Components

The little things are the system. A design system isn't only its logo and its hero. It's what happens when you're looking for a guide, copying a command, spotting a warning or working out which part of the interface you can click. Patchbay gives those everyday pieces one grammar: each takes its color from the cord it sits in, so the same module is lemon in Guides and amber in Reference.

Module tile

13 pagesGuidesPoint at me: the ground goes dark and the ink takes the cord.

Stickers and chips

CurrentNot releasedDeletes your datamacOS 1.1.4Apple Silicon

GETPOSTPUTDELETE

Buttons

Download for MacInstallRead the notes

Dock

⌘K

Console

TerminalCopy

shasum -a 256 -c RoachNet-Setup-macOS.dmg.sha256
RoachNet-Setup-macOS.dmg: OK

Callouts

Fact

RoachTail device tokens are compared in constant time and stop working after 90 days unused.

Deletes your data

Reserved for actions that destroy data: never for suspense, decoration or making a routine setting feel dramatic.

Accessibility

The personality is optional. Being able to use the page isn't. The colors, the motion and the playful details only work if everyone can still read, navigate and understand the interface. Every text color clears WCAG AA on the grounds it's used on, in all nine themes, and the table shows the lowest ratio in each group, computed from the same colors these pages use.

Using the brand

Let the roach be the roach. The illustration is designed down to the joint. It doesn't need rotating, stretching, a surprise gradient or a new outline from whoever makes the next social card. A few rules keep it recognizable, and most of them come down to one: use it as it's drawn.

Do and don't

Keep the tiled mosaic to these docs: it's Patchbay's own composition, not a layout every RoachNet product needs to copy. The roach, the wordmark, the colors, the type and the motion are the parts that travel with the brand. Keep those consistent, and give each product and page room to be itself.

Patchbay in six rules

1. Cords
   Give color a responsibility.

   A chapter owns a paired ground and ink. Set data-pair once on its container and let the components inherit --pc, --pc-ink and --pc-accent: one assignment, consistent behavior.

2. Seams
   Let the gaps draw the grid.

   Twelve columns set the layout and modules sit 8 px apart, so no visible line has to explain the structure. Only a mosaic's outer corners are rounded.

3. Stretch
   Let the type do what it was hired to do.

   Anybody runs from 50 to 150 percent width and sets the words you'd read from across a room. Schibsted Grotesk carries the reading, and JetBrains Mono carries anything a Mac would print.

4. Assemble
   Move it into place, then leave it alone.

   Modules arrive from their nearest edge and settle. With Reduce Motion they simply appear in place. A page never makes you wait for its own introduction.

5. Field
   Keep the atmosphere behind the work.

   The dithered field has three depths and answers the pointer, clicks and scrolling. It quiets behind the reading column, where your attention belongs.

6. Plain
   Say what the product actually does.

   Second person, specific names, plain explanations and honest limits. A little character makes the writing pleasant; clarity is what makes it useful.

Building with Patchbay

The system underneath the personality. A brand system should be enjoyable to use and predictable to maintain. Patchbay builds on the shared RoachWares system, then adds the arrangements, chapters, animations and live demos that make these docs their own place.

One last thing

RoachNet's identity is allowed to be odd. The bug isn't pretending to be a spaceship, the colors aren't trying to cover every possible emotion, and the page doesn't need to dance forever to prove someone knew how to animate it. Everything has a part to play: the light says something is alive, the colors tell you where you are, the type keeps things readable and the motion helps the pieces settle into place.

Want to use the roach, the wordmark or another asset and not sure which file fits? Email contact@roachwares.org.