Website — Brand Assets

Logo & Icon

The Sema Link brand icon is a speech bubble with a delivery checkmark on a dark rounded square. The bubble uses a teal-to-cyan gradient matching the brand colour (#009688).

All source SVG files live in docs/brand/ in the workspace root (outside the website repo).

Asset Inventory

In semalink-website/public/

File	Size	Usage
favicon.svg	Vector	Browser tab favicon (modern browsers)
favicon-32.png	32×32px	Browser tab favicon (legacy browsers)
apple-touch-icon.png	180×180px	iOS home screen icon
icon-192.png	192×192px	PWA / Android icon
icon-512.png	512×512px	PWA splash screen icon
og-image.png	1200×630px	Social media share preview image

In docs/brand/

File	Usage
icon.svg	Master icon source
logo.svg	Full logo (icon + wordmark)
logo-dark.svg	Dark background variant

Favicon Wiring

Favicon links are in index.html:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

PWA Manifest

public/site.webmanifest configures the Progressive Web App metadata:

{
  "name": "SemaLink",
  "short_name": "SemaLink",
  "theme_color": "#009688",
  "background_color": "#ffffff",
  "display": "standalone",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Regenerating PNG Assets

PNG assets are generated from the SVG source using the sharp library. If you update icon.svg, regenerate PNGs by running the export script in docs/brand/:

node docs/brand/export.js

Then copy the output files to semalink-website/public/.

Brand Colours

Name	Hex	Usage
Primary teal	#009688	Brand colour, buttons, links, theme colour
Dark teal	#00695c	Hover states, gradients
Light teal	#4db6ac	Gradient end, accents
Dark background	#070D0B	Icon background