Brand¶
The canonical values used by the application are in packages/brand/tokens/brand.json. The supplied brief identifies the Keystone palette, Cwtch Joint logo and Dewi foundations as approved. The revised brand-system v1.1 guidance remains awaiting Nathan Jones's final acceptance.
The assets from cwtch-consulting-brand-system-v1.1.zip are committed under packages/brand/assets. The palette below matches the supplied colours/design-tokens.json. assets/manifest.json records the archive hash, original checksums, current checksums and any transformations. Logos include SVG masters and PNG/WebP exports at 1024 and 4096 widths; app icons include PNG/WebP sizes 16–1024 plus SVG and ICO. Fonts retain their source files and licences.
All logo and icon backgrounds are transparent. On 30 September 2026, at Nathan's request, opaque logo files were replaced byte-for-byte with the supplied transparent equivalents. Their existing filenames remain available for compatibility; light and dark describe the intended placement, not a baked-in background. App icons retain their original paths, colours, square dimensions and clear space, with only the SVG background rectangle removed. PNG and lossless WebP exports were rendered using Sharp 0.35.5; ICO files contain transparent PNGs at 16, 32 and 48 pixels. The manifest preserves the original archive provenance for every corrected file.
Use supplied transparent-light artwork on Canvas/Paper. Use the corresponding transparent-dark artwork on a dark background. Keep the horizontal logo at least 180 CSS pixels wide. Preserve aspect ratio and clear space (80 units for a symbol width of 420 units). Do not redraw, retype, crop, recolour or distort the mark.
Place logos directly on the intended page surface without adding a background panel to their wrapper. The documentation header uses the supplied white one-colour symbol on its green background; browser icons retain the Vivid/Muted colours.
The selector applies Vivid or Muted intensity, not a light/dark mode. It defaults to Vivid and does not follow the operating-system colour scheme. Intensity changes preserve the page and task state. The docs script copies existing canonical assets and generates its CSS/token export deterministically; generated docs assets must not be edited manually.
Palette¶
| Token | Vivid | Muted | Meaning |
|---|---|---|---|
| Welsh red | #C3373F |
#A05259 |
Limited emphasis and labelled errors |
| Keystone green | #19644C |
#4C7161 |
Primary action, success, structure |
| Slate blue | #286184 |
#526F83 |
Information, qualified links, focus |
| Gorse gold | #E5AF26 |
#B49B63 |
Small highlights and caution; use dark text |
| Anchor ink | #202B2B |
#202B2B |
Text and meaningful icons |
| Canvas | #F5F1E6 |
#EEEDE6 |
Page background |
| Paper surface | #FFFCF5 |
#F6F5EF |
Panels and controls |
Action labels use white on green; caution labels use Anchor ink on gold. Information and error examples also use words inside contrasting colour labels. Derived hover, pressed and disabled values in the token file are implementation values, not approved palette colours. Confirm contrast on actual states before production. Red/green are not used as the only signal.
Type and Welsh text¶
Both sites load Arvo-Bold.woff at 700 for headings, variable Lexend.woff at weights 100–900 for body and UI, and Hack-Regular.woff at 400 for code. Font faces use font-display: swap and are served locally. Licences and original TTF/WOFF files live in packages/brand/assets/fonts. The shared font-face file is packages/brand/src/fonts.css; each build copies it beside the fonts. No external font service is used.
Use Lexend 700 for a whole Welsh heading that contains characters not supplied by the Arvo release; never mix fallback glyphs in an Arvo heading. Preserve the sample words gŵyl, dŵr, tŷ and Cymru. No Welsh translation is inferred here.
The shared spacing scale is 4, 8, 16, 24, 32 and 48 pixels. The 4px and 8px corner radii are project implementation defaults, not brand specifications.
Accessibility¶
The intended target is WCAG 2.2 AA. Verify normal text at 4.5:1 and large text and applicable non-text controls at 3:1 in normal, hover, focus, selected, pressed and error states. Disabled controls are exempt from these WCAG contrast requirements, but should remain understandable. Test keyboard interaction, narrow reflow and enlarged text; automated checks alone do not establish conformance. No compliance certification is claimed.