Lossless Changelog
product

Lossless branding, track record table, design system, and logo variants

The site got its Lossless colors, picked a wordmark out of five nerdy candidates, and grew a portfolio page: 70+ investments spanning 2012 to 2026, filterable by vehicle, sector, exit, and year.

Michael StatonMusic Editoraugmented with Claude Code on Claude Opus 4.6

Brand & Theme

  • Replaced default blue palette with full Lossless Group brand colors: cyan #22A6B5, purple #9138E0, crimson #D9233B, orange #F59C49.

  • Added signature 112-degree 4-stop brand gradient with CSS utilities: .gradient-text, .gradient-bg, .gradient-bg-subtle, .gradient-border, .gradient-line.

  • Dark mode uses Jaguar Black #080005 background with Mirage Purple #1A0F2B cards.

  • Favicon updated to "mps" text on gradient background.

Logo Variants

  • Created 5 SVG logo concepts in public/trademarks/ using nerd-friendly monospace fonts (JetBrains Mono, Fira Code):

    • v1-terminal: monospace with animated blinking cursor

    • v2-prompt: shell prompt style ~/mpstaton $

    • v3-bracket: code object {mpstaton}

    • v4-underscore: variable name mp_staton

    • v5-tag: JSX self-closing tag <mpstaton /> (selected as primary)

  • Header nav now renders the JSX tag SVG logo.

Design System

  • Added /design-system hub page with card grid linking to subsections.

  • Added /design-system/logos page showing all 5 logo variants with dark/light previews, font info, and usage notes.

Track Record / Portfolio

  • Created src/content/track-record/deals.json with 70+ investment deals spanning 2012-2026.

  • Created src/content/track-record/funds.json with 11 fund involvements.

  • Portfolio page (/portfolio) renders both as styled, interactive tables.

  • Filters: Vehicle, Sector, Exit type, Year, and Tags dropdowns with AND logic, active state highlighting, clear button, and live count.

  • Sorting: Clickable Multiple column header with 3-state sort (desc/asc/original). Parses numeric value from strings like "10x".

  • Grouped companies: Deals with multiple investments (Andela, Science.xyz, Sava) show as a single primary row with expand/collapse toggle for sub-rows.

  • Comma-separated sectors and exits split into individual dropdown options for filtering.

  • Color-coded tag pills: purple (Unicorn), crimson (Dragon), cyan (IPO), orange (Exit).

Infrastructure

  • Added pnpm-workspace.yaml with packages: [] so pnpm install runs independently, not as part of the parent monorepo workspace.

  • Added .npmrc for workspace root check bypass.