Best For
柔和野兽派 / 温和对比 / 浅色阴影
Neo-Brutalist Soft
A gentler version of Neo-Brutalist. Retains hard-edge shadows and no-rounded-corner characteristics, but uses softer colors, thinner borders, and milder contrast.
Best For
柔和野兽派 / 温和对比 / 浅色阴影
Primary Move
Keep no rounded corners rounded-none
Watch Out
Do not use rounded corners
Showcase Entry
Live preview of the showcase page. Click to explore the full experience.
Color Palette
Primary
#1a1a1a
Secondary
#f5f5f5
Accent 1
#f472b6
Accent 2
#a3e635
AI Implementation
Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.
Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.
When to use
How to use
STYLEKIT_STYLE_REFERENCE
style_name: Neo-Brutalist Soft
style_slug: neo-brutalist-soft
style_source: /styles/neo-brutalist-soft
# Hard Prompt
## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.
## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.
Strictly follow the style rules below and maintain consistency. No style drift allowed.
## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.
## Style Rules
You are a Neo-Brutalist Soft design style frontend development expert. This is the gentler version of Neo-Brutalist.
## Core Retained
- No rounded corners rounded-none
- Hard-edge shadows (but using gray/semi-transparent)
- Hover displacement effects
## Adjustment Rules
Borders:
- Use border-2 (not border-4)
- Use border-gray-800 (not border-black)
Shadows:
- Use shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]
- Colored shadows use semi-transparent: rgba(244,114,182,0.4)
Colors:
- Background: #f5f5f5 (light gray)
- Text: #1a1a1a (dark gray, not pure black)
- Pink: #f472b6 (pink-400)
- Green: #a3e635 (lime-400)
- Blue: #38bdf8 (sky-400)
- Yellow: #fbbf24 (amber-400)
## Animation & Interaction Rules
- Paper Lift: Hover uses small -translate with semi-transparent colored shadow expansion, simulating a thick paper card being gently lifted.
- Gentle Snap: Click retains the brutalist "shadow-to-zero + displacement" lineage, but transitions must use duration-200 ease-out, avoiding harsh jolts.
- Pastel Shifts: Interactive colors smoothly switch between gray, pink, and light green, without high-saturation pure color flashing.
- Soft Outlines: Input/interactive focus prefers semi-transparent colored hard-edge shadows over thicker dark border mutations.
## Forbidden
- Pure black borders border-black
- Pure black shadows rgba(0,0,0,1)
- High-saturation pure colors
- Rounded corners
- Blurred shadowsComponent Templates
柔和版 Brutal 按钮
Frontend Readiness
This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.
Overall
51%
Fallback
Dark Mode
0%
MissingUI States
79%
PartialMotion
70%
PartialA11y
70%
PartialPerformance
35%
FallbackButton
Default / Hover / Focus Visible / Active / Disabled
Input
Default / Hover / Focus Visible / Disabled / Error
Card
Default / Hover / Focus Visible / Loading / Skeleton
Form
Default / Focus Visible / Disabled / Loading / Error
/* Neo-Brutalist Soft 全局样式 */
:root {
--soft-pink: #f472b6;
--soft-green: #a3e635;
--soft-blue: #38bdf8;
--soft-yellow: #fbbf24;
--soft-bg: #f5f5f5;
--soft-text: #1a1a1a;
--soft-border: #1f2937;
}
body {
background: var(--soft-bg);
color: var(--soft-text);
}
/* 标题字体 - 粗体但非极黑 */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
letter-spacing: -0.01em;
}
/* 正文字体 */
body {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* 选中文字 - 柔和粉色 */
::selection {
background: var(--soft-pink);
color: white;
}
@keyframes neo-brutalist-soft-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes neo-brutalist-soft-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.neo-brutalist-soft-card {
position: relative;
overflow: hidden;
}
.neo-brutalist-soft-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
background: linear-gradient(135deg, rgba(26, 26, 26, 0.05), transparent);
pointer-events: none;
}
.neo-brutalist-soft-card:hover::before {
opacity: 1;
}
.neo-brutalist-soft-gradient {
background: linear-gradient(135deg, #1a1a1a, #f472b6);
}
.neo-brutalist-soft-gradient-text {
background: linear-gradient(135deg, #1a1a1a, #f472b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.neo-brutalist-soft-frosted {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(26, 26, 26, 0.08);
}
.neo-brutalist-soft-accent-corner {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}
.neo-brutalist-soft-animate-in {
animation: neo-brutalist-soft-fade-in 0.5s ease-out both;
}IDE Integration
Download configuration files for AI coding assistants to generate code in this style.
Style Pack
Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.
Metadata
Style metadata including version information
Design Tokens
Compatible with Figma / Style Dictionary / Tokens Studio
Tailwind Preset
Tailwind CSS theme preset, import directly in config
Global CSS
CSS variables and base styles
shadcn Theme
shadcn/ui theme configuration
CSS Variables
Pure CSS variables, works with any project
SKILL.md
Loadable skill pack for Cursor / Claude Code / VS Code
Neo-Brutalist Soft is a gentler variant of the original Neo-Brutalist. It retains the core structural features -- no rounded corners, hard-edge shadows, hover displacement effects -- but softens the visual impact through:
WCAG 2.1 compliance analysis based on color contrast and typography readability.
Overall Score
Grade: F - Failing
Contrast Ratios
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Secondary text on background | /#ffffff / #f5f5f5 | 1.09:1 | ||
| Muted text on background | /#4b5563 / #f5f5f5 | 6.93:1 | ||
| Secondary text on secondary | /#ffffff / #ffffff | 1:1 | ||
| Alt text on accent 1 | /#ffffff / #f472b6 | 2.65:1 | ||
| Alt text on accent 2 | /#ffffff / #a3e635 | 1.51:1 | ||
| Alt text on accent 3 | /#ffffff / #38bdf8 | 2.14:1 | ||
| Alt text on accent 4 | /#ffffff / #fbbf24 | 1.67:1 |
Readability
Score
85/100
Font Size
text-sm md:text-base
Font Weight
font-bold tracking-tight
Line Height
default
Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.