Swiss Tech Mono Landing page
A complete example page built from the kit's blocks, with every section and its content.
Swiss Tech Mono
A page that prints its own measured grid: paper, white tiles, ink and one signal red.
The look
A page that prints its own measured grid: paper (#F2F2EF), white tiles and ink, column guides with a numbered ruler, "+" registration crosses on section rules, crop marks and "Fig. 01" captions around figures. Inter Tight set large at medium weight, JetBrains Mono caps for every label and number, square 4/8/12 px shapes, hairlines instead of shadows, and exactly one acid lime (#D3FF3B) that means *selected*: the highlighted word with its blinking caret, the picked chip, the current row.
Swiss Tech Mono Studio page
A complete example page built from the kit's blocks, with every section and its content.
Swiss Tech Mono Hero
The page opener and its only h1, set across the whole 12-column grid. split (the mockup): the eyebrow (usually the AnnouncementBar pill) at the left, the kit readout at the right, the title across all columns, then the copy on 4 columns beside the media on 8 (stacked under lg). centered is text only. stacked puts the media full width below the copy.
Swiss Tech Mono Navbar
The site header: logo, mono caps links with an underline that wipes in on hover, and actions. bar is the full-width bar on a hairline rule; floating is the same bar inset as a square-cornered card (no pill).
Swiss Tech Mono Announcement Bar
A short announcement: an ink strip above the navbar (bar) or the hero's mono pill (pill, with a lime tag or a lime square before the text).
Swiss Tech Mono Footer
The site footer, always on the ink band over the column guides: brand, text, a live status (a lime dot) and actions on 5 columns, link columns from column 7 (h2 titles in a labelled nav), then the legal row with copyright, legal links, labelled social icons and, with motionToggle, the pause control.
Swiss Tech Mono Pricing
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has(), the segmented look with the save text as a lime badge), so it works before and without JavaScript.
Swiss Tech Mono Comparison Table
Plans side by side: header prices and calls to action, grouped feature rows, ticks and dashes with screen-reader text.
Swiss Tech Mono Price List
A services or menu list: name and price on a dotted leader, a note and a description under each, in one or two columns.
Swiss Tech Mono Bento Grid
Feature tiles on the 12-column grid.
Swiss Tech Mono Feature Grid
Icon, title (h3) and text items in 2 to 4 columns, indexed F.01, F.02 …: between hairline rules (rules, the kit's best look), on tiles (cards), or plain.
Swiss Tech Mono Frame
Device chrome around a screenshot or mock: a browser (a sunken mono address field), a window (three small square lights), a squared phone (keeps its 9:19 shape) or a plain panel, on a 12 px panel with a hairline edge and a tight shadow.
Swiss Tech Mono Product Mock
The ink instrument for heroes and feature blocks: a title bar with period tabs, people and a lime Share button, a ruled row of KPIs that count up (the first one large), a headed chart that draws (every second x label, forecast weeks in lime) beside headed share bars with their total, A/B/C key squares that a Figure legend can name, and a live status line with an optional goal bar.
Swiss Tech Mono Breadcrumb
Trail of links to the current page in mono; the last item is the current page and the separators are hidden from screen readers.
Swiss Tech Mono Pagination
Page links with previous and next, ellipses for skipped pages and an optional summary.
Swiss Tech Mono Button
Buttons in seven variants and three sizes (32 / 40 / 48 px). primary is ink with a lime wipe on hover (the main action, one per block), secondary white with a grey border (beside a primary), outline transparent with a border, ghost text only (navbar, toolbars), accent the lime button (only for the selected choice, such as the featured plan), destructive for deleting, link underlined text. iconEnd arrows nudge on hover.
Swiss Tech Mono Icon Button
Square, icon-only button. label is the accessible name and the native tooltip.
Swiss Tech Mono Button Group
Related buttons in a row or column (role="group"). attached joins them: shared borders, outer corners rounded only.
Swiss Tech Mono Metric
A KPI: mono caps label, a tabular value (never wraps), a change tag (lime when the news is good, red when it is bad) and a mono hint.
Swiss Tech Mono Chart
A line, area or bar chart in SVG with HTML labels, so text never stretches with the fluid width.
Everything in Swiss Tech Mono
All 92 pieces, category by category.
Keep the pieces you like
Save a favorite or a whole style, and find them in your workspace on any device.