Components / PlatformTile

PlatformTile

A third-party provider’s mark on its own brand-colored tile, for surfaces where connections are browsed and chosen — the connections directory above all. For an inline identity mark inside a row, badge, or account line, use PlatformIcon instead: a colored chip is noise there.

import { PlatformTile } from '@layers/ui/platform-tile'

Rendered stock

House rules

• Brand color is the ONE sanctioned raw-hex path in the system. A vendor’s color is not ours to tokenize — it does not shift between our themes, and mapping it to a Strata token would misrepresent it. Values come from simple-icons’ dataset or the vendor’s own brand kit, copied verbatim, never typed from memory.
• A brand carries a PAIR — fill and mark — not a fill plus a universal white. SideShift is dark grey on pale blue, so any "white logo on a saturated tile" shortcut breaks on the first light-background brand it meets. The fill is any CSS background value, so Instagram's field is a gradient rather than a flat hex.
• Instagram is the one tile that does not clear 3:1, deliberately. Its white mark runs 1.52:1 against the yellow end of the gradient — which is exactly Instagram's own app icon, and WCAG exempts logotypes from contrast minimums. Every other pair is measured and clears the bar, App Store the floor at 3.13:1.
• Brand gradients are SAMPLED, never reconstructed from a CSS snippet found online. Instagram's stops come from binning their 180×180 Apple Touch icon by radius from the focal point and averaging each bin — the popular snippet is a fan approximation and lands visibly off.
• The tiles with no vendor behind them — Layers, Managed accounts, Website — must NOT take a hex. They follow --foreground / --background and invert with the theme like BrandLogo; pinning one would make it the only mark on the page that ignores dark mode.
• A provider we hold no faithful mark for gets a MONOGRAM of its own name, never a stand-in Lucide glyph. rules.md binds brand icons to PlatformIcon; a megaphone in a logo slot is read as the logo, which is the same misrepresentation as a wrong mark. The exception is a tile that represents no company at all (Website is the customer’s own domain) — nothing can be misrepresented there, so a generic glyph is the honest rendering and a monogram is not.
• Every tile carries an inset hairline in --border. Without it the near-black brands (TikTok, Apple, GitHub, OpenAI) dissolve into a dark theme’s background and the pale ones (SideShift, and the white fields under the multi-color Google Play and PostHog marks) dissolve into a light one.
• Sizes are sm/md/lg = 24/32/40px. The tile is aria-hidden wherever its provider name is already announced by an ancestor — ConnectionCard does exactly this.