Swiss Modernism 2.0

Also called: Neo-Swiss, New International Style, Swiss Punk

The Swiss grid with the volume up: flat fields of ultramarine, orange and yellow, giant tight grotesque, rotated labels and off-axis layouts.

“Swiss, turned up”Editorial & TypographicEra: 2015 → today (rooted in 1950s–80s Swiss posters)BoldEdgySeriousTechy

Open full screen ↗

swiss-modernism-2 / landingEN

swiss-modernism-2 / 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×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.

flat colour fieldsgiant tight grotesquerotated vertical labelsoff-centre asymmetric gridultramarine + signal orangebig section numbersgeometric circle accentsquare corners

Swiss Modernism 2.0 keeps the International Style’s grotesque type, flush-left text and visible grid, then breaks its calm on purpose. Whole sections are flooded with flat colour fields — ultramarine, signal orange, lemon yellow — headlines grow to poster size with very tight tracking, section labels are rotated 90° up the margin, and content is pushed off-centre so empty columns become part of the composition. Geometry (a circle, a bar) replaces illustration. Still no shadows, gradients or rounded corners.

Best for

Design studios, agencies and portfolios
Museums, festivals and exhibitions
Architecture and culture publications
Bold B2B brands that want to look designed

Avoid for

Calm healthcare or finance where loud colour feels risky
Kids and cute consumer apps
Dense enterprise tools used all day

✓ Do

