Brand
Design guide
The Common Grounds Cooperative mark, colors, typefaces and the rules for using them, with downloads.
The mark
The Common Grounds Cooperative mark
Use the version that fits the surface. Every file is the same drawing with its colors changed; nothing here is redrawn.
Mark and name together
Lockups
The name is set from the typeface, not typed: the spacing between the letters is part of the logo. Use these files rather than placing the mark beside text of your own.
Room to breathe
Clear space and size
Keep clear space around the logo equal to 25% of the mark's height on every side. Nothing else goes inside that: no text, no edge, no other logo. The gap between the mark and the name in the lockups is 18% of the mark's height, and the files already include it.
Minimum sizes: 24px tall for the mark, 120px wide for the side-by-side lockup, 90px wide for the stacked one. Below those, use the mark alone.
The mark at the sizes a favicon and an app icon get. If it stops reading at 24px, the icon needs its own simpler variant.
Please do not
What not to do
- Change the colors
- The colors are most of what makes it ours. If you need a different one, take one of the versions on the design guide.
- Stretch or squash it
- Hold shift. Width and height always move together.
- Retype the name
- Setting it yourself will not match, however close the font looks. Use the files.
- Put it on a busy photo
- Put it on a plain panel, or clear some space behind it first.
- Repeat it as a background
- A logo tiled as wallpaper wears out. Use a plain colour or a pattern instead.
- Add effects
- No shadows, outlines, gradients or bevels. The files are finished.
Palette
Colors
Each ramp has a job. The number beside a step is its contrast against the paper, measured from the value the swatch is painted with; nothing on this page is typed.
Kraft primary
Brown paper: the bags, sleeves and labels a coffee shop goes through. The hero, the texture and the panels.
50
#F8F3EA
100
#EFE5D2
200
#E2D2B3
300
#CBB089
400
#B4976D
500
#977A53
600
#7A6142
5.15:1 Body text
700
#5E4A33
7.44:1 Body text
800
#433526
10.48:1 Body text
900
#2B2219
13.84:1 Body text
Receipt and char neutral
Receipt stock and the char of a roaster. Page backgrounds, body text, the dark bands and the primary button.
50
#F5F1E7
100
#EDE7D9
200
#E0D8C6
300
#CBC1AC
400
#A79D88
500
#7A6F5E
600
#5B5040
6.98:1 Body text
700
#453C30
9.59:1 Body text
800
#2F2920
12.76:1 Body text
900
#1E1B16
15.22:1 Body text
Compost accent
The green of compost. Links, and nothing decorative.
50
#EEF4EF
100
#D6E6D9
200
#ADCDB4
300
#84B18F
400
#5E926B
500
#4A7D56
600
#3D6B47
5.49:1 Body text
700
#2F5537
7.52:1 Body text
800
#234029
10.14:1 Body text
900
#172B1C
13.31:1 Body text
Ember signal
Ember, for the bean in the mark, a number or a highlight. Never a status color.
50
#FCEFE8
100
#F8D8C8
200
#F0B093
300
#E6865D
400
#D9622F
500
#C8471A
600
#A33A14
5.87:1 Body text
700
#7F2E10
8.09:1 Body text
800
#5C210C
11.10:1 Body text
900
#3D1608
14.14:1 Body text
The pairs the site relies on
Body text needs 4.5:1; large text, icons and control boundaries need 3:1. Every pair below is asserted by the build, so a palette change that breaks one cannot be published.
| Use | Pair | Ratio | Cleared for |
|---|---|---|---|
| Body text | ink on surface | 15.22:1 | Body text |
| Body text on a card | ink on surface-raised | 16.88:1 | Body text |
| Muted text | ink-muted on surface | 6.98:1 | Body text |
| Muted text on a sunken panel | ink-muted on surface-sunken | 6.30:1 | Body text |
| Faint text | ink-faint on surface | 4.37:1 | Large text and UI |
| Links | link on surface | 7.52:1 | Body text |
| Primary button label | on-dark on neutral.900 | 15.22:1 | Body text |
| Primary button label, hovered | on-dark on accent.700 | 7.52:1 | Body text |
| Text on kraft | ink on primary.300 | 8.26:1 | Body text |
| Kraft button on the dark band | ink on primary.300 | 8.26:1 | Body text |
| Step numbers in ember | signal.500 on surface-raised | 4.72:1 | Body text |
| Focus ring on kraft | ink on primary.300 | 8.26:1 | Body text |
| Headings in the brand color | primary.700 on surface | 7.44:1 | Body text |
| Text on the dark band | on-dark on surface-dark | 15.22:1 | Body text |
| Muted text on the dark band | on-dark-muted on surface-dark | 9.61:1 | Body text |
| Faint text on the dark band | on-dark-faint on surface-dark | 6.39:1 | Body text |
| Field error | danger on surface | 5.80:1 | Body text |
| Status note text | ink on primary.50 | 15.53:1 | Body text |
| Status chip label | primary.900 on primary.100 | 12.49:1 | Body text |
| Field and button boundary | line-strong on surface-raised | 4.85:1 | Body text |
| Focus ring | ring on surface | 4.27:1 | Large text and UI |
| Focus ring on a card | ring on surface-raised | 4.74:1 | Body text |
| Focus ring on the dark band | ring on surface-dark | 3.56:1 | Large text and UI |
Typefaces
Type
Both faces are open source and free to use. The site loads them itself; a document made elsewhere should install them rather than substitute.
Headings
Archivo Variable
Archivo set condensed (75% width), extra bold, in sentence case.
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
Body
Archivo Variable
Archivo at its normal width, regular weight at 16px or larger. Never lighter than 400.
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
Display
Archivo Variable
Archivo at its narrowest (62%), extra bold and in capitals: the hero line and a page title.
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
Labels and the ledger
IBM Plex Mono
IBM Plex Mono for eyebrows, statuses and anything that lines up, like a weigh ticket.
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
Interface
The pieces the pages are built from
Buttons, cards and fields, as they ship. Anything built to sit beside the site should use these shapes.
Buttons
One primary button per view. The corner radius is 0.25rem; the pill is for chips.
A field
A hint sits under the field, in the muted tier.
An error is bold and in the danger colour.
Chips and rules
Rules use line; control boundaries use line-strong, which is dark enough to find.
The dark band
Three text tiers on the dark surface: on-dark, on-dark-muted, on-dark-faint.
Breakpoints: sm 40rem, md 48rem, lg 64rem, xl 80rem. Page column 72rem; reading measure 68ch.
How we sound
Voice
We are
- plain
- practical
- neighborly
We are not
- corporate
- preachy
- breathless
Plain words, short sentences, and nothing that reads as though a machine wrote it. Say the specific thing.
Using these
What you may do
- Use the logo files as they are
- On menus, signs, listings, articles, event posters and social posts about us.
- Use the colors and typefaces
- To make something that sits beside our name look like it belongs to us.
- Resize the files
- Proportionally, and not below the minimum sizes on the design guide.
- Ask
- For anything not covered here, or for a version the design guide does not have.
Questions: hello@commongroundscoop.org
Everything
Take the whole set
Every file on this page plus a short usage note.