Inspiration first, drift never.

Brutal Signal

High-contrast editorial blocks with heavy rules and magnetic badges.

Vanilla HTMLTailwindMaterial UICompact densitystable

ID: brutal-signal

Version: v0.1.1

Updated: 2026-01-02

Get JSON

Constraints

density:compactstacks:html,tailwind,muitags:editorial,brutalist,high-contrast

Token summary

6 palette tokens · 6 spacing steps · compact density

Stability cue

stable contract · enforce tokens & guardrails

Token boundaries (hard limits)

Density in {compact}Palette tokens = 6Accent usage <= 1 primary per section

Pair with a structure

Choose the execution surface.

Structures define the required slots. Pair this visual language with a structure when calling `POST /api/emit` to get deterministic output targets.

Structure

Dashboard

App shell with sidebar navigation, filter toolbar, alert banner, stats tiers, data tables, charts, and right-rail insights.

Structure

SaaS

Marketing page with hero, trust strip, metrics, feature grid, integrations, pricing, case study, FAQ, and CTA.

Structure

Editorial

Publication layout with masthead, nav, featured story, highlights, trending, resources, archive, and newsletter signup.

Structure

Portfolio

Personal or studio portfolio with hero, work gallery, services, testimonials, and contact call-to-action.

Structure

Support

Helpdesk workspace with ticket inbox, ticket detail, customer context, and response tools.

Token sandbox

Component Preview

See how buttons, cards, and forms look with this language's tokens applied.

Component Previewindustrialcompact density
signature8ba47a7b

Buttons

Tokens applied

Card

industrialActive

Dashboard Overview

A sample card showing typography, badges, and layout rhythm.

Form Elements

Badges

AccentHighlightOutline

Alert

Quiet Lattice Notice

New

Tokens applied to emphasize clear, low-noise messaging.

Input Group

Palette

#F5F1E8
#0B0B0D
#F24E1E
#F2C94C
#E4DED0
#6E6E72

Guardrail cues

  • Density: compact
  • Buttons: primary · secondary · ghost · highlight
  • Layout: button row, card, form fields

Language brief

Intent

Brutal Signal is a punchy system for AI-generated editorial layouts and data posters. It favors stark typography, thick borders, and declarative UI labels.

Tokens

  • Background: #F5F1E8
  • Ink: #0B0B0D
  • Accent: #F24E1E
  • Support: #F2C94C
  • Paper: #E4DED0
  • Slate: #6E6E72
  • Radius: 8px
  • Grid: 4px baseline

Layout cues

  • Stack content in dense columns with 16px gaps.
  • Use 2px borders for cards and tables.
  • Buttons are sharp rectangles with all-caps labels.

Material UI snippet

<Paper
  elevation={0}
  sx={{
    border: "2px solid #0B0B0D",
    borderRadius: 2.5,
    padding: 3,
    bgcolor: "#F5F1E8",
  }}
>
  <Stack direction="row" justifyContent="space-between" alignItems="center">
    <Typography variant="overline">Signal</Typography>
    <Chip label="Live" sx={{ background: "#0B0B0D", color: "#F5F1E8" }} />
  </Stack>
  <Typography variant="h5" sx={{ fontWeight: 700, marginTop: 2 }}>
    Industrial editorial block
  </Typography>
  <Typography variant="body2" sx={{ marginTop: 1 }}>
    Dense, high-contrast layout with hard rules and sharp typography.
  </Typography>
  <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ marginTop: 2, gap: 2 }}>
    <Stack direction="row" spacing={1.5}>
      <Chip
        label="Accent"
        size="small"
        sx={{ background: "#F24E1E", color: "#F5F1E8", fontWeight: 700, borderRadius: "999px" }}
      />
      <Chip
        label="Highlight"
        size="small"
        sx={{ background: "#F2C94C", color: "#0B0B0D", fontWeight: 700, borderRadius: "999px" }}
      />
    </Stack>
    <Typography variant="caption" sx={{ letterSpacing: "0.08em" }}>
      Density: compact
    </Typography>
  </Stack>
</Paper>
Signal
Live
Industrial editorial block

Dense, high-contrast layout with hard rules and sharp typography.

Accent
Highlight
Density: compact