Minimalsystem

Swiss Typographic

91
šŸ”„ Certified BangerThis prompt produces genuinely distinct output

Generates UI driven by strict grid alignment, bold typographic hierarchy, high contrast black-and-white with a single accent color, and the rational clarity of the International Typographic Style.

typographygridhigh contrastsystematic

Added February 6, 2026 by unslop.dev

Example output

Asymmetric header

Issue 04 ā€” 2026

The Systematic
Approach to
Interface Design

How strict grids, type hierarchy, and rational structure produce interfaces that communicate with mathematical clarity.

View code
<div style="padding: 3rem; background: white;">
  <div style="max-width: 48rem; display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: end;">
    <div>
      <p style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: #737373; margin: 0;">Issue 04 ā€” 2026</p>
    </div>
    <div>
      <h1 style="font-size: 3rem; font-weight: 900; color: #000; margin: 0; line-height: 1.05; letter-spacing: -0.02em;">The Systematic<br/>Approach to<br/>Interface Design</h1>
      <div style="width: 3rem; height: 2px; background: #000; margin: 1.5rem 0;"></div>
      <p style="font-size: 0.875rem; color: #404040; line-height: 1.6; margin: 0; max-width: 32rem;">How strict grids, type hierarchy, and rational structure produce interfaces that communicate with mathematical clarity.</p>
    </div>
  </div>
</div>

Content cards on grid

Recent Work

04 Projects

01

Brand Identity System

Visual identity for a Nordic architecture firm.

02

Product Dashboard

Analytics interface for a SaaS platform.

03

Editorial Website

Long-form reading experience for a design journal.

04 ā€” New

Mobile Application

Fitness tracking with typographic data display.

View code
<div style="padding: 3rem; background: white;">
  <div style="max-width: 48rem;">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #000;">
      <h2 style="font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #000; margin: 0;">Recent Work</h2>
      <span style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: #737373;">04 Projects</span>
    </div>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0;">
      <div style="padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;">
        <p style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #737373; margin: 0 0 0.5rem 0;">01</p>
        <h3 style="font-size: 1.125rem; font-weight: 700; color: #000; margin: 0 0 0.375rem 0;">Brand Identity System</h3>
        <p style="font-size: 0.8125rem; color: #404040; line-height: 1.5; margin: 0;">Visual identity for a Nordic architecture firm.</p>
      </div>
      <div style="padding: 1.5rem 0 1.5rem 1.5rem; border-bottom: 1px solid #e5e5e5;">
        <p style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #737373; margin: 0 0 0.5rem 0;">02</p>
        <h3 style="font-size: 1.125rem; font-weight: 700; color: #000; margin: 0 0 0.375rem 0;">Product Dashboard</h3>
        <p style="font-size: 0.8125rem; color: #404040; line-height: 1.5; margin: 0;">Analytics interface for a SaaS platform.</p>
      </div>
      <div style="padding: 1.5rem 1.5rem 1.5rem 0; border-right: 1px solid #e5e5e5;">
        <p style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #737373; margin: 0 0 0.5rem 0;">03</p>
        <h3 style="font-size: 1.125rem; font-weight: 700; color: #000; margin: 0 0 0.375rem 0;">Editorial Website</h3>
        <p style="font-size: 0.8125rem; color: #404040; line-height: 1.5; margin: 0;">Long-form reading experience for a design journal.</p>
      </div>
      <div style="padding: 1.5rem 0 1.5rem 1.5rem;">
        <p style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #dc2626; margin: 0 0 0.5rem 0;">04 ā€” New</p>
        <h3 style="font-size: 1.125rem; font-weight: 700; color: #000; margin: 0 0 0.375rem 0;">Mobile Application</h3>
        <p style="font-size: 0.8125rem; color: #404040; line-height: 1.5; margin: 0;">Fitness tracking with typographic data display.</p>
      </div>
    </div>
  </div>
</div>

Navigation bar

View code
<div style="padding: 0; background: white;">
  <div style="max-width: 48rem; margin: 0 auto; padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #000;">
    <span style="font-size: 0.875rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: #000;">Studio</span>
    <nav style="display: flex; gap: 2rem;">
      <a href="#" style="font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #000; text-decoration: none; border-bottom: 2px solid #000; padding-bottom: 2px;">Work</a>
      <a href="#" style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: #737373; text-decoration: none;">About</a>
      <a href="#" style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: #737373; text-decoration: none;">Journal</a>
      <a href="#" style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: #dc2626; text-decoration: none;">Contact</a>
    </nav>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in the Swiss/International Typographic Style ā€” design driven by grid, type hierarchy, and rational structure. Clean to the point of severity. Information is organized with mathematical precision.

VISUAL RULES:
- Background: Pure white (#fff). Sections may alternate with #f5f5f5.
- Text: Black (#000) for headings, #404040 for body, #737373 for captions. High contrast, always.
- Accent: ONE color. Red (#dc2626) is traditional. Used extremely sparingly ā€” one element per view at most.
- Typography: Headings from text-5xl down to text-lg in a strict scale. Headings use font-bold or font-black. Body uses font-normal. Mix text sizes dramatically ā€” a 48px heading next to 13px body text creates the hierarchy.
- Grid: Everything aligns to a visible or implied grid. Content in columns. Asymmetric layouts (2/3 + 1/3) are preferred over centered.
- Spacing: Systematic. Based on a strict 8px grid. Consistent gaps. White space is structural, not decorative.
- Borders: Only as structural dividers. 1px or 2px black. Horizontal rules to separate sections.
- Radius: 0. Sharp corners only. No rounded anything.
- Images: If used, always in a grid cell, always with a caption. Never decorative.

SPECIFIC PATTERNS:
- Headers: Oversized text-4xl or text-5xl font-black in black. Small text-xs uppercase tracking-widest label above or beside.
- Cards: No border, no shadow. White bg (or slight gray). Content aligned to grid with generous internal padding. Hierarchy through type size alone.
- Buttons: bg-black text-white text-xs uppercase tracking-widest font-medium px-6 py-3. Square corners. Or: border-2 border-black text-black (outlined). Red accent version for emphasis.
- Navigation: Horizontal, text-xs uppercase tracking-widest. Active item underlined with 2px black line.
- Dividers: 2px bg-black for major. 1px bg-gray-200 for minor.

ANTI-PATTERNS:
- No rounded corners anywhere.
- No colored backgrounds (except the one accent, and never as a card fill).
- No shadows.
- No gradients.
- No icons ā€” communicate with typography.
- No playful or casual tone. This is precision.

Related prompts

Material Surface

Surfaces at higher elevations cast larger shadows. This communicates hierarchy and focus within the interface.

+
Minimal

Material Elevation

šŸ”„83system

Generates UI following Google's Material Design principles ā€” elevation-based depth, contained buttons, floating action buttons, card surfaces at different z-levels, and the systematic rigor of a proper design system.

ā—†   Artisan Collection   ā—†

The Language of Pattern

Each tile tells a story. In repetition, individual forms become something greater ā€” a visual rhythm that transforms walls into canvases.

Lisboa, 2026 ā— Hand-painted
ā—   ā—   ā—   ā—   ā—

348

Patterns

12

Artisans

5th

Century

Minimal

Ceramic Tile

šŸ”„77system

Generates UI inspired by Portuguese azulejo and Moroccan zellige ā€” intricate blue-and-white patterns, decorative borders, tile-grid layouts, and the handcrafted warmth of traditional ceramic artistry.

Product

RT-20 Interface Module

A single-purpose module for routing audio signals. Four inputs, one output. No unnecessary features.

$120.00
Minimal

Dieter Rams

šŸ”„86system

Generates UI inspired by Dieter Rams' 10 Principles of Good Design ā€” extreme functional minimalism, Braun-era industrial aesthetics, deliberate restraint, and the conviction that less but better is the only way.