Start here
Intro
Who this page is for
Sales, CS, marketing, leadership, partners, and designers who need a single source of truth. You do not need to know how our website is built—use the colors, type, logos, icons, and pattern notes as you would any brand PDF, then send technical questions to whoever owns the site or design system.
How to use it
- Pick your job: slides → colors + logos + patterns; UI → iconography; favicon / app icon → logo mark; copy → voice; contracts → terms + legal center.
- Copy what you need: hex values in the color table are one-click copy. Fonts are free on Google Fonts (linked in Typography).
- Grab files: download lockup PNGs from Logo & Usage and the mark from Logo Mark. Working files and templates live in SharePoint (Brand Downloads).
Words we use here
- Role — what the color is for (background, accent, etc.).
- Value — the actual color code to match in PowerPoint, Figma, or print specs.
- Build ref — optional shorthand for engineers; ignore it if you are not shipping code.
This guide defines how RogIQ should look, sound, and behave in marketing and product surfaces. When in doubt, prioritize clarity and accessibility over decoration. Lockup and mark PNGs download from this page. For working files, presentation templates, and additional artwork, use the brand asset library (SharePoint).
Language
Name & Spelling
Company & platform
Use RogIQ — capital R, capital IQ, no space. Do not use "Rog IQ," "Rog-IQ," or "ROGIQ" in sentence case unless matching an all-caps headline style.
Pronunciation
Spoken as "rogue eye-cue" — a nod to doing marketing differently, without implying affiliation with any unrelated brands that use "rogue" in their name.
Product names
- Brand IQ — two words, title case, for the brand memory product area.
- Strategy OS, Create, Intelligence, Optimize — match in-product naming and marketing pages.
Avoid
- Generic phrases like "the IQ platform" without the RogIQ name nearby.
- Altering spacing or punctuation to force a different reading (e.g. "Rog.IQ").
Lockups
Logo & Usage
Default horizontal lockup includes the wordmark and profile mark. Use full-color on light backgrounds and reversed (white) on dark or photography with sufficient contrast. For the head mark alone (browser tabs and the app icon), see Logo Mark.
RogIQ_Logo-wProf_RGB.png
2084 × 749 PNG · RGB — light backgrounds
RogIQ_Logo-wProf_Rvrs_RGB.png
2081 × 748 PNG · Reversed — dark backgrounds
Do
- Preserve clear space around the lockup equal to at least the height of the "R" cap.
- Place on solid or subtly textured backgrounds with enough contrast.
- Download the PNG on this card, or use approved files from the asset library for print and external decks.
Don't
- Stretch, rotate, recolor, add outlines, or combine with unapproved effects.
- Replace the logotype with system fonts or redrawn letterforms.
- Crop the profile mark in a way that changes its silhouette.
Internal use only. Logo Kit
Mark & favicons
Logo Mark
The logo mark is Professor Rogue's head — the same character as the profile in the wordmark lockup, used alone when there isn't room for the type. The transparent PNG is the master file. Favicons below are the live tab and app crops. Use Logo & Usage for the full lockup; use Iconography for Lucide UI icons.
Transparent mark
Alpha background — the page, slide, or UI color shows through. Checkerboard is only for preview.
32px
Minimum
64px
Avatar / chip
96px
Nav / card
160px
Feature
RogIQ_Logo-Mark.png
1019 × 1060 PNG · transparent background
Live favicons
Baked versions for browser tabs and the product app. Do not use these when you need the background to show through — use the transparent mark above.
Website
Browser tab for rogiq.ai and the marketing site
RogIQ-website-favicon.png
1105 × 1105 PNG · light and dark preview
Application
RogIQ product app tab and home-screen icon
RogIQ-app-favicon-192.png
192 × 192 PNG · light and dark preview
Do
- Use
RogIQ_Logo-Mark.pngin decks, docs, and UI when the surface color should show through. - Use the website favicon for marketing tabs and bookmarks. Use the application favicon for the product app and home-screen icons.
- Keep the lime disc, black outlines, and sunglasses glint intact.
Don't
- Place the transparent mark on another lime circle — that doubles the ring.
- Swap the two favicon files. The website mark sits on a disc (hair can break the circle); the app mark is a full lime square for small OS icons.
- Recolor, add a drop shadow, or crop the silhouette.
- Replace the wordmark lockup with this mark in headers or decks unless space truly cannot fit the type.
Primary palette
Color System
We treat dark backgrounds as the default brand look; the light palette is the same structure for people who prefer a bright screen. Lime is the accent for links, highlights, and primary buttons. Use the darkest text token on light fills and the lightest text token on black or near-black for readability.
On the live website, those choices are wired up so the theme can switch automatically; you only need the hex values below to match print, decks, or social.
Marketing theme tokens
Dark mode is the primary RogIQ palette. Light mode keeps the same roles for users who prefer a bright interface.
Dark mode
Primary palette (default on the site when someone picks dark theme)
| Role | Build ref | Value |
|---|---|---|
| Background | --color-bg | |
| Primary text | --color-text | |
| Secondary text | --color-text-secondary | |
| Lime (brand accent) | --color-lime | |
| Surface / glass | --color-surface | |
| Borders | --color-border |
Tip: Most teammates only need Role and Value. Tap any value to copy the hex code for slides, email, or specs. The Build ref column is for developers aligning with the live site.
Lime CTA band
Big green call-to-action strips always use the same bright lime () so a button looks identical in light or dark mode. See Patterns & Motifs for the layered background (dots + fine grid + grain) we pair with that band.
Terminal / blog palette
A separate “retro terminal” look for blog and storytelling—fixed colors so it does not flip when the rest of the site changes theme. Live example under Patterns & Motifs; copy values from this table:
| Terminal background | Blog / retro UI | |
| Terminal text | Matches dark-mode lime | |
| Terminal amber | Accent in terminal theme |
Fonts
Typography
For Google Slides, Word, or Canva: install the same families from Google Fonts — Gabarito, Red Hat Text, IBM Plex Mono, and optional Permanent Marker. The site loads them the same way; the short code names below are for developers only.
- Gabarito (
font-heading) — headlines, navigation, and big display type. Prefer heavy weights (800–900) for hero lines. - Red Hat Text (
font-body) — paragraphs, descriptions, anything long. Use italics sparingly for emphasis. - IBM Plex Mono (
font-mono) — UI labels, “system” microcopy, and the terminal-style blocks in Patterns & Motifs. - Permanent Marker (
.handwritten) — handwritten accent only; never for long passages, forms, or legal text.
Gabarito display
Red Hat Text at a comfortable reading size. Use secondary color for supporting lines and keep line length around 60–75 characters where possible.
IBM Plex Mono · STATUS · v1.0 · OK
Quick accent — use sparingly
Lucide
Iconography
RogIQ product UI and this marketing site use Lucide (lucide-react). One stroke family, one visual weight — pick a semantic icon, do not mix other libraries into our chrome.
| Library | Lucide — lucide.dev/icons |
| Stroke | 2px default. 1.75px only in dense 16px rows. Do not mix weights in the same toolbar. |
| Size | 16px inline (size-4), 20px controls (size-5), 24px empty states (size-6). |
| Color | Inherit currentColor. Lime for active / accent states only — never a one-off decorative hue. |
Size scale
Same icon, three contexts. Keep a view on one size when icons sit in a row.
16px
Inline — buttons, rows, inputs
20px
Icon buttons, nav, headers
24px
Empty states, feature cards
Stroke
2px is the RogIQ weight. 1.75 is the floor, not a second style.
1.5
Too thin — skip
1.75
Allowed in dense 16px rows
2
Default — use this
2.5
Too heavy — skip
Light surface
Dark surface
Do
- Use Lucide for RogIQ product and marketing UI. Pair the icon with a label unless the meaning is universal (close, search, chevron).
- Keep stroke at 2px and size consistent inside a toolbar or row.
- Mark decorative icons
aria-hiddenwhen the adjacent text already names the action.
Don't
- Mix Heroicons, Font Awesome, Material, or emoji into RogIQ chrome. Client website builders may offer other sets — that is a product feature, not our brand system.
- Fill, outline, rotate, or recolor icons into a one-off palette. Status color is for the message, not a new icon style.
- Use an icon as the only indicator of state — keep text or a second cue for accessibility.
In product code
import { Sparkles } from 'lucide-react'
<Sparkles className="size-4" strokeWidth={2} aria-hidden />Same names work in the Lucide Figma plugin. Click a tile below to copy the React name.
Platform vocabulary
Icons we actually ship. Need something else? Stay in Lucide — browse the full set.
71 of 71
Actions
Navigation
Status & feedback
Content & media
People & orgs
Product language
System
The Professor Rogue head mark — including live favicons — is documented under Logo Mark.
Writing
Voice & Tone
RogIQ speaks to capable teams who want outcomes, not buzzwords. Keep confidence grounded in specifics.
- Direct & capable — short sentences, strong verbs, concrete benefits.
- Human, not corporate — conversational where appropriate; avoid stiff legalese in marketing copy (legal pages excepted).
- Clever with restraint — personality is welcome; clarity always wins over a joke.
- Inclusive — avoid idioms that do not translate well; write so scanners and assistive tech stay coherent (meaningful link text, logical headings).
Product UI strings should stay neutral-professional; campaign landing pages can lean slightly bolder while staying truthful about capabilities.
Reuse across channels
Patterns & Motifs
The marketing site reuses the same few background treatments so everything feels like one system. Use this section as a visual recipe book: match the proportions in digital work, or recreate the idea in print with flat textures (no animation required).
Digital vs print
- Digital — animated dot field, hover drift, and scanlines are fair game on web and motion.
- Print / PDF — use the static dot grid, flat lime panels, and exported line textures at low opacity; skip scanlines and parallax unless you are deliberately going for a screen-capture aesthetic.
Hero & dark sections
Animated dot field
Lime dots on black in a soft wave. Reacts to pointer movement on desktop; on touch devices or reduced-motion settings it falls back to a still grid automatically.
Move your cursor over this card to see the field flex (desktop).
Print-safe
Static dot grid
An even lime-on-black dot texture for decks, booth panels, or social templates when you want the same rhythm without motion or canvas weight.
Rebuild as a pattern swatch in Figma or InDesign at ~40px repeat.
Lime CTAs
Bright band stack
Homepage-style final CTAs layer three things: dark micro-dots on lime, a hairline orthogonal grid, and a light film grain for depth.
Primary action lives here
Same stack as LimeCTASection / Final CTA — pair with black or white button styles from the lime CTA card rules in the stylesheet.
Structure
Fine line grid
Very light grid lines over black (marketing) or over lime/white (CTAs) to suggest precision and dashboards without shouting.
Texture
Film grain
A subtle halftone-style noise layered at low opacity so large color fields feel tactile instead of clinical.
Easiest print match: add 3–6% uniform noise in Photoshop or a vector halftone at low contrast.
Editorial / blog
Terminal theme
Deep green panel, lime monospace type, optional scanlines—signals “command line / intelligence” and is used where we want a retro-computer story beat.
user@rogiq ~ %
rogiq sync --brand --voice
OK · 3 modules updated
Panels & long-form
Glass card + corner brackets
Frosted or lifted panels with small L-shaped corner accents—used for side navigation, legal docs, and this page’s table of contents.
Example panel: subtle border, soft shadow, corner frame.
When you need production files or alternate crops, start from the SharePoint brand library; use the demos above to explain to an agency how far to push texture and motion.
Files
Brand Downloads
Wordmark lockups download here. The transparent mark and favicons are in Logo Mark. Working files, templates, and additional campaign assets live in the Haley Marketing SharePoint library. Access is managed by your team admin.
- Download PNG
RGB — light backgrounds
RogIQ_Logo-wProf_RGB.png
2084 × 749 PNG
- Download PNG
Reversed — dark backgrounds
RogIQ_Logo-wProf_Rvrs_RGB.png
2081 × 748 PNG
Brand assets
Terms of Use
RogIQ wordmarks, logos, and associated brand assets are proprietary. Use them only for official RogIQ business, authorized partner co-marketing, or other purposes expressly approved in writing. Haley Marketing Group and RogIQ may update these guidelines; continued use after updates constitutes acceptance of the revised rules where your agreement allows.
Nothing on this page overrides a signed contract. If your agreement includes different trademark or co-branding terms, follow the contract.
For general website terms, see the Terms of Service. For privacy practices, see the Privacy Policy.