Logo & brand

The OCL logo comes in three shapes — full logo, icon, and text-stacked — with color variants for light and dark backgrounds. Use the SVG versions for anything rendered in a browser or on a digital screen; reach for PNG only when a tool can't accept SVG. EPS and PDF masters live in the shared Drive.

All logo source files are in this repo at assets/logo/. Rendered variants below are live from those files — right-click any logo to save a copy, or use the format buttons underneath each card.

Full logo

The primary lockup — icon plus wordmark. Use this wherever space allows: site headers, documents, slide decks, email signatures. Choose black text on light backgrounds, white text on dark.

Full · Black text SVG PNG

Full · White text SVG PNG

Icon

Standalone icon. Use for favicons, app icons, avatar placeholders, and any UI where the full wordmark wouldn't fit. The blue variant is the primary; white is for dark or primary-colored backgrounds.

Icon · Blue SVG PNG

Icon · White SVG PNG

Icon · White on dark SVG PNG

Text stacked

Wordmark-first variant with the icon above the text. Use when you need a squarer footprint than the full logo allows — e.g. social avatars, square cards, mobile splash screens.

Stacked · Black SVG

Stacked · Blue SVG PNG

Stacked · White SVG PNG

Blue circle + white text (app avatar) PNG

The Blue circle + white text variant is the OCL brand avatar — it's what the GitHub org uses and what you see in the sticky header of this site. Use it wherever a square avatar slot needs to represent OCL.

Clear space & minimum size

TODO — needs spec. Clear-space ratios (e.g. "margin equal to the height of the icon's inner circle on all sides") and minimum legible sizes for each variant haven't been formally defined yet. If you have a strong opinion, add it here.

Don't

Don't distort or skew.

Don't use the blue icon on colored backgrounds.

Don't recolor. Use an approved variant.

Don't render smaller than 24px tall (full logo).

Branding examples

The full branding examples deck with usage scenarios, co-branding patterns, and historical context is available as a PDF in this repo:

📄 OCL Branding Examples (PDF)

Source files

The EPS masters and Google Drawings source files live in the shared Drive at OCL/OCL Shared/Branding/Logo/. If you need a new variant (color, orientation, or lockup), edit the master there and then export updated SVG/PNG into assets/logo/ in this repo.

Full logo/ — icon + wordmark lockup
Icon/ — standalone icon
Text stacked/ — icon above wordmark
OCL Branding Examples.gslides — usage examples deck
OCL Logo with everything.gdraw — master in Google Drawings
OCL-CIEL Combined.gdraw — OCL + CIEL co-branding