Brutalist Web

网页粗野主义

stylekitMITMinimal · minimalBrutalist · brutalistRetro · retroExperimental · experimentalLight · lightMedium · mediumNeutral · neutralMuted · mutedSerif · serifGeneral · generalLanding · landing

回归90年代早期互联网的原始HTML美学，系统字体、蓝色下划线链接、纯白背景、无装饰，内容优先于形式。

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Brutalist Web" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/brutalist-web @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/brutalist-web · bfa7da909e86 · © AnxForever

Do

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
Use blue (#0000ff) underlined links as the primary interactive element
Use thin 1px solid borders for structural separation
Use no border-radius anywhere (border-radius: 0 or rounded-none)
Keep layout linear and document-like - single column preferred
Use minimal spacing - tight margins and padding

Don't

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 changes
Don't use custom web fonts or icon fonts
Don't use background colors other than white
Don't use large padding or excessive whitespace

Prompt

Use Brutalist Web style to create a personal homepage:
1. White background, no decoration
2. Large serif heading with the person's name
3. Horizontal rule separator
4. Monospace body text with a brief bio
5. Blue underlined links section: "My Projects", "My Blog", "Contact"
6. Simple 1px border table listing recent updates with dates
7. Footer with "Last updated" date and webmaster email link
8. No shadows, no rounded corners, no gradients, no animations
9. Buttons: Windows 95 bevel border style, transition-none
10. Inputs: inset bevel border, focus:bg-[#ffffcc] yellow highlight

---
"Brutalist Web" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/brutalist-web @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Brutalist Web. \"Brutalist Web\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/brutalist-web @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-brutalist-web",
      "license": "MIT",
      "attribution": "\"Brutalist Web\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/brutalist-web @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "card": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "primary": {
      "$type": "color",
      "$value": "#000000"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "accent": {
      "$type": "color",
      "$value": "#0000ff"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#f0f0f0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#595959"
    },
    "border": {
      "$type": "color",
      "$value": "#dbdbdb"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#000000"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0px"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Brutalist Web" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/brutalist-web @ bfa7da909e86. */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #fafaf9;
  --secondary: #ffffff;
  --secondary-foreground: #000000;
  --accent: #0000ff;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #595959;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #000000;
  --radius: 0px;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Brutalist Web" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/brutalist-web @ bfa7da909e86. */
/** Tailwind theme extend for Brutalist Web (stylekit-brutalist-web) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#ffffff",
        "foreground": "#000000",
        "card": "#ffffff",
        "primary": "#000000",
        "primary-foreground": "#fafaf9",
        "secondary": "#ffffff",
        "accent": "#0000ff",
        "muted": "#f0f0f0",
        "border": "#dbdbdb",
        "destructive": "#dc2626",
        "ring": "#000000"
      },
      "borderRadius": {
        "lg": "0px"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Brutalist Web" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/brutalist-web @ bfa7da909e86. */
@layer base {
:root {
  --background: #ffffff;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #fafaf9;
  --secondary: #ffffff;
  --secondary-foreground: #000000;
  --accent: #0000ff;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #595959;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #000000;
  --radius: 0px;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}