Swiss Modernism 2.0

ui-ux-pro-maxMITDeveloper tools · developer-toolsContent & media · content-mediaSaaS / B2B · saasDocs · docsBlog · blogMinimal · minimalProfessional · professionalLight and dark · bothLow (display) · lowNeutral · neutralMuted · mutedSerif · serif

Swiss Modernism 2.0. Best for Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Swiss Modernism 2.0" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#swiss-modernism-2-0 @ 28b3b8dee8c9.

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill · src/ui-ux-pro-max/data/styles.csv#swiss-modernism-2-0 · 28b3b8dee8c9 · © Next Level Builder

Do

12-column grid strict
☐ Spacing mathematical
☐ Typography hierarchy clear
☐ Single accent only
☐ No decorations
☐ High contrast verified

Don't

Playful brands
children's sites
entertainment
gaming
emotional storytelling

Prompt

Design with Swiss Modernism 2.0. Use: strict grid system (12 columns), Helvetica/Inter fonts, mathematical spacing, asymmetric balance, high contrast, minimal decoration, clean hierarchy, single accent color.

---
"Swiss Modernism 2.0" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#swiss-modernism-2-0 @ 28b3b8dee8c9.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Swiss Modernism 2.0. \"Swiss Modernism 2.0\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#swiss-modernism-2-0 @ 28b3b8dee8c9.",
  "$extensions": {
    "dev.styledex": {
      "id": "uupm-swiss-modernism-2-0",
      "license": "MIT",
      "attribution": "\"Swiss Modernism 2.0\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#swiss-modernism-2-0 @ 28b3b8dee8c9.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "card": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "primary": {
      "$type": "color",
      "$value": "#000000"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#f5f5f5"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "accent": {
      "$type": "color",
      "$value": "#000000"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#f0f0f0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#595959"
    },
    "border": {
      "$type": "color",
      "$value": "#dbdbdb"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#000000"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Swiss Modernism 2.0" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#swiss-modernism-2-0 @ 28b3b8dee8c9. */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #fafaf9;
  --secondary: #f5f5f5;
  --secondary-foreground: #000000;
  --accent: #000000;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #595959;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #000000;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Swiss Modernism 2.0" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#swiss-modernism-2-0 @ 28b3b8dee8c9. */
/** Tailwind theme extend for Swiss Modernism 2.0 (uupm-swiss-modernism-2-0) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#ffffff",
        "foreground": "#000000",
        "card": "#ffffff",
        "primary": "#000000",
        "primary-foreground": "#fafaf9",
        "secondary": "#f5f5f5",
        "accent": "#000000",
        "muted": "#f0f0f0",
        "border": "#dbdbdb",
        "destructive": "#dc2626",
        "ring": "#000000"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Swiss Modernism 2.0" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#swiss-modernism-2-0 @ 28b3b8dee8c9. */
@layer base {
:root {
  --background: #ffffff;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #fafaf9;
  --secondary: #f5f5f5;
  --secondary-foreground: #000000;
  --accent: #000000;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #595959;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #000000;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}