feat(brand): add original ATLANTIS logo and brand assets#134

open8
perf/optimize
feat/brand
opened18d agobyOoliver
View on GitHubTwo-way sync enabledPR last imported 3h ago

Note

🤖 GPT-6.1-Sol on behalf of Oliver

Round 3 review fixes

Replace Confluence with Flow trident: one shaft divides into three curved upward flows with pointed tines. Update both apps' mark, lockup, SVG/ICO favicon, Apple-touch, ordinary and maskable icons, and landing OG artwork. Wordmark and component geometry remain intact. Maskable artwork fits the central safe circle; the existing brand test now checks downloadable asset responses.

Own-tip verification: format, lint, typecheck, production build, 235 web tests, 76 Playwright tests and landing lint/build passed. Human review: compare the concept sheet and selected mark at 16/32/64/256px, header/favicons in both themes, and maskable icon placement. The previous Confluence evidence below documents the before state; Flow trident is the shipping mark.

Replace the raster Cisco-style bar-and-wave logo with an original Flow trident mark. Three input paths converge at a diamond node and continue as one stream, matching ATLANTIS's aggregation work. The mark has two paths on a 32-unit grid and stays readable at 16 pixels. Its blue is the dashboard's existing --primary: #2563eb token.

Layer 5 is based on perf/optimize in #133, following #131, #130 and #129. Nothing merged. Layout changes only accommodate the mark; the header wordmark shrinks below the small breakpoint so the theme control stays visible at 320 pixels.

Concepts and visual review

Four distinct hand-drawn concepts were compared at actual 16/32/64/256 pixel sizes on light and dark backgrounds. Confluence has the clearest small-size input lanes and the most direct aggregation meaning. Flow A is closer to familiar triangular technology marks; Tidal packet is a common waveform; Stream bend suggests RSS or routing more than analysis.

The alternate concepts remain available for Oliver to choose instead. The interactive comparison sheet includes downloadable SVGs for all four concepts. The sources, all 32 PNG renders and decision notes remain under /tmp/atlantis-frontend-overhaul/brand/.

Four logo concepts in light and dark contexts at 16, 32, 64 and 256 pixels

Before, the raster logo:

Before: Cisco-style vertical bars and rising signal curve

After, the selected original mark and outlined lockup:

After: Confluence mark at 16, 32, 64 and 256 pixels in both themes, plus ATLANTIS lockup

Assets and integration

Both apps/web/static and apps/landing/public contain logo-mark.svg, the font-free outlined logo-lockup.svg, favicon.svg, favicon.ico with 16/32/48 images, apple-touch-icon.png at 180, and icon-192.png / icon-512.png. The landing site also has a 1200×630 og-image.png and OG/Twitter metadata. Production absolute OG URLs use the existing PUBLIC_SITE_URL build setting; previews without it use a relative local image path.

The Svelte and Astro logo components reference the deployed SVG mark through <use>, inherit the theme's CSS blue, and use each app's existing CSS font for the live wordmark. The lockup has the accessible name ATLANTIS; decorative parts stay hidden from assistive technology. Both old favicon.png files and every reference are removed. The landing site's legacy cisco-blue token becomes brand-blue, matching the dashboard. There is no existing manifest or installation flow, so the 192/512 PNGs are supplied without adding a PWA manifest or maskable installation behavior.

The SVG favicon is 312 bytes versus the former 9,582-byte PNG, a 96.7% reduction. The ICO fallback is 870 bytes. Total public brand assets are 11,071 bytes for web and 35,277 bytes for landing, including its OG image. These are file-size measurements, not a new page-performance benchmark. Layer 4's timings are not re-measured or claimed as results of this PR.

Verification and human review guide

Automated checks pass: bun run format, bun run lint, bun run typecheck, bun run test:web with 220 tests, bun run test:e2e with 72 tests, bun run --cwd apps/landing lint, and bun run build:landing. The changed Astro files also pass the installed Astro Prettier plugin explicitly. New e2e cases verify the accessible logo, keyboard home navigation, 320px header control bounds and spacing, and SVG/ICO/Apple icon HTTP 200 responses in both themes.

Independent manual Chromium QA completed 183 checks with no open layer-5 regression. It covered all eight dashboard cards, all 12 file charts, controls, hover/keyboard/legends/brush/drilldown, URL/history, lazy activation, empty/error recovery, both themes and 320/390/768/1280/1920 layouts. Logo painting and inherited color were verified with pixels, icon responses with HTTP/content types, and the landing links and 1200×630 OG image with browser navigation/decoding. The original 320px clipping finding was fixed and rechecked. The separate final header browser pass completed 50 checks at 320/360/390/768/1280 pixels in both themes, with no page or console errors. At 320 pixels, the visible wordmark-to-Home gap is 8px and the theme button ends at 301.77px. Keyboard links, theme persistence and actual blue mark painting pass on the final deployed build. The stable landing preview also passes the final confirmation. Reports are brand/qa/report.txt and brand/qa/final-header-review.md locally. All 330 broad-pass screenshots and raw real-data observations remain private under /tmp/atlantis-frontend-overhaul/brand/qa/.

For human review:

  • Compare all four concepts at 16 pixels and decide whether Confluence is the preferred direction. All alternatives remain selectable through their downloadable SVGs.
  • Open Home, a dataset, Files and an error route on perf :8090. Check the same mark, unchanged wordmark font, light/dark colors and keyboard home link. At 320 and 390 pixels, every header control should remain visible and usable.
  • Open the landing preview or a PUBLIC_SITE_URL build. Check the mark, three outbound links, SVG and ICO favicon links, Apple icon and 1200×630 public-only OG image. Review the separate outlined asset wordmark if it will be used outside the apps.
  • Native Safari/Firefox favicon selection, Apple home-screen presentation and a full screen-reader session remain manual checks. No manifest/install experience is introduced.

Only the isolated perf stage was redeployed. Its data mount is read-only; source database metadata and the recorded prod process state remain unchanged. Test/prod :8080 and Cloudflare were not modified. Private real-data QA screenshots remain local; only public brand evidence is attached here.

Changes made by GPT-6.1-Sol through the Codex harness in T3 Code.

Original trident concepts and native-size theme comparisons

Before: Confluence. After: selected Flow trident

Checks

All checks passed

Added 8 commits

  • style(landing): format branded Astro components0896bb9
  • fix(brand): keep header controls visible on narrow screens129c3c7
  • feat(brand): add original confluence mark and icon assets55bb4ef
  • test(brand): assert the actual rendered theme59f9666
  • feat(brand): use accessible logo lockups in both apps947fa2f
  • feat(brand): replace Confluence with branching flow tridentae37dbb
  • fix(brand): preserve spacing in the compact headeraee66d0
  • test(brand): cover downloadable and maskable iconsf75e689