DETAIL · 10/15
BIG FAT
LOUD UI.
硬阴影 + 撞色 + 粗黑边 + 大字 + 零圆角 — indie SaaS / Web3 / 创意品牌的视觉肌肉。让 UI 自带「我没在装」的诚实感。
PINK
CYAN
BLOCK
GREEN
BLUE
C STYLE / DNA
★ FIT
- indie SaaS landing
- Web3 / crypto 品牌
- 创意 agency 主页
- 开源工具 marketing
- 音乐 / 文化品牌
✗ UNFIT
- 严肃 B2B / 金融
- 医疗 / 法务专业
- 编辑型长文
- 高端奢侈品牌
KEYWORDS
HARD SHADOW3-5PX BORDERYELLOW BASE撞色900 BOLD0 RADIUSINDIE
D CRAFT / 4 DISCIPLINES
PALETTE
黄底主色 + 黑边 + 4 撞色 pop（pink / cyan / green / blue）。**禁用 pastel / 暖米 / 灰阶**·撞色拉满。
#FFF200
#FF3366
#4DD0E1
#6EE7B7
#2962FF
#AB47BC
#FFFFFF
#0A0A0A
TYPOGRAPHY
Space Grotesk 900 全场·heading / button / sticker 都 black weight·全 uppercase·JetBrains Mono 仅做 metadata。
DISPLAY
BOLD
WORK
WORK
BODY
Space Grotesk Medium for body
MONO
JETBRAINS MONO · DATA
SPACING
section gap 96px·card padding 32px·硬阴影留间距 6-10px·别压·**block 之间要分得清楚**。
VISUAL FX
- 01border-radius 0 · 全 sharp 边
- 02border 3-5px solid #000
- 03box-shadow Xpx Xpx 0 #000 (硬阴影)
- 04active 时 translate(4px) + shadow 0
- 05撞色 sticker 随机旋转 ±5deg
- 06大字 invert / 黑底 accent 高亮
E INPUT / 3 PHRASES
STD
按 neo-brutalism 风格做这个 indie SaaS landing / Web3 主页 / 开源工具 marketing
VAR
走 neo-brutalism + 阴影更厚 / accent 换 cyan / 大字再大 / 黄底换 cyan 底
MIX
主框 neo-brutalism + 局部 industrial-brutalist 数据区
CC RECEIVES STYLE ID ·
auto-loads
frontend-design + neo-brutalism reference · 按 4 件 craft 实现·**绝不冒出**·圆角 / 软阴影 / pastel / 灰阶 / serif·这些是 neo-brutalism 的 STRICT DON'T。
F COMPONENTS / SIGNATURES
HARD-SHADOW BUTTONS
4px 4px 0 #000 · translate(4) on active
COLOR STICKER STACK
NEW!
SALE
HOT!
★
4 色撞 · 随机 ±5deg rotation · 错位散落
THICK-BORDER DATA
REVENUE · MTD
$847K
▲ +12.4%
5px border + 大数字 900 + 撞色 chip
BUTTON
CARD
USERS / WK
12.4K
+8.4%
HERO TYPE
BUILD
LOUD
LOUD
indie · since 2024
G RELATED / SKILLS
I SIMILAR / SEE ALSO
LOUD
DOPAMINE
MAXIMALIST BOLD
maximalist-bold
同为bold + 大字 + dopamine·区别·撞色高饱和 + 现代 Duolingo / Spotify Wrapped vs 黄底 + 粗黑边 + indie SaaS 硬阴影
CPU.LOAD: 78%
MEM: 12.4G / 64G
NET: ↑42 ↓180 Mb
> SCAN 0xff32...
INDUSTRIAL BRUTAL
industrial-brutalist
同为brutal + 高对比 + 0 圆角·区别·黑底 + mono + terminal 工程感 vs 黄底 + 撞色 + indie SaaS 童趣
[ PLAY ]
RETRO FUTURISTIC
retro-futuristic
同为bold + 撞色 + 创意场景·区别·紫黑底 + 霓虹 + 80s 复古 vs 黄底 + 硬阴影 + 现代 indie