themx
← Back to themes

Swiss/International

minimalist Visual style

The grid is everything

Reference year: 2024

Compare this theme

Best for

Editorial, Portfolio, Brand & events

Less suitable for

  • Playful experiences that depend on irregular composition.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Swiss/International preview

Examples

Swiss/International — Hero Section
Hero Section
Swiss/International — Card Grid
Card Grid
Swiss/International — Form
Form
Swiss/International — Dashboard Layout
Dashboard Layout

Color Palette

Primary #000000
Secondary #FF0000
Accent #0057B7
Background #FFFFFF
Text #1A1A1A

Typography

Heading: Helvetica Neue
Body: Helvetica Neue

Key Characteristics

  • Strict grid-based layouts
  • Heavy use of whitespace
  • Sans-serif typography only
  • Limited color palette (black white one accent)
  • Asymmetric but balanced compositions
  • Information hierarchy through scale

Tags

grid helvetica whitespace functional

The Swiss (or International Typographic) Style originated in Switzerland and Germany in the 1950s and remains one of the most influential design movements in history. Rooted in principles of cleanliness, readability, and objectivity, it treats the grid as a near-sacred organizing principle. Every element has a mathematically justified position, yet the results feel effortlessly composed rather than rigid.

When to Use

Swiss-International style is ideal for editorial websites, corporate identities, data-heavy publications, and any project where clarity and professionalism are paramount. It suits brands that want to communicate authority and trustworthiness through restraint. The approach also scales beautifully — the same grid system works for a business card and a billboard.

Key Visual Elements

The grid is the foundation of everything. Typically a multi-column grid (6, 9, or 12 columns) dictates placement of all elements. Color is used sparingly — often just black, white, and a single accent color (traditionally red). Photography is presented cleanly without filters or overlays. Generous whitespace is not empty space but an active design element that gives content room to breathe and creates visual rhythm.

Typography

Helvetica Neue (or its close relatives like Aktiv Grotesk and Inter) is the canonical choice. Type hierarchy is established through dramatic differences in scale rather than decorative treatments. A headline might be 72px while body text sits at 16px, creating clear visual levels. Flush-left, ragged-right alignment is preferred over justified text.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #FFFFFF;
  --tx-font-heading: "Helvetica Neue", sans-serif;
  --tx-font-body: "Helvetica Neue", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFFFF;
  --tx-card-border: #000000;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #FF0000;
  --tx-card-shadow-hover: none;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(26,26,26,0.6);
  --tx-text-subtle: rgba(26,26,26,0.4);
  --tx-link-color: #FF0000;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #000000;
  --tx-text: #1A1A1A;
  --tx-primary: #000000;
  --tx-secondary: #FF0000;
  --tx-accent: #0057B7;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Swiss/International

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Editorial
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Swiss/International (visual-style)
- Strict grid-based layouts
- Heavy use of whitespace
- Sans-serif typography only
- Limited color palette (black white one accent)
- Asymmetric but balanced compositions
- Information hierarchy through scale

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #000000, secondary #FF0000, accent #0057B7, background #FFFFFF, text #1A1A1A
Typography: Helvetica Neue for headings, Helvetica Neue for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #FFFFFF;
  --tx-font-heading: "Helvetica Neue", sans-serif;
  --tx-font-body: "Helvetica Neue", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFFFF;
  --tx-card-border: #000000;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #FF0000;
  --tx-card-shadow-hover: none;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(26,26,26,0.6);
  --tx-text-subtle: rgba(26,26,26,0.4);
  --tx-link-color: #FF0000;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #000000;
  --tx-text: #1A1A1A;
  --tx-primary: #000000;
  --tx-secondary: #FF0000;
  --tx-accent: #0057B7;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use a strict grid, left-aligned type, and consistent spacing and alignment.

## Interaction
- Use simple state changes and keep typography stable during interaction.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Swiss/International: Playful experiences that depend on irregular composition.

## Components
Generate the following components in this style:
- Navbar
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.