09 · Social
Four tiers of color, one voice
Draft for review · tiers from Design System R5; posting rules proposed by Hyperakt
Social is where the brand shows up most often and moves fastest. The system gives every post one of four looks, so a feed reads as one organization even when six people are posting.
The four tiers
From the design system
1
Solid
One core color, cream type. For quotes, announcements, and anything that has to be read in two seconds.
2
Two to three colors
A simple mosaic crop behind a headline. The everyday post.
3
Four or more
The full mosaic. Campaign moments, celebrations, event announcements.
4
Color frame
Mosaic at the edges, cream in the middle, room for a photo or a longer message.
The tier system as laid out in the design presentation. Each row is one tier; each column is a different crop or color choice.
The tiers with content: announcements, grant applications, scholar spotlights, event invitations, and photo posts.
Anatomy of a post
Proposed
Grant applications open October 1
Tier 2 · headline in Marr Sans
Caption
Nonprofits across all eight counties: our fall grant cycle opens October 1. Funding, plus the training and connections that go beyond the grant. Link in bio to start your application.
Alt text
Headline "Grant applications open October 1" on an orange and magenta mosaic tile with the Area Foundation monogram.
Rules in play
One tier. One headline. First-person plural. A next step. Alt text on every image. No hashtag pile: three at most, and only ones people follow.
Avatars
Proposed
Default avatar
The cream monogram on a two-color mosaic crop. It reads at 40px, and the two colors keep it lively without noise. Use the magenta and teal version on every channel so people recognize the account instantly.
Alternates
Other two-color crops from the same family. Reserve them for sub-accounts or a deliberate seasonal change, never a rotation.
Campaign avatar
The navy monogram on the full mosaic. For launch moments and the annual campaign, then back to the default.
Do and don't
- Pick a tier before you design. If the post is mostly words, tier 1 or 4. If it's a moment, tier 3.
- Headlines in Marr Sans Condensed, sentence case, five to eight words. Everything else in Inter.
- Photos follow the photography rules. Real people, daylight, no filters. Tier 4 frames them.
- Sign every tile with the monogram or the short wordmark, small, in a corner.
- Don't mix tiers on one tile. A solid with a mosaic corner is neither.
- Don't put body copy on the mosaic. That's what the caption is for.
- Don't stretch the wordmark to fit a story. Use the two-line forms or the monogram.
- Don't invent colors for a holiday. The palette has thirty-four values. One of them fits.
Canva templates for each tier, in square, portrait, and story sizes, are being prepared for the Downloads page, with the fonts embedded so nothing falls back.