High Contrast, Structural, Anti-Decoration
Mid 2010s Web Revival
Brutalist Web Design
Kullanım Alanı: Developer portfolios, tech startups, agencies
101 İzlenme
05.07.2026
Tarihsel Bağlam
Brutalist web design is inspired by Brutalist architecture (1950s-1970s), characterized by raw concrete, massive forms, and functional emphasis. In digital space, web brutalism emerged as a reaction against the homogenization of clean, template-based web designs driven by standard frameworks. It embraces raw HTML looks, default fonts, system colors, unformatted inputs, and massive text sizes, making the structural scaffolding part of the visual aesthetic.
Kullanım Alanları
Best suited for creative agencies, tech portfolios, design libraries, and projects that want to project a bold, cutting-edge, developer-centric authenticity. Avoid using for traditional corporate, commercial e-commerce, or healthcare projects where visual comfort and accessibility are paramount.
Tasarım Prensipleri
- Raw markup representation — let elements look like default HTML.
- High-contrast neon tones — use bright yellows, greens, and cyan alongside pure blacks.
- Heavy solid borders — use 3px or 4px solid borders instead of soft drop shadows.
- System typographies — default to Arial, Courier, or Times New Roman letterforms.
Teknik Özellikler
Renk Paleti
Birincil Renkler
Pure Black
#000000
Neon Yellow
#FFFF00
Pure White
#FFFFFF
İkincil Renkler
Neon Cyan
#00FFFF
Hot Pink
#FF00FF
Görsel Efektler
Hard borders, heavy outlines, pure black drop-shadows (no blur), system monospace, structural HTML table borders
Aydınlık / Karanlık Tema
✓ Full
Geliştirici Belgeleri ve Kodlar
# DESIGN.md — Brutalist Web Design
## Rationale & Metadata
- **Era:** Mid 2010s Web Revival
- **Type:** High Contrast, Structural, Anti-Decoration
- **Keywords:** brutalis, anti-design, high-contrast, unprocessed, functional, raw-html, grid, neon
- **Use Case:** Developer portfolios, tech startups, agencies
## Color Palette
### Primary Colors
- Pure Black: `#000000`
- Neon Yellow: `#FFFF00`
- Pure White: `#FFFFFF`
### Secondary Colors
- Neon Cyan: `#00FFFF`
- Hot Pink: `#FF00FF`
## Visual Effects
- Hard borders, heavy outlines, pure black drop-shadows (no blur), system monospace, structural HTML table borders
## Design Principles
- Raw markup representation — let elements look like default HTML.
- High-contrast neon tones — use bright yellows, greens, and cyan alongside pure blacks.
- Heavy solid borders — use 3px or 4px solid borders instead of soft drop shadows.
- System typographies — default to Arial, Courier, or Times New Roman letterforms.
## CSS Technical Variables
```css
/* Brutalist Tokens */
:root {
--br-black: #000000;
--br-yellow: #FFFF00;
--br-white: #FFFFFF;
--br-cyan: #00FFFF;
--br-pink: #FF00FF;
}
```
Act as a Senior Frontend Engineer and Expert UI Designer.
Your task is to code a complete page on the first attempt.
- Visual Theme: Brutalist Web Design
- Details:
Name: Brutalist Web Design
Type: High Contrast, Structural, Anti-Decoration
Era: Mid 2010s Web Revival
Keywords: brutalis, anti-design, high-contrast, unprocessed, functional, raw-html, grid, neon
Primary Colors:
- Pure Black #000000
- Neon Yellow #FFFF00
- Pure White #FFFFFF
Secondary Colors:
- Neon Cyan #00FFFF
- Hot Pink #FF00FF
Visual Effects:
Hard borders, heavy outlines, pure black drop-shadows (no blur), system monospace, structural HTML table borders
Design System Variables:
```css
/* Brutalist Tokens */
:root {
--br-black: #000000;
--br-yellow: #FFFF00;
--br-white: #FFFFFF;
--br-cyan: #00FFFF;
--br-pink: #FF00FF;
}
```
AI Visual Direction:
brutalist web interface design, raw structural UI, neon yellow accents, heavy black borders, monospace typography, grid layout
Checklist:
- Tüm kartlara ve butonlara 3px kalınlığında düz siyah çerçeve ekle.
- Yumuşak gölgeleri kaldır, yerine sert siyah gölge kullan.
- Arka plan rengi olarak saf beyaz veya neon sarı tercih et.
- Yazı tipi olarak tarayıcı varsayılanı olan monospace kullan.
Rules:
1. Strictly follow the defined visual style.
2. Use clean CSS layout and premium components.
3. Make the creative decisions needed to deliver a premium result.
/* Brutalist Utility Classes */
.brutalist-border {
border: 3px solid #000000 !important;
}
.brutalist-shadow {
box-shadow: 4px 4px 0px 0px #000000 !important;
}
.brutalist-btn:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px 0px #000000 !important;
}
/* Brutalist Tokens */
:root {
--br-black: #000000;
--br-yellow: #FFFF00;
--br-white: #FFFFFF;
--br-cyan: #00FFFF;
--br-pink: #FF00FF;
}
Tüm kartlara ve butonlara 3px kalınlığında düz siyah çerçeve ekle.
Yumuşak gölgeleri kaldır, yerine sert siyah gölge kullan.
Arka plan rengi olarak saf beyaz veya neon sarı tercih et.
Yazı tipi olarak tarayıcı varsayılanı olan monospace kullan.
Google ile Devam Et