Goodword
Design System
One system across the product and the marketing site. The web app is the source of truth: where this page and the site disagree, the app wins.
Identity
Brand marks
Two overlapping circles, each quartered — two people, and the part they share. The eight wedges are the eight core colours, so the mark and the palette are one system rather than two. These files are lifted from the web app, which is the source of truth; the SVGs below are the same paths the product ships.
Wordmark
The default. Use it wherever there is room — site header, decks, email signatures, anywhere the reader may not know the name yet.
Wordmark, reversed
For dark or photographic backgrounds. Reach for this rather than recolouring the primary wordmark by hand.
Symbol
The mark on its own. Favicons, avatars, app icons, social profiles — anywhere the name already appears beside it.
Clear space and minimum size
Keep clear space on every side equal to the height of the symbol. Below that, the mark starts competing with whatever sits next to it. Minimum sizes: the wordmark never below 120px wide, the symbol never below 24px — under that the quadrant lines close up and it reads as a blob.
What not to do
Don't recolour the mark. The eight colours are the palette; changing one breaks the link between the two.
Don't stretch, rotate, crop, or add shadows, gradients, or outlines. Scale it proportionally and leave it alone.
Don't set the name in a typeface and call it the wordmark. The lettering is drawn Domaine Display and ships as outlines, so it renders identically everywhere — retyping it does not.
Don't put the primary wordmark on a dark or busy background. That is what the reversed cut is for.
Files
SVG only — these are vector and stay sharp at any size. If you need a raster version for a tool that cannot take SVG, export it rather than tracing a screenshot.
Colour
Twelve families. Cream and clay carry the brand, canopy is our green, the rest are accents and states. Numbers are steps from lightest to darkest, not opacity.
Cream
Backgrounds and surfaces. Cream 100 is the page.
Clay
The warm accent. Clay 700 is our primary action colour.
Canopy
Our green. The marketing site calls this green and sage; canopy is the official name.
Grey
Warm greys for structure, borders and secondary text.
Accents
Used sparingly, for states, categories and highlights. Never as a primary surface.
Apricot
Peach
Inkstone
Sage
Teal
Wisteria
Pink
Grain
Typography
Two families do the work. Domaine for anything that should feel written; Haas Grotesk for anything that should feel operated.
Domaine Display · headlines
The right person at the right time
Serif display. Headlines and pull quotes only. Never body copy.
Domaine Text · long-form
Your network is the most valuable professional asset you have.
Serif text cut, for reading at length. Editorial and blog.
Haas Grotesk Text · interface
Connect your network and reach the right person.
Everything else: body, labels, buttons, forms. Licensed weights are Roman 400 and Medium 500 only.
JetBrains Mono · code and data
#901d00 · clay-700
Values, tokens, identifiers. Not for prose.
Rules
The app is the source of truth
These tokens come from the product design system. Where the marketing site disagrees, the site is wrong and should be corrected.
Build native, script last
Pages are built from real elements so the people who own the content can edit them. Reach for custom code only when a requirement genuinely cannot be expressed natively.
Two weights, on purpose
We license Roman and Medium. If a design needs Light or Bold, that is a purchasing decision, not a CSS one. Faking a weight in the browser is not acceptable.
Numbers are steps, not opacity
Clay 700 is a darker clay, not clay at 70 percent. Always reference a token by name rather than pasting a hex value.