From bb568302c289a3b909b1f2ce18a6640ab3fe0597 Mon Sep 17 00:00:00 2001 From: omercelikdev Date: Tue, 21 Jul 2026 10:01:54 +0300 Subject: [PATCH 1/7] feat(brand): adopt the Mockifyr logo across the dashboard and repo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 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 --- NOTICE | 5 ++ README.md | 5 ++ brand/README.md | 65 +++++++++++++++++++++++ brand/app-icon/mockifyr-appicon-black.svg | 12 +++++ brand/app-icon/mockifyr-appicon-blue.svg | 12 +++++ brand/app-icon/mockifyr-appicon-white.svg | 12 +++++ brand/favicon/mockifyr-favicon.svg | 12 +++++ brand/lockup/mockifyr-lockup-dark.svg | 13 +++++ brand/lockup/mockifyr-lockup-light.svg | 13 +++++ brand/mark/mockifyr-mark-black.svg | 9 ++++ brand/mark/mockifyr-mark-duo.svg | 9 ++++ brand/mark/mockifyr-mark-white.svg | 9 ++++ ui/index.html | 4 ++ ui/public/favicon.svg | 13 ++++- ui/src/components/layout/app-sidebar.tsx | 5 +- ui/src/components/ui/brand-mark.tsx | 36 +++++++++++++ ui/src/index.css | 10 ++++ 17 files changed, 241 insertions(+), 3 deletions(-) create mode 100644 brand/README.md create mode 100644 brand/app-icon/mockifyr-appicon-black.svg create mode 100644 brand/app-icon/mockifyr-appicon-blue.svg create mode 100644 brand/app-icon/mockifyr-appicon-white.svg create mode 100644 brand/favicon/mockifyr-favicon.svg create mode 100644 brand/lockup/mockifyr-lockup-dark.svg create mode 100644 brand/lockup/mockifyr-lockup-light.svg create mode 100644 brand/mark/mockifyr-mark-black.svg create mode 100644 brand/mark/mockifyr-mark-duo.svg create mode 100644 brand/mark/mockifyr-mark-white.svg create mode 100644 ui/src/components/ui/brand-mark.tsx diff --git a/NOTICE b/NOTICE index dc699f6..b3de303 100644 --- a/NOTICE +++ b/NOTICE @@ -20,4 +20,9 @@ repository are nominative and descriptive only, for two purposes: scenarios against real WireMock as a reference oracle. The oracle code lives in the test/harness projects and is not part of the distributed product. +The "Mockifyr" name and the logo files under brand/ are trademarks of this project. Apache-2.0 +grants a copyright and patent licence but no trademark licence (see LICENSE, section 6): you may +fork and redistribute the code, but not use the name or the logo in a way that suggests the result +is Mockifyr or is endorsed by it. + All other product names, logos, and brands are property of their respective owners. diff --git a/README.md b/README.md index 9509d0b..392fcdf 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,8 @@ + + + + + # Mockifyr [![CI](https://github.com/omercelikdev/mockifyr/actions/workflows/ci.yml/badge.svg)](https://github.com/omercelikdev/mockifyr/actions/workflows/ci.yml) diff --git a/brand/README.md b/brand/README.md new file mode 100644 index 0000000..69da9ee --- /dev/null +++ b/brand/README.md @@ -0,0 +1,65 @@ +# Mockifyr brand assets + +Source artwork for the Mockifyr mark, lockup, app icon and favicon. Everything here is SVG, so it +stays sharp at any size. + +## The mark + +Two chevrons facing each other — a request going in, a response coming back — joined by a wing, with +the eye as the single accent. Read as a whole it is a bird in flight; read as a diagram it is the +engine: something goes out, a stand-in comes back. + +## Colours + +| Role | Hex | Notes | +| --- | --- | --- | +| Ink | `#111111` | The mark on light backgrounds. | +| Brand blue | `#0a4ecf` | Eye + accent on light backgrounds. 7.0:1 against white. | +| Light blue | `#5a8dff` | Eye on dark backgrounds. 6.3:1 against `#0a0a0c`. | +| Icon blue | `#bcd0ff` | Eye on the brand-blue tile, where `#5a8dff` has too little separation. | + +The eye always switches with the surface behind it — that is deliberate, not an inconsistency. + +## Geometry + +The mark is drawn on a tight `0 0 125 63` viewBox: the artwork's ink, including the round stroke +caps, touches all four edges exactly. Consumers add their own padding, and the mark centres +correctly in any container without eyeballing. Stroke width is `13` with round caps and joins +throughout; that ratio is what keeps the silhouette readable down to 16px. + +## Files + +``` +mark/ mark only — black (light bg) · white (dark bg) · duo (two-tone) +lockup/ horizontal logo, mark + wordmark — light / dark +app-icon/ 512px rounded-square app icon — blue / black / white tile +favicon/ 64px browser tab icon on the brand-blue tile +``` + +## Which file to use + +- Dashboard, light theme — `mark/mockifyr-mark-black.svg` +- Dashboard, dark theme — `mark/mockifyr-mark-white.svg` +- Browser tab — `favicon/mockifyr-favicon.svg` +- App / store icon — `app-icon/mockifyr-appicon-blue.svg` + +Inside the dashboard the mark is not loaded from these files. It ships as an inline React component +(`ui/src/components/ui/brand-mark.tsx`) whose stroke is `currentColor`, so a single element follows +the theme instead of two files being swapped on every theme change. + +## A note on the lockups + +The wordmark in `lockup/*.svg` is live SVG `` set in **Sora**. On a machine without Sora +installed it silently falls back to another font — the logo then renders as something that is not +the logo. Treat these files as editable sources, not as artwork to embed. + +Wherever a lockup is needed in the product or in documentation, compose it from the mark plus real +text (HTML, markdown heading, slide title). That keeps the text selectable, translatable and +theme-aware, and removes the font dependency entirely. To ship a lockup as a single image, convert +the text to outlines first on a machine that has Sora. + +## Trademark + +The Mockifyr name and these logo files are trademarks of the project. The Apache-2.0 licence that +covers the source code does not grant trademark rights (see LICENSE §6 and NOTICE). Do not use them +to brand a fork or to imply endorsement. diff --git a/brand/app-icon/mockifyr-appicon-black.svg b/brand/app-icon/mockifyr-appicon-black.svg new file mode 100644 index 0000000..f1605a9 --- /dev/null +++ b/brand/app-icon/mockifyr-appicon-black.svg @@ -0,0 +1,12 @@ + + Mockifyr + + + + + + + + + + diff --git a/brand/app-icon/mockifyr-appicon-blue.svg b/brand/app-icon/mockifyr-appicon-blue.svg new file mode 100644 index 0000000..afb6c5b --- /dev/null +++ b/brand/app-icon/mockifyr-appicon-blue.svg @@ -0,0 +1,12 @@ + + Mockifyr + + + + + + + + + + diff --git a/brand/app-icon/mockifyr-appicon-white.svg b/brand/app-icon/mockifyr-appicon-white.svg new file mode 100644 index 0000000..f9107a8 --- /dev/null +++ b/brand/app-icon/mockifyr-appicon-white.svg @@ -0,0 +1,12 @@ + + Mockifyr + + + + + + + + + + diff --git a/brand/favicon/mockifyr-favicon.svg b/brand/favicon/mockifyr-favicon.svg new file mode 100644 index 0000000..68bf921 --- /dev/null +++ b/brand/favicon/mockifyr-favicon.svg @@ -0,0 +1,12 @@ + + Mockifyr + + + + + + + + + + diff --git a/brand/lockup/mockifyr-lockup-dark.svg b/brand/lockup/mockifyr-lockup-dark.svg new file mode 100644 index 0000000..b0952f8 --- /dev/null +++ b/brand/lockup/mockifyr-lockup-dark.svg @@ -0,0 +1,13 @@ + + Mockifyr — mock & prototype, faster. + + + + + + + + + Mockifyr + mock & prototype, faster. + diff --git a/brand/lockup/mockifyr-lockup-light.svg b/brand/lockup/mockifyr-lockup-light.svg new file mode 100644 index 0000000..9582456 --- /dev/null +++ b/brand/lockup/mockifyr-lockup-light.svg @@ -0,0 +1,13 @@ + + Mockifyr — mock & prototype, faster. + + + + + + + + + Mockifyr + mock & prototype, faster. + diff --git a/brand/mark/mockifyr-mark-black.svg b/brand/mark/mockifyr-mark-black.svg new file mode 100644 index 0000000..d65ef71 --- /dev/null +++ b/brand/mark/mockifyr-mark-black.svg @@ -0,0 +1,9 @@ + + Mockifyr + + + + + + + diff --git a/brand/mark/mockifyr-mark-duo.svg b/brand/mark/mockifyr-mark-duo.svg new file mode 100644 index 0000000..9a04a28 --- /dev/null +++ b/brand/mark/mockifyr-mark-duo.svg @@ -0,0 +1,9 @@ + + Mockifyr + + + + + + + diff --git a/brand/mark/mockifyr-mark-white.svg b/brand/mark/mockifyr-mark-white.svg new file mode 100644 index 0000000..3181728 --- /dev/null +++ b/brand/mark/mockifyr-mark-white.svg @@ -0,0 +1,9 @@ + + Mockifyr + + + + + + + diff --git a/ui/index.html b/ui/index.html index c622886..77f28c6 100644 --- a/ui/index.html +++ b/ui/index.html @@ -4,6 +4,10 @@ + + + Mockifyr — Mock Platform diff --git a/ui/public/favicon.svg b/ui/public/favicon.svg index 6893eb1..68bf921 100644 --- a/ui/public/favicon.svg +++ b/ui/public/favicon.svg @@ -1 +1,12 @@ - \ No newline at end of file + + Mockifyr + + + + + + + + + + diff --git a/ui/src/components/layout/app-sidebar.tsx b/ui/src/components/layout/app-sidebar.tsx index e60ea5c..f0e5a46 100644 --- a/ui/src/components/layout/app-sidebar.tsx +++ b/ui/src/components/layout/app-sidebar.tsx @@ -9,6 +9,7 @@ import { cn } from '@/lib/utils' import { useUi } from '@/components/providers' import { clearAdminAuth, fetchJournal, fetchScenarios, fetchStubs, hasAdminAuth } from '@/lib/api' import { LOCALES } from '@/lib/i18n' +import { BrandTile } from '@/components/ui/brand-mark' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' import { TenantSwitcher } from './tenant-switcher' import { @@ -68,14 +69,14 @@ export function AppSidebar() {
- M +
) : (
- M + {t('brand.name')} {t('brand.sub')} diff --git a/ui/src/components/ui/brand-mark.tsx b/ui/src/components/ui/brand-mark.tsx new file mode 100644 index 0000000..2dbbc7a --- /dev/null +++ b/ui/src/components/ui/brand-mark.tsx @@ -0,0 +1,36 @@ +import { cn } from '@/lib/utils' + +// The Mockifyr mark: two chevrons facing each other — a request going out, a response coming back — +// joined by a wing, with the eye as the single accent. Drawn on the brand's tight 125x63 viewBox, where +// the ink (round stroke caps included) touches all four edges, so it centres in any box without nudging. +// +// The stroke is currentColor: one element follows the theme instead of swapping a black and a white file +// on every toggle, which would flash and cost a second request. The eye uses --brand-on-primary because +// the mark's home is the --primary tile, so the accent has to hold against *that*, not against the page. + +export function BrandMark({ className }: { className?: string }) { + return ( + + + + + + + + + ) +} + +/** The mark on its rounded --primary tile — the app's 32px avatar, as used in the sidebar header. */ +export function BrandTile({ className }: { className?: string }) { + return ( + + + + ) +} diff --git a/ui/src/index.css b/ui/src/index.css index 0e83d93..4cfd1a2 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -25,6 +25,13 @@ --primary: #18181b; /* accent — actions · active · CTA (swap to re-skin) */ --primary-foreground: #ffffff; + + /* Brand blue — the logo's eye, and the only place brand colour appears. Deliberately kept out of the + UI ramp: the palette stays zinc-monochrome, and this blue never competes with --info. The + -on-primary variant is the one that holds against the --primary tile the mark sits on, so it flips + the opposite way to the theme. Re-skinning --primary? Re-check this pair too. */ + --brand: #0a4ecf; + --brand-on-primary: #5a8dff; --accent: #f1f1f3; /* soft fill: nav hover/active, secondary */ --accent-foreground: #18181b; @@ -59,6 +66,9 @@ --primary: #fafafa; --primary-foreground: #18181b; + + --brand: #5a8dff; /* lifted so it holds against the dark page */ + --brand-on-primary: #0a4ecf; /* the tile is near-white here, so the eye goes back to deep blue */ --accent: #202026; --accent-foreground: #fafafa; From df22e84b3ecbfda4de53f8b1fac3d42a7ec8cf8e Mon Sep 17 00:00:00 2001 From: omercelikdev Date: Tue, 21 Jul 2026 10:57:02 +0300 Subject: [PATCH 2/7] fix(brand): drop the sidebar tile and size the mark up to read MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- ui/src/components/layout/app-sidebar.tsx | 6 +++--- ui/src/components/ui/brand-mark.tsx | 26 ++++++------------------ ui/src/index.css | 9 +++----- 3 files changed, 12 insertions(+), 29 deletions(-) diff --git a/ui/src/components/layout/app-sidebar.tsx b/ui/src/components/layout/app-sidebar.tsx index f0e5a46..590eded 100644 --- a/ui/src/components/layout/app-sidebar.tsx +++ b/ui/src/components/layout/app-sidebar.tsx @@ -9,7 +9,7 @@ import { cn } from '@/lib/utils' import { useUi } from '@/components/providers' import { clearAdminAuth, fetchJournal, fetchScenarios, fetchStubs, hasAdminAuth } from '@/lib/api' import { LOCALES } from '@/lib/i18n' -import { BrandTile } from '@/components/ui/brand-mark' +import { BrandMark } from '@/components/ui/brand-mark' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' import { TenantSwitcher } from './tenant-switcher' import { @@ -69,14 +69,14 @@ export function AppSidebar() {
- +
) : (
- + {t('brand.name')} {t('brand.sub')} diff --git a/ui/src/components/ui/brand-mark.tsx b/ui/src/components/ui/brand-mark.tsx index 2dbbc7a..951c2f7 100644 --- a/ui/src/components/ui/brand-mark.tsx +++ b/ui/src/components/ui/brand-mark.tsx @@ -1,12 +1,12 @@ -import { cn } from '@/lib/utils' - // The Mockifyr mark: two chevrons facing each other — a request going out, a response coming back — // joined by a wing, with the eye as the single accent. Drawn on the brand's tight 125x63 viewBox, where // the ink (round stroke caps included) touches all four edges, so it centres in any box without nudging. // -// The stroke is currentColor: one element follows the theme instead of swapping a black and a white file -// on every toggle, which would flash and cost a second request. The eye uses --brand-on-primary because -// the mark's home is the --primary tile, so the accent has to hold against *that*, not against the page. +// It sits directly on the surface rather than inside a filled tile: on a light background the mark is +// near-black, on a dark one near-white. That is what the stroke being currentColor buys — one element +// follows the theme, with no flash and no second request from swapping a black and a white file. The +// filled tile is the favicon's job, where an icon has to hold its own against a browser chrome it does +// not control; in the app the mark can simply be the mark. export function BrandMark({ className }: { className?: string }) { return ( @@ -16,21 +16,7 @@ export function BrandMark({ className }: { className?: string }) { - + ) } - -/** The mark on its rounded --primary tile — the app's 32px avatar, as used in the sidebar header. */ -export function BrandTile({ className }: { className?: string }) { - return ( - - - - ) -} diff --git a/ui/src/index.css b/ui/src/index.css index 4cfd1a2..5bc5754 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -27,11 +27,9 @@ --primary-foreground: #ffffff; /* Brand blue — the logo's eye, and the only place brand colour appears. Deliberately kept out of the - UI ramp: the palette stays zinc-monochrome, and this blue never competes with --info. The - -on-primary variant is the one that holds against the --primary tile the mark sits on, so it flips - the opposite way to the theme. Re-skinning --primary? Re-check this pair too. */ + UI ramp: the palette stays zinc-monochrome, and this blue never competes with --info, which is a + near-identical informational state colour. */ --brand: #0a4ecf; - --brand-on-primary: #5a8dff; --accent: #f1f1f3; /* soft fill: nav hover/active, secondary */ --accent-foreground: #18181b; @@ -67,8 +65,7 @@ --primary: #fafafa; --primary-foreground: #18181b; - --brand: #5a8dff; /* lifted so it holds against the dark page */ - --brand-on-primary: #0a4ecf; /* the tile is near-white here, so the eye goes back to deep blue */ + --brand: #5a8dff; /* lifted so it holds against the dark page */ --accent: #202026; --accent-foreground: #fafafa; From 93b3819970907f134cf0d53685231c7b85980e77 Mon Sep 17 00:00:00 2001 From: omercelikdev Date: Tue, 21 Jul 2026 11:08:36 +0300 Subject: [PATCH 3/7] fix(brand): open the mark's angles and lighten its stroke MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- brand/README.md | 8 ++++++-- brand/app-icon/mockifyr-appicon-black.svg | 10 +++++----- brand/app-icon/mockifyr-appicon-blue.svg | 10 +++++----- brand/app-icon/mockifyr-appicon-white.svg | 10 +++++----- brand/favicon/mockifyr-favicon.svg | 10 +++++----- brand/lockup/mockifyr-lockup-dark.svg | 10 +++++----- brand/lockup/mockifyr-lockup-light.svg | 10 +++++----- brand/mark/mockifyr-mark-black.svg | 10 +++++----- brand/mark/mockifyr-mark-duo.svg | 10 +++++----- brand/mark/mockifyr-mark-white.svg | 10 +++++----- ui/public/favicon.svg | 10 +++++----- ui/src/components/layout/app-sidebar.tsx | 2 +- ui/src/components/ui/brand-mark.tsx | 15 ++++++++++----- 13 files changed, 67 insertions(+), 58 deletions(-) diff --git a/brand/README.md b/brand/README.md index 69da9ee..1d8485d 100644 --- a/brand/README.md +++ b/brand/README.md @@ -24,8 +24,12 @@ The eye always switches with the surface behind it — that is deliberate, not a The mark is drawn on a tight `0 0 125 63` viewBox: the artwork's ink, including the round stroke caps, touches all four edges exactly. Consumers add their own padding, and the mark centres -correctly in any container without eyeballing. Stroke width is `13` with round caps and joins -throughout; that ratio is what keeps the silhouette readable down to 16px. +correctly in any container without eyeballing. + +Stroke width is `10` with round caps and joins throughout. That ratio is load-bearing, and it is +set by the shortest segment, not the longest: the body notch is a ~25-unit stroke, so anything much +heavier stops reading as a line and turns into a lump that welds the three shapes into one mass at +small sizes. Keep the counters open and the silhouette survives down to 16px. ## Files diff --git a/brand/app-icon/mockifyr-appicon-black.svg b/brand/app-icon/mockifyr-appicon-black.svg index f1605a9..11dd877 100644 --- a/brand/app-icon/mockifyr-appicon-black.svg +++ b/brand/app-icon/mockifyr-appicon-black.svg @@ -2,11 +2,11 @@ Mockifyr - - - - + + + + - + diff --git a/brand/app-icon/mockifyr-appicon-blue.svg b/brand/app-icon/mockifyr-appicon-blue.svg index afb6c5b..2fdcaac 100644 --- a/brand/app-icon/mockifyr-appicon-blue.svg +++ b/brand/app-icon/mockifyr-appicon-blue.svg @@ -2,11 +2,11 @@ Mockifyr - - - - + + + + - + diff --git a/brand/app-icon/mockifyr-appicon-white.svg b/brand/app-icon/mockifyr-appicon-white.svg index f9107a8..7a75307 100644 --- a/brand/app-icon/mockifyr-appicon-white.svg +++ b/brand/app-icon/mockifyr-appicon-white.svg @@ -2,11 +2,11 @@ Mockifyr - - - - + + + + - + diff --git a/brand/favicon/mockifyr-favicon.svg b/brand/favicon/mockifyr-favicon.svg index 68bf921..1195259 100644 --- a/brand/favicon/mockifyr-favicon.svg +++ b/brand/favicon/mockifyr-favicon.svg @@ -2,11 +2,11 @@ Mockifyr - - - - + + + + - + diff --git a/brand/lockup/mockifyr-lockup-dark.svg b/brand/lockup/mockifyr-lockup-dark.svg index b0952f8..5ac92d4 100644 --- a/brand/lockup/mockifyr-lockup-dark.svg +++ b/brand/lockup/mockifyr-lockup-dark.svg @@ -1,12 +1,12 @@ Mockifyr — mock & prototype, faster. - - - - + + + + - + Mockifyr mock & prototype, faster. diff --git a/brand/lockup/mockifyr-lockup-light.svg b/brand/lockup/mockifyr-lockup-light.svg index 9582456..2503828 100644 --- a/brand/lockup/mockifyr-lockup-light.svg +++ b/brand/lockup/mockifyr-lockup-light.svg @@ -1,12 +1,12 @@ Mockifyr — mock & prototype, faster. - - - - + + + + - + Mockifyr mock & prototype, faster. diff --git a/brand/mark/mockifyr-mark-black.svg b/brand/mark/mockifyr-mark-black.svg index d65ef71..d88bfba 100644 --- a/brand/mark/mockifyr-mark-black.svg +++ b/brand/mark/mockifyr-mark-black.svg @@ -1,9 +1,9 @@ Mockifyr - - - - + + + + - + diff --git a/brand/mark/mockifyr-mark-duo.svg b/brand/mark/mockifyr-mark-duo.svg index 9a04a28..29992e0 100644 --- a/brand/mark/mockifyr-mark-duo.svg +++ b/brand/mark/mockifyr-mark-duo.svg @@ -1,9 +1,9 @@ Mockifyr - - - - + + + + - + diff --git a/brand/mark/mockifyr-mark-white.svg b/brand/mark/mockifyr-mark-white.svg index 3181728..5f4b9c6 100644 --- a/brand/mark/mockifyr-mark-white.svg +++ b/brand/mark/mockifyr-mark-white.svg @@ -1,9 +1,9 @@ Mockifyr - - - - + + + + - + diff --git a/ui/public/favicon.svg b/ui/public/favicon.svg index 68bf921..1195259 100644 --- a/ui/public/favicon.svg +++ b/ui/public/favicon.svg @@ -2,11 +2,11 @@ Mockifyr - - - - + + + + - + diff --git a/ui/src/components/layout/app-sidebar.tsx b/ui/src/components/layout/app-sidebar.tsx index 590eded..5ed95f2 100644 --- a/ui/src/components/layout/app-sidebar.tsx +++ b/ui/src/components/layout/app-sidebar.tsx @@ -76,7 +76,7 @@ export function AppSidebar() { ) : (
- + {t('brand.name')} {t('brand.sub')} diff --git a/ui/src/components/ui/brand-mark.tsx b/ui/src/components/ui/brand-mark.tsx index 951c2f7..a03e16e 100644 --- a/ui/src/components/ui/brand-mark.tsx +++ b/ui/src/components/ui/brand-mark.tsx @@ -7,16 +7,21 @@ // follows the theme, with no flash and no second request from swapping a black and a white file. The // filled tile is the favicon's job, where an icon has to hold its own against a browser chrome it does // not control; in the app the mark can simply be the mark. +// +// Every stroke here is diagonal, so its edges antialias at any size — that softness is inherent, not a +// resolution problem, and the only real remedy is more pixels. Hence 50px in the header rather than the +// 40px that first looked "enough": at 50px the 10-unit stroke lands on exactly 4 device-independent +// pixels, and the counters have room to stay open. export function BrandMark({ className }: { className?: string }) { return ( - - - - + + + + - + ) } From 1b274940652f43bc544f9c6657585949211b26ff Mon Sep 17 00:00:00 2001 From: omercelikdev Date: Tue, 21 Jul 2026 14:15:12 +0300 Subject: [PATCH 4/7] fix(brand): scale the collapsed-rail mark down to the icon row 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 --- ui/src/components/layout/app-sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/layout/app-sidebar.tsx b/ui/src/components/layout/app-sidebar.tsx index 5ed95f2..fd4471d 100644 --- a/ui/src/components/layout/app-sidebar.tsx +++ b/ui/src/components/layout/app-sidebar.tsx @@ -69,7 +69,7 @@ export function AppSidebar() {
- +
From 57a5713a191df3ae540ebb5042303dd238f85992 Mon Sep 17 00:00:00 2001 From: omercelikdev Date: Tue, 21 Jul 2026 14:19:10 +0300 Subject: [PATCH 5/7] fix(brand): settle the header mark at 40px and put the favicon on white MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- brand/README.md | 8 ++++++-- brand/favicon/mockifyr-favicon.svg | 6 +++--- ui/public/favicon.svg | 6 +++--- ui/src/components/layout/app-sidebar.tsx | 2 +- 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/brand/README.md b/brand/README.md index 1d8485d..477c35c 100644 --- a/brand/README.md +++ b/brand/README.md @@ -16,7 +16,7 @@ engine: something goes out, a stand-in comes back. | Ink | `#111111` | The mark on light backgrounds. | | Brand blue | `#0a4ecf` | Eye + accent on light backgrounds. 7.0:1 against white. | | Light blue | `#5a8dff` | Eye on dark backgrounds. 6.3:1 against `#0a0a0c`. | -| Icon blue | `#bcd0ff` | Eye on the brand-blue tile, where `#5a8dff` has too little separation. | +| Icon blue | `#bcd0ff` | Eye on the brand-blue app-icon tile, where `#5a8dff` has too little separation. | The eye always switches with the surface behind it — that is deliberate, not an inconsistency. @@ -37,9 +37,13 @@ small sizes. Keep the counters open and the silhouette survives down to 16px. mark/ mark only — black (light bg) · white (dark bg) · duo (two-tone) lockup/ horizontal logo, mark + wordmark — light / dark app-icon/ 512px rounded-square app icon — blue / black / white tile -favicon/ 64px browser tab icon on the brand-blue tile +favicon/ 64px browser tab icon — ink on a white tile ``` +The favicon is deliberately the plainest of the set. 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, and the tile keeps the mark legible against dark browser chrome. + ## Which file to use - Dashboard, light theme — `mark/mockifyr-mark-black.svg` diff --git a/brand/favicon/mockifyr-favicon.svg b/brand/favicon/mockifyr-favicon.svg index 1195259..b45966b 100644 --- a/brand/favicon/mockifyr-favicon.svg +++ b/brand/favicon/mockifyr-favicon.svg @@ -1,12 +1,12 @@ Mockifyr - + - + - + diff --git a/ui/public/favicon.svg b/ui/public/favicon.svg index 1195259..b45966b 100644 --- a/ui/public/favicon.svg +++ b/ui/public/favicon.svg @@ -1,12 +1,12 @@ Mockifyr - + - + - + diff --git a/ui/src/components/layout/app-sidebar.tsx b/ui/src/components/layout/app-sidebar.tsx index fd4471d..cea8c05 100644 --- a/ui/src/components/layout/app-sidebar.tsx +++ b/ui/src/components/layout/app-sidebar.tsx @@ -76,7 +76,7 @@ export function AppSidebar() { ) : (
- + {t('brand.name')} {t('brand.sub')} From 74959265e9d81d30d3670d370cd5af072af14456 Mon Sep 17 00:00:00 2001 From: omercelikdev Date: Tue, 21 Jul 2026 14:23:26 +0300 Subject: [PATCH 6/7] fix(brand): draw the favicon at its own optical size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- brand/favicon/mockifyr-favicon.svg | 15 +++++++++------ ui/public/favicon.svg | 15 +++++++++------ 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/brand/favicon/mockifyr-favicon.svg b/brand/favicon/mockifyr-favicon.svg index b45966b..bb6fa2e 100644 --- a/brand/favicon/mockifyr-favicon.svg +++ b/brand/favicon/mockifyr-favicon.svg @@ -1,12 +1,15 @@ Mockifyr + - - - - - + + + + + - + diff --git a/ui/public/favicon.svg b/ui/public/favicon.svg index b45966b..bb6fa2e 100644 --- a/ui/public/favicon.svg +++ b/ui/public/favicon.svg @@ -1,12 +1,15 @@ Mockifyr + - - - - - + + + + + - + From 820150b72ab77b0f86e650c9367b349a48f14834 Mon Sep 17 00:00:00 2001 From: omercelikdev Date: Tue, 21 Jul 2026 14:25:52 +0300 Subject: [PATCH 7/7] fix(brand): make the favicon transparent and theme-aware MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- brand/README.md | 15 +++++++++++---- brand/favicon/mockifyr-favicon.svg | 30 ++++++++++++++++++++---------- ui/public/favicon.svg | 30 ++++++++++++++++++++---------- 3 files changed, 51 insertions(+), 24 deletions(-) diff --git a/brand/README.md b/brand/README.md index 477c35c..3e9afe6 100644 --- a/brand/README.md +++ b/brand/README.md @@ -37,12 +37,19 @@ small sizes. Keep the counters open and the silhouette survives down to 16px. mark/ mark only — black (light bg) · white (dark bg) · duo (two-tone) lockup/ horizontal logo, mark + wordmark — light / dark app-icon/ 512px rounded-square app icon — blue / black / white tile -favicon/ 64px browser tab icon — ink on a white tile +favicon/ 64px browser tab icon — transparent, theme-aware ``` -The favicon is deliberately the plainest of the set. 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, and the tile keeps the mark legible against dark browser chrome. +The favicon is the one file that deliberately breaks the geometry above, and it has to. Scaling a +line drawing down past roughly 24px does not preserve it: at tab size the master stroke lands under +one pixel and renders as grey haze next to neighbours that are bold shapes filling their whole box. +So the favicon is redrawn at its own optical size — same skeleton, stroke `14` instead of `10`, and +94% fill instead of 64%. Stroke still stays under 60% of the body notch's length, which is what keeps +the three shapes from welding together. + +It carries no tile. A tab strip already has a background, and a white square reads as a white square +on every tab that is not the active one. With nothing behind it the ink has to carry itself, so the +file switches colour on `prefers-color-scheme` rather than assuming a light browser. ## Which file to use diff --git a/brand/favicon/mockifyr-favicon.svg b/brand/favicon/mockifyr-favicon.svg index bb6fa2e..3a52659 100644 --- a/brand/favicon/mockifyr-favicon.svg +++ b/brand/favicon/mockifyr-favicon.svg @@ -1,15 +1,25 @@ Mockifyr - - - - - - - + + + + + + + - + diff --git a/ui/public/favicon.svg b/ui/public/favicon.svg index bb6fa2e..3a52659 100644 --- a/ui/public/favicon.svg +++ b/ui/public/favicon.svg @@ -1,15 +1,25 @@ Mockifyr - - - - - - - + + + + + + + - +