The website is the brand's home ground: code, not export discipline, keeps it on-brand. Tokens carry the palette, type, spacing, and motion. If a page needs a value the tokens don't provide, the system is incomplete. Fix the tokens, not the page. The studio team owns this touchpoint.
Identity here
- Logo: the primary centred lockup holds the top nav; the avatar covers favicons and compact contexts. Variants, files, and clearspace: 4.1 Logo.
- Colour and type: never chosen per page. Semantic tokens only: 4.2 Colour, 4.3 Typography. Embedded graphics and imagery follow the same palette.
- Motion: transitions and animation run on the motion tokens (Motion); no hardcoded durations or easings.
- Icons: brand icons only, prepared to system rules: 4.4 Iconography.
Specs
| Asset | Size | Format | Max weight | Notes |
|---|---|---|---|---|
| Open Graph image | 1200×630 (1.91:1) | JPG/PNG | 1 MB | unique per page, absolute URL in the meta tag |
| X card image | 1200×628 | JPG/PNG | 1 MB | summary_large_image; usually the OG image reused |
| Favicon | SVG source + 32×32 PNG + ICO | SVG/PNG/ICO | – | avatar logo variant; lives in assets/icons/ |
| Apple touch icon | 180×180 | PNG | – | assets/icons/apple-touch-icon.png |
| Page imagery | ratio set at render | – | – | + img-1x1 / img-3x2 / img-4x3 / img-16x9 / img-21x9, crop with the image component, not in the export |
Specs verified against platform documentation: 2026-07-05.
The full meta-tag set is already wired into templates/page-template.html; the per-tag reference lives in SEO best practices.
Templates & assets
- Page template: every new page starts from
templates/page-template.html; the SEO head, layout hierarchy, and script order are already correct there. - Default OG image:
assets/images/og/og-default.jpg, the fallback when a page has no bespoke share image. Bespoke OG images live alongside it inassets/images/og/. - Draft imagery: the placeholder service returns an SVG at any size:
https://bydefault.design/image/{width}x{height}. Use it while layouts settle; replace before ship.
Don't
Don't hardcode brand values
A hex code or pixel value on a page is a fork of the brand. Every colour, size, and duration routes through a token.
Don't ship a page without its share image
A missing OG image means the platform picks the preview. Every page carries a 1200×630 image and a unique description.
Don't crop imagery in the export
Baked-in crops break at other breakpoints. Export generous source images and let the ratio classes crop at render.
Tools
- Image Placeholder: draft-stage imagery at exact dimensions
- SVG Cleaner: prepares icons and inline SVG to system rules
Checklist
- Unique title (50–60 characters) and meta description (150–160)
- OG image present at 1200×630, absolute URL, unique to the page
- Favicon set referenced in the head
- Zero hardcoded values: colour, type, spacing, and motion all from tokens
- Imagery cropped by ratio classes, alt text on everything
- Keyboard navigation works; WCAG 2.1 AA holds; Lighthouse 90+