Rogue / Brand
Brand Kit
The logos, shapes, typefaces, colors and voice that make up Rogue, with the rules for using them. Use it for press, partner material, events and anything else that carries our name.
01 / Fundamentals
Form & Function
Our Aesthetic
At its foundation, Rogue's aesthetic is inspired by Editorial variations of references pulled from Neo-Industrialism, Swiss design and Brutalism - with emphasis on Form & Function.
Our design language aims to utilize an editorial feel for its surface appearance, mixing textured surfaces and polished solid-colored shapes, with hints of degradation. The conventional interface can be exited by "tearing the paper" with the use of abstract tear patterns.
Text Is Never Decoration
Every piece of text must carry information the reader needs. If removing it loses nothing, it doesn't belong.
Never use faux-technical text as ornament: status readouts like "SYSTEM OPERATIONAL", made-up version numbers, coordinates, serial codes, or filler labels. They distract from the content and dilute the experience.
No Gradients
Colour never blends smoothly from one value to another. When something needs to fade, build the fade from solid shapes: dithering, ASCII, or blocks that thin out step by step.
The fragmented gradient on the landing page is one. The glitched blocks that build across step 2 of How It Works and fill solid in step 3 are another.
Rogue Geometry
Each individual shape has a purpose. When creating new elements, confirm that you're using them correctly. No other shapes: no rounded corners, no circles as containers.
Structure
The Square
Used to frame content. From simple content boxes to more complex glitch-like boxes. Never use as a standalone decoration.
Emphasis
The Chamfer
The Square with its bottom-right corner cut. Used very sparingly: only for the single most important card in a view. Every other card stays a Square. Always the same corner, always the same cut. Only ghost cards get a border; filled cards have none.
Division
The Slash
Used to fill negative space or for separating content. Does not contain content unless in extraordinary aesthetic circumstances.
Asides
The Dot
Used as a background decoration for containers. Usually for hints, tips, or additional information as an aside.
Registration
The Plus
Marks the corners of a grid cell. Pins content to the grid it sits on. Outer corners only, never inside content.
Breakout
The Tear
Used to break out of the conventional interface, as a method to view "behind the scenes".
Iconography
Two families. Icons carry no text or labels: shapes only.
Interface
Phosphor
For interface and inline icons: buttons, lists and card icons. One color, the text color or Red.
Illustrative
Rogue Icons
Drawn for us from squares, lines and dot fields. The text color at full or reduced opacity, with at most one element in Red.
02 / Logos
Wordmark and Logomark
The Rogue logo system consists of two marks: the primary wordmark and the “R” logomark. The wordmark is the primary representation of the Rogue brand, while the logomark provides a compact alternative for applications where the full wordmark is not practical.
The following guidelines outline how these marks should be used to maintain a consistent representation of the Rogue brand across different applications and media.
* Do not misrepresent your relationship with Rogue, imply endorsement, or confuse users about sponsorship.
Primary
Rogue Wordmark
The default logo, across products, services and communications.
Compact
Rogue Logomark
For small or square spaces: app icons, favicons and avatars. It replaces the wordmark, never sits beside it.
Do
Keep a minimum clear space around the logo
Use the approved colors depending on background & context
Use the "R" logomark where the full logo doesn't fit, or when used as an app icon, favicon, or social avatar
Don't
Don't use both marks
Don't colorize outside the system
Don't alter opacity
Don't add effects
Don't crop
Don't apply transforms
Don't mask or texture
Don't display on busy backgrounds
Co-Branding
When Rogue is presented alongside a partner brand, the Rogue wordmark should appear first and remain visually distinct from the partner mark. Partner logos should retain their own approved forms and should not be combined with, modified into, or incorporated into the Rogue mark.
Use established spacing rules and strive to have the wordmarks be the same height
Don't use the “R” logomark in co-branding
03 / Typography
Three Typefaces
Rogue uses three typefaces: Oxanium for headlines, Geist Sans for reading, Geist Mono for data. All three are free under the SIL Open Font License.
Headlines
Oxanium
- Regular
- Medium
- Bold
Squared, angular and industrial. Headlines, card titles and call-to-action buttons. Bold by default, Regular only for contrast next to Bold.
Reading
Geist Sans
- Regular
- Medium
- Bold
Neutral and precise, built for screens. Everything people read: body copy and interface text.
Data
Geist Mono
- Regular
- Medium
- Bold
Fixed-width and exact, so it reads as data. Labels, buttons and statistics only, always in capitals with tabular figures. The one exception is the dictionary definition in the hero, set in lowercase. Never for paragraphs or as faux-technical decoration.
04 / Color
Black, White and Red
Rogue's palette is near-black, near-white and red. The neutrals carry the content. Red marks what needs attention. Use only the colors in this guide: don't introduce new ones, and don't use pure black or pure white.
Core
Black carries the surface, White carries the content, Red marks the one thing that needs attention.
Black
Backgrounds, and text and marks on White. Never replace it with pure black.
- Hex
- RGB
- OKLCH
White
Text and marks on Black and on Red, and backgrounds. Never replace it with pure white.
- Hex
- RGB
- OKLCH
Red
The accent. Keep it to small areas: it marks what matters, and stops working when it covers everything.
- Hex
- RGB
- OKLCH
Greys
For secondary text, muted surfaces and borders only.
Graphite
Muted surfaces on Black.
- Hex
- RGB
- OKLCH
Ash
Secondary text on Black.
- Hex
- RGB
- OKLCH
Haze
Muted surfaces on White.
- Hex
- RGB
- OKLCH
Steel
Secondary text on White.
- Hex
- RGB
- OKLCH
Fog
Borders and dividers on White. On Black, borders are White at 10%.
- Hex
- RGB
- OKLCH
05 / Language
Our Voice
Rogue is the Operator: a plain-spoken expert with calm authority. We know the field, say what matters and get out of the way. Clear to a newcomer and to a security veteran, never elitist, never vague.
Use this guide when writing about Rogue or on Rogue's behalf: press, partner announcements, social posts, events, emails and the website. The channel changes, the voice doesn't.
Say It Straight
Plain words, short sentences, facts before adjectives. Lead with what matters and back claims with facts. No buzzwords like "revolutionary" or "next-gen", no corporate filler. If a sentence works without a word, cut the word.
Rogue sounds modern through structure, not vocabulary. Short fragments, groups of three and clean labels do the work, like "Profile. Match. Act."
Do
- Rogue shows security teams which threats are likely to reach them.
- Rogue now connects to Microsoft Defender.
Don't
- Rogue is a revolutionary AI platform redefining the future of cybersecurity!
- We're thrilled to announce an exciting new partnership!
Show the Work
Confidence comes from substance, not volume. Talk about the people Rogue works for and what changes for them. Let the work make the case.
Do
- Put customers and partners in the spotlight
- Describe what Rogue does, not what it is
- Promise only what we deliver
Don't
- Use superlatives like "best", "leading" or "only"
- Talk down competitors
Hold Steady
Security is serious work, and people come to us when something might be wrong. Stay level, whether the news is good or bad. Own mistakes plainly, and skip the exclamation marks. Never sell with fear, and never joke about breaches or the people hit by them.
Do
- Most attacks use known weaknesses. Rogue shows which ones apply to you.
Don't
- Hackers are coming for your business. Are you ready?