# Swiss Modernism 2.0 > The Swiss grid with the volume up: flat fields of ultramarine, orange and yellow, giant tight grotesque, rotated labels and off-axis layouts. - Nickname: Swiss, turned up - Also called: Neo-Swiss, New International Style, Swiss Punk - Category: Editorial & Typographic - Moods: Bold, Edgy, Serious, Techy - Industries: Creative & Portfolio, Media & Entertainment, Corporate & B2B, Startup & Tech, Education - Style page: https://uilingo.dev/styles/swiss-modernism-2/ 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 ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Swiss Modernism 2.0" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line The Swiss grid with the volume up: flat fields of ultramarine, orange and yellow, giant tight grotesque, rotated labels and off-axis layouts. Design keywords: flat colour fields, giant tight grotesque, rotated vertical labels, off-centre asymmetric grid, ultramarine + signal orange, big section numbers, geometric circle accent, square corners. ## Visual language The Swiss International Style with the volume turned up. A white page with a faint 12-column grid, a heavy tightly-tracked grotesque at poster size, and whole sections flooded with flat fields of ultramarine (#1F3BFF), signal orange (#FF5B1F) and lemon yellow (#FFD60A). Layout is deliberately off-axis: section heads start three columns in, huge section numbers hang in the empty margin and small labels run rotated 90° up the edge. Geometry — a circle, a square, a triangle — is the only illustration; there are no shadows, gradients or rounded corners. ## Signature details (must be visible) - Flat colour fields: hero right half is a solid ultramarine block bleeding off the edge, with a 240px orange circle half-sunk into its bottom; alternate sections are full-bleed blue, orange or yellow. A 'screen' = one viewport-height section: at most three field colours per section (the CTA's black + orange field + blue circle is allowed) and one large decorative circle (≥160px) per section — 52px circle feature icons do not count. Text on blue #1F3BFF is white; text on orange #FF5B1F and yellow #FFD60A is #0A0A0A (white on orange fails AA) - Display type at clamp(3.25rem, 8.6vw, 8rem), weight 800, letter-spacing −0.05em, line-height 0.9. Thai: display line-height 1.22 (an approved exception to the generic ≥1.3 heading rule because Noto Sans Thai 800 has short stacks), h1/h2 line-height 1.3, no tracking - Thai hero headline: max 2–3 lines; scale it with clamp(2.75rem, 6vw, 5.5rem) in the 7/12 copy column and break by phrase ( between phrases, white-space: nowrap spans around each phrase); never one word per line - Rotated labels: eyebrows set writing-mode: vertical-rl + rotate 180deg with a 12px orange square bullet. In the hero the eyebrow runs up the left edge of the copy column (copy padding-left 56px); in each section head it sits between the hanging number and the head: number's right edge 24px left of the head box, eyebrow at the head's left edge, head text starts 52px in - Giant section numbers (CSS counter, decimal-leading-zero, clamp(4rem, 9vw, 8rem), weight 800, −0.06em, line-height 0.8) hanging in the margin left of each off-centre section head (margin-left: 25%). Number every section that has a head, starting at 01 (features = 01, steps = 02 …); the stats strip under the hero and the CTA are unnumbered. Colours: orange on white; on blue sections white, with yellow #FFD60A only for the 01 features number; black on orange; blue on yellow - Visible 12-column grid on the fixed full-page .ui-bg layer, exactly: background-image: linear-gradient(to right, rgba(10,10,10,.05) 1px, transparent 1px); background-size: calc((100% - 48px) / 12) 100%; background-position: 24px 0 (mobile: calc((100% - 40px) / 4) 100%, position 20px 0) — 1px lines at 5% opacity, never tinted columns - 0 radius everywhere, 2px solid black lines, no shadows; hover and active states are expressed with colour or thick bars (6px), never with elevation - Feature icons alternate shape and colour: blue circle, orange square, yellow triangle; the dashboard rail is a solid ultramarine column and the first two KPI cards are solid blue and solid orange fields ## Design tokens — use these exact values Colours (light mode): - background #FFFFFF - surface #FFFFFF - surface-2 #EEEEEA - text #0A0A0A - text-muted #555555 - primary #1F3BFF (text on it #FFFFFF) - secondary #FF5B1F (text on it #0A0A0A) - accent #FFD60A - border #0A0A0A - success #127A3E · warning #A35F00 · danger #D9261C - chart series #1F3BFF, #FF5B1F, #0A0A0A, #FFD60A, #9A9A9A Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px Border width: 2px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 160ms cubic-bezier(.6,0,.2,1) ## Typography (Latin + Thai) - Headings: Schibsted Grotesk 500/800 with Thai fallback Noto Sans Thai 500/800 - Body: Schibsted Grotesk 400/500/700 with Thai fallback Noto Sans Thai 400/500/700 - Mono: JetBrains Mono - Google Fonts URL: 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 - CSS stacks: heading `"Schibsted Grotesk", "Noto Sans Thai", system-ui, sans-serif`; body `"Schibsted Grotesk", "Noto Sans Thai", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Noto Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3.25rem, 8.6vw, 8rem), heading weight 800, heading tracking -0.05em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Buttons: square, 2px, weight 700; primary ultramarine with white text → black on hover; secondary 2px black outline → yellow fill on hover; large buttons 58px tall - Cards: borderless flat blocks — light grey (#EEEEEA) on white sections, white on coloured fields; 2px gutters between feature tiles in a 3-column grid (6 features = 2 full rows); hover adds a 6px bar along the bottom edge — black on orange fields, orange everywhere else - Inputs: grey fill, no frame, 2px black bottom border; focus turns the underline blue and tints the fill blue 8% - Nav: white bar with a 2px black bottom rule, orange circle logo, black links, current link underlined with a 3px blue bar - Badges: square solid black chips with white text; success green, warning yellow with black text, danger red - Chips and radio cards: 2px black outline, selected state floods solid blue with white text - Step numerals: huge (4rem) in blue, orange or black only — never yellow on white - Stats strip (white, unnumbered, 4 columns): 2px black rule on top, numerals clamp(3rem, 6vw, 5.2rem) ≈4.5rem on desktop, weight 800, −0.06em, line-height 0.9, first numeral blue, rest black; units go inside the numeral (18k+, 3.2×, the baht sign + 240M), Thai unit words go in the label, label 14px muted text directly under the numeral - Charts: 3px solid blue and orange lines, solid (non-dashed) faint grid, square bars cycling blue / orange / black / yellow, square heatmap cells in blue - Pull quote: a solid yellow block wider than the text column with black 2rem tight grotesque, on white or blue sections; on the yellow testimonials band it becomes a black block with white text - Mobile tab bar: white with a 2px black top rule; active item gets a 4px blue bar on top and blue icon ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → stats → features → steps → showcase → testimonials → pricing → cta. Feature section as grid. Hero is a split: flush-left giant headline with a rotated eyebrow in the margin on white (7/12 columns). The hero product visual is two white cards on the blue field that bleeds off the right edge — a revenue line chart card (blue and orange 3px lines, black +18% badge) above a KPI card pair (big numerals, thin sparkline) — with the 240px orange circle sunk half into the field's bottom edge. Then a row of enormous stats on rules (unnumbered), a full-bleed blue features section (01, yellow number), white steps with huge coloured numerals (02), an orange showcase with black text and black section number, a yellow testimonials band and a blue pricing section, ending with a black CTA whose left fifth is an orange field with a blue circle. Section heads always sit off-centre with the number in the margin. Below 768px section numbers sit above the head at 4rem, the head's margin-left drops to 0 and rotated eyebrows become horizontal. Dashboards use the blue rail, coloured KPI fields and flat grey widget blocks with no borders. ## Content Use realistic product copy (fictional brand) suited to: Design studios, agencies and portfolios. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Rounded corners, drop shadows, gradients or blur - Monochrome black-and-white with a lone red accent (that is classic Swiss) - Scattered decorative shape compositions — primary circles, squares and triangles sprinkled as illustration (that is Bauhaus). One large decorative circle (≥160px) per section plus the 52px shape icons is the limit - Centred, symmetric section heads and evenly spaced layouts - Muted or pastel tints of the field colours (fields are 100% flat) - White text on orange #FF5B1F or yellow #FFD60A — use #0A0A0A - Tracking or rotating Thai glyphs individually; rotate whole Thai labels only ## Stack notes One self-contained HTML file with a