Skip to content

Commit d4367c8

Browse files
bennettfarkasclaude
bennettfarkas
and
claude
committed
Partner lockups: optical sizing + plain Google wordmark
- Add a per-lockup optical scale factor (--lk-h): some marks have tall icons that inflate their bbox, so a flat height read small/large. Tuned by eye — Notion/HubSpot up, Google Workspace down (it's long). - Add a plain "Google" 4-color wordmark lockup (Wikimedia, PD-textlogo) as its own card, separate from Google Workspace, with a currentColor mono. - partners.json records both Google lockups + the supplied official Rippling lockup (recolored to brand plum). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent f94c5a9 commit d4367c8

4 files changed

Lines changed: 28 additions & 20 deletions

File tree

‎public/logos/partners/google/wordmark-mono.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎public/logos/partners/google/wordmark.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎public/logos/partners/partners.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,12 @@
3636
"icon": "google/icon.svg",
3737
"iconColor": "google/icon-color.svg",
3838
"lockup": {
39-
"wordmark": "google/logo.svg",
40-
"mono": "google/logo-mono.svg"
39+
"workspace": "google/logo.svg",
40+
"workspace-mono": "google/logo-mono.svg",
41+
"wordmark": "google/wordmark.svg",
42+
"wordmark-mono": "google/wordmark-mono.svg"
4143
},
42-
"notes": "icon-color = the official 4-color 'G' artwork — DO NOT recolor (Google guidelines). icon.svg = generic mono G glyph. lockup = the 2026 Google Workspace wordmark (Wikimedia Commons, PD-textlogo); logo-mono.svg is a currentColor knockout of it (note: Google's guidelines discourage recoloring — use the color wordmark externally). App-icon use is partner-gated.",
44+
"notes": "icon-color = official 4-color 'G' (DO NOT recolor — Google guidelines). icon.svg = mono G glyph. Lockups: 'Google Workspace' wordmark + plain 'Google' 4-color wordmark (both Wikimedia, PD-textlogo), each with a currentColor knockout (note: Google discourages recoloring — prefer the color versions externally). App icons partner-gated.",
4345
"gaps": [
4446
"app icons (Gmail/Drive/etc.) are partner-gated"
4547
]
@@ -136,7 +138,7 @@
136138
"brandColor": "#000000",
137139
"icon": "rippling/icon.svg",
138140
"iconColor": "rippling/icon-color.svg",
139-
"notes": "icon = official 'R' mark (mono, currentColor); icon-color = official color app icon (plum/yellow); lockup = official combined mark+wordmark from Rippling's CDN (mauve #A17A8B), with a currentColor knockout. All from rippling2.imgix.net.",
141+
"notes": "icon = official 'R' mark (mono); icon-color = official color app icon (plum/yellow); lockup = the official Rippling combined mark+wordmark vector, recolored to brand plum (#402530) + a currentColor knockout.",
140142
"gaps": [],
141143
"lockup": {
142144
"main": "rippling/logo.svg",

‎src/pages/index.astro‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -206,19 +206,21 @@ const partnerIcons = [
206206
{ brand: '1password', label: '1Password', color: 'icon-color.svg' },
207207
{ brand: 'rippling', label: 'Rippling', color: 'icon-color.svg' },
208208
];
209-
// color = the primary lockup; mono = 1-color (currentColor). Google has no mono
210-
// (its guidelines forbid it). Rippling omitted — no combined lockup by design.
209+
// color = primary lockup; mono = 1-color (currentColor). `scale` is an optical
210+
// size multiplier (some marks have tall icons that inflate their bbox, so a flat
211+
// height reads small/large — tuned by eye for a consistent wordmark size).
211212
const partnerLockups = [
212-
{ brand: 'google', label: 'Google Workspace', color: 'logo.svg', mono: 'logo-mono.svg' },
213-
{ brand: 'github', label: 'GitHub', color: 'logo-black.svg', mono: 'logo-mono.svg' },
214-
{ brand: 'notion', label: 'Notion', color: 'logo.svg', mono: 'logo-mono.svg' },
215-
{ brand: 'asana', label: 'Asana', color: 'logo.svg', mono: 'logo-mono.svg' },
216-
{ brand: 'slack', label: 'Slack', color: 'logo.svg', mono: 'logo-mono.svg' },
217-
{ brand: 'claude', label: 'Claude', color: 'logo.svg', mono: 'logo-mono.svg' },
218-
{ brand: 'hubspot', label: 'HubSpot', color: 'logo.svg', mono: 'logo-mono.svg' },
219-
{ brand: '1password', label: '1Password', color: 'logo-black.svg', mono: 'logo-mono.svg' },
220-
{ brand: 'ramp', label: 'Ramp', color: 'logo.svg', mono: 'logo-mono.svg' },
221-
{ brand: 'rippling', label: 'Rippling', color: 'logo.svg', mono: 'logo-mono.svg' },
213+
{ brand: 'google', label: 'Google Workspace', color: 'logo.svg', mono: 'logo-mono.svg', scale: 0.8 },
214+
{ brand: 'google', label: 'Google', color: 'wordmark.svg', mono: 'wordmark-mono.svg', scale: 1 },
215+
{ brand: 'github', label: 'GitHub', color: 'logo-black.svg', mono: 'logo-mono.svg', scale: 1 },
216+
{ brand: 'notion', label: 'Notion', color: 'logo.svg', mono: 'logo-mono.svg', scale: 1.4 },
217+
{ brand: 'asana', label: 'Asana', color: 'logo.svg', mono: 'logo-mono.svg', scale: 1 },
218+
{ brand: 'slack', label: 'Slack', color: 'logo.svg', mono: 'logo-mono.svg', scale: 1 },
219+
{ brand: 'claude', label: 'Claude', color: 'logo.svg', mono: 'logo-mono.svg', scale: 1 },
220+
{ brand: 'hubspot', label: 'HubSpot', color: 'logo.svg', mono: 'logo-mono.svg', scale: 1.35 },
221+
{ brand: '1password', label: '1Password', color: 'logo-black.svg', mono: 'logo-mono.svg', scale: 1 },
222+
{ brand: 'ramp', label: 'Ramp', color: 'logo.svg', mono: 'logo-mono.svg', scale: 1 },
223+
{ brand: 'rippling', label: 'Rippling', color: 'logo.svg', mono: 'logo-mono.svg', scale: 1 },
222224
];
223225
---
224226

@@ -834,8 +836,8 @@ model.fit(dataset.features, dataset.labels)`}</CodeBlock>
834836

835837
<h4 class="sg-subsection-title">Lockups</h4>
836838
<div class="sg-logo-grid">
837-
{partnerLockups.map(({ brand, label, color, mono }) => (
838-
<div class="sg-pcard sg-pcard--wide">
839+
{partnerLockups.map(({ brand, label, color, mono, scale = 1 }) => (
840+
<div class="sg-pcard sg-pcard--wide" style={`--lk-h:${(22 * scale).toFixed(1)}px`}>
839841
<div class="sg-pcard__row">
840842
<div class="sg-pv">
841843
<div class="sg-pv__box sg-pv__box--lockup" data-section="always-light"><img src={`${base}/logos/partners/${brand}/${color}`} alt={`${label} lockup`} class="sg-pcard__lockup" /></div>
@@ -1402,12 +1404,12 @@ model.fit(dataset.features, dataset.labels)`}</CodeBlock>
14021404
background: var(--surface-foreground-lowest);
14031405
}
14041406
.sg-pcard__icon { height: 34px; width: auto; } /* icons: uniform square */
1405-
.sg-pcard__lockup { height: 22px; width: auto; max-width: 100%; } /* lockups: uniform height */
1407+
.sg-pcard__lockup { height: var(--lk-h, 22px); width: auto; max-width: 100%; } /* lockups: per-mark optical height */
14061408
/* 1-color boxes: dark surface, mark inlined so currentColor renders light/white */
14071409
.sg-pv__box--dark { color: var(--text-headline); }
14081410
.sg-pv__box--dark :global(svg) { color: var(--text-headline); }
14091411
.sg-pv__box--icon :global(svg) { height: 34px; width: auto; display: block; }
1410-
.sg-pv__box--lockup :global(svg) { height: 22px; width: auto; max-width: 100%; display: block; }
1412+
.sg-pv__box--lockup :global(svg) { height: var(--lk-h, 22px); width: auto; max-width: 100%; display: block; }
14111413
.sg-pv__tag { font-size: 11px; font-weight: 500; color: var(--text-subtle); }
14121414
.sg-pv__na { font-size: 11px; color: var(--text-subtle); text-align: center; }
14131415
.sg-pcard__label { text-align: center; }

0 commit comments

Comments
 (0)