From 2eccfe7f75ba99ceb5bd78ba8d77f9c3bbd0e9a0 Mon Sep 17 00:00:00 2001 From: claude Date: Tue, 2 Jun 2026 19:43:36 +0000 Subject: [PATCH] Add Verso visual identity (logos + favicon) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Introduce the Verso brand marks as self-contained SVGs with the EB Garamond latin subset embedded as a base64 @font-face, so they render identically in every context (favicon, CSS background, , inline) with no runtime Google Fonts dependency — important for the self-hosted alpha. Falls back to Georgia serif if a browser ignores SVG-embedded fonts. Assets: - verso-square.svg — rounded "V" tile (200×200); used as favicon.svg and the editor top-left toolbar logo. - verso-logo.svg / verso-logo-dark.svg — wide "verso · ONLINE EDITOR" wordmark (760×200), light + dark wordmark variants. Wiring: - favicon: public/favicon.svg replaced with the square mark. - editor toolbar: --redesign-toolbar-logo-url (light + dark) -> verso-square.svg. - projects dashboard navbar: ProjectListDsNav logo -> verso-logo(.dark), with --navbar-brand-width widened to 200px to fit the wide wordmark. - login page: centered Verso wordmark above the form; suppress the top navbar so the hero logo stands alone (no competing Overleaf mark). PNG favicons / apple-touch-icon are left as-is (no raster tooling available); modern browsers use the SVG favicon. Co-Authored-By: Claude Opus 4.8 --- services/web/app/views/user/login.pug | 7 +++++++ .../components/project-list-ds-nav.tsx | 4 ++-- .../js/shared/svgs/verso-logo-dark.svg | 19 +++++++++++++++++++ .../frontend/js/shared/svgs/verso-logo.svg | 19 +++++++++++++++++++ .../pages/editor/toolbar-redesign.scss | 4 ++-- .../pages/project-list-ds-nav.scss | 4 ++++ services/web/public/favicon.svg | 18 +++++++++--------- .../public/img/ol-brand/verso-logo-dark.svg | 19 +++++++++++++++++++ .../web/public/img/ol-brand/verso-logo.svg | 19 +++++++++++++++++++ .../web/public/img/ol-brand/verso-square.svg | 14 ++++++++++++++ 10 files changed, 114 insertions(+), 13 deletions(-) create mode 100644 services/web/frontend/js/shared/svgs/verso-logo-dark.svg create mode 100644 services/web/frontend/js/shared/svgs/verso-logo.svg create mode 100644 services/web/public/img/ol-brand/verso-logo-dark.svg create mode 100644 services/web/public/img/ol-brand/verso-logo.svg create mode 100644 services/web/public/img/ol-brand/verso-square.svg diff --git a/services/web/app/views/user/login.pug b/services/web/app/views/user/login.pug index 5e8a23b017..8dd2ce311a 100644 --- a/services/web/app/views/user/login.pug +++ b/services/web/app/views/user/login.pug @@ -2,12 +2,19 @@ extends ../layout-website-redesign block vars - isWebsiteRedesign = true + - var suppressNavbar = true block content main#main-content.content .container .row .col-lg-6.offset-lg-3.col-xl-4.offset-xl-4 + .text-center.mb-4 + img.verso-login-logo( + src=buildImgPath('ol-brand/verso-logo.svg') + alt='Verso' + style='width:260px;max-width:100%;height:auto' + ) .page-header if login_support_title h1 !{login_support_title} diff --git a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx index ca081536b6..68d325ae54 100644 --- a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx +++ b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx @@ -18,8 +18,8 @@ import getMeta from '@/utils/meta' import DefaultNavbar from '@/shared/components/navbar/default-navbar' import SidebarDsNav from '@/features/project-list/components/sidebar/sidebar-ds-nav' import SystemMessages from '@/shared/components/system-messages' -import overleafLogo from '@/shared/svgs/overleaf-a-ds-solution-mallard.svg' -import overleafLogoDark from '@/shared/svgs/overleaf-a-ds-solution-mallard-dark.svg' +import overleafLogo from '@/shared/svgs/verso-logo.svg' +import overleafLogoDark from '@/shared/svgs/verso-logo-dark.svg' import CookieBanner from '@/shared/components/cookie-banner' import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme' import { isSplitTestEnabled } from '@/utils/splitTestUtils' diff --git a/services/web/frontend/js/shared/svgs/verso-logo-dark.svg b/services/web/frontend/js/shared/svgs/verso-logo-dark.svg new file mode 100644 index 0000000000..7c2e6d1775 --- /dev/null +++ b/services/web/frontend/js/shared/svgs/verso-logo-dark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + V + + verso + + ONLINE EDITOR + + diff --git a/services/web/frontend/js/shared/svgs/verso-logo.svg b/services/web/frontend/js/shared/svgs/verso-logo.svg new file mode 100644 index 0000000000..6c544182b3 --- /dev/null +++ b/services/web/frontend/js/shared/svgs/verso-logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + V + + verso + + ONLINE EDITOR + + diff --git a/services/web/frontend/stylesheets/pages/editor/toolbar-redesign.scss b/services/web/frontend/stylesheets/pages/editor/toolbar-redesign.scss index 72985f5416..0994bb42b0 100644 --- a/services/web/frontend/stylesheets/pages/editor/toolbar-redesign.scss +++ b/services/web/frontend/stylesheets/pages/editor/toolbar-redesign.scss @@ -5,7 +5,7 @@ --redesign-toolbar-border-divider: var(--border-divider-dark); --redesign-toolbar-background: var(--bg-dark-primary); --redesign-toolbar-home-link-color: var(--content-primary-dark); - --redesign-toolbar-logo-url: url('../../../../public/img/ol-brand/overleaf-o-white.svg'); + --redesign-toolbar-logo-url: url('../../../../public/img/ol-brand/verso-square.svg'); --redesign-subdued-button-color: var(--content-primary-dark); --redesign-subdued-button-hover-background: var(--bg-dark-tertiary); --redesign-toolbar-feedback-link-color: var(--link-ui-dark); @@ -16,7 +16,7 @@ --redesign-toolbar-border-divider: var(--border-divider); --redesign-toolbar-background: var(--bg-light-primary); --redesign-toolbar-home-link-color: var(--content-primary); - --redesign-toolbar-logo-url: url('../../../../public/img/ol-brand/overleaf-o-dark.svg'); + --redesign-toolbar-logo-url: url('../../../../public/img/ol-brand/verso-square.svg'); --redesign-subdued-button-color: var(--content-primary); --redesign-subdued-button-hover-background: var(--bg-light-tertiary); --redesign-toolbar-feedback-link-color: var(--link-ui); diff --git a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss index abda0143c7..2cecf6152d 100644 --- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss +++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss @@ -48,6 +48,10 @@ body { .navbar-default { position: relative; + // The Verso wordmark logo is wide (~3.8:1), so give the brand more room + // than the default 130px so "verso" and the wordmark read clearly. + --navbar-brand-width: 200px; + .navbar-header .navbar-logo { @include media-breakpoint-up(md) { position: relative; diff --git a/services/web/public/favicon.svg b/services/web/public/favicon.svg index d334df2c8a..8a436f8de4 100644 --- a/services/web/public/favicon.svg +++ b/services/web/public/favicon.svg @@ -1,14 +1,14 @@ - + - + + - - - - - + + + + + + V diff --git a/services/web/public/img/ol-brand/verso-logo-dark.svg b/services/web/public/img/ol-brand/verso-logo-dark.svg new file mode 100644 index 0000000000..7c2e6d1775 --- /dev/null +++ b/services/web/public/img/ol-brand/verso-logo-dark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + V + + verso + + ONLINE EDITOR + + diff --git a/services/web/public/img/ol-brand/verso-logo.svg b/services/web/public/img/ol-brand/verso-logo.svg new file mode 100644 index 0000000000..6c544182b3 --- /dev/null +++ b/services/web/public/img/ol-brand/verso-logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + V + + verso + + ONLINE EDITOR + + diff --git a/services/web/public/img/ol-brand/verso-square.svg b/services/web/public/img/ol-brand/verso-square.svg new file mode 100644 index 0000000000..8a436f8de4 --- /dev/null +++ b/services/web/public/img/ol-brand/verso-square.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + V + +