Logo

Lockup and mark

The lockup (the default) pairs the mark with the orbit commerce wordmark. The mark alone is for square or tight spaces: the icon rail, favicons, app icons.

Colour

The ring and the wordmark take the text colour (currentColor). The swoosh, "commerce" and the dot of the i take --o-logo-accent: Orbit Teal in light, Night Line in dark.

Light

Ring and wordmark: the text colourSwoosh, commerce, the dot of the i: --o-logo-accent

Dark

Ring and wordmark: the text colourSwoosh, commerce, the dot of the i: --o-logo-accent

.app-brand {
  color: var(--o-fg-1);
  --o-logo-accent: var(--o-teal-600);
}

[data-o-theme='dark'] .app-brand {
  --o-logo-accent: var(--o-teal-400);
}

Sizes

size is the height in pixels; the width follows the logo's proportions. The sidebar sizes are set by ShellBrand; the larger lockups are starting points for new screens.

20px Sidebar foot

25px Sidebar head

32px Larger

44px Larger still

16px Favicon

18px Icon rail, foot

22px Icon rail, head

24px These docs

Below 20px tall, use the mark: the commerce line in the lockup turns into a texture.

Clear space

Give the logo room: keep at least a quarter of its height clear on every side, free of text, edges and other marks. ShellBrand's padding keeps this in the sidebar.

¼ of the height on every side

The same for the mark

ShellBrand places the logo in the sidebar. In the Orbit shell it sits at the head (placement="header"): the app's own logo, top left at full strength, linking home, with the merchant's store at the foot of the sidebar. The default is a quieter signature for a footer. In the icon rail both become the mark.

Name the app

Every Orbit app signs its sidebar the same way: the mark, the app's name in Sora, and "by Orbit Commerce" under it. Give ShellBrand a name and it draws that lockup in place of the Orbit wordmark. Name the app for who it serves, not for how it is built: Store Dashboard, Supplier Dashboard, Partner Dashboard, Super Admin.

Don'ts

The logo is drawn once and used as it is.

DoAs drawn: the ring in the text colour, the swoosh in teal, at its own proportions.

Don'tA recoloured ring, a stretched lockup, a shadow and glow.

Never recolour the ring or the wordmark: they take the text colour. Only the swoosh, commerce and the dot of the i are teal.
Never stretch, squash or rotate it. Set the height with size and let the width follow.
No shadows, glows, outlines, gradients or animation on the logo itself.
Never rebuild it from type or redraw it: use OrbitLogo in product UI, or the brand files elsewhere.
Place it on a plain surface with enough contrast, never over busy imagery.

Brand files

The original SVGs ship in the package under assets/brand/, so you can import them as @orbitcommerce/constellation/assets/brand/<file>.svg. They carry fixed colours (the ring in slate on light, white on dark), so they suit email and print. In product UI, use OrbitLogo: it follows the theme.

orbit-logo.svgLockup for light backgroundsDownload

orbit-logo-white.svgLockup for dark backgroundsDownload

orbit-mark.svgMark for light backgroundsDownload

orbit-mark-dark.svgMark for dark backgroundsDownload

import logo from '@orbitcommerce/constellation/assets/brand/orbit-logo.svg'

Accessibility

OrbitLogo renders an svg with role="img", named by title ("Orbit Commerce" by default) through aria-label.
When the name is already written beside it, hide it: aria-hidden="true" and title="".
When the logo is a link home, name the link ("Orbit Commerce, home") and hide the logo inside it.
ShellBrand hides its lockup and names its mark, which is only displayed in the icon rail.
With a name, the mark carries the whole lockup ("Store Dashboard by Orbit Commerce") and the words beside it are hidden, so it is read once and the icon rail keeps the name. A link around it takes that name.

Props

OrbitLogo

Prop	Type	Default	Description
`variant`	`'lockup' \| 'mark'`	`'lockup'`	The mark with the wordmark, or the mark alone.
`size`	`number`	`28`	Rendered height in px. The width follows the proportions.
`title`	`string`	`'Orbit Commerce'`	The accessible name, set as aria-label.

Also accepts every SVG attribute.

ShellBrand

Prop	Type	Default	Description
`placement`	`'footer' \| 'header'`	`'footer'`	A quiet signature at the foot, or the app's logo at the head. Both show the mark alone in the icon rail.
`meta`	`ReactNode`	None	Shown beside the logo when the sidebar is expanded, e.g. a version.
`name`	`ReactNode`	None	The app's name, e.g. "Store Dashboard". Draws the mark, the name and the byline in place of the wordmark.
`byline`	`ReactNode`	`'by Orbit Commerce'`	The line under name.

Also accepts every div attribute.

