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 original files from cwtch-consulting-brand-system-v1.1.zip are now committed under packages/brand/assets. The palette below matches the supplied colours/design-tokens.json. assets/manifest.json records the archive hash and each file's provenance and checksum. 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.
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.
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.