Style Detail - Brutalism

See this style applied to a real page — identical content, different stylesheet.

About This Style

Brutalism in web design originates from the architectural movement of the same name, emphasizing raw, exposed, unadorned materials and structures. It is often seen as a rebellion against current refined, sleek, user-friendly design trends.

This style usually gives a direct, honest, and even somewhat 'coarse' feeling. It does not pursue beauty in the traditional sense but focuses on the direct presentation of function and the clear visibility of structure.

Main Features:

Raw Feel: The interface looks like a basic, unadorned HTML structure.
System Fonts: Extensive use of computer default fonts, such as Arial, Times New Roman, or monospace fonts.
High Contrast: Often uses pure black, pure white, or very vivid primary colors (like bright yellow, bright blue) for strong contrast.
Lack of Ornamentation: Little to no gradients, soft shadows, textures, or complex animations.
Hard Edges: Elements usually have clear, hard borders with almost no rounded corners.
Blocky Layout: The layout structure is distinct, sometimes intentionally appearing somewhat clumsy or unbalanced.
Visible Structure: Structural elements like borders and dividers are emphasized rather than hidden.
Harsh Shadows: If shadows are used, they are typically simple, hard block shadows rather than soft, blurred effects.

Brutalism style is often used for personal portfolios, art projects, independent magazines, or websites that need to express strong personality and anti-mainstream attitudes.

Sample AI Prompt

Create a brutalist website for an art zine. Use default system fonts (Arial, Times), stark high-contrast colors (black/white or black/yellow), hard borders, no rounded corners, and maybe harsh block shadows.

(Chinese Explanation: Create a brutalist website for an art zine. Use default system fonts (Arial, Times), stark high-contrast colors (black/white or black/yellow), hard borders, no rounded corners, and maybe harsh block shadows.)

Theme CSS Code Snippet

Below is the core CSS code for applying the brutalism style as a global theme (body.theme-brutalism):

/* 5. Brutalism Theme */
body.theme-brutalism {
    --page-bg: #ffffff; /* Usually white or high-contrast background */
    --page-bg-gradient: none;
    --text-color: #000000; /* Black text */
    --heading-color: #000000;
    --link-color: #0000ff; /* Default blue link */
    --link-hover-color: #ff00ff; /* High-contrast hover color */
    --border-color: #000000; /* Black hard border */
    --card-bg: #f0f0f0; /* Light gray card */
    --card-shadow: 4px 4px 0px #000000; /* Hard block shadow */
    --card-hover-shadow: 6px 6px 0px #000000;
    --header-bg: yellow; /* High-contrast header */
    --header-text-color: #000000;
    --header-shadow: none; /* No shadow */
    border-bottom: 2px solid #000; /* Header bottom hard border */
    --footer-text-color: #000000;
    --footer-bg: #f0f0f0; /* Footer background */
    --button-bg: yellow; /* High-contrast button */
    --button-text-color: black;
    --button-hover-bg: black;
    --button-hover-text-color: yellow;
    --button-border: 2px solid black; /* Button hard border */
    --button-secondary-bg: black;
    --button-secondary-text-color: yellow;
    --button-secondary-hover-bg: yellow;
    --button-secondary-hover-text-color: black;
    --button-secondary-border: 2px solid black;
    --prompt-bg: #e0e0e0; /* Prompt area background */
    --prompt-text-color: #111;
    --base-font: var(--font-mono); /* Monospace font */
    --heading-font: var(--font-mono);
    --card-border-radius: 0px; /* No rounded corners */
    --button-border-radius: 0px; /* No rounded corners */
}

/* Brutalism Specific Adjustments */
body.theme-brutalism .card {
    border: 2px solid var(--border-color); /* Emphasize card border */
}
body.theme-brutalism h1,
body.theme-brutalism h2,
body.theme-brutalism h3 {
    text-transform: uppercase; /* Uppercase headings */
    font-weight: bold; /* Bold */
}
body.theme-brutalism a:hover {
    text-decoration: none; /* Remove hover underline, rely on color change */
    background-color: var(--link-hover-color); /* Emphasize with background color */
    color: var(--page-bg); /* Invert text color */
}

Note: The implementation of brutalism largely depends on the structure and layout choices of the content, as well as the deliberate omission of decorative elements.

Resource Download (Example)

Download a zip file containing a more complete CSS definition for this style (may include specific component styles, font file references, etc.).

Download brutalism.zip