High-Contrast Yellow Brutalist Editorial — Vivid Yellow & Black Brutalist Design System & Template

Overview

This is a high-contrast editorial brutalist system: pure black, pure white, and vivid yellow arranged with hard edges, bold rules, and monospace labels. The mood is direct, civic, technical, and energetic rather than soft or decorative. Visual hierarchy is created through scale, weight, and stark color blocking rather than shadows or rounded surfaces. The interface feels dense in information but airy in spacing, using strong section rhythm and full-bleed color fields to separate content.

Colors

The palette is intentionally narrow and high-impact. Black and white carry most structure and text, vivid yellow supplies energy and emphasis, and a deep purple footer provides the single large dark field.

• primary: Black is used for body text, borders, navigation surfaces, buttons, and strong graphical rules. It creates the sharp, unambiguous contrast that defines the system.
• secondary: White is used for page backgrounds, card surfaces, input fields, and inverse text. It keeps the interface open and readable against the heavy black and yellow accents.
• accent: Vivid yellow is the signature color. It appears in top bars, highlights, underlines, hover fills, marked titles, and large numeral backgrounds. It should feel electric, not pastel.
• accent-soft: Pale yellow is reserved for oversized background numerals, giving emphasis without competing with the pure yellow accent.
• surface: Light grey is used for neutral navigation items and soft section backgrounds. It provides a quieter alternative to white.
• surface-alt: A slightly cooler light grey is used for alternating full-bleed sections and subtle separation.
• footer: Deep purple is the only large dark color field outside of black. It is reserved for the footer and should feel dense and grounding.
• text-inverse: White text is used on black navigation surfaces and the purple footer.
• muted: Placeholder grey is used for form placeholder text.
• border: Black borders define structure, especially around cards, nav items, and section headers.
• border-subtle: Very light grey appears as the default border color in low-emphasis contexts.
• progress-track: Light grey is used as the unfilled track for progress indicators.

Typography

Typography mixes a humanist sans for most content with monospace for labels, navigation, buttons, and metadata. Large display text is set in Manrope, while Space Mono gives technical, editorial labels their distinct character. Space Grotesk appears only for the oversized numbered points, where it acts as a graphic element.

• body: Manrope at 1rem with 400 weight and 1.5 line height is the base reading style.
• body-lg: Manrope at 1.125rem with 1.75rem line height is used for card titles, quotes, and larger body copy.
• body-sm: Manrope at 0.875rem with 1.25rem line height is used for small footer and metadata text.
• hero: Manrope at 2.6rem with 3rem line height represents the main hero heading. It scales responsively up to 4rem with 4.2rem line height on wider screens and down to 1.75rem on small screens.
• section-heading: Manrope at 1.875rem, 700 weight, and 2.55rem line height is used for strong section titles.
• display-heading: Manrope at 2.9rem, 400 weight, and 3.85rem line height is used for large, quieter display section titles.
• nav-label: Manrope at 0.75rem, 700 weight, and 1rem line height is used for compact navigation labels.
• mono-label: Space Mono at 0.75rem, 700 weight, 1rem line height, and 0.1em letter spacing is used for uppercase labels, buttons, and metadata. Uppercase treatment is common.
• mono-display: Space Mono at 30px with 400 weight is used for large footer headings.
• number: Space Grotesk at 14rem, 700 weight, and 0.7 line height is used for decorative oversized numerals; on wider screens this can grow to 22rem.
• quote: Manrope at 1.25rem with 1.75rem line height is used for testimonials.

Layout

The layout uses a centered, wide container capped at 1536px with responsive horizontal padding: 1.5rem on small screens and 2.5rem from medium screens up. The header is sticky at the top and uses a grid structure with separate areas for logo, navigation, menu trigger, and section headers. Navigation is a horizontal grid on desktop and becomes a stacked, overlay-like pattern on mobile.

Content sections are separated with generous vertical spacing. Common section padding includes 2.5rem, 3.5rem, 5rem, and 6rem. Section headers use a two-column grid with title, subtitle, and optional action button. Main content blocks often use flex columns with 1.5rem gaps, and reading-width content is capped around 642px. Cards in the updates area are arranged in a horizontal slider with 30px gaps. Supporter and people lists use CSS columns: one column on mobile, two on medium, and up to four on large screens. The footer is a full-bleed deep purple block with newsletter and community actions at the top and legal text below.

Elevation & Depth

Depth is almost entirely flat. There are no soft drop shadows, no glassmorphism, and no blurred layers. Structure comes from borders, color blocks, and full-bleed backgrounds. Black 1px borders outline cards, navigation items, and section headers. Thicker 4px and 5px borders are used for emphasis, especially under action links and around testimonial citations. The yellow top bar and purple footer create a strong front-to-back layering through color rather than shadow. Focus states use a 2px ring with 2px offset. The only notable inset effect is on highlighted text, where white inset shadows reduce the default yellow highlight into a more controlled band.

