Visual Identity
Elements
Anything that has to look like Grain & Mortar takes its design from the live v8 site, and only from there.
Model pages
- grainandmortar.com/
The home page. - grainandmortar.com/websites/
Deep green #242D29 with sky #B3D6D3 type, floating pills, the outlined Capabilities grid, hairline accordions, the chartreuse Process timeline and the black footer. - grainandmortar.com/branding/
The branding page, with the same system.
Never a model
- The old v7 site.
- /maintenance/, even though it's live: its tan bands and filled tiles aren't the new design.
- A Claude Design system or brand guide export, where it differs from the live site.
The header, message bar and footer are rebuilt from the live site. Never leave them off a page design, and never set the logo as text.
Buttons
Pills, not squared corners: border-radius 9999px, padding 24px 36px, PP Mori at 22px, weight 500.
| Class | Use | Background | Text | Border |
|---|---|---|---|---|
| btn-pill-black | On light backgrounds | #030303 | #F7F5ED | none |
| btn-pill-outline-black | On light backgrounds | transparent | #030303 | 1px #030303 |
| btn-pill-light | On dark backgrounds | #F7F5ED | #030303 | none |
| btn-pill-outline-light | On dark backgrounds | transparent | #F7F5ED | 1px #F7F5ED |
btn-icon-nudge: A trailing arrow, fa-sharp fa-regular fa-arrow-rightbtn-icon-grow: A leading dot, fa-sharp fa-solid fa-circle-small- icon-circle-light and icon-circle-dark, for navigation and toggles.
Service pills
The floating pills on /branding/ and /websites/.
gm-chartreuse #DBE976gm-sky #B3D6D3gm-tan-dark #B9AF8BOrange #FF814A
Orange: Hardcoded for these pills only. It isn't in the palette, so don't use it anywhere else.
Measured from the live v8 site on 2026-10-31. The wording is for Mike to approve.