# Brutalism > The browser’s defaults on purpose: Times and Arial, blue underlined links, 1px black boxes, grey bevel buttons and zero polish. - Nickname: Raw HTML - Also called: Web Brutalism, Brutalist web design, Raw web - Category: Bold & Expressive - Moods: Edgy, Serious, Bold - Industries: Creative & Portfolio, Media & Entertainment, Education, Startup & Tech - Style page: https://uilingo.dev/styles/brutalism/ Web brutalism exposes the raw material of the web instead of decorating it. Pages look like unstyled HTML that someone pushed to the extreme: default serif body, huge plain sans headlines, link-blue underlines, visible 1px table borders around every block, grey outset buttons, monospace metadata and a visible column grid. No radius, no shadow, no gradient, no colour system beyond black, white, link blue, visited purple and a warning red. It reads as honest, anti-corporate and fast. ## Best for - Artist, architect and studio portfolios - Zines, manifestos and independent publications - Developer tools, docs and link directories - Event and exhibition microsites ## Avoid for - Consumer brands that must feel friendly or premium - Checkout and banking flows that need reassurance - Audiences unfamiliar with web culture (it can look broken) ## Do - Use #0000EE underlined links and #551A8B for visited/hover - Draw every block with a 1px solid #000 border and 0 radius - Let Times-like serif carry body text at 17–18px - Use monospace for dates, IDs, counts and labels in [brackets] ## Don't - No border-radius, drop shadows, gradients or blur - Don’t add a brand colour palette — black, white and link blue only - Don’t centre everything; keep the hard left edge - Don’t animate anything decoratively ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Brutalism" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line The browser’s defaults on purpose: Times and Arial, blue underlined links, 1px black boxes, grey bevel buttons and zero polish. Design keywords: default browser fonts, blue underlined links, Times New Roman body, 1px black table borders, grey bevel buttons, visible grid lines, no radius no shadow, monospace metadata, deliberately unrefined. ## Visual language A white document page that looks like unstyled HTML pushed to the extreme. Body text is a Times-style serif at 17px, headlines are plain Arial-style sans set enormous and tight, metadata is Courier-style monospace in [square brackets]. Every block is a 1px solid black box with square corners; links are #0000EE and underlined; buttons are either link-blue blocks or the grey bevelled default button. No shadow, no gradient, no blur, no rounded corner, no brand palette — the structure is the decoration, and faint 12-column grid lines stay visible behind the page. ## Signature details (must be visible) - Fonts: Arimo 700 (Arial clone) headings with -0.045em tracking, Tinos 400 (Times clone) body, Cousine (Courier clone) for labels, dates, IDs and badges - Links #0000EE with 1px underline at 2px offset; hover / current page #551A8B (visited purple) - Every card, stat, table cell, FAQ row and list is 1px solid #000 with border-radius 0 and box-shadow none; adjacent boxes overlap by -1px so they read as one table - Secondary buttons are the browser default: background #E9E9ED, 2px outset border, switching to inset on :active - Eyebrows and labels in monospace wrapped in brackets: '[ FEATURES ]'; numbered boxes '#01, #02' in red #FF0000 - Page framed by a 1px black border with an 8px margin (the default body margin) over faint 1px column lines at 11% black - Image placeholders are white boxes with a thin diagonal X and a mono filename tag like 'IMG_0042.JPG — 1600×900' - No motion: transitions 0ms; state changes are instant colour swaps ## Design tokens — use these exact values Colours (light mode): - background #FFFFFF - surface #FFFFFF - surface-2 #F0F0F0 - text #000000 - text-muted #4D4D4D - primary #0000EE (text on it #FFFFFF) - secondary #E9E9ED (text on it #000000) - accent #FF0000 - border #000000 - success #007A00 · warning #A65F00 · danger #D10000 - chart series #0000EE, #000000, #FF0000, #551A8B, #8C8C8C Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px Border width: 1px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.9 density Motion: 0ms linear ## Typography (Latin + Thai) - Headings: Arimo 400/700 with Thai fallback Noto Sans Thai 400/700 - Body: Tinos 400/700 with Thai fallback Noto Serif Thai 400/700 - Mono: Cousine - Google Fonts URL: https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Cousine:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Serif+Thai:wght@400;700&display=swap - CSS stacks: heading `"Arimo", "Noto Sans Thai", system-ui, sans-serif`; body `"Tinos", "Noto Serif Thai", system-ui, sans-serif`; mono `"Cousine", ui-monospace, "SFMono-Regular", Menlo, "Noto Serif Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Noto Serif Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 9vw, 8rem), heading weight 700, heading tracking -0.045em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Arimo and Tinos are metric clones of Arial and Times New Roman; Noto Sans Thai and Noto Serif Thai are the plain system-default Thai faces you would see in an unstyled page, sans for headlines and looped serif for body. ## Components - Primary button: #0000EE fill, white underlined text, 1px #000 border, 0 radius; hover #551A8B; active #FF0000 - Secondary button: #E9E9ED, 2px outset border, black text in Arimo 400; :active border-style inset - Ghost button: plain underlined link in #0000EE with no box - Card: white, 1px #000 border, 20px padding, no shadow; hover only changes background to #F0F0F0; card title uppercase Arimo 700 0.85rem with a 1px rule under the head - Inputs: square, 2px inset light-grey border, serif text; focus = 2px solid #0000EE outline, no glow - Badges: mono uppercase 0.72rem, transparent fill, 1px currentColor border; solid badge red #FF0000 with white text - Tables: border-collapse with 1px #000 on every cell, header row #F0F0F0 in mono bold - Charts: 1.5px square-capped lines in #0000EE and dotted black, no area fill, solid grid; bars alternate black / white boxes with 1px outlines - Tabs and segmented controls: underlined blue text items; the selected one becomes a solid black box with white text - Mobile tab bar: equal text cells divided by 1px rules, underlined blue mono labels, active cell solid black ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: oversized flush-left headline on a wide column with a narrow supporting column. Navigation: minimal style. Sections in order: hero → features → stats → showcase → testimonials → pricing → faq → cta. Feature section as list. Left-aligned everything: an editorial hero with a giant 8rem headline closed by a 1px rule, lead paragraph in serif, a link-blue button beside a grey bevel button and a red asterisk note. Sections are separated by full-width 1px rules; section heads are left-aligned with a rule beneath. Features render as a 2-column table of boxed rows, stats as four boxed cells with 5rem numbers, FAQ as stacked boxes with [+] markers. Navigation is a plain row of underlined blue links. Dashboards use a top nav of links, boxed KPI cells, a fully gridded table and line/bar charts without fills. ## Content Use realistic product copy (fictional brand) suited to: Artist, architect and studio portfolios. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use #0000EE underlined links and #551A8B for visited/hover - Draw every block with a 1px solid #000 border and 0 radius - Let Times-like serif carry body text at 17–18px - Use monospace for dates, IDs, counts and labels in [brackets] ## Don't - No border-radius, drop shadows, gradients or blur - Don’t add a brand colour palette — black, white and link blue only - Don’t centre everything; keep the hard left edge - Don’t animate anything decoratively - Rounded corners, drop shadows, gradients, glassy blur or soft colour tints - A brand palette: no pastels or extra hues beyond black, white, link blue, visited purple and alarm red - Thick 3px outlines and offset shadows — that is Neubrutalism - Centred, symmetrical marketing layouts and decorative illustration - Custom webfont personality (geometric display faces) instead of default-looking Arial / Times / Courier - Dark terminal screens with green text — that is Terminal CLI ## Stack notes One self-contained HTML file with a