Swiss Editorial Newsprint SaaS Pricing
A brutalist Swiss-print pricing page on warm paper stock with hairline ink rules, one electric red accent, an inverted recommended tier, a monthly/yearly toggle, and a full feature-comparison matrix.
Summary
A Swiss-editorial / brutalist SaaS pricing page on warm off-white paper stock with hard ink-black hairline rules, a single electric red-orange accent, and a typographic system mixing a heavy grotesk, a condensed narrow sans, and a mono label face. The whole page is built on a frameless, fully-ruled 4-column tier grid (one dark inverted 'Most picked' card) plus a full feature-comparison matrix, an editorial FAQ, and a red full-bleed CTA strip. The transferable value is this exact print-magazine look applied to a 4-tier + monthly/yearly-toggle + comparison-table pricing structure.
Style
Print/editorial Swiss-modernist aesthetic: warm newsprint-paper background, near-black ink, one hot red-orange accent used sparingly for prices, checks, the highlighted CTA and the toggle knob. Hairline 1px ink rules divide everything; no rounded corners, no drop shadows, no gradients. Mono micro-labels with wide letter-spacing act as editorial section numbers/eyebrows. A faint fractal-noise grain overlay sits on the hero for a printed-paper texture. Tabular-nums on all prices and numeric table cells.
Layout & Structure
A frameless, responsive single-column web page on a 1280px max-width container with generous side padding. Everything is stacked as full-width horizontal bands separated by 1px ink rules: sticky nav, grain hero with a stats ticker, a billing-period toggle bar, the 4-tier pricing grid, a full comparison table, an editorial FAQ, a red CTA strip, then the footer. The pricing grid reflows 4 -> 2 -> 1 columns and the comparison table scrolls horizontally on small screens. The header is sticky.
Sticky nav
Hero + stats ticker
Billing toggle bar
Pricing grid (4 tiers)
Comparison table (feature matrix)
FAQ
CTA strip + footer
Components
Inverted highlighted tier card
The Pro plan card flips to a solid ink-black background with paper text to anchor the eye, with a small red corner tab labelling it the recommended plan.
Square hard-edged billing toggle
A monthly/yearly switch built as a flat square (not a pill) with a sliding solid-red square knob, matching the brutalist no-radius system.
Mono editorial labels / index numbers
Space Mono uppercase micro-labels with very wide tracking used as section eyebrows ('001 - Pricing'), tier index numbers (00-03), table group headers, and ticker/footer metadata, giving the page its print-catalogue feel.
Tinted recommended column in the matrix
The Pro column in the comparison table is continuously emphasized with a faint tint and a red top border so the highlighted plan reads consistently from the cards into the table.
Special Notes
Frameless, fully responsive web page (not a fixed frame): a 1280px max-width container with px-6/lg:px-10 side padding; content is a vertical stack of full-width bands separated by 1px ink hairlines, with a STICKY translucent+blurred top nav. The pricing grid reflows 4 -> 2 -> 1 columns and the comparison table scrolls horizontally on mobile inside an overflow-x wrapper. Strictly no border-radius, no shadows, no gradients - the structure is carried entirely by hairline rules, the inverted card, and the single red accent. Fonts: Archivo (grotesk), Archivo Narrow (condensed), Space Mono. Brand voice in copy is warm and human (e.g. 'Ping us and we'll sort it together'), no em-dashes.