One mark, one small core of colour, one type set. A four-fold pinwheel of the Shyne “S” in gold, beside the word in Fraunces; green for everything interactive, gold for the key — on a charcoal / paper neutral ground.
The mark is four copies of the wordmark’s own “S”, rotated about a shared centre. On neutral surfaces the pinwheel stays gold while “Shyne” is white in dark mode and black in light mode. The green square is the app icon, a different object.
Only three grounds matter — the neutral surface, green and gold. Every one is a core token, nothing hard-coded. Toggle ☾/☀ to see the neutral flip between dark and light; the lockup holds on all of them. On a green or gold fill the lockup reverses whole — mark and word together — to --on-brand. The app icon set beside it never reverses: its plate is the icon.
This is the only place the green square belongs. An app icon has to be a solid, tappable object that survives a Dock, a tab strip and a home screen — so here, and only here, the mark sits on the plate. In product and marketing chrome the mark stands alone. The mark is centred at 62% of the tile, 112 → 28 px; below ~24 px its negative space closes up and it reads as one gold ornament rather than four S’s — the intended floor, not a fault. The deep-green tile is the shipped icon (favicon, dock, touch, tray); charcoal and gold remain as alternates.
Four grounds, three inks, the mark’s own gold + plate, green + gold + the deep green + one on-brand ink, four status colours — each with a dark and a light value. The hexes below are read live from /theme.css — the one file both apps ship — and update when you toggle the theme.
Fraunces is the mark and the product’s display voice — italic for the one word that shines. General Sans is the marketing face: the landing and the 30 programmatic pages set every headline in it. Inter for reading, JetBrains Mono for the machine layer.
Same markup in dark and light: gold pinwheel, white or black “Shyne”, green button and theme ink links.
One construction for the mark; one small core of tokens for the colour.
letter-spacing -.005em1.05em beside the word and 62% inside an app tile. Chrome paints mark.svg as a CSS mask. In the landing navbar the mark stays gold while “Shyne” follows the theme: white on dark and black on light.--brand-plate tile: browser favicon and macOS app icon now share the exact same 95% green squircle, restrained glass edge and elevated gold emblem. The supplied emblem paths and gold colour remain unchanged. There is no white outer tile or nested-icon effect.apps/www/public/logo-assets folder as SVG, PNG, ICO and ICNS files.#e2b256 for the pinwheel in neutral landing and brand lockups. “Shyne” uses white on dark and black on light. packages/brand/theme.css — imported by both apps and served to this page as /theme.css, so the swatches above can’t drift. The light/dark/system preference is shared across shyne.ai and app.shyne.ai via one cookie. Deck / document themes are separate and brand-neutral. Minimum clear space around the lockup = the width of the mark.