On this page
Point Wire at any website you like. A documentation site. A B2B consultancy. A specialty coffee roastery. A brutalist creative agency with Mondrian colors and SVG marks. Wire does not care about the genre. It generates structure. You bring the identity.
We tested this by building a brutalist agency portfolio. Thirty minutes from wire init to deployed URL. Twelve pages with case studies, animated SVG marks, a Mondrian color palette, thick borders, and a process section with numbered steps on a dark background. No template purchased. No React imported. No page builder activated.
The markdown
The entire homepage is one markdown file. 182 lines. It uses seven Wire shortcodes: :::cta, :::badges, :::stats, :::cards, :::steps, :::split, :::testimonial, :::faq. Each shortcode is plain text with a ::: fence. Wire parses it, generates semantic HTML, and two CSS files make it look nothing like Wire's defaults.
The hero is an inline SVG, a markdown H1 with a <span class="highlight"> inside it, and a :::cta block with two links. Wire turns those links into .btn-primary and .btn-secondary. The CSS turns those buttons into thick-bordered uppercase brutalist rectangles. Wire does not know about brutalism. It generates the structure. The stylesheet owns the aesthetics.
The HTML Wire generated
Every shortcode produces clean, semantic HTML with minimal class names. :::stats generates four .stat divs inside a .stats-bar grid. :::cards generates linked .feature-card elements inside a .feature-grid. :::steps generates numbered .step items inside a .discovery-reading container.
The stats bar is the same component that runs on this documentation site. Here it has green numbers on a dark background. On the agency site it has black numbers with red underlines on cream. The CSS is different. The HTML is identical. Six properties changed: font-weight, border-bottom, background, font-size, text-transform, and letter-spacing. That is the entire delta between Wire's default stats bar and the brutalist version.
The CSS override
Wire ships wire.css as the base stylesheet. It is 2,400 lines of layout, typography, and component styling. You do not copy it. You do not fork it. You write a separate file that overrides specific selectors. Wire's asset pipeline copies defaults first, then overlays your files on top.
Two CSS files totaling 760 lines. brutal.css (486 lines) overrides Wire components: buttons, cards, stats, steps, badges, testimonials, FAQ accordions. brutal-visuals.css (274 lines) adds decorative elements: corner marks, cross symbols before headings, offset box shadows, diagonal stripe backgrounds.
The philosophy, documented in the file header:
Let Wire handle structure, we handle attitude.
The first rule: border-radius: 0 !important applied to everything inside .landing-content. One line. Every Wire component loses its rounded corners. The site goes from modern SaaS to brutalist gallery in a single declaration.
Wire exposes CSS variables for everything: --primary, --bg, --text, --border, --content-max, --font-body. Override the variables and every component updates. Override a selector and only that component changes. The two approaches compose.
Under the hood
Wire's build pipeline ran every step it runs for a documentation site. The same 91 lint rules. The same shortcode parser. The same link sculpting engine that converts absolute paths to relative links. The same Jinja2 template chain.
The :::steps shortcode is designed for discovery reading systems on documentation sites. It generates numbered steps with expandable content. Here it became a "How We Work" process section. Wire generated the same semantic HTML. The CSS made each step a horizontal band with a dark background, light text, and an arrow icon. The discovery JavaScript that Wire ships still works. The step numbers still increment. The component does not know it is pretending to be a creative agency process diagram.
The landing page layout requires --- separators between sections. Wire wraps each section in alternating background bands. The CSS overrode those bands: cream for light sections, solid black for the steps section, solid white for testimonials. Same structure, different paint.
The numbers
Twelve pages. Under 5 seconds to build, lint 91 rules, and run QA checks. 760 lines of CSS on top of Wire's 2,400-line base. Zero JavaScript written. Wire's default scroll-title, back-to-top, code-copy, and reading-progress scripts all function. The search page auto-generates. The sitemap auto-generates. The RSS feed auto-generates.
Total files created: 12 markdown documents, 2 CSS files, 1 wire.yml. No HTML templates. No build scripts. No dependencies beyond Wire.
What this proves
Wire is an opinionated static site generator. It has lint rules that refuse builds. It strips H1 duplicates. It validates frontmatter. It checks internal links. Every opinion exists to prevent bad output.
None of those opinions say anything about how the site should look. Wire generates structure. You generate identity. The gap between a dark-themed documentation site and a Mondrian-inspired brutalist portfolio is 760 lines of CSS. The markdown is the same. The shortcodes are the same. The build pipeline is the same.
Nobody asked Wire to be flexible. Wire is not flexible. Wire is structural. The flexibility lives in the layer Wire does not touch: the stylesheet you bring.
See the live site. Read the visual QA guide for how to verify your own overrides. Read the component reference for every shortcode used here. Read the design system for the CSS variables available. Start your own site with the getting started guide.