Best For
brutalist web design / web brutalism / raw html
Brutalist Web
网页粗野主义
A
92/100Excellent
A return to the raw HTML aesthetics of the early 90s internet, with system fonts, blue underlined links, pure white backgrounds, and zero decoration -- content over form.
brutalist web designweb brutalismraw html90s webunstyled htmlsystem fontsblue linkscontent-firstlo-fiplain text website
Primary Move
Use pure white (#ffffff) backgrounds for all sections
Watch Out
Don't use rounded corners of any kind
AI Implementation
Copy the Hard Prompt first, then use the spec when needed
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.
Hard Prompt
Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.
When to use
- When AI should generate UI directly
- When repeated outputs must stay consistent
- When style drift is the main risk
How to use
- Copy the full prompt
- Append the concrete requirement
- Review against forbidden rules and UI states
STYLEKIT_STYLE_REFERENCE
style_name: Brutalist Web
style_slug: brutalist-web
style_source: /styles/brutalist-web
# 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 Brutalist Web style frontend development expert. All generated code must recreate the raw, unstyled feel of 1990s early internet HTML pages.
Absolutely Forbidden:
- Rounded corners of any kind
- Box shadows or text shadows of any kind
- Gradients of any kind (backgrounds must be flat white)
- CSS animations, transitions, or transforms -- use transition-none everywhere
- Hover effects beyond underline or color changes
- Custom web fonts or icon fonts (system fonts only)
- Background colors other than white or #dfdfdf (system silver)
- Thick borders (max 2px for bevel effect, else 1px)
- Large padding or spacing that feels "designed"
- Card-style layouts with decorative embellishment
- focus:ring-* (use focus:outline-dotted instead)
Must Follow:
- Backgrounds: Pure white (#ffffff) everywhere, #dfdfdf for system UI elements
- Text: Black (#000000) only, no gray shades
- Links: Blue (#0000ff) underlined, visited links purple (#551a8b), hover red (#ff0000)
- Borders: 1px solid black for content; 2px bevel for buttons
- Border-radius: ALWAYS 0, never round anything
- Headings: Times New Roman or Georgia (font-serif), bold
- Body text: System monospace or sans-serif font stack
- Layout: Linear, document-flow, single-column preferred
Animation & Interaction Rules:
- Zero Transition: ALL state changes must be instant. Always add transition-none. Hover, active, focus state switches happen at 0ms.
- Native Button Bevel: Buttons use Windows 95 raised border illusion. On :active, reverse the bevel. No shadow, no scale, no translate.
- Raw Focus: Never use focus:ring. Use focus:outline-dotted. For inputs, add focus:bg-[#ffffcc] for 90s yellow highlight.
- Link Hover: Only color change (blue to red) and existing underline. No other effects.
## Absolute Bans (Match and Refuse)
If any of the following patterns appear, it is a style violation — rewrite without exception.
- use rounded corners of any kind
- use box shadows or text shadows
- use gradients or background images
- use CSS animations or transitions of any kind (transition-none is the rule)
- use hover effects beyond underline or color changes
- use custom web fonts or icon fonts
- use background colors other than white
- use large padding or excessive whitespace
## Self-Check (Verify Before Shipping)
If any item fails, the style has drifted — fix before shipping.
- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] don't use rounded corners of any kind
- [ ] don't use box shadows or text shadows
- [ ] don't use gradients or background images
- [ ] don't use CSS animations or transitions of any kind (transition-none is the rule)
- [ ] don't use hover effects beyond underline or color changesComponent Templates
Component Preview
按钮
Windows 95 系统按钮：斜面边框营造凸起感，active 时边框反转模拟按压凹陷，transition-none 零延迟
Pointer Interactions
How Brutalist Web moves
Pointer interactions tailored to this style — same cursor, completely different character. Move around the stage to feel it.
StaticMove the cursor
Frontend Readiness
Dark Mode, States, Motion, and Accessibility
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%
FallbackKey State Coverage
lightHoverFocus VisibleDisabledLoadingEmptyErrorSuccess
Button
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
Implementation Notes
- No curated dark-mode contract exists yet.
- Check contrast in both light and dark modes.
- Check heavy shadows, blur, large media, and scroll-linked effects manually.
- No style-specific performance cost profile has been curated yet.
FAQ
Brutalist Web — Frequently Asked Questions
- What is the Brutalist Web design style?
- A return to the raw HTML aesthetics of the early 90s internet, with system fonts, blue underlined links, pure white backgrounds, and zero decoration -- content over form. Its core principle: Brutalist Web embraces the raw aesthetics of the early 1990s internet.
- What colors does Brutalist Web use?
- Brutalist Web uses #000000 as its primary color and #ffffff as its secondary color, with accent colors #0000ff, #ff0000, #008000, #d60099. Every hex value can be copied from the palette on this page.
- How do I apply Brutalist Web correctly?
- Key practices: Use pure white (#ffffff) backgrounds for all sections. Use system font stacks: font-mono or system-ui, sans-serif for body text. Use Times New Roman or Georgia (font-serif) for headings.
- What are common mistakes with Brutalist Web?
- Avoid: Don't use rounded corners of any kind. Don't use box shadows or text shadows. Don't use gradients or background images.
- How do I prompt AI to generate Brutalist Web UI?
- Copy the ready-made AI prompt on this page — it bundles the design tokens and component rules — and paste it into ChatGPT, Claude, Cursor, or v0. Effective prompts include the keywords: brutalist web design, web brutalism, raw html, 90s web.
Global Styles
Global CSS
css
/* Brutalist Web Global Styles */
:root {
--bw-black: #000000;
--bw-white: #ffffff;
--bw-link: #0000ff;
--bw-visited: #551a8b;
--bw-red: #ff0000;
--bw-green: #008000;
--bw-gray: #808080;
--bw-silver: #dfdfdf;
}
/* System font stack */
body {
font-family: monospace, "Courier New", Courier, monospace;
background: var(--bw-white);
color: var(--bw-black);
line-height: 1.4;
}
/* Headings use serif */
h1, h2, h3, h4, h5, h6 {
font-family: "Times New Roman", Times, Georgia, serif;
font-weight: bold;
}
/* Classic link styles */
a {
color: var(--bw-link);
text-decoration: underline;
}
a:visited {
color: var(--bw-visited);
}
a:hover {
color: var(--bw-red);
}
/* Thin borders only */
hr {
border: none;
border-top: 1px solid var(--bw-black);
}
/* Remove all border-radius */
*, *::before, *::after {
border-radius: 0 !important;
}
/* Plain table styles */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid var(--bw-black);
padding: 4px 8px;
text-align: left;
font-family: monospace;
}
/* Windows 95 raised button */
.bw-btn {
background: var(--bw-silver);
border-width: 2px;
border-style: solid;
border-color: white var(--bw-gray) var(--bw-gray) white;
cursor: pointer;
}
/* Windows 95 pressed button */
.bw-btn:active {
border-color: var(--bw-gray) white white var(--bw-gray);
}
/* Inset input field (Windows 95 style) */
.bw-input {
border-width: 2px;
border-style: solid;
border-color: var(--bw-gray) white white var(--bw-gray);
background: var(--bw-white);
}
.bw-input:focus {
outline: 1px dotted var(--bw-black);
outline-offset: 1px;
background: #ffffcc;
}
@keyframes brutalist-web-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes brutalist-web-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.brutalist-web-gradient {
background: linear-gradient(135deg, #000000, #0000ff);
}
.brutalist-web-gradient-text {
background: linear-gradient(135deg, #000000, #0000ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.brutalist-web-frosted {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(0, 0, 0, 0.08);
}
.brutalist-web-accent-corner {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}
.brutalist-web-animate-in {
animation: brutalist-web-fade-in 0.5s ease-out both;
}IDE Integration
IDE Configuration Export
Download configuration files for AI coding assistants to generate code in this style.
Style Pack
Export 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
Design Philosophy
Brutalist Web embraces the raw aesthetics of the early 1990s internet. Content is king; decoration is irrelevant.
Accessibility
Accessibility Score
WCAG 2.1 compliance analysis based on color contrast and typography readability.
92
Overall Score
Grade: A - Excellent
Contrast Ratios
Score: 100/100Average Ratio: 21:1
AA PassAAA Pass
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#000000 / #ffffff | 21:1 | ||
| Secondary text on background | /#000000 / #ffffff | 21:1 | ||
| Muted text on background | /#000000 / #ffffff | 21:1 | ||
| Text on secondary background | /#000000 / #ffffff | 21:1 | ||
| Secondary text on secondary | /#000000 / #ffffff | 21:1 | ||
| Button primary | /#000000 / #ffffff | 21:1 | ||
| Text on accent 1 | /#000000 / #ffffff | 21:1 | ||
| Alt text on accent 1 | /#000000 / #ffffff | 21:1 |
Readability
Score
73/100
Font Size
text-sm md:text-base
Font Weight
font-serif font-bold
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.