Part	Foot	Head
Lockup	20px, Quiet Slate at 90%, full on hover	25px, ink
Mark in the icon rail	18px	22px
Row height	32px	44px
With a name	The mark at 24px, the name in Sora 16px, the byline in Quiet Slate	The same

Lockup and mark

The lockup (the default) pairs the mark with the orbit commerce wordmark. The mark alone is for square or tight spaces: the icon rail, favicons, app icons.

Colour

The ring and the wordmark take the text colour (currentColor). The swoosh, "commerce" and the dot of the i take --o-logo-accent: Orbit Teal in light, Night Line in dark.

Light

Ring and wordmark: the text colourSwoosh, commerce, the dot of the i: --o-logo-accent

Dark

Ring and wordmark: the text colourSwoosh, commerce, the dot of the i: --o-logo-accent

.app-brand {
  color: var(--o-fg-1);
  --o-logo-accent: var(--o-teal-600);
}

[data-o-theme='dark'] .app-brand {
  --o-logo-accent: var(--o-teal-400);
}

Sizes

size is the height in pixels; the width follows the logo's proportions. The sidebar sizes are set by ShellBrand; the larger lockups are starting points for new screens.

20px Sidebar foot

25px Sidebar head

32px Larger

44px Larger still

16px Favicon

18px Icon rail, foot

22px Icon rail, head

24px These docs

Below 20px tall, use the mark: the commerce line in the lockup turns into a texture.

Clear space

Give the logo room: keep at least a quarter of its height clear on every side, free of text, edges and other marks. ShellBrand's padding keeps this in the sidebar.

¼ of the height on every side

The same for the mark

Name the app

Don'ts

The logo is drawn once and used as it is.

DoAs drawn: the ring in the text colour, the swoosh in teal, at its own proportions.

Don'tA recoloured ring, a stretched lockup, a shadow and glow.

Never recolour the ring or the wordmark: they take the text colour. Only the swoosh, commerce and the dot of the i are teal.
Never stretch, squash or rotate it. Set the height with size and let the width follow.
No shadows, glows, outlines, gradients or animation on the logo itself.
Never rebuild it from type or redraw it: use OrbitLogo in product UI, or the brand files elsewhere.
Place it on a plain surface with enough contrast, never over busy imagery.

Brand files

orbit-logo.svgLockup for light backgroundsDownload

orbit-logo-white.svgLockup for dark backgroundsDownload

orbit-mark.svgMark for light backgroundsDownload

orbit-mark-dark.svgMark for dark backgroundsDownload

import logo from '@orbitcommerce/constellation/assets/brand/orbit-logo.svg'

Accessibility

OrbitLogo renders an svg with role="img", named by title ("Orbit Commerce" by default) through aria-label.
When the name is already written beside it, hide it: aria-hidden="true" and title="".
When the logo is a link home, name the link ("Orbit Commerce, home") and hide the logo inside it.
ShellBrand hides its lockup and names its mark, which is only displayed in the icon rail.
With a name, the mark carries the whole lockup ("Store Dashboard by Orbit Commerce") and the words beside it are hidden, so it is read once and the icon rail keeps the name. A link around it takes that name.

Props

OrbitLogo

Prop	Type	Default	Description
`variant`	`'lockup' \| 'mark'`	`'lockup'`	The mark with the wordmark, or the mark alone.
`size`	`number`	`28`	Rendered height in px. The width follows the proportions.
`title`	`string`	`'Orbit Commerce'`	The accessible name, set as aria-label.

Also accepts every SVG attribute.

ShellBrand

Prop	Type	Default	Description
`placement`	`'footer' \| 'header'`	`'footer'`	A quiet signature at the foot, or the app's logo at the head. Both show the mark alone in the icon rail.
`meta`	`ReactNode`	None	Shown beside the logo when the sidebar is expanded, e.g. a version.
`name`	`ReactNode`	None	The app's name, e.g. "Store Dashboard". Draws the mark, the name and the byline in place of the wordmark.
`byline`	`ReactNode`	`'by Orbit Commerce'`	The line under name.

Also accepts every div attribute.

Part	Foot	Head
Lockup	20px, Quiet Slate at 90%, full on hover	25px, ink
Mark in the icon rail	18px	22px
Row height	32px	44px
With a name	The mark at 24px, the name in Sora 16px, the byline in Quiet Slate	The same

Lockup and mark

Colour

Sizes

Clear space

In the sidebar

Name the app

Don'ts

Brand files

Accessibility

Props

OrbitLogo

ShellBrand

Logo

Lockup and mark

Colour

Sizes

Clear space

In the sidebar

Name the app

Don'ts

Brand files

Accessibility

Props

OrbitLogo

ShellBrand