ABF 2026 Design System

The logo — Deep Teal

Jeff’s Deep Teal lockup, shown at real sizes on the brand ground and reversed. The header above is the live implementation with a 2× retina asset.

The Albert Baker Fund — primary lockup with tagline, Deep Teal
Primary + tagline — the header lockup. Carries the woodcut mark, wordmark and tagline.
The Albert Baker Fund wordmark with tagline, Deep Teal
Wordmark + tagline — the alternative when the mark is already present elsewhere, or for tight headers.
The Albert Baker Fund lockup reversed in off-white on Deep Teal

The Reverse variant, for the deep-teal footer and any teal band. This is a separate file from Jeff’s set — the Deep Teal logo would disappear against this background.

ABF site icon — the woodcut mark
Site icon / favicon, built from the woodcut mark on the brand ground.

This page is the live ABF 2026 design system — the real theme, the real fonts, the real palette. Every color below comes from theme.json, so the block editor can only offer these six and nothing else.

Heading hierarchy

H1 is Sorts Mill Goudy in Deep Teal. H2 and H3 are Figtree, all-caps, in Mulberry. H4 returns to Deep Teal so long pages don’t become a wall of color.

This is a heading three

Body copy is Goudy at a fluid size, so it scales between mobile and desktop without breakpoints. Accented characters render from the latin-ext subset — Français : bourses d’études disponibles.

This is a heading four

Both faces are self-hosted from the theme — no calls to Google’s CDN.

The palette

Deep Teal is the primary. Mulberry carries subheads. Goldenrod and Bright Teal are decorative only on light grounds — they fail contrast as text and must sit on a teal band instead.

DEEP TEAL
#003746
12.5:1 — AAA

MULBERRY
#9e005a
7.9:1 — AAA

PINK
#ed037c
4.2:1 — large text only

BRIGHT TEAL
#00a9a1
2.9:1 — decorative only

GOLDENROD
#f99f1c
2.1:1 — decorative only

OFF-WHITE
#fffdeb
the page ground

Reversed panels — two accents

Both sit on Deep Teal and differ only in the accent, following the brand book’s audience guidance. Registered as block styles, so they are one click in the editor rather than hand-picked colors.

Support a student

Donor — goldenrod. Goldenrod on Deep Teal measures 6.1:1, which passes AA for body text at any size. The safest of the two, and the one to use when the accent may need to carry small text.

Give today

Apply for a scholarship

Student — pink. Pink on Deep Teal measures 3.0:1. That is exactly the AA floor for large text, so it is fine for this bold all-caps subhead but must never carry body copy on teal. Body stays off-white at 12.5:1 in both variants.

Start your application

Note on buttons: a pink button on teal is a trap — off-white text on pink is 4.2:1 and deep teal on pink is 3.0:1, both short of the 4.5:1 a normal button label needs. Both variants therefore use an off-white button with deep-teal text at 12.5:1, and take the accent on hover.

Brand gradients

DONOR
deep teal → bright teal

STUDENT
pink → goldenrod

Buttons and links

Apply for a scholarship
Make a gift

Inline links use Mulberry and darken to Deep Teal on hover — here is a link in running text — so they read as part of the brand rather than browser default blue.