video/.claude/skills/visual-style/references/gallery/mueller-brockmann-swiss.visual-style.md

name, version, tags, author, source_url, created, style_prompt_short, style_prompt_full, colors, typography, layout, motion, mood, assets, x_heygen

name	version	tags	author	source_url	created	style_prompt_short	style_prompt_full	colors	typography	layout	motion	mood	assets	x_heygen
Josef Müller-Brockmann Swiss International Style	1.0	iconic design sleek minimal	Bin		2026-03-12	Grid-locked Swiss precision. Black and white base with electric blue accent. Helvetica only. Data visualizations as hero elements. Every frame snaps to a mathematical grid. Geometric, systematic, exact.	Josef Müller-Brockmann Swiss International Style. Grid-locked layouts with mathematical precision. Black and white base with ONE accent color (electric blue #0066FF). Strong diagonal compositions. Helvetica typography only. Data visualizations are the hero — animated charts, counters, grids. Every frame snaps to a grid. Transitions are horizontal grid wipes. No organic shapes. No gradients. No stock photography. Everything is geometric, systematic, precise.	primary accent neutral name hex role Pure Black #000000 dominant ground, text, structural elements name hex role Pure White #FFFFFF background fields, negative space name hex role Electric Blue #0066FF the ONE accent — data highlights, key emphasis name hex role Grid Gray #CCCCCC grid lines, secondary structure name hex role Dark Gray #333333 supporting text, secondary labels	display body caption rules family weight style Helvetica bold uppercase or sentence case, tight tracking family weight style Helvetica regular flush left, ragged right, generous leading family weight style Helvetica light small, uppercase, wide tracking Helvetica ONLY — no other typeface Type sizes follow a mathematical scale Always flush left — never centered Weight contrast does the hierarchy	grid alignment aspect_ratio notes Strict modular grid — 12 columns Flush left, grid-snapped 16:9 Every element locked to the grid Strong diagonal compositions within orthogonal grid Data visualizations are the hero elements	transitions animation_style pacing horizontal grid wipes elements snapping to grid positions clean hard cuts Geometric precision. Elements snap to grid positions. Charts animate systematically. Counters tick mechanically. Nothing bounces. Measured, confident, unhurried	keywords era cultural_reference avoid precise systematic authoritative geometric 1950s–1970s (timeless) Müller-Brockmann, Grid Systems in Graphic Design, Zurich School organic or curved shapes gradients stock photography more than one accent color centered text decorative elements handwritten or serif typefaces drop shadows or glows rounded corners	reference_images gsep_elements html_snippets color_palette_image url	video_id orientation landscape

Design Principles

Typography and the grid are the only design elements needed. Mathematical relationships create visual harmony. Restraint is the ultimate sophistication. The grid is not a limitation — it is liberation through structure.

Connectors

HeyGen Video Agent

Use style_prompt_full verbatim. Specify: No avatar, no b-roll — pure motion graphics. Hard cuts between scenes. Data visualizations should animate systematically.

HTML Slides

CSS variables: --color-bg: #000, --color-text: #FFF, --color-accent: #0066FF. All text flush left. 12-column grid. Helvetica or system sans-serif fallback.

paper.design

Set up 12-column grid. Background black, text white. Single accent color. Every element should snap to grid intersections.

Figma

Color styles: brand/black, brand/white, accent/electric-blue, neutral/grid-gray. Text styles: heading/display (Helvetica Bold), body/default (Helvetica Regular). Layout grid: 12 columns, strict alignment.