Flood whole sections with one flat field colour (#1F3BFF, #FF5B1F or #FFD60A) with white text on blue and black text on orange and yellow
Set display type at 8–9vw with −0.05em tracking and 0.9 line-height (Thai 1.22, no negative tracking, max 3 lines)
Rotate small labels 90° up the left margin
Push section heads three columns in so the grid shows as empty space

✕ Don't

No shadows, gradients, blur or rounded corners
Don’t use more than three field colours per section
Don’t centre text blocks — composition is flush-left and off-axis

Not to be confused with

Minimalism & Swiss Style →Classic Swiss is black-and-white with one small red accent and calm symmetry; 2.0 floods whole sections with colour, rotates type and goes off-axis.Bauhaus →Bauhaus composes with primary red/yellow/blue circles, squares and triangles as illustration; Swiss 2.0 uses colour as flat page fields behind a strict typographic grid.Bold Typography (Poster) →Poster style is one huge condensed word on black-and-yellow; Swiss 2.0 is a wide grotesque on multi-colour fields with a working grid of content.

On mobile

Keep one colour field per screen (orange featured card, blue tab bar indicator), a huge left-aligned title and a rotated label in the margin; lists stay flat on white with 2px black rules.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinSchibsted Grotesk · 500/800

The quick brown fox

Heading · ThaiNoto Sans Thai · 500/800

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

Body · LatinSchibsted Grotesk · 400/500/700

Clear words make shared decisions.

Body · ThaiNoto Sans Thai · 400/500/700

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

Noto Sans Thai is a loopless, rational grotesque with a full weight range, so its 800 matches Schibsted Grotesk’s heavy, closed Swiss forms without adding personality of its own.

Colour palette

Light

Dark

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 0px`
Border	`2px`
Shadow	`none`
Display	`clamp(3.25rem, 8.6vw, 8rem)`
Motion	`160ms cubic-bezier(.6,0,.2,1)`
Density	`×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 · Swiss Modernism 2.0 (swiss-modernism-2) — 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=Schibsted+Grotesk:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;700;800&display=swap
 */
:root {
  --radius: 0px;
  --background: #FFFFFF;
  --foreground: #0A0A0A;
  --card: #FFFFFF;
  --card-foreground: #0A0A0A;
  --popover: #FFFFFF;
  --popover-foreground: #0A0A0A;
  --primary: #1F3BFF;
  --primary-foreground: #FFFFFF;
  --secondary: #FF5B1F;
  --secondary-foreground: #0A0A0A;
  --muted: #EEEEEA;
  --muted-foreground: #555555;
  --accent: #EEEEEA;
  --accent-foreground: #0A0A0A;
  --destructive: #D9261C;
  --border: #0A0A0A;
  --input: #0A0A0A;
  --ring: #1F3BFF;
  --chart-1: #1F3BFF;
  --chart-2: #FF5B1F;
  --chart-3: #0A0A0A;
  --chart-4: #FFD60A;
  --chart-5: #9A9A9A;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0A0A0A;
  --sidebar-primary: #1F3BFF;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #EEEEEA;
  --sidebar-accent-foreground: #0A0A0A;
  --sidebar-border: #0A0A0A;
  --sidebar-ring: #1F3BFF;
}

.dark {
  --background: #0A0A0A;
  --foreground: #F5F5F2;
  --card: #141414;
  --card-foreground: #F5F5F2;
  --popover: #141414;
  --popover-foreground: #F5F5F2;
  --primary: #7385FF;
  --primary-foreground: #0A0A0A;
  --secondary: #FF6A33;
  --secondary-foreground: #0A0A0A;
  --muted: #1E1E1E;
  --muted-foreground: #A6A6A6;
  --accent: #1E1E1E;
  --accent-foreground: #F5F5F2;
  --destructive: #FF5548;
  --border: #F5F5F2;
  --input: #F5F5F2;
  --ring: #7385FF;
  --chart-1: #7385FF;
  --chart-2: #FF6A33;
  --chart-3: #F5F5F2;
  --chart-4: #FFD60A;
  --chart-5: #777777;
  --sidebar: #141414;
  --sidebar-foreground: #F5F5F2;
  --sidebar-primary: #7385FF;
  --sidebar-primary-foreground: #0A0A0A;
  --sidebar-accent: #1E1E1E;
  --sidebar-accent-foreground: #F5F5F2;
  --sidebar-border: #F5F5F2;
  --sidebar-ring: #7385FF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Swiss Modernism 2.0 (swiss-modernism-2) — 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=Schibsted+Grotesk:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;700;800&display=swap
 */
@theme {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEEEEA;
  --color-text: #0A0A0A;
  --color-text-muted: #555555;
  --color-primary: #1F3BFF;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FF5B1F;
  --color-on-secondary: #0A0A0A;
  --color-accent: #FFD60A;
  --color-border: #0A0A0A;
  --color-success: #127A3E;
  --color-warning: #A35F00;
  --color-danger: #D9261C;
  --color-chart-1: #1F3BFF;
  --color-chart-2: #FF5B1F;
  --color-chart-3: #0A0A0A;
  --color-chart-4: #FFD60A;
  --color-chart-5: #9A9A9A;
  --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: "Schibsted Grotesk", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace;
}

.dark {
  --color-bg: #0A0A0A;
  --color-surface: #141414;
  --color-surface-2: #1E1E1E;
  --color-text: #F5F5F2;
  --color-text-muted: #A6A6A6;
  --color-primary: #7385FF;
  --color-on-primary: #0A0A0A;
  --color-secondary: #FF6A33;
  --color-on-secondary: #0A0A0A;
  --color-accent: #FFD60A;
  --color-border: #F5F5F2;
  --color-success: #3FCB74;
  --color-warning: #FFB020;
  --color-danger: #FF5548;
  --color-chart-1: #7385FF;
  --color-chart-2: #FF6A33;
  --color-chart-3: #F5F5F2;
  --color-chart-4: #FFD60A;
  --color-chart-5: #777777;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Swiss Modernism 2.0 (swiss-modernism-2). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;700;800&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.9333,
            0.9333,
            0.9176
          ],
          "hex": "#eeeeea"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3333,
            0.3333,
            0.3333
          ],
          "hex": "#555555"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.2314,
            1
          ],
          "hex": "#1f3bff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3569,
            0.1216
          ],
          "hex": "#ff5b1f"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8392,
            0.0392
          ],
          "hex": "#ffd60a"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.4784,
            0.2431
          ],
          "hex": "#127a3e"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.3725,
            0
          ],
          "hex": "#a35f00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.149,
            0.1098
          ],
          "hex": "#d9261c"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.2314,
            1
          ],
          "hex": "#1f3bff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3569,
            0.1216
          ],
          "hex": "#ff5b1f"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8392,
            0.0392
          ],
          "hex": "#ffd60a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.6039,
            0.6039
          ],
          "hex": "#9a9a9a"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.1176,
            0.1176
          ],
          "hex": "#1e1e1e"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.9608,
            0.949
          ],
          "hex": "#f5f5f2"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.651,
            0.651,
            0.651
          ],
          "hex": "#a6a6a6"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.451,
            0.5216,
            1
          ],
          "hex": "#7385ff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4157,
            0.2
          ],
          "hex": "#ff6a33"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8392,
            0.0392
          ],
          "hex": "#ffd60a"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.9608,
            0.949
          ],
          "hex": "#f5f5f2"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.7961,
            0.4549
          ],
          "hex": "#3fcb74"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6902,
            0.1255
          ],
          "hex": "#ffb020"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3333,
            0.2824
          ],
          "hex": "#ff5548"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.451,
            0.5216,
            1
          ],
          "hex": "#7385ff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4157,
            0.2
          ],
          "hex": "#ff6a33"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.9608,
            0.949
          ],
          "hex": "#f5f5f2"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8392,
            0.0392
          ],
          "hex": "#ffd60a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4667,
            0.4667,
            0.4667
          ],
          "hex": "#777777"
        }
      }
    }
  },
  "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": 2,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Schibsted Grotesk",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Schibsted Grotesk",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "JetBrains Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 160,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.6,
      0,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 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!