skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

web-prototype-taste-brutalist

Generates Swiss industrial-print brutalist web prototypes with strict typography and grid rules.

Updated May 20, 2026
Search Tags:#typography#html#editorial#css grid#brutalist#web prototype#swiss design
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill web-prototype-taste-brutalist-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-prototype-taste-brutalist
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/web-prototype-taste-brutalist
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill web-prototype-taste-brutalist-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing editorial, newspaper-style, or manifesto web pages often drifts into generic modern UI patterns. This Skill enforces a rigorous Swiss industrial-print aesthetic so generated HTML prototypes project rigor and physicality instead of friendliness. ## Core Features & Use Cases - Hard design rules: Locks the substrate to newsprint (#F4F4F0), carbon ink foreground, and a single hazard-red accent, with zero border-radius and no gradients or shadows. - Typography system: Mandates heavy neo-grotesque display type (Archivo Black / Inter Black) at viewport-bleeding scale plus uppercase monospace micro type at fixed 10-13px. - Required components: Top register strip, hero with giant numeral, numbered manifest theses, 1px-gap grid index table, type specimen block, and monospace colophon. - Use Case: A designer needs an editorial agency portfolio or manifesto landing page; the Skill produces a complete single-file HTML prototype like the included example.html with all structural sections and pre-flight checks. ## Quick Start Use the web-prototype-taste-brutalist skill to build a Swiss industrial print style landing page for my design studio portfolio.

Frequently Asked Questions about web-prototype-taste-brutalist

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a brutalist website prototype with HTML and CSS?▼

Use a single-file HTML page with a newsprint background (#F4F4F0), carbon ink text, heavy grotesque display fonts like Archivo Black at clamp(4rem, 10vw, 15rem), and monospace micro type. Enforce border-radius: 0, visible 1px grid dividers via gap: 1px on an ink background, and one hazard-red accent color.

What fonts work for Swiss industrial print web design?▼

Use heavy neo-grotesques such as Archivo Black, Inter ExtraBold/Black, or Neue Haas Grotesk Black for display type at viewport-bleeding scale. Pair with JetBrains Mono or IBM Plex Mono at fixed 10-13px, uppercase, with 0.1em letter-spacing for navigation, metadata, and captions.

Can I mix brutalist print style with dark mode or glassmorphism?▼

No. This aesthetic commits to one light newsprint substrate and explicitly bans gradients, drop shadows, glassmorphism, glows, and any border-radius above 0. Mixing with dark CRT modes or soft UI effects breaks the Swiss industrial print rules.

What sections should a brutalist editorial landing page include?▼

Include a monospace top register strip with issue/date/coordinates, a hero with a viewport-bleeding numeral, numbered manifest theses separated by hairline rules, a data index using display: grid with gap: 1px on an ink background, a type specimen block, and a monospace colophon.

When should I avoid using the brutalist print aesthetic?▼

Avoid it for friendly consumer products, playful brands, or interfaces needing soft rounded components and rich color palettes. It suits briefs asking for editorial, newspaper, manifesto, or Swiss design where rigor and physicality matter more than warmth.

Related Skills

Explore More Design & Creative Skills→
musher-devmusher-dev

writing-wireframe-copy

Write raw wireframe copy for content slots from Information Architecture documents.

Official
Advanced
lance-doniflance-donif

web-development

Implement, debug, and deploy React, Vue, or Vite frontend applications.

Community
Intermediate
Ankish8Ankish8
2

Design System Validator

Validate component code for CSS variables, responsive patterns, and accessibility compliance.

Community
Advanced
melikhanmutlumelikhanmutlu

tailwind-patterns

Provides reusable Tailwind patterns for consistent UI design across web apps.

Community
Advanced