OCL v3 Design System· Foundations
Review GitHub
Overview · Foundations · Logo & brand

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 it for site footers, documents, slide decks and email signatures. Choose black text on light backgrounds, white text on dark. Site headers use the icon on its own instead; see Headers & footers.

OCL full logo, black text
Full · Black text SVG PNG
OCL full logo, white text
Full · White text SVG PNG

Icon

Standalone icon. Use it on its own in site headers, with no name or wordmark beside it, and 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.

OCL icon, blue
Icon · Blue SVG PNG
OCL icon, white
Icon · White SVG PNG
OCL icon, white on dark
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.

Text stacked, black
Stacked · Black SVG
Text stacked, blue
Stacked · Blue SVG PNG
Text stacked, white
Stacked · White SVG PNG
Blue circle with white stacked text inside
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.

Headers & footers

How the logo sits in OCL websites and web apps, per the brand design (September 2026):

There is no one-line (horizontal) wordmark. The wordmark only exists stacked, in the full-logo and text-stacked files, so don't stand one in by typing the name next to the icon. If a layout needs a horizontal lockup, have it made from the Drive master (see Source files below).

Digital Public Good badge

OCL has been a verified Digital Public Good since January 2025. Show it with the Digital Public Goods Alliance's official badge: the color badge on light backgrounds, the white badge on dark. Always link it to OCL's registry profile, and don't recolor or redraw it.

Digital Public Goods badge, color
DPG badge · Color SVG PNG
Digital Public Goods badge, white
DPG badge · White SVG PNG

Link target: https://www.digitalpublicgoods.net/r/open-concept-lab. The files are unmodified copies from DPGA's badge usage guide, released under CC0, so no attribution is required.

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).
Open Concept Lab
Don't type the name next to the icon. Use the icon alone or the 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.