Editorialsystem
Swiss International Style
This prompt produces genuinely distinct output
Generates UI in the Swiss/International Typographic Style — Helvetica, mathematical grids, asymmetric layouts, objective photography zones, and the radical clarity of the world's most influential graphic design movement.
swissinternationalhelveticagridtypographic
Added February 16, 2026 by unslop.dev
Example output
Grid-based article layout
Essay
The Grid as Language
The mathematical grid is not a limitation but a framework for absolute creative freedom. Within its constraints, every element finds its precise, objective position.
Josef Müller-Brockmann demonstrated that the grid could organize the most complex information into clear, accessible form. The grid speaks.
Author
Max Keller — Zurich, 1962
View code
<div style="padding: 2rem; background: #fff;">
<div style="max-width: 32rem; display: grid; grid-template-columns: 80px 1fr; gap: 0 2rem;">
<div>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #999; margin: 0;">Essay</p>
</div>
<div>
<h2 style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 2rem; font-weight: 300; color: #000; margin: 0 0 0.25rem 0; line-height: 1.15;">The Grid as Language</h2>
<div style="width: 2rem; height: 2px; background: #ff0000; margin: 0.75rem 0;"></div>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #333; line-height: 1.7; margin: 0 0 1rem 0;">The mathematical grid is not a limitation but a framework for absolute creative freedom. Within its constraints, every element finds its precise, objective position.</p>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #333; line-height: 1.7; margin: 0 0 1.5rem 0;">Josef Müller-Brockmann demonstrated that the grid could organize the most complex information into clear, accessible form. The grid speaks.</p>
</div>
<div>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #999; margin: 0;">Author</p>
</div>
<div>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8125rem; color: #000; margin: 0;">Max Keller — Zurich, 1962</p>
</div>
</div>
</div>Functional navigation
Index
Typography
12
Grid Systems
24
Color Theory
8
Photography
16
Exhibition
6
View code
<div style="padding: 2rem; background: #fff;">
<div style="max-width: 32rem; display: grid; grid-template-columns: 80px 1fr; gap: 0 2rem;">
<div>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #999; margin: 0;">Index</p>
</div>
<div style="border-top: 1px solid #000;">
<div style="padding: 0.625rem 0; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between;">
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #e8341c; font-weight: 700;">Typography</span>
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #999;">12</span>
</div>
<div style="padding: 0.625rem 0; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between;">
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #000;">Grid Systems</span>
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #999;">24</span>
</div>
<div style="padding: 0.625rem 0; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between;">
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #000;">Color Theory</span>
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #999;">8</span>
</div>
<div style="padding: 0.625rem 0; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between;">
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #000;">Photography</span>
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #999;">16</span>
</div>
<div style="padding: 0.625rem 0; display: flex; justify-content: space-between;">
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #000;">Exhibition</span>
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #999;">6</span>
</div>
</div>
</div>
</div>Data table
Output
Q4 2025Division
Revenue
Change
Publishing
CHF 2.4M
+12%
Identity
CHF 1.8M
+3%
Exhibition
CHF 0.9M
+28%
View code
<div style="padding: 2rem; background: #fff;">
<div style="max-width: 30rem;">
<div style="display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.75rem;">
<h3 style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.875rem; font-weight: 700; color: #000; margin: 0; text-transform: uppercase; letter-spacing: 0.05em;">Output</h3>
<div style="width: 1.5rem; height: 2px; background: #e8341c;"></div>
<span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 0.1em;">Q4 2025</span>
</div>
<div style="border-top: 2px solid #000;">
<div style="display: grid; grid-template-columns: 2fr 1fr 1fr; border-bottom: 1px solid #000;">
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #999;">Division</div>
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #999; text-align: right;">Revenue</div>
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #999; text-align: right;">Change</div>
</div>
<div style="display: grid; grid-template-columns: 2fr 1fr 1fr; border-bottom: 1px solid #e5e5e5;">
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8125rem; color: #000;">Publishing</div>
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8125rem; color: #000; text-align: right;">CHF 2.4M</div>
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8125rem; color: #e8341c; text-align: right;">+12%</div>
</div>
<div style="display: grid; grid-template-columns: 2fr 1fr 1fr; border-bottom: 1px solid #e5e5e5;">
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8125rem; color: #000;">Identity</div>
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8125rem; color: #000; text-align: right;">CHF 1.8M</div>
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8125rem; color: #000; text-align: right;">+3%</div>
</div>
<div style="display: grid; grid-template-columns: 2fr 1fr 1fr;">
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8125rem; color: #000;">Exhibition</div>
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8125rem; color: #000; text-align: right;">CHF 0.9M</div>
<div style="padding: 0.5rem 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8125rem; color: #e8341c; text-align: right;">+28%</div>
</div>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in the Swiss International Typographic Style — the design movement born in 1950s Switzerland that became the dominant visual language of global modernism. Strict mathematical grids, Helvetica as the universal typeface, asymmetric layouts, flush-left ragged-right text, objective clarity, and the belief that design should be a transparent vehicle for information, not self-expression. VISUAL RULES: - Background: White (#ffffff). Clean, unadorned, the neutral field. - Text: Black (#000000) for primary. Dark gray (#333333) for secondary. Medium gray (#999999) for captions and metadata. No other text colors except red for emphasis. - Accent color: A single functional red (#ff0000) or vermillion (#e8341c). Used sparingly — for emphasis, wayfinding, or active states. Red is the only color that breaks the monochrome. - Typography: Helvetica. `font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif`. The foundational typeface. Light (300) for large display, regular (400) for body, bold (700) for emphasis. Size creates hierarchy: 60px+ for display, 24px for section heads, 14px for body, 10px for captions. - Grid: Mathematical and visible in structure. Multi-column grid (3, 4, or 6 columns). Content respects grid boundaries absolutely. The grid IS the design. - Alignment: Flush left, ragged right for text. No centering (centering is an aesthetic choice; left-alignment is objective). Elements snap to grid lines. - Spacing: Systematic. Based on a baseline grid (e.g., 8px or 12px). Vertical rhythm is precise. White space is generous and intentional. - Borders: Thin black rules (1px) to structure grids. Functional, not decorative. - Border radius: 0px. Always. Swiss style is rectilinear. - Imagery zones: Large rectangular blocks where photography would go. Represented as gray (#e5e5e5) or black rectangles. Full-bleed or grid-aligned. SPECIFIC PATTERNS: - Layout: Asymmetric multi-column. Narrow left column for labels/navigation. Wide right area for content. Grid-based tension. - Headers: Large, light-weight Helvetica. Left-aligned. Often with a red rule below. - Cards: White, bordered by grid rules. No shadow, no fill. Content organized in strict internal columns. - Buttons: Minimal. Black text with red underline, or small black rectangles with white text. Never showy. - Data: Clean tabular display. Right-aligned numbers. Left-aligned labels. Thin rule dividers. - Labels: Small (10-11px), uppercase, letterspaced. Gray. Positioned in the narrow grid column. - Navigation: Flush-left text list. Active item in red or bold. No decorative markers. ANTI-PATTERNS: - No centering. Left-align everything. - No decorative borders or shadows. - No rounded corners. - No gradients. - No color beyond the monochrome + red system. - No serif fonts. No display fonts. Helvetica only. - No visual noise. Every element must justify its existence. - No expressive or emotional design choices.
Related prompts
Featured
Midnight Frequencies
Curated late-night electronic sessions. Deep cuts from the archive, surfaced for the nocturnal.
4.2K
plays
312
saves
87
shares
98%
rating
Editorial
Duotone
system
Generates UI using strict two-color palettes — every element rendered in precisely two hues plus their blend, creating high-impact graphic compositions inspired by Spotify's iconic duotone imagery and silkscreen poster art.
Issue 04
The joy of constraints in interface design
When you limit your palette to two colors and a paper stock, every decision becomes more intentional. Design thrives under constraint.
Feb 2026
pg. 12
Editorial
Risograph Print
system
Generates UI with the tactile charm of risograph printing — limited spot colors, visible halftone texture, slight misregistration, and the warmth of indie zine culture. Screen-printed pixels.
Editorial
Terracotta Earth
system
Generates UI with sun-baked desert warmth — clay oranges, dried sage, sandstone textures, and the grounded beauty of Southwestern architecture. Adobe walls as a design system.