---
title: "Website"
subtitle: "The one touchpoint where code enforces identity"
description: "How the brand shows up on the web: token-driven identity, social sharing imagery, favicons, page imagery ratios, and the pre-publish checks."
author: "Studio"
section: "Touchpoints"
layer: "core"
subsection: "Web"
order: 1
status: "published"
access: "team"
brand: "internal"
---

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](/brand/logo.html).
- **Colour and type**: never chosen per page. Semantic tokens only: [4.2 Colour](/brand/color.html), [4.3 Typography](/brand/typography.html). Embedded graphics and imagery follow the same palette.
- **Motion**: transitions and animation run on the motion tokens ([Motion](/design-system/motion.html)); no hardcoded durations or easings.
- **Icons**: brand icons only, prepared to system rules: [4.4 Iconography](/brand/iconography.html).

## 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` + `img-1x1 / img-3x2 / img-4x3 / img-16x9 / img-21x9`, crop with the [image component](/design-system/image.html), 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](/docs/seo-best-practices.html).

## 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 in `assets/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.

<div class="grid cols-2 gap-m">
  <div class="asset-card">
    <div class="asset-card-preview asset-card-preview--light asset-card-preview--fill">
      <img src="/assets/images/og/og-default.jpg" alt="Default Open Graph share image">
    </div>
    <div class="asset-card-footer">
      <p class="asset-card-title">og-default.jpg, 1200×630</p>
      <div class="asset-card-actions">
        <a class="button" data-size="small" data-icon-only href="/assets/images/og/og-default.jpg" download data-tooltip="Download" aria-label="Download og-default.jpg">{{icon:download}}</a>
      </div>
    </div>
  </div>
  <div class="asset-card">
    <div class="asset-card-preview asset-card-preview--light asset-card-preview--fill">
      <img src="/image/1200x630" width="1200" height="630" loading="lazy" alt="">
    </div>
    <div class="asset-card-footer">
      <p class="asset-card-title">Bespoke OG template, 1200×630</p>
    </div>
  </div>
</div>

## Don't

<div class="grid cols-2 gap-m">
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't hardcode brand values</h4>
    <p class="card-description">A hex code or pixel value on a page is a fork of the brand. Every colour, size, and duration routes through a token.</p>
  </div>
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't ship a page without its share image</h4>
    <p class="card-description">A missing OG image means the platform picks the preview. Every page carries a 1200×630 image and a unique description.</p>
  </div>
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't crop imagery in the export</h4>
    <p class="card-description">Baked-in crops break at other breakpoints. Export generous source images and let the ratio classes crop at render.</p>
  </div>
</div>

## Tools

- [Image Placeholder](/tools/image-placeholder.html): draft-stage imagery at exact dimensions
- [SVG Cleaner](/tools/svg-cleaner.html): 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+