Groundnote brand#
The files live in assets/brand/ and are distributed with the repository.
The Apache-2.0 licence does not grant rights to the project's name or marks (section 6), so a fork
or a different product should use its own name and logo.
The mark#
A note, planted by a short stem in a line of ground. The dot where the stem meets the ground is the source: the meeting or mail the note was taken from. That is the whole idea of the project in one picture, so keep the three parts together. The note never appears without the ground line.
| File | Use |
|---|---|
mark-light.svg, mark-dark.svg |
The symbol alone, 64 × 64 grid |
wordmark-light.svg, wordmark-dark.svg |
Symbol and name, for the README and the docs site |
favicon.svg |
Browsers; switches to the dark colours with prefers-color-scheme |
favicon.ico (16, 32, 48), favicon-32.png |
Older browsers |
apple-touch-icon.png (180), icon-512.png |
Home screen and web manifest |
avatar.png (500 × 500), avatar.svg |
GitHub organisation avatar |
social-preview.png (1280 × 640), social-preview.svg |
GitHub social preview, link cards |
The -light files are for light backgrounds, the -dark files for dark ones.
Colours#
| Role | Light background | Dark background |
|---|---|---|
| Note (primary) | #2E6A4C moss |
#7CC49A |
| Source dot (accent) | #C4693A clay |
#E59A6B |
| Ground line, text | #1C2621 ink |
#E8E4DA |
| Background | #F7F4EC paper |
#0E1411 |
| Secondary text | #55615A |
#A3ADA6 |
On light backgrounds, clay text on a pale clay fill uses the darker #9C4E26 to stay above 4.5:1.
Clay is only for the source: the dot, a quote, the provider that sends data abroad. Do not use it for buttons or decoration, or it stops meaning anything.
README graphics#
The diagrams in assets/readme/ use the same roles, set against GitHub's page colours. They have
no background of their own, so they sit on whatever theme the reader uses.
| Role | Light | Dark |
|---|---|---|
| Card fill | #F7F4EC |
#161B22 |
| Card edge | #D9D3C4 |
#30363D |
| Text | #1C2621 |
#E6EDF3 |
| Secondary text | #55615A |
#A3ADA6 |
| Accent, accent chip fill | #2E6A4C, #E3EFE7 |
#7CC49A, #1B2B22 |
| Source and data abroad, chip fill | #9C4E26, #F6E6DB |
#E59A6B, #2E211A |
| Arrows | #7D8780 |
#7D8590 |
| Planned, not built (dashed) | #55615A |
#9AA39D |
Something that is not built yet is drawn with a dashed edge and labelled "planned". Body text is 17 px on a 640 px wide canvas, so it stays near 9 px when a phone shrinks the image.
The terminal recording uses its own dark surface in both themes: background #0E1411, title bar
#18201C, edge #30363D, comments #9AA59E, prompt #7CC49A, labels #9CC9B0, quotes #E59A6B.
It plays once and stays on the result; with reduced motion it shows the result at once.
Type#
The wordmark is set in Space Grotesk SemiBold (SIL Open Font License) with tracking −1 %, then
converted to outlines, so no font is needed to display it. Always lowercase: groundnote. In
running text the name is written Groundnote.
Spacing and size#
- Clear space around the mark: half its width on every side.
- In the wordmark the gap between symbol and name is 20 units of the 64-unit grid. Do not rearrange the two.
- Smallest size: 16 px for the symbol (the 32 px raster icon leaves out the two lines inside the note), 20 px height for the wordmark.
Please don't#
- Recolour the mark, apart from the light and dark sets above, or use a single flat colour.
- Put the light mark on a dark background or the other way round.
- Remove the ground line or the dot, or move the dot off the stem.
- Rotate, outline, add shadows or gradients.
- Set the name in another typeface next to the mark.