Deterministic 1.5px hard borders, Instrument Sans typography, JetBrains Mono telemetry, and signature peach accents. Built for developer apps that refuse generic UI kits.
1import { PatterTheme, hardBorders } from "patter-design-system"; 2 3// 1. Initialize Neo-Brutalist design tokens 4export const theme = new PatterTheme({ 5 accent: "#df9367", // Signature Peach 6 borders: hardBorders({ stroke: "1.5px", color: "#000000" }), 7 shadows: "12px 12px 0 0 #000000", 8 fontSans: "Instrument Sans", 9 fontMono: "JetBrains Mono" 10}); 11 12// 2. Export W3C DTCG tokens & Tailwind config 13export default theme.toTailwind();
Instant Agent Activation
Copy this complete, decision-complete prompt and paste it into Claude Code, Cursor Composer, Antigravity, Windsurf, or Copilot.
Apply the Patter Design System (Neo-Brutalist Technical Minimalism) to this project:
1. TYPOGRAPHY:
- Primary UI / Display Font: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif (Google Fonts).
- Monospace / Code / Data Font: 'JetBrains Mono', ui-monospace, monospace.
2. COLOR TOKENS:
- Ink & Neutrals: #000000 (primary ink, borders, buttons), #1a1a1a (dark containers), #4a4a4a (body text), #aaaaaa (muted labels), #eeeeee (1px dividers).
- Surfaces: #ffffff (base canvas), #f6f6f4 (cream secondary cards), #fff8ef (warm accent), #fafaf8 (code panes).
- Signature Peach: #df9367 (core accent & button hover), #c97a4c (deep accent text & keywords), #efc5ac (badge borders), #fff8ef (peach tags).
3. HARD NEO-BRUTALIST BORDERS & SHADOWS:
- Use deterministic 1.5px and 2px solid #000000 borders on buttons, cards, tags, and inputs.
- Replace soft blurry shadows with hard offset shadows:
* Buttons/Pills: `box-shadow: 0 4px 0 0 #000000;`
* Medium Cards: `box-shadow: 12px 12px 0 -1px #f6f6f4, 12px 12px 0 0 #000000;`
* Mockups: `box-shadow: 0 16px 0 -8px #f6f6f4, 0 16px 0 -6px #000000;`
4. TACTILE DOT-GRID TEXTURE:
- Add subtle 18px dot-grid texture on hero & dashboard containers:
`background-image: radial-gradient(circle at 1px 1px, #dad8de 1px, transparent 0); background-size: 18px 18px;`
5. COMPONENT BLUEPRINTS:
- Buttons: Pill shape (`border-radius: 999px`), 1.5px solid #000. Black fill (`#000`), turns `#df9367` on hover.
- Eyebrow Tags: Pill badges with monospace uppercase text and a 6px peach circle dot before text.
- Feature Grid: 3-column unified grid with 1.5px black outer border, 24px radius, and collapsed internal borders.
Refactor the existing layout and stylesheet to strictly enforce this clean, high-density, neo-brutalist technical aesthetic.Interactive Sandbox
Click any swatch to copy its CSS variable, or interact with live controls to observe the Neo-Brutalist token behavior.
Click to copy token name & hex
Inspect tactile response & micro-interactions
Compare
See the difference between hand-rolled, inconsistent styling and Patter's unified token system.
Without Patter DS
1/* Inconsistent radii, colors & blur filters */ 2.card { 3 background: #f9f9fb; 4 border: 1px solid #d1d5db; 5 box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); 6 border-radius: 10px; 7 font-family: "Inter", sans-serif; 8} 9.btn-primary { 10 background: linear-gradient(135deg, #6366f1, #8b5cf6); 11 color: white; 12 box-shadow: 0 4px 14px 0 rgba(99,102,241,0.39); 13 border-radius: 6px; 14 /* Generic purple AI template vibes */ 15}
With Patter DS
1/* Hard black borders, tactile shadows & clean hierarchy */ 2.card { 3 background: var(--bg); 4 border: var(--bw-1) solid var(--ink); 5 border-radius: var(--r-4); 6 box-shadow: var(--shadow-hard-md); 7} 8.btn-primary { 9 background: var(--ink); 10 color: var(--bg); 11 border-radius: var(--r-pill); 12 border: var(--bw-1) solid var(--ink); 13 transition: all var(--motion-fast) var(--easing); 14}
Core Architecture
A complete, cohesive suite of tokens and primitives crafted for high-density applications.
Deterministic high contrast with deep ink `#000000` surfaces and signature `#df9367` peach highlights.
--peach: #df9367; --ink: #000000;
Instrument Sans for human-readable headlines and JetBrains Mono for telemetry, data, and code.
Multi-tier hard black drop shadows that provide architectural depth without blurry blur effects.
12px 12px 0 0 #000000
Available as standard CSS Custom Properties, a plug-and-play `tailwind.config.js`, and W3C DTCG JSON.
tokens.json · tailwind.config.js · index.css
18px radial micro dot grids providing fine texture across technical dashboard cards and hero frames.
radial-gradient(1px 1px, #dad8de)
Includes an official `/skills/patter-design-system/SKILL.md` for seamless coding assistant compliance.
skills/patter-design-system/SKILL.md
Agent Skill Integration
Give Claude Code, Cursor, Antigravity, or Copilot full context to generate compliant Neo-Brutalist interfaces automatically.
Our `SKILL.md` is strictly formatted according to agent-kernel and writing-skills standards for high discoverability and zero-fluff execution.
SKILL.md · Frontmatter & Tokens
--- name: patter-design-system description: Use when building, styling, or auditing web interfaces that require the Patter developer aesthetic, neo-brutalist technical minimalism, Instrument Sans typography, hard 1.5px/2px black borders, and signature peach accents. --- # Patter Design System --ink: #000000; --peach: #df9367; --bg-cream: #f6f6f4; --font-sans: "Instrument Sans";
Clone the repository, link the CSS variables, or copy the Tailwind configuration. 100% open source under the MIT license.