Skip to content
Open workspace

Logo

A brand mark or wordmark, in its own colors or in an ink that follows the surface.

Status
Beta
Level
Atom
Category
Identity
Adoption
Not used yet
import { Logo } from "@oration/canon/components/logos";
packages/canon/src/components/logos.tsx
Anthropic 
import { Logo } from "@oration/canon/components/logos";<Logo name="microsoft" /><Logo name="google" variant="wordmark" /><Logo name="github" decorative />// Graphite on a light well, white on a dark one<Logo name="github" tone="light" /><Logo name="github" tone="dark" />

Usage#

Logo draws a brand mark or its wordmark from the original SVG, at a fixed optical size. Multicolor marks such as Microsoft and Google keep their own inks in both themes. A one-ink mark such as GitHub is painted with currentColor, so it turns with the text. Recolor a mark only when the surface cannot hold the brand colors.

When to use

  • Beside a provider action, such as Continue with Google, at 16px.
  • In a row of products a customer already uses, marks at 16px or wordmarks at 16px tall.
  • For Oration's own mark and wordmark once those files are added the same way.

When not to use

  • For a company that has no logo file yet. A letter tile is the stand-in, and it is never a fake brand mark. Use Monogram tile
  • For a person, where a photo or initials belong. Use Avatar
  • For an agent. Agents use the Bayer mark in a rounded tile, not a company logo. Use Agent avatar

Original ink, unless the surface refuses it

A multicolor mark stays in brand color on white, on a card, and on a dark well. Switch to mono, light, or dark only for a one-ink lockup, or when the brand colors fail on that surface.

Anatomy#

  1. Mark. The symbol, square, 16px by default. Microsoft's four squares, Google's G, GitHub's octocat.
  2. Wordmark. The name as a drawing, 16px tall and as wide as the file. Google and GitHub have one. Microsoft, on SVGL, does not.
  3. Tone. Brand keeps the file's fills. Mono, light, and dark repaint every shape: currentColor, graphite #1b1f24, or white.

Examples#

Tones

Brand keeps Microsoft and Google in their own colors on both surfaces, and lets GitHub follow the text. Mono repaints every shape with the text color. Light is graphite, for a light surface. Dark is white, for a dark one.

Light surface

Brand
Mono
Light

Dark surface

Brand
Mono
Dark
export function Tones() {    return (        <div className="grid w-full max-w-3xl gap-6 sm:grid-cols-2">            <div className="flex flex-col gap-3">                <p className="text-13 font-medium">Light surface</p>                <ToneRow label="Brand" tone="brand" surface="light" />                <ToneRow label="Mono" tone="mono" surface="light" />                <ToneRow label="Light" tone="light" surface="light" />            </div>            <div className="flex flex-col gap-3">                <p className="text-13 font-medium">Dark surface</p>                <ToneRow label="Brand" tone="brand" surface="dark" />                <ToneRow label="Mono" tone="mono" surface="dark" />                <ToneRow label="Dark" tone="dark" surface="dark" />            </div>        </div>    );}

Wordmarks

Google's wordmark stays in the four brand colors. GitHub's wordmark is one ink, so on a dark well it turns white with the text. Both are 20px tall here.

import { Logo } from "@oration/canon/components/logos";export function Wordmarks() {    return (        <div className="flex w-full max-w-sm flex-col gap-4">            <div className="flex h-12 items-center rounded-lg bg-card px-4 shadow-border">                <Logo name="google" variant="wordmark" className="h-5" />            </div>            <div className="flex h-12 items-center rounded-lg bg-card px-4 shadow-border">                <Logo name="github" variant="wordmark" className="h-5" />            </div>            <div className="dark flex h-12 items-center rounded-lg bg-neutral-950 px-4 text-white">                <Logo name="github" variant="wordmark" className="h-5" />            </div>        </div>    );}

In a button

16px, decorative, because the label already names the provider. The mark is not a second name for the screen reader.

import { Button } from "@oration/canon/components/button";import { Logo } from "@oration/canon/components/logos";export function InButton() {    return (        <div className="flex flex-col items-start gap-2">            <Button type="button" variant="outline">                <Logo name="google" decorative />                Continue with Google            </Button>            <Button type="button" variant="outline">                <Logo name="github" decorative />                Continue with GitHub            </Button>        </div>    );}

States#

States
StateTreatment
BrandThe default. Multicolor fills stay. A one-ink file uses currentColor and follows the surrounding text, including inside .dark.
MonoEvery shape takes currentColor. Use it when a multicolor mark has to sit in one ink, matching a label.
LightGraphite ink, for a light background, including when the page around it is dark.
DarkWhite ink, for a dark background that does not change the text color.

Behavior#

  • The drawing is the SVG you saved. Paths are not redrawn. bun run add-logo in packages/canon copies a file, or downloads a title from SVGL, into src/components/logos/svg/ and regenerates assets.ts.
  • A light file and a dark file of the same one-ink mark collapse into one drawing in currentColor. The dark original stays next to it as *.dark.svg.
  • Two multicolor drawings that actually differ are both kept, and the dark one shows under .dark.
  • Pass decorative when the name is already in the adjacent text, so the mark is hidden from assistive tech. Otherwise the SVG is role="img" with the brand name.
  • A wordmark's class list includes size- so a button's [&_svg:not([class*='size-'])]:size-4 does not squash it. Override the height with className="h-5" or h-6.

Do and don't#

Do. Use the brand tone for Microsoft and Google on both light and dark surfaces.
Don't. Repaint a multicolor mark white or black just because the page is dark. The four colors are the mark.
Do. Let GitHub follow the text color, and pass decorative when the button already says GitHub.
Don't. Leave a black octocat on a dark well, or announce the name twice to a screen reader.

Content#

  • Don't set a title that restates a visible label. Continue with Google next to the mark is enough: pass decorative.
  • When the mark is the only name, leave the default title, which is the brand.

Accessibility#

  • With the default, the SVG has role="img" and aria-label set to the brand, or to title when you pass one.
  • decorative sets aria-hidden and removes the label. Use it when adjacent text names the brand.
  • The mark is not a control. The button or link around it takes the click.
  • Tone light and tone dark are forced inks, so they stay readable when they sit on the opposite surface.

API reference#

Known gaps#

Where the implementation and the system disagree today. Follow the system, not the gap.

Microsoft has a mark only. SVGL does not ship a Microsoft wordmark.

The Google symbol in the catalog is the standard four-color G. SVGL's Google symbol is a filtered reconstruction that blurs at 16px, so it is not the file we render. The Google wordmark is the SVGL original.