← All workTodos los proyectos Google · via Huge · 2026Google · vía Huge · 2026

Cloud + Workspace Blog — Brand Update.

When Google refreshed its brand, I updated the Cloud + Workspace Blog design system and proposals to the new guidelines — color, typography and iconography — using Claude to make the process more organized and efficient, without breaking the shipped designs.

Con la actualización de marca de Google, actualicé el design system y las propuestas del Cloud + Workspace Blog con los nuevos lineamientos —color, tipografía e iconografía—, apoyándome en Claude para que el proceso fuera más ordenado y eficiente, sin romper los diseños entregados.

RoleRolSenior Visual DesignerSenior Visual Designer

TeamEquipoSolo projectProyecto individual

ScopeAlcanceColor · Type · IconographyColor · Tipografía · Iconografía

ToolsHerramientasFigma · Variables · Claude + Figma MCPFigma · Variables · Claude + Figma MCP

●Confidential work. Some figures, copy and product details have been removed, blurred or generalized to respect client confidentiality.Trabajo confidencial. Algunas cifras, textos y detalles de producto se eliminaron, difuminaron o generalizaron para respetar la confidencialidad del cliente.

The challengeEl reto

A brand refresh landed in the middle of the project: a new typeface, palette and iconography had to flow through two brands, ~50 library pages and every final screen — without detaching components or losing overrides.

La actualización de marca llegó en mitad del proyecto: una nueva tipografía, paleta e iconografía tenían que fluir por dos marcas, ~50 páginas de librería y cada pantalla final, sin desvincular componentes ni perder overrides.

Doing it by hand meant days of clicking and a high risk of silent regressions.

Hacerlo a mano significaba días de clics y un alto riesgo de regresiones silenciosas.

What I didLo que hice

New brand guidelines across the system: color, typography and iconography updated in the library and in every design proposal, for both Cloud and Workspace.Nuevos lineamientos de marca en todo el sistema: color, tipografía e iconografía actualizados en la librería y en cada propuesta de diseño, para Cloud y Workspace.
AI‑assisted migration: scripted, verifiable passes with Claude + Figma MCP to re‑bind text styles and color tokens across every page, then re‑scan to prove zero leftovers.Migración asistida con IA: pasadas automatizadas y verificables con Claude + Figma MCP para re‑vincular estilos de texto y tokens de color en todas las páginas, y luego re‑escanear para comprobar cero pendientes.
Constant audits, accessibility first: every change reviewed, with contrast verified for each text/background pair in the new palette.Auditorías constantes, con la accesibilidad primero: cada cambio revisado, con el contraste verificado en cada par texto/fondo de la nueva paleta.
Developer‑ready deliverables: updated Figma files, an audit document of every modified element and a JSON of the changes generated with Claude, which sped up implementation.Entregables listos para desarrollo: Figmas actualizados, un documento de auditoría de todos los elementos modificados y un JSON con los cambios generado con Claude, que agilizó la implementación.

Audit

Auditoría

brand-update · audit

$ audit --library cloud-workspace --pages all --read-only

› scanning 13 pages · 2 brands…

text layers scanned 11,766

› typography: Google Sans Text → Google Sans Flex

text layers updated 3,719

unstyled layers → new font 388

✓ errors 0 · legacy layers 0

› color: re‑binding styles to the new palette

color styles re‑bound 3,570

components re‑linked 444

› visual audit · 13 old‑vs‑new screen pairs

! open flags 44 → 25 → 33 → 21

✓ contrast 277/277 pairs pass

› writing audit-report.md · changes.json

✓ done

01ScanEscanear
A read‑only pass across every page to measure the change before touching anything.

Una pasada de solo lectura por todas las páginas para medir el cambio antes de tocar nada.
02Fix in bulkCorregir en bloque
Text styles and color tokens re‑bound with Claude + Figma MCP, keeping overrides and layout intact.

Estilos de texto y tokens de color re‑vinculados con Claude + Figma MCP, conservando overrides y layout.
03Re‑auditRe‑auditar
A new scan proves zero leftovers; a visual old‑vs‑new review and a contrast check catch the rest.

Un nuevo escaneo comprueba cero pendientes; la revisión visual antes‑vs‑después y el contraste detectan el resto.
04Hand offEntregar
Updated Figma files, an audit document and a JSON of every change for the dev team.

Figmas actualizados, un documento de auditoría y un JSON con cada cambio para desarrollo.

Before → after

Antes → después

FoundationFundamento BeforeAntes AfterDespués ImpactImpacto

TypographyTipografía Google Sans Text Google Sans Flex 3,719 text layers updated · 388 unstyled layers assigned to the new font 3.719 capas de texto actualizadas · 388 capas sin estilo asignadas a la nueva fuente

ColorColor Previous palettePaleta anterior New brand paletteNueva paleta de marca 3,570 color styles re‑bound · 277/277 contrast pairs pass 3.570 estilos de color re‑vinculados · 277/277 pares de contraste aprobados

IconographyIconografía Previous icon setSet de íconos anterior New brand iconsÍconos de la nueva marca 444 components re‑linked to the library, no detached instances 444 componentes re‑vinculados a la librería, sin instancias desvinculadas

Same components, same overrides — only the tokens behind them changed.Los mismos componentes y overrides; solo cambiaron los tokens detrás de ellos.

Deliverables

Entregables

audit-reportAudit documentDocumento de auditoría

Element	Elemento	Change
Navigation	Font → Google Sans Flex · color tokensFuente → Google Sans Flex · tokens de color	✓
AI Search	Font · color tokens · iconsFuente · tokens de color · íconos	✓
Featured stories	Font · color tokensFuente · tokens de color	✓
Article · Code snippet	Font · color tokensFuente · tokens de color	✓
Article · AI summary	Icons · contrast reviewedÍconos · contraste revisado	✓
Footer	Font · iconsFuente · íconos	✓

changes.jsonGenerated with ClaudeGenerado con Claude

{
  "brandUpdate": {
    "typography": {
      "from": "Google Sans Text",
      "to": "Google Sans Flex",
      "layersUpdated": 3719
    },
    "color": {
      "stylesRebound": 3570,
      "contrastPass": "277/277"
    },
    "components": [
      { "name": "Navigation", "changes": ["font", "color"] },
      { "name": "AI Search", "changes": ["font", "color", "icons"] }
    ]
  }
}

Illustrative recreation — the original files are confidential. Figures come from the real audit.Recreación ilustrativa — los archivos originales son confidenciales. Las cifras son las de la auditoría real.

Final designs

Diseños finales

HomepageCloud, with the new brand appliedHomeCloud, con la nueva marca aplicada

Hover to scrollPasa el cursor

HomepageWorkspace, with the new brand appliedHomeWorkspace, con la nueva marca aplicada

Hover to scrollPasa el cursor

OutcomeResultado

The refresh shipped without breaking the final designs, and the audit document and JSON gave the dev team a precise map of every change.

La actualización salió sin romper los diseños finales, y el documento de auditoría y el JSON le dieron al equipo de desarrollo un mapa preciso de cada cambio.

The audit → fix → re‑audit loop is now repeatable for any future brand change.

El ciclo auditar → corregir → re‑auditar ahora es repetible para cualquier cambio de marca futuro.

11,76611.766text layers scannedcapas de texto escaneadas

3,7193.719layers migrated, 0 errorscapas migradas, 0 errores

3,5703.570color styles re‑boundestilos de color re‑vinculados

277/277contrast pairs passpares de contraste aprobados

Next projectSiguiente proyecto

Google Play — Developer Earnings