Shapes

The shape language is hard-edged and rectangular. Corners are square almost everywhere: buttons, cards, navigation items, inputs, and section blocks all use 0px radius. The only recurring rounded shape is the progress bar, which is fully pill-shaped at 9999px. Borders are solid and often black, with 1px used for structure and 4px or 5px used for emphasis. The system favors left and bottom borders as visual anchors. There are no soft corners, no floating cards, and no subtle elevation radii.

Components

Header & Navigation

The header is sticky and uses a yellow top bar, a compact logo area, and a navigation grid. Navigation items are rectangular, unrounded blocks. Default items use light grey background with black text, while active or desktop navigation uses black background with white text. Hover states shift to black backgrounds with yellow text or yellow hover fills. Labels are compact, bold, and often uppercase. The menu trigger is a distinct rectangular control with a plus or arrow icon. Desktop navigation rows are 32px high, mobile rows are 48px high.

Button Link

Action links are text-based rather than filled buttons. They use monospace uppercase type, bold weight, and no underline. Each part of the label sits above a 4px yellow bottom border. A small arrow icon is placed in a separate span with the same yellow underline. On hover, the child spans fill with yellow. These links are unrounded and sized to content.

Card

Update cards are vertical, rectangular, and left-bordered with 1px black. The header contains a monospace date and bold author, separated by a black bottom border. The title uses larger body text, and the footer contains a bold “Read More” label with a 4px black left border. Cards have no radius and no shadow. On small screens they gain a light grey background; on larger screens they remain white with a visible left border.

Section Header

Section headers use Manrope with normal casing. Strong section headers use bold 1.875rem type, while display section headers use 2.9rem normal-weight type. They sit in a grid with title, optional subtitle, and optional right-aligned action link. Spacing between title and subtitle is around 1.5rem, and section headers are separated from content by 1.25rem to 2.5rem.

Numbered Points

The numbered-points component uses a vertical or horizontal list with enormous pale yellow numerals positioned behind each item. The numerals are set in Space Grotesk at 14rem on small screens and 22rem on wider screens. Items have black left and bottom borders, with 0.75rem horizontal padding and 1.75rem bottom padding. On mobile they stack with a minimum height of 200px; on wider screens they become equal-width flex columns. Headings inside use Manrope bold.

Supporter Column

Supporter columns use a monospace uppercase title with 0.1em tracking, black bottom border, and small horizontal padding. The highlighted “core” version places the title on a vivid yellow background. List items are arranged in CSS columns, with logo boxes constrained to fixed widths and heights. Text-only supporter links use Manrope with an arrow suffix and underline on some items.

Testimonial

Testimonials use large Manrope text with oversized open and close quotation marks positioned absolutely. The quote marks are 5rem and sit behind or beside the text. The citation is inline-block, not italic, with a 5px yellow bottom border and 0.5rem horizontal padding. Author names are bold, and roles follow in normal weight.

Footer

The footer is a full-bleed deep purple block with white text and 2rem top padding, 5rem bottom padding. It uses a two-column responsive layout. The newsletter and community actions use monospace labels, small arrow icons in black and yellow, white input fields, and black submit blocks with yellow or white text. Legal text is small, with underlined links and a separate copyright row. The footer is unrounded and uses no shadows.

Progress Bar

Progress indicators use a fully rounded pill shape. The track is light grey and the filled value is black. This is the only component that breaks the otherwise square shape language.

Do's and Don'ts

Do

• Use pure black, pure white, and vivid yellow as the core palette.
• Keep corners square for all buttons, cards, nav items, and inputs.
• Use monospace uppercase labels for navigation, buttons, metadata, and technical accents.
• Build hierarchy with scale, weight, black borders, and full-bleed color blocks.
• Use yellow as an active, energetic accent for underlines, highlights, and hover fills.
• Preserve generous vertical spacing between major sections.
• Use hard 1px black borders for structure and 4px–5px borders for emphasis.
• Reserve the deep purple field for the footer only.

Don't

• Don't add rounded corners except for progress pills.
• Don't introduce soft shadows, gradients, or glass effects.
• Don't use pastel or muted accent colors beyond pale yellow and light greys.
• Don't replace monospace labels with soft or decorative type.
• Don't reduce the high contrast between black, white, and yellow.
• Don't use filled rounded buttons when a hard-edged text link with a yellow underline will do.
• Don't add ornamental icons; keep iconography to simple arrows, plus signs, and directional marks.
• Don't use italic styling for quotes or citations.