Generate Brutalist Typography Layouts for Web and Mobile

Brutalist Typography is a sub-style reference within the design-it skill that provides code examples for creating aggressive, unpolished typographic layouts. The source material includes CSS, SwiftUI, Flutter, React Native, and Jetpack Compose code samples demonstrating text that overlaps, ignores margins, clips off edges, uses system fonts (Times New Roman, Arial, Courier New) in large sizes, and employs harsh color contrasts.

This sub-style is meant to be used when a user's request matches the brutalist aesthetic described in the source: aggressive, unpolished, and unapologetic text that demands attention by breaking rules. The source explicitly states this is "a child reference of the design-it skill and is not meant to be triggered directly."

Do NOT use this for accessibility-focused projects where readability and usability are primary concerns.

The source material provides code examples that demonstrate brutalist typography principles across multiple platforms. These examples show techniques like negative margins, viewport-based font sizing, absolute positioning, overlapping text, and intentional grid violations.

Here's a CSS example from the source:

body {
  background-color: #fff;
  color: #000;
  font-family: 'Times New Roman', serif;
}

.brutalist-headline {
  font-size: 15vw;
  line-height: 0.7;
  letter-spacing: -5px;
  margin-left: -10px; /* Bleeds off screen intentionally */
  word-wrap: break-word; /* Let words break awkwardly */
}

.brutalist-highlight {
  background-color: #ff0000;
  color: #fff;
  padding: 0 10px;
}

.marquee-container {
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  font-size: 2rem;
  font-weight: bold;
  padding: 10px 0;
}

The source material contains code examples for:

• Web/CSS: Examples showing viewport-based font sizing (15vw), negative margins (-10px), system font families (Times New Roman, Arial, Courier New), tight line-height (0.7), and negative letter-spacing (-5px)
• SwiftUI: Examples using custom system fonts at sizes 100-140, .ignoresSafeArea(), negative spacing in VStack (-20), .offset() for positioning, .stroke() overlays for outlined text, and .rotationEffect()
• Flutter: Examples with Stack and Positioned widgets for absolute positioning, Paint with PaintingStyle.stroke for outlined text, Transform.rotate, and explicit avoidance of SafeArea
• React Native: Examples showing negative margins (-15, -30) for edge bleeding and overlap, text styling with lineHeight and transform properties
• Jetpack Compose: Examples using Box with Modifier.offset(), TextStyle with Stroke drawStyle, FontFamily.Serif/SansSerif/Monospace, and .rotate() modifiers

The source defines three core principles:

1. Rule Breaking: Text that overlaps, ignores margins, or deliberately clips off the edge of the screen
2. Anti-Design: Intentional use of system fonts or "ugly" fonts (Times New Roman, Courier) in massive sizes
3. Harsh Contrast: Clashing colors or stark monochrome

This sub-style reference is for users working within the design-it skill who need code examples for brutalist typography layouts across web and mobile platforms.