feat(brand): adopt the Mockifyr logo across the dashboard and repo - #178
Merged
Conversation
Adds the brand asset set under brand/ and puts the mark where the placeholder "M" tile used to be, in the sidebar, the favicon and the README header. Three corrections to the supplied artwork: - The artwork sat 5 units below the centre of its own 140x100 viewBox (top padding 23.5, bottom 13.5), so it rendered low in every square container — visibly in the 64px favicon and the 512px app icon, whose transforms had inherited the same offset. The mark is now on a tight 0 0 125 63 viewBox where the ink, round caps included, touches all four edges; consumers add their own padding and centring is exact by construction. - The dashboard does not load the black/white files and swap them on theme change. It inlines the mark as a component whose stroke is currentColor, so one element follows the theme with no flash and no second request. - The eye needs to contrast with the --primary tile it sits on, and that tile inverts between themes. Hence the --brand / --brand-on-primary pair rather than a single brand colour. Brand blue stays out of the UI ramp on purpose: the palette remains zinc monochrome and the blue never competes with --info, which is the near-identical informational state colour. The lockup SVGs set their wordmark as live <text> in Sora, which silently falls back to another font on machines without it. They ship as editable sources with that documented; the product composes its lockup from the mark plus real text. NOTICE now records that Apache-2.0 grants no trademark licence for the name or these files. Verified in the dashboard on both themes and in both sidebar states: the mark centres exactly in the 32px tile (5px horizontal, 10.45px vertical padding), the eye resolves to #5a8dff on the dark tile and #0a4ecf on the light one, the favicon serves as image/svg+xml, and the console is clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The mark was 22px wide inside a filled --primary tile, which read as a dark badge with something small and indistinct in it — at that size neither the silhouette nor the eye resolved. It now sits directly on the sidebar surface and inverts with the theme: near-black on the light background, near-white on the dark one. Losing the tile's padding lets it grow to 40px expanded and 36px collapsed, roughly double, so the chevrons separate and the eye is a dot rather than a smudge. The filled tile stays the favicon's job, where an icon has to hold its own against browser chrome it does not control. With no tile behind it the eye contrasts with the page, not with --primary, so --brand alone covers it and --brand-on-primary is gone. Verified in both themes: stroke resolves to #18181b on light and #f4f4f5 on dark, the eye to #0a4ecf and #5a8dff, and the mark renders 40x20.16 in the expanded header. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
At 40px the mark read as a lump. The cause was proportion, not resolution: stroke-width 13 on a 125-wide drawing left the counters nearly closed, and the body notch was a 19-unit segment carrying a 13-unit stroke — 67% of its own length, so it rendered as a blob welding the three shapes into one mass. Stroke drops to 10 and the chevron apexes move inward (46.5/78.5 → 42/83), widening each apex from 64° to 71° and stretching the body notch to ~25 units. The three shapes now separate and the eye reads as a dot rather than part of the mass. The tight viewBox is unchanged, so every transform in the favicon, app icons and lockups stays valid without recomputation. Header size goes 40px → 50px. Every stroke in the mark is diagonal, so its edges antialias at any size — that softness is inherent to the geometry, not a rasterisation bug, and the only real remedy is more pixels. At 50px the 10-unit stroke also lands on exactly 4 device-independent pixels. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
In the collapsed rail the mark was 36x18 against 18x18 nav icons: equal in height but twice as wide, so it carried far more visual mass than the row it sits above and read as a banner rather than the first item in the rail. It drops to 28x14.1. Bounding area now lands near the icons' (395 vs 324) instead of double it, and the rail reads as one column. The expanded header is untouched at 50px, where the mark has two lines of type to balance and the extra presence is wanted. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The header mark goes 50px → 40px (20.2px tall). 50px was chosen to buy crispness, but the mark's edges are diagonal and antialias at any size, so the extra width bought presence rather than sharpness — and outweighed the two lines of type it sits beside. 40px balances that block. The favicon drops the brand-blue tile for ink on white. A tab strip is a dense row of other people's icons and a saturated blue tile competes there; ink on white reads as the mark rather than as a colour, while the tile still keeps the mark legible against dark browser chrome. The eye stays brand blue — it is the accent everywhere else in the set, and dropping it would make the favicon the only monochrome member. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The tab icon was the master mark scaled down, which is the wrong operation for 16px. It filled 64% of the tile and its stroke landed on 0.84px — under one pixel, so it rendered as grey haze next to tab neighbours that are bold shapes filling their whole box, and the white tile gave it nothing to sit against on an active (white) tab. The favicon now has its own optical size: same skeleton, stroke 10 → 13 and fill 64% → 91% of the tile, which puts the line on ~1.47px and the eye on ~1.9px at tab scale. Stroke stays under half the body notch's length, so the three shapes still separate rather than welding into a lump. This one file deliberately diverges from the master geometry. Scaling a line drawing down past a certain point stops preserving it — below roughly 24px the stroke has to be redrawn, not resized. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The white tile only ever looked right on the active tab. Everywhere else the tab strip is tinted, so the icon read as a white square with something inside it rather than as a mark. Dropping the tile also buys room: with nothing to sit inside, the mark fills 94% of the box instead of 64% and the stroke goes 13 → 14, putting the line on ~1.6px at tab scale, up from 1.47px. With no tile the ink has to carry itself against whatever is behind it, so the file switches on prefers-color-scheme — #111111 on light browser chrome, #ffffff on dark — instead of assuming a light one and disappearing. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds the brand asset set under
brand/and puts the mark where the placeholder M tile used to be — sidebar, favicon, README header.What the assets are
Two chevrons facing each other — request out, response back — joined by a wing, with the eye as the single accent. A bird in flight read as a whole; the engine read as a diagram.
Three corrections to the supplied artwork
Centring. The artwork sat 5 units below the centre of its own
140x100viewBox (top padding 23.5, bottom 13.5), so it rendered low in every square container — visibly in the 64px favicon and the 512px app icon, whose transforms had inherited the same offset. The mark now lives on a tight0 0 125 63viewBox where the ink, round caps included, touches all four edges. Consumers add their own padding and centring is exact by construction.No file swapping. The dashboard does not load
mark-black.svg/mark-white.svgand swap them on theme change. It inlines the mark as a component whose stroke iscurrentColor— one element, no flash, no second request.Two brand tokens, not one. The eye has to contrast with the
--primarytile it sits on, and that tile inverts between themes (near-black in light, near-white in dark). Hence--brand/--brand-on-primary.Brand blue stays out of the UI ramp on purpose: the palette remains zinc-monochrome and the blue never competes with
--info, which is a near-identical informational state colour.Known limitation — the lockups
brand/lockup/*.svgset their wordmark as live SVG<text>in Sora. Without that font installed they silently fall back and render as something that is not the logo. They ship as editable sources with the caveat documented inbrand/README.md; the product composes its lockup from the mark plus real text (selectable, translatable, theme-aware).Licensing
NOTICEnow records that Apache-2.0 grants no trademark licence for the name or these files (LICENSE §6).Verification
Driven in the dashboard on both themes and both sidebar states:
#5a8dffon the dark tile,#0a4ecfon the light oneimage/svg+xmlpnpm lintandpnpm buildcleanNo PNG raster set yet (GitHub social preview, apple-touch-icon) — that needs an SVG→PNG step and is left for a follow-up.
🤖 Generated with Claude Code