Brand

Guidelines for using the ML4Good name, logo, colors, and visual elements.

Lockup

The full logo combines the mark with the wordmark. Use it wherever space allows.

ML4Good lockup, white on dark
SVG PNG White
ML4Good lockup, color on light
SVG PNG Color

https://ml4good.org/static/brand/white_20260127.svg https://ml4good.org/static/brand/white_20260127.png https://ml4good.org/static/brand/color_20260127.svg https://ml4good.org/static/brand/color_20260127.png

Mark

The logomark can be used standalone as an icon or avatar. Do not alter, rotate, or recolor beyond the provided variants.

ML4Good mark, white on dark
ML4Good mark, white on brand
SVG PNG White
ML4Good mark, color on light
ML4Good mark, color on grey
SVG PNG Color

https://ml4good.org/static/brand/mark_white_20260219.svg https://ml4good.org/static/brand/mark_white_20260219.png https://ml4good.org/static/brand/mark_color_20260219.svg https://ml4good.org/static/brand/mark_color_20260219.png

Colors

Three palettes: brand green, governance violet, and technical amber.

Brand green

Governance (violet)

Technical (amber)

Structural

Typography

One typeface across the site, with weight and size creating hierarchy.

Outfit

Aa Bb Cc 123

Variable weight (400-700). Available on Google Fonts.

Display — 36px / 700

ML4Good

Heading — 24px / 600

Section heading

Body — 16px / 400

Body text at regular weight with relaxed leading for comfortable reading.

Small — 14px / 400

Small text for captions, labels, and metadata.

Visual style

Space creates hierarchy. Borders provide structure, but generous padding and vertical rhythm do the real work of separating content.

Spacing over borders

Generous vertical space separates major sections. Let whitespace establish hierarchy before adding any visual dividers.

Straight edges, round buttons

Content cards and image containers have sharp corners. Interactive elements (buttons, pills) use rounded-full for contrast.

Zebra texture

A subtle diagonal hatch at 7% white opacity adds tactile depth to empty or descriptive panels. Use sparingly on dark backgrounds.

Download SVG

Dark canvas

Deep green #011f0e as the base. White text at varying opacities (80%, 60%, 50%, 40%) creates typographic depth.