---
id: portfolio.ds.site-logo
name: "Site Logo"
type: pattern
status: active
relations: [{"type":"related_to","target":"portfolio.ds.about-design-system"},{"type":"related_to","target":"portfolio.ds.header-home-button"},{"type":"related_to","target":"portfolio.ds.project-hero-item"}]
sources: ["scripts/generate-site-logo-assets.mjs","apps/portfolio-site/public/media/site-logo.svg","apps/portfolio-site/public/media/site-logo-animated.svg","apps/portfolio-site/src/design-system/docs/site-logo.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/generated/SiteLogoMark.astro","packages/design-system/src/components/HeaderHomeButton.astro","packages/design-system/src/components/ProjectHeroItem.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/site-logo.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/site-logo.astro"]
---
# Site Logo

## Purpose
Canonical black static and animated SVG marks plus a generated inline mark for Post-AI Systems.

The mark uses a square canvas and exactly two conceptual elements: a detached vertical side and a connected right-facing angle. Together they form a regular triangular outline. The animated variant treats the detached side as a blinking cursor without moving or changing the connected angle.

## Use
- Isolated brand-media previews and approved exported surfaces.
- The static variant when motion is unnecessary or unavailable.
- The animated variant when cursor motion supports the surrounding media context.

## Contract
- Keep `scripts/generate-site-logo-assets.mjs` as the only editable geometry source for both standalone Site Logo variants, the inline mark and approved derivatives.
- Keep the square `512 × 512` viewBox and transparent background.
- Use solid black `#000000` for both standalone production marks on a transparent canvas.
- Let the generated inline mark inherit `currentColor`: Header keeps it black, while explicitly approved inverse surfaces may render it white without filters or duplicated geometry.
- Preserve independently addressable filled `site-logo-cursor` and `site-logo-chevron` shapes.
- Keep both gaps between the detached vertical side and the diagonal sides visible.
- Keep the connected angle stable in every variant.
- Generate both standalone SVG files and the inline mark from the same canonical shapes with `npm run generate:site-logo`; never redraw any output separately.
- Allow the Favicon Media component to reuse the canonical geometry with its own explicit black-background and white-mark contract.
- Only the detached side may blink.
- Respect `prefers-reduced-motion` by leaving the complete static mark visible.
- Integrate the generated inline mark through approved components without filtering or redrawing it when same-document cursor synchronization is required.

## Current Usage
- Design System Media preview.
- Header Home Button animated mark.
- Project Hero Item inline description mark.

## Code Paths
- `apps/portfolio-site/public/media/site-logo.svg`
- `apps/portfolio-site/public/media/site-logo-animated.svg`
- `packages/design-system/src/components/generated/SiteLogoMark.astro`
- `apps/portfolio-site/src/design-system/docs/site-logo.astro`
- `scripts/generate-site-logo-assets.mjs`
- `packages/design-system/src/components/HeaderHomeButton.astro`

## Do Not Use

Do not create locally redrawn variants or use color filters outside the generator's `currentColor` contract.

## Accessibility

Both standalone SVG files provide an accessible title and description. The decorative inline mark inherits the Header link's accessible label. Animated cursors provide a static reduced-motion fallback.

## Verification
- Open both standalone SVG files directly and confirm that their geometry matches.
- Confirm that only the detached vertical side blinks.
- Confirm that reduced motion leaves the complete mark visible.
- Run `scripts/design-system-graph --check --no-write`.
- Verify the Media preview at mobile, tablet, desktop, and ultra-wide preview widths.