Logos

Product primitives for rendering the Rogo mark in app chrome, and the co-brand slot.

Marks

RogoGlyph

RogoIcon

RogoLogo

Created by Rogo

RogoMark

RogoLogoMatrix

Overview

These are the product's logo primitives: the plate colours, the sizing conventions, and the lockup the app chrome uses. The artwork underneath comes from @rogo-technologies/brand, which is the single source of truth for the marks themselves. These components render it, not redraw it.

Every surface (web app, Excel add-in, internal tools, this design system) renders Rogo through one of these two packages, so a brand refresh is one edit rather than a hunt through app code. Never copy path data into an app, and never add a static logo file to an app's public/ directory. If a surface needs a variation these don't cover, add it here; if the artwork is wrong, fix it in the brand package.

tsx

import { RogoGlyph, RogoIcon, RogoLogo, RogoMark } from "@rogo-technologies/ui/logos/rogo";
import { RogoLogoMatrix } from "@rogo-technologies/ui/rogo-logo-matrix";

Primitive	Use it for
`RogoGlyph`	The bare icon artwork, no chrome. Inherits `currentColor` and fills its box.
`RogoIcon`	The icon on its brand plate: app chrome, avatars, compact spaces.
`RogoLogo`	The wordmark on its brand plate: headers, sidebars, onboarding.
`RogoMark`	Inline attribution beside a label ("Created by Rogo").
`RogoLogoMatrix`	The animated loading mark for agent work in progress.

For downloadable files (SVG, PNG at 1x/2x/4x) see Assets. For clear space, minimum sizes, and misuse, see Guidelines.

Usage

Plates

By default RogoIcon and RogoLogo draw the mark on a dark plate. inverted drops the plate and draws the mark in the page's text colour instead, so use it on a surface that already provides the contrast, which is most app chrome.

Default: dark plate

inverted: no plate

Default: wordmark

inverted: wordmark

tsx

<RogoIcon width={40} />
<RogoIcon width={40} inverted />

backgroundStyle overrides the plate for one-off cases: a tint, or an optical nudge via padding.

Decorations

Seasonal or app-specific overlays go through the decoration slot rather than into this package, so the shared primitive stays free of app assets and calendar logic.

tsx

<RogoLogo decoration={<SantaHat className="absolute -top-1 -left-2 size-[18px]" />} />

Co-branding

Some deployments show a partner's mark beside Rogo. BrandLockup owns that arrangement (icon, divider, partner) and takes the partner artwork as a slot.

No partner: Rogo wordmark

Partner mark

With a partner mark in the slot

Activated: renders a labelled button

tsx

import { BrandLockup } from "@rogo-technologies/ui/logos/brand-lockup";

<BrandLockup />
<BrandLockup partner={<PartnerMark />} />
<BrandLockup partner={<PartnerMark />} label="Go to home" onActivate={goHome} />

Pass onActivate and the lockup renders a real <button> with label as its accessible name. Without it, the lockup is inert presentation.

Partner artwork never lives here

The slot exists so partner and customer artwork stays out of the shared package and out of this design system. Both are distributed (the package is published, and these pages are deployed), so a mark committed here reveals who we work with.

Do keep partner marks in the app that serves that deployment, selected from configuration.
Do use a neutral placeholder in examples, as the demos above do.
Don't add a partner or customer file under packages/ui, and don't name a component, variant, or token after one. A guard test in packages/ui/src/logos fails the build if artwork lands there.

API

RogoIcon

Prop	Type	Default	Description
`width`	`number`	-	Plate width in pixels. Required.
`height`	`number`	`width`	Plate height in pixels.
`inverted`	`boolean`	`false`	Drops the plate; draws the mark in the text colour.
`onClick`	`() => void`	-	Makes the plate clickable.
`backgroundStyle`	`CSSProperties`	`{}`	Style overrides on the plate, e.g. a transparent colour.
`decoration`	`ReactNode`	-	Overlay rendered inside the plate.
`className`	`string`	-	Additional CSS classes.

RogoLogo

Same props as RogoIcon, except height defaults to 32 and width defaults to height * 2.5.

RogoGlyph / RogoWordmarkGlyph

Bare <svg> elements. They forward every SVG prop, so size and colour them with className.

RogoMark

Prop	Type	Default	Description
`size`	`number`	`14`	Square size in pixels.
`className`	`string`	-	Additional CSS classes.

RogoLogoMatrix

Prop	Type	Default	Description
`size`	`number`	`14`	Square size in pixels.
`className`	`string`	-	Additional CSS classes.

BrandLockup

Prop	Type	Default	Description
`partner`	`ReactNode`	-	Co-brand mark. Omit for Rogo alone.
`height`	`number`	`24`	Height of the marks in pixels.
`plateStyle`	`CSSProperties`	-	Overrides on the Rogo plate, for optical nudges in dense chrome.
`onActivate`	`() => void`	-	Renders the lockup as a button and runs on activation.
`label`	`string`	-	Accessible name. Required whenever `onActivate` is set.
`className`	`string`	-	Additional CSS classes.

Guidelines

Do

Import marks from @rogo-technologies/ui/logos/* on every surface
Give the mark a click target only when it navigates, and label it
Use RogoLogoMatrix for agent work in progress, not as a generic spinner

Don't

Don't inline the SVG path data or ship a logo file in an app's public/ directory
Don't recolour the mark. It inherits currentColor, so set the text colour instead
Don't put partner or customer artwork in the shared package or on these pages

PreviousIllustrations

NextShadows