Neo-Brutalism新粗野主义
Raw HTML energy — system fonts, hard borders, one loud accent.原生 HTML 的那股劲——系统字体、硬边框、一个响亮的强调色。
Where it is in its life它走到哪一步了
Near saturation. The Are.na reference board is active (102 blocks). Reach for it to add personality — not to look ahead of the curve.接近饱和。Are.na 参考板活跃(102 块)。拿它加个性——别指望靠它显得走在前面。
Weekly watchlist每周看板live实时
Ship it, don’t just see it不止看见,直接拿走
Copy the working snippet, or grab the palette and type as tokens for your project — CSS variables, Tailwind, or W3C design tokens. All free.复制能跑的代码片段,或把配色和字体作为 tokens 拿进项目——CSS 变量、Tailwind、W3C design tokens。全部免费。
What it is, and why now是什么,为什么现在
Neo-brutalism is the web wearing its structure on the outside: unstyled-looking type at huge sizes, hard black borders, no shadows, no rounded corners. It reads as honest and a little defiant.新粗野主义是把网页的结构穿在外面:看起来没排过版的超大字、硬黑边框、没有阴影、没有圆角。它有一股诚实劲儿,还带点挑衅。
When to reach for it什么时候用它
Use for用在
- Indie portfolios
- Brands with an edge
- Developer-tool landing pages
- 独立作品集
- 有态度的小众品牌
- 开发者工具落地页
Avoid for别用
- Finance/health/gov (needs trust)
- Mass-market e-commerce
- Senior-friendly products
- 金融/医疗/政务(要信任感)
- 面向大众的电商
- 适老化产品
Colour, with roles配色 · 带角色
Type pairing字体搭配
Body — Space Mono.正文 — Space Mono。 Keeps captions and UI legible underneath it.让下面的说明和 UI 保持清晰可读。
Both open-source (Google Fonts), free for commercial use. Pairing + embed code in the Pro assets.均为开源(Google Fonts)、可商用。搭配与嵌入代码在 Pro 素材里。
It’s a material, not a filter是材质,不是滤镜
System or grotesque fonts, oversized. Flat blocks with 2–4px solid black borders. Black and white plus exactly one neon accent. The ‘undesigned’ look takes deliberate spacing — it only works when the grid underneath is tight.系统或 grotesque 字体,超大。平色块配 2–4px 纯黑实边。黑白加正好一个荧光色。那种"没设计感"其实很讲究间距——底下的网格必须紧。
Sources, not screenshots是来源,不是截图
Curated links to where this actually lives and gets documented — live boards for reference, editorial for pitch language, galleries to gauge saturation. We link out and credit rather than re-host anyone’s work.精选链接,指向这个方向真正活着、被记录的地方——实时参考板、给提案话术的编辑内容、判断饱和度的画廊。我们只链接并署名,不搬运任何人的作品。
A recipe配方
- System fonts at huge sizes
- hard black borders
- black-and-white with one neon accent
- no rounded corners, no shadows. Hand-write the CSS, or use Framer.
- 系统字体超大字号
- 硬黑边框
- 黑白高对比+一个荧光色
- 去圆角去阴影。工具:直接写 CSS、Framer。
It’s all free全部免费
Every guide, the live timing, palettes and example images — all free. Get the weekly “what’s rising” email so you never miss a move.每份指南、实时时机、配色和范例图——全都免费。订阅每周“什么在涨”邮件,不错过任何动向。