{"visualLanguage":{"id":"brutal-signal","name":"Brutal Signal","version":"v0.1.1","stability":"stable","summary":"High-contrast editorial blocks with heavy rules and magnetic badges.","mood":"industrial","density":"compact","tags":["editorial","brutalist","high-contrast","bold","newsletter"],"stacks":["html","tailwind","mui"],"palette":["#F5F1E8","#0B0B0D","#F24E1E","#F2C94C","#E4DED0","#6E6E72"],"constraints":["density:compact","stacks:html,tailwind,mui","tags:editorial,brutalist,high-contrast"],"tokenSummary":"6 palette tokens · 6 spacing steps · compact density","allowedTargets":["shadcn","tailwind","html","json","mui"],"versionHash":"ab8e559422f15164fb645448d9f3bbc240c58e3e64a2f5c2504c8526bfc06fc1","updatedAt":"2026-01-02","tokenSet":{"palette":{"paper":"#F5F1E8","ink":"#0B0B0D","accent":"#F24E1E","highlight":"#F2C94C"},"colorRoles":{"light":{"background":"#F5F1E8","surface":"#F5F1E8","surfaceAlt":"#F2C94C","surfaceRaised":"#F2C94C","overlay":"#F2C94C","border":"#F2C94C","borderSubtle":"#F2C94C","borderStrong":"#0B0B0D","text":"#0B0B0D","textMuted":"#F2C94C","textDisabled":"#F2C94C","link":"#F24E1E","accent":"#F24E1E","accentText":"#F5F1E8"},"dark":{"background":"#0B0B0D","surface":"#0B0B0D","surfaceAlt":"#F2C94C","surfaceRaised":"#F2C94C","overlay":"#F2C94C","border":"#F2C94C","borderSubtle":"#F2C94C","borderStrong":"#F5F1E8","text":"#F5F1E8","textMuted":"#F2C94C","textDisabled":"#F2C94C","link":"#F24E1E","accent":"#F24E1E","accentText":"#0B0B0D"}},"colorMode":"light","colorStates":{"light":{"surface":{"hover":"#F2C94C","active":"#F24E1E","disabled":"#F5F1E8"},"border":{"default":"#F2C94C","focus":"#F24E1E","disabled":"#F2C94C"},"text":{"default":"#0B0B0D","muted":"#F2C94C","disabled":"#F2C94C"},"accent":{"hover":"#F24E1E","active":"#F24E1E"}},"dark":{"surface":{"hover":"#F2C94C","active":"#F24E1E","disabled":"#0B0B0D"},"border":{"default":"#F2C94C","focus":"#F24E1E","disabled":"#F2C94C"},"text":{"default":"#F5F1E8","muted":"#F2C94C","disabled":"#F2C94C"},"accent":{"hover":"#F24E1E","active":"#F24E1E"}}},"colorRamps":{"neutral":["#F5F1E8","#F5F1E8","#F2C94C","#F2C94C","#F2C94C","#F2C94C","#F2C94C","#0B0B0D","#0B0B0D","#0B0B0D"],"accent":["#F24E1E","#F24E1E","#F24E1E","#F24E1E","#F24E1E","#F24E1E","#F24E1E","#F24E1E","#F24E1E","#F24E1E"]},"semantic":{"success":"#16a34a","warning":"#f59e0b","info":"#F24E1E","danger":"#dc2626","muted":"#F2C94C"},"typography":{"display":{"family":"Karla, system-ui, sans-serif","weight":600,"lineHeight":1.2,"letterSpacing":"0em","casing":"title"},"body":{"family":"IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace","weight":400,"lineHeight":1.5,"letterSpacing":"0em","casing":"sentence"},"mono":{"family":"IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace","weight":500,"lineHeight":1.4,"letterSpacing":"0em"},"scale":{"xs":12,"sm":14,"md":16,"lg":18,"xl":20,"2xl":24,"3xl":30,"4xl":36,"5xl":48,"6xl":60}},"space":{"xs":4,"sm":8,"md":12,"lg":16,"xl":24,"2xl":32},"radius":{"sm":6,"md":8,"lg":12,"xl":16},"shadow":{"soft":"0 12px 28px rgba(11, 11, 13, 0.22)","hard":"0 0 0 2px rgba(11, 11, 13, 0.5)"},"border":{"width":{"thin":2,"thick":2},"style":"solid"},"motion":{"fast":"150ms","base":"200ms","slow":"300ms","easing":"cubic-bezier(0.4, 0, 0.2, 1)"},"opacity":{"muted":0.7,"disabled":0.4,"overlay":0.55},"z":{"base":1,"overlay":10,"modal":30,"toast":40},"interaction":{"focusRing":{"color":"#F24E1E","width":2,"offset":3,"style":"solid"},"states":{"hoverOpacity":0.94,"activeOpacity":0.88,"disabledOpacity":0.5,"selectedOpacity":0.92,"pressedScale":0.99},"outlines":{"width":1,"color":"#F2C94C"},"keyboard":{"indicator":"focus-ring","behavior":"show-on-focus"},"motionSafety":"respect-reduced-motion"},"content":{"voice":"friendly","casing":{"headings":"title","body":"sentence"},"numerals":{"format":"localized","decimalPlaces":2},"dates":{"format":"yyyy-MM-dd"},"ellipsis":{"maxLines":2,"strategy":"ellipsis"},"placeholders":"Use concise, action-oriented placeholders."},"accessibility":{"contrast":{"text":4.5,"ui":3},"tapTarget":44,"focusOrder":"natural","aria":{"nav":"role=navigation, aria-label required","forms":"associate labels, describe errors, aria-live for status","tables":"use scope on headers, describe sortable state"},"motionReduction":"respect"},"dataViz":{"palette":{"categorical":["#F24E1E","#F2C94C","#10b981","#8b5cf6"],"sequential":["#e0f2fe","#93c5fd","#3b82f6","#1d4ed8"],"diverging":["#dc2626","#fbbf24","#22c55e","#0ea5e9"]},"grid":{"color":"rgba(0,0,0,0.08)","width":1},"axis":{"color":"#0B0B0D","width":1,"labelCase":"title"},"stroke":{"width":2,"radius":6},"tooltip":{"background":"#F5F1E8","text":"#0B0B0D","shadow":"0 12px 30px rgba(0,0,0,0.12)"}},"i18n":{"rtl":false,"numeralSystem":"latn","dateFormat":"yyyy-MM-dd","typographyFallbacks":["Inter","system-ui","sans-serif"]},"compliance":{"status":"brand-critical","usage":{"do":["Respect density and palette constraints","Keep accent usage minimal"],"dont":["Override guardrails","Add new accent colors"]},"allowedStacks":["html","tailwind","mui"]},"layout":{"grid":{"columns":12,"gutter":16,"maxWidth":1280},"breakpoints":{"sm":640,"md":768,"lg":1024,"xl":1280},"container":{"padding":{"mobile":12,"desktop":16},"maxWidth":1200},"section":{"verticalSpacing":16},"media":{"aspectRatios":["16:9","4:3","1:1"]}},"componentSpecs":{"button":{"variants":["primary","secondary","ghost"],"states":["default","hover","active","focus","disabled"],"requiredTokens":["colorRoles.light.accent","colorRoles.dark.accent","colorRoles.light.accentText","colorRoles.dark.accentText","typography.scale.md","radius.lg"],"sizeTokens":{"height":"space.2xl","paddingX":"space.lg","paddingY":"space.sm","radius":"radius.lg"},"typographyTokens":{"size":"typography.scale.md","weight":"typography.display.weight","lineHeight":"typography.display.lineHeight","letterSpacing":"typography.display.letterSpacing","family":"typography.display.family"},"anatomy":["root","label"],"a11yTokens":["focus-visible"]},"input":{"variants":["default","filled"],"states":["default","focus","disabled","error"],"requiredTokens":["colorRoles.light.surface","colorRoles.dark.surface","colorRoles.light.border","colorRoles.dark.border","typography.scale.sm","radius.md"],"sizeTokens":{"height":"space.2xl","paddingX":"space.md","paddingY":"space.sm","radius":"radius.md"},"typographyTokens":{"size":"typography.scale.sm","weight":"typography.body.weight","lineHeight":"typography.body.lineHeight","letterSpacing":"typography.body.letterSpacing","family":"typography.body.family"},"anatomy":["label","control","helper"],"a11yTokens":["label-associated","described-by"]}},"componentGuardrails":{"hero":{"required":["headline","supporting copy","primary action"],"allowedPatterns":["image-right","image-left","split"],"maxAccents":1,"maxActions":2,"notes":["Keep eyebrow short","One accent block per hero"]},"nav":{"required":["brand","primary links"],"allowedPatterns":["topbar","sidebar"],"maxAccents":0,"maxActions":1,"notes":["Use focus ring on nav links","Keep link labels <= 2 words"]},"table":{"required":["header","rows","hover/focus states"],"allowedPatterns":["sortable columns"],"maxAccents":0,"maxActions":2,"notes":["Use zebra or divider rows","Include empty-state copy"]},"card":{"required":["title","body"],"allowedPatterns":["media-top","media-left"],"maxAccents":1,"maxActions":2,"notes":["Respect radius scale","Avoid more than 2 badges"]},"form":{"required":["label","helper text","error state"],"allowedPatterns":["stacked","inline"],"maxAccents":0,"maxActions":1,"notes":["Inputs full-width on mobile","Use consistent spacing scale"]},"chart":{"required":["axes labels","legend","tooltip"],"allowedPatterns":["line","bar"],"maxAccents":1,"maxActions":0,"notes":["Use dataViz palette","Keep gridlines subtle"]}},"density":"compact","mood":"industrial","stacks":["html","tailwind","mui"],"tags":["editorial","brutalist","high-contrast","bold","newsletter"],"guardrails":["Density in {compact}","Palette tokens = 6","Accent usage <= 1 primary per section"]},"content":"## Intent\nBrutal Signal is a punchy system for AI-generated editorial layouts and data\nposters. It favors stark typography, thick borders, and declarative UI labels.\n\n## Tokens\n- Background: `#F5F1E8`\n- Ink: `#0B0B0D`\n- Accent: `#F24E1E`\n- Support: `#F2C94C`\n- Paper: `#E4DED0`\n- Slate: `#6E6E72`\n- Radius: `8px`\n- Grid: `4px` baseline\n\n## Layout cues\n- Stack content in dense columns with 16px gaps.\n- Use 2px borders for cards and tables.\n- Buttons are sharp rectangles with all-caps labels.\n\n## Material UI snippet\n```tsx\n<Paper\n  elevation={0}\n  sx={{\n    border: \"2px solid #0B0B0D\",\n    borderRadius: 2.5,\n    padding: 3,\n    bgcolor: \"#F5F1E8\",\n  }}\n>\n  <Stack direction=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n    <Typography variant=\"overline\">Signal</Typography>\n    <Chip label=\"Live\" sx={{ background: \"#0B0B0D\", color: \"#F5F1E8\" }} />\n  </Stack>\n  <Typography variant=\"h5\" sx={{ fontWeight: 700, marginTop: 2 }}>\n    Industrial editorial block\n  </Typography>\n  <Typography variant=\"body2\" sx={{ marginTop: 1 }}>\n    Dense, high-contrast layout with hard rules and sharp typography.\n  </Typography>\n  <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" sx={{ marginTop: 2, gap: 2 }}>\n    <Stack direction=\"row\" spacing={1.5}>\n      <Chip\n        label=\"Accent\"\n        size=\"small\"\n        sx={{ background: \"#F24E1E\", color: \"#F5F1E8\", fontWeight: 700, borderRadius: \"999px\" }}\n      />\n      <Chip\n        label=\"Highlight\"\n        size=\"small\"\n        sx={{ background: \"#F2C94C\", color: \"#0B0B0D\", fontWeight: 700, borderRadius: \"999px\" }}\n      />\n    </Stack>\n    <Typography variant=\"caption\" sx={{ letterSpacing: \"0.08em\" }}>\n      Density: compact\n    </Typography>\n  </Stack>\n</Paper>\n```"},"links":{"page":"/visual-languages/brutal-signal","api":"/api/visual-languages/brutal-signal","versions":"/api/visual-languages/brutal-signal/versions","diff":"/api/visual-languages/brutal-signal/diff?from=v0.1.1&to=v0.1.1"},"generatedAt":"2026-04-17T13:24:32.908Z"}