Minimalism & Swiss Style

Also called: International Typographic Style, Swiss Minimal

A strict grid, a neutral grotesque, black on white and one signal red — clarity as the aesthetic.

“Swiss grid”Minimal & CleanEra: 1950s → todayCalmSeriousTrustworthy

minimalism-swiss / landingEN

minimalism-swiss / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×1.1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

strict gridflush-left typeneutral grotesquehairline rulesone accent coloursquare cornersgenerous whitespacenumbered sections

Rooted in 1950s Swiss posters, this style lets typography and alignment carry the whole design. Layouts sit on a visible 12-column grid, headings are large and flush-left, decoration is replaced by rules (hairlines) and numbering, and colour is almost absent apart from a single accent. Corners are square and shadows do not exist.

Best for

Studios, architects and agencies
Corporate sites and annual reports
Documentation and B2B SaaS
Museums and cultural institutions

Avoid for

Kids and playful consumer apps
Brands that need warmth and emotion
Gaming

✓ Do

Align everything to a 12-column grid
Create hierarchy with size and weight only
Red only for small marks (squares, 2px underlines, numerals) plus one closing red CTA block

✕ Don't

No shadows, gradients or rounded corners
Don’t centre long text
Don’t add decorative illustrations

Not to be confused with

Swiss Modernism 2.0 →Swiss Modernism 2.0 adds bold colour fields, motion and asymmetric experiments; classic Swiss stays monochrome and calm.Flat Design →Flat design uses many bright colours and icons; Swiss relies on type and grid with almost no colour.Minimalist Monochrome →Minimalist Monochrome is pure #000/#FFF with a didone display and no accent; Swiss uses a neutral grotesque, a visible column grid and one signal red.

On mobile

Use a 4-column grid with 20px gutters, a large left-aligned title per screen, and hairline-separated lists instead of cards.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinInter Tight · 500/600/700

The quick brown fox

Heading · ThaiIBM Plex Sans Thai · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinInter · 400/500/600

Clear words make shared decisions.

Body · ThaiIBM Plex Sans Thai · 400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

IBM Plex Sans Thai is a loopless, rational grotesque — the closest Thai match to Helvetica-style neutrality.

Colour palette

Light

Dark

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 0px`
Border	`1px`
Shadow	`none`
Display	`clamp(3rem, 7.5vw, 6.5rem)`
Motion	`150ms linear`
Density	`×1.1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Minimalism & Swiss Style (minimalism-swiss) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap
 */
:root {
  --radius: 0px;
  --background: #FFFFFF;
  --foreground: #111111;
  --card: #FFFFFF;
  --card-foreground: #111111;
  --popover: #FFFFFF;
  --popover-foreground: #111111;
  --primary: #111111;
  --primary-foreground: #FFFFFF;
  --secondary: #E30613;
  --secondary-foreground: #FFFFFF;
  --muted: #F4F4F4;
  --muted-foreground: #5E5E5E;
  --accent: #F4F4F4;
  --accent-foreground: #111111;
  --destructive: #E30613;
  --border: #111111;
  --input: #111111;
  --ring: #111111;
  --chart-1: #111111;
  --chart-2: #E30613;
  --chart-3: #8C8C8C;
  --chart-4: #C4C4C4;
  --chart-5: #5E5E5E;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #111111;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F4F4F4;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #111111;
  --sidebar-ring: #111111;
}

.dark {
  --background: #0E0E0E;
  --foreground: #F2F2F2;
  --card: #0E0E0E;
  --card-foreground: #F2F2F2;
  --popover: #0E0E0E;
  --popover-foreground: #F2F2F2;
  --primary: #F2F2F2;
  --primary-foreground: #0E0E0E;
  --secondary: #FF2A2A;
  --secondary-foreground: #0E0E0E;
  --muted: #1A1A1A;
  --muted-foreground: #A3A3A3;
  --accent: #1A1A1A;
  --accent-foreground: #F2F2F2;
  --destructive: #FF2A2A;
  --border: #F2F2F2;
  --input: #F2F2F2;
  --ring: #F2F2F2;
  --chart-1: #F2F2F2;
  --chart-2: #FF2A2A;
  --chart-3: #8C8C8C;
  --chart-4: #555555;
  --chart-5: #BDBDBD;
  --sidebar: #0E0E0E;
  --sidebar-foreground: #F2F2F2;
  --sidebar-primary: #F2F2F2;
  --sidebar-primary-foreground: #0E0E0E;
  --sidebar-accent: #1A1A1A;
  --sidebar-accent-foreground: #F2F2F2;
  --sidebar-border: #F2F2F2;
  --sidebar-ring: #F2F2F2;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Minimalism & Swiss Style (minimalism-swiss) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap
 */
@theme {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F4F4;
  --color-text: #111111;
  --color-text-muted: #5E5E5E;
  --color-primary: #111111;
  --color-on-primary: #FFFFFF;
  --color-secondary: #E30613;
  --color-on-secondary: #FFFFFF;
  --color-accent: #E30613;
  --color-border: #111111;
  --color-success: #1A7F37;
  --color-warning: #B26B00;
  --color-danger: #E30613;
  --color-chart-1: #111111;
  --color-chart-2: #E30613;
  --color-chart-3: #8C8C8C;
  --color-chart-4: #C4C4C4;
  --color-chart-5: #5E5E5E;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  --font-heading: "Inter Tight", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-body: "Inter", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace;
}

.dark {
  --color-bg: #0E0E0E;
  --color-surface: #0E0E0E;
  --color-surface-2: #1A1A1A;
  --color-text: #F2F2F2;
  --color-text-muted: #A3A3A3;
  --color-primary: #F2F2F2;
  --color-on-primary: #0E0E0E;
  --color-secondary: #FF2A2A;
  --color-on-secondary: #0E0E0E;
  --color-accent: #FF2A2A;
  --color-border: #F2F2F2;
  --color-success: #3FB950;
  --color-warning: #D29922;
  --color-danger: #FF2A2A;
  --color-chart-1: #F2F2F2;
  --color-chart-2: #FF2A2A;
  --color-chart-3: #8C8C8C;
  --color-chart-4: #555555;
  --color-chart-5: #BDBDBD;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Minimalism & Swiss Style (minimalism-swiss). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9569,
            0.9569
          ],
          "hex": "#f4f4f4"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0667,
            0.0667
          ],
          "hex": "#111111"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.3686,
            0.3686
          ],
          "hex": "#5e5e5e"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0667,
            0.0667
          ],
          "hex": "#111111"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.0235,
            0.0745
          ],
          "hex": "#e30613"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.0235,
            0.0745
          ],
          "hex": "#e30613"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0667,
            0.0667
          ],
          "hex": "#111111"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.498,
            0.2157
          ],
          "hex": "#1a7f37"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.698,
            0.4196,
            0
          ],
          "hex": "#b26b00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.0235,
            0.0745
          ],
          "hex": "#e30613"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0667,
            0.0667
          ],
          "hex": "#111111"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.0235,
            0.0745
          ],
          "hex": "#e30613"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.549,
            0.549
          ],
          "hex": "#8c8c8c"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7686,
            0.7686,
            0.7686
          ],
          "hex": "#c4c4c4"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.3686,
            0.3686
          ],
          "hex": "#5e5e5e"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0549,
            0.0549
          ],
          "hex": "#0e0e0e"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0549,
            0.0549
          ],
          "hex": "#0e0e0e"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.102,
            0.102
          ],
          "hex": "#1a1a1a"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.949,
            0.949
          ],
          "hex": "#f2f2f2"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.6392,
            0.6392
          ],
          "hex": "#a3a3a3"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.949,
            0.949
          ],
          "hex": "#f2f2f2"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0549,
            0.0549
          ],
          "hex": "#0e0e0e"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.1647,
            0.1647
          ],
          "hex": "#ff2a2a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0549,
            0.0549
          ],
          "hex": "#0e0e0e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.1647,
            0.1647
          ],
          "hex": "#ff2a2a"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.949,
            0.949
          ],
          "hex": "#f2f2f2"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.7255,
            0.3137
          ],
          "hex": "#3fb950"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8235,
            0.6,
            0.1333
          ],
          "hex": "#d29922"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.1647,
            0.1647
          ],
          "hex": "#ff2a2a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.949,
            0.949
          ],
          "hex": "#f2f2f2"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.1647,
            0.1647
          ],
          "hex": "#ff2a2a"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.549,
            0.549
          ],
          "hex": "#8c8c8c"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3333,
            0.3333,
            0.3333
          ],
          "hex": "#555555"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7412,
            0.7412,
            0.7412
          ],
          "hex": "#bdbdbd"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Inter Tight",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "IBM Plex Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 150,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0,
      0,
      1,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!