Brand colours on the marks; round the app's corners; move the lights in
Simple Icons publishes each brand's own hex next to its glyph, and the build was throwing it away. Tiles now carry it - Gmail red, Drive blue, Chat green, Gemini violet - and the glyph is drawn black or white by the tile's perceived brightness, since brand colours are picked to look right rather than to carry a white mark. GitHub and Notion are near-black, Snapchat is pure yellow, and a fixed white glyph loses one end of that. An app's right corners are now rounded on its own layer. The container's rounded-xl could never have clipped them: an app is a native view sitting on top, not something the shell lays out, so it kept square corners and overhung the curve. Only the right pair - the left edge butts against the nav, and rounding it would notch the middle of the window. The traffic lights move to (26, 24) and the drag strip deepens to match, so they sit inside the window's margin instead of against its corner. Adds Gemini, Claude, ChatGPT, Linear, ClickUp, HubSpot, Shopify and Cloudflare to the host table.
This commit is contained in:
@@ -261,10 +261,18 @@ returned a sign-in page's icon for anything behind a login, nothing at all for a
|
||||
host, and cached both answers past any way of asking again. A "refresh icons" button could
|
||||
not fix that, because the staleness was not local.
|
||||
|
||||
Colours are Tailwind 500s, chosen by hashing the host rather than at random — you find
|
||||
things by their colour, and a colour that moved every launch would be worse than none.
|
||||
Each tile carries the **brand's own colour**, which Simple Icons publishes alongside the
|
||||
glyph — Gmail red, Drive blue, Chat green, Gemini violet. The glyph is drawn black or
|
||||
white depending on the tile's perceived brightness, because brand colours are chosen to
|
||||
look right rather than to carry a white mark: GitHub and Notion are near-black, Snapchat
|
||||
is pure yellow, and a fixed white glyph loses one end of that range.
|
||||
|
||||
The build turns Simple Icons' 15MB of SVG files into one 4.5MB map of slug to path data,
|
||||
A host with no mark falls back to a Tailwind 500 chosen by hashing the host, so it is
|
||||
still stable — you find things by their colour, and one that moved every launch would be
|
||||
worse than none.
|
||||
|
||||
The build turns Simple Icons' 15MB of SVG files into one 4.5MB map of slug to path and
|
||||
hex,
|
||||
written to `public/` so it is fetched once at runtime rather than parsed into the JS
|
||||
bundle at every start. The bundle stays at 233KB. The map is generated by `npm run icons`,
|
||||
which `npm run build` runs, so it is never committed and never stale.
|
||||
@@ -277,7 +285,16 @@ says only that it is Google, not which of a dozen products.
|
||||
## The window
|
||||
|
||||
There is no title bar and no toolbar, so in a normal window the shell keeps a 6px margin
|
||||
around itself. That margin is the only part of the window that is not a web page, and
|
||||
around itself, and the traffic lights are pushed in to sit within it rather than crowding
|
||||
the corner — which also sets the depth of the nav's drag strip.
|
||||
|
||||
An app's corners are rounded on its own layer, not by the container around it: an app is a
|
||||
native view sitting on top rather than something the shell lays out, so a `rounded-xl` on
|
||||
its parent does nothing and it overhangs the curve. Only the right pair is rounded; the
|
||||
left edge butts against the nav, and rounding it would cut a notch out of the middle of
|
||||
the window.
|
||||
|
||||
The margin That margin is the only part of the window that is not a web page, and
|
||||
therefore the only place left to grab it by. Full screen has no use for it and gets the
|
||||
room back.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user