System Interface Feature Announcement
superdesignCC0-1.0Prompt onlyLanding · landingBrutalist · brutalistExperimental · experimentalLight · lightMedium · mediumGreen · greenVivid · vividSerif · serifGeneral · general
A brutalist, typography-driven system interface design optimized for technical documentation and feature announcements. Featuring a high-density information layout, rigid grid alignment, and a mechanical aesthetic, it uses JetBrains Mono for a terminal-like feel and Inter for readability. Perfect for developer tools, SaaS infrastructure updates, engineering blogs, and fintech platforms. Key elements include visible 1px borders, a 'system status' header, stepped animations, and a monochrome palette with terminal-green accents. Category: Other. Prompt author listed upstream: Shirley Lou.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"System Interface Feature Announcement" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/system-interface-feature-announcement @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/system-interface-feature-announcement · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A raw, engineering-first interface design that rejects marketing polish in favor of technical transparency. It uses a high-contrast off-white and dark-gray palette with neon green accents, rigid grid structures, and monospace typography to simulate a command-line or system-level environment.",
"style": {
"description": "Brutalist and utilitarian style. Typography combines JetBrains Mono (700 for headings, 400 for technical data) and Inter (400 for body prose). Color palette: Background #F5F5F5, Text #1A1A1A, Accents #00CC00 (Green) and #FFA500 (Amber), Borders #CCCCCC. Animations are 'stepped' and mechanical (no smooth easing), featuring cursor blinks and line-by-line reveals.",
"prompt": "Create a design system based on 'Technical Brutalism'. \n\n### Colors\n- Primary Background: #F5F5F5\n- Primary Text: #1A1A1A\n- Accent Color (Action/Success): #00CC00 (Terminal Green)\n- Warning Color: #FFA500 (Amber)\n- Border Color: #CCCCCC (Solid 1px)\n- Code Block Background: #EBEBEB\n\n### Typography\n- Technical/Data Font: 'JetBrains Mono', monospace. Use for headers, metadata, and status bars.\n- Prose/Reading Font: 'Inter', sans-serif. Use for long-form explanations.\n- Heading 1: font-weight 700, size 72pt-96pt, tracking-tighter, uppercase, line-height 0.9.\n- Metadata: font-size 10px-12px, uppercase, tracking-widest.\n\n### Effects & Borders\n- Borders: Solid 1px #CCCCCC on all container edges. Use 'divide-x' and 'divide-y' patterns for grids.\n- Shadows: Strictly NO soft shadows. Use hard-offset shadows for interactive elements: 4px 4px 0px 0px #000000.\n- Corners: 0px (No rounding on any element).\n\n### Animation\n- Transitions: Duration 0ms (Instant) or 'steps' timing functions.\n- Text Reveal: Use a typewriter effect with `steps(20, end)` timing.\n- Micro-interactions: Background color flips (Invert) on hover for buttons."
},
"layout_and_structure": {
"description": "The layout follows a strict modular grid where every section is defined by clear 1px horizontal and vertical dividers. It prioritizes vertical stacking with dense, multi-column metadata grids.",
"prompts": [
{
"part": "System Status Bar",
"prompt": "A fixed top header (height: 48px) with a 1px bottom border. Left side: Pulse animation dot (#00CC00) followed by 'SYSTEM_STATUS: OPERATIONAL'. Right side: Navigation links in monospace, uppercase, wrapped in brackets e.g., '[ AUTH_USER ]'. Background is #F5F5F5."
},
{
"part": "Technical Hero Section",
"prompt": "Large-scale typography section. Background features a subtle 20px dot-grid pattern. A primary heading in JetBrains Mono (size: 8rem) uses line breaks and text-wrapping. Include a small 'Release Note' tag block with high-contrast colors (#000 background, #FFF text)."
},
{
"part": "Bento Metadata Grid",
"prompt": "A 4-column grid with 1px borders. One column for vertical metadata (Author, Impact Level, Date) and a 3-column wide span for the 'Problem Statement'. Use high density: 10px labels above 14px bold values."
},
{
"part": "Comparison Audit Log",
"prompt": "Two-column side-by-side comparison. Left side (Legacy) uses a light gray background (#EBEBEB). Right side (Current) uses a pure white background. Each row contains a label in gray 10px mono and a value with a 2px left-border accent (Red for legacy, Green for current)."
},
{
"part": "System Topology Diagram",
"prompt": "A CSS-only brutalist flow chart. Rectangular nodes with 1px black borders and 4px hard black shadows. Nodes are connected by 2px solid black lines with 45-degree arrowheads. Inside nodes, display simulated system telemetry (e.g., '> RAM_Usage: 4.2GB')."
}
]
},
"special_ui_components": [
{
"component": "Hard-Shadow Node",
"description": "A utilitarian card component for data display.",
"prompt": "Background #FFF, Border 1px #000, Box-Shadow 4px 4px 0px 0px #000. Header of the card should be a 1px bottom-bordered strip with a status indicator (dot). Content inside uses 12px JetBrains Mono."
},
{
"component": "Terminal Accordion",
"description": "An FAQ or detail component that feels like a directory expansion.",
"prompt": "Uses the <details> and <summary> elements. Summary has a '+' sign that rotates 45 degrees when open. Background color inverts from #F5F5F5 to #FFF on open. Content is padded 24px and uses Inter for long-form reading."
},
{
"component": "Monospace CTA",
"description": "A high-visibility system action button.",
"prompt": "Large block button, padding 16px 32px. Background #FFF, Text #000. On hover, background becomes #00CC00 instantly. Text begins with a '>' character to simulate a command prompt."
}
]
}
---
"System Interface Feature Announcement" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/system-interface-feature-announcement @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "System Interface Feature Announcement. \"System Interface Feature Announcement\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/system-interface-feature-announcement @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-system-interface-feature-announcement",
"license": "CC0-1.0",
"attribution": "\"System Interface Feature Announcement\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/system-interface-feature-announcement @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#f5f5f5"
},
"foreground": {
"$type": "color",
"$value": "#1a1a1a"
},
"card": {
"$type": "color",
"$value": "#f5f5f5"
},
"card-foreground": {
"$type": "color",
"$value": "#1a1a1a"
},
"primary": {
"$type": "color",
"$value": "#00cc00"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#1a1a1a"
},
"secondary-foreground": {
"$type": "color",
"$value": "#1a1a1a"
},
"accent": {
"$type": "color",
"$value": "#ffa500"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#e6e6e6"
},
"muted-foreground": {
"$type": "color",
"$value": "#6a6a6a"
},
"border": {
"$type": "color",
"$value": "#d3d3d3"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#00cc00"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "System Interface Feature Announcement" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/system-interface-feature-announcement @ 6c6090694520. */
:root {
--background: #f5f5f5;
--foreground: #1a1a1a;
--card: #f5f5f5;
--card-foreground: #1a1a1a;
--primary: #00cc00;
--primary-foreground: #fafaf9;
--secondary: #1a1a1a;
--secondary-foreground: #1a1a1a;
--accent: #ffa500;
--accent-foreground: #fafaf9;
--muted: #e6e6e6;
--muted-foreground: #6a6a6a;
--border: #d3d3d3;
--destructive: #dc2626;
--ring: #00cc00;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "System Interface Feature Announcement" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/system-interface-feature-announcement @ 6c6090694520. */
/** Tailwind theme extend for System Interface Feature Announcement (superdesign-system-interface-feature-announcement) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#f5f5f5",
"foreground": "#1a1a1a",
"card": "#f5f5f5",
"primary": "#00cc00",
"primary-foreground": "#fafaf9",
"secondary": "#1a1a1a",
"accent": "#ffa500",
"muted": "#e6e6e6",
"border": "#d3d3d3",
"destructive": "#dc2626",
"ring": "#00cc00"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "System Interface Feature Announcement" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/system-interface-feature-announcement @ 6c6090694520. */
@layer base {
:root {
--background: #f5f5f5;
--foreground: #1a1a1a;
--card: #f5f5f5;
--card-foreground: #1a1a1a;
--primary: #00cc00;
--primary-foreground: #fafaf9;
--secondary: #1a1a1a;
--secondary-foreground: #1a1a1a;
--accent: #ffa500;
--accent-foreground: #fafaf9;
--muted: #e6e6e6;
--muted-foreground: #6a6a6a;
--border: #d3d3d3;
--destructive: #dc2626;
--ring: #00cc00;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}