Superdesign Setup - Inline Preview
superdesignCC0-1.0Prompt onlyLanding · landingBrutalist · brutalistMinimal · minimalFuturistic · futuristicExperimental · experimentalLight · lightHigh (data-dense) · highGreen · greenVivid · vividSerif · serifGeneral · general
A minimalist, developer-centric configuration interface featuring a monochrome technical aesthetic. It utilizes a high-contrast dark/light mode, JetBrains Mono for system labels, and Inter for UI elements. Key features include an inline state-preview logging system, custom range sliders for AI intervention thresholds, and segmented controls for workspace density. Suitable for SaaS setup wizards, developer tools, AI configuration panels, and fintech dashboards that prioritize functional clarity and a 'terminal-lite' feel. Category: Onboarding. 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
"Superdesign Setup - Inline Preview" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-setup-inline-preview @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/superdesign-setup-inline-preview · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A clean, technical configuration wizard with a single-column layout, featuring real-time feedback through an inline state preview panel. It uses a monochrome palette (Zinc/Gray) with emerald accents for status indicators.",
"style": {
"description": "The style is built on a 'Technical Minimalist' theme. It pairs Inter for legibility with JetBrains Mono for metadata and system updates. The color palette is strictly monochrome (Zinc 50 to 950) with a single accent color (Emerald #10b981) for 'Live' states. Components use sharp corners (rounded-sm) and subtle borders (#e4e4e7 / #27272a). Transitions are quick (150ms-200ms) to ensure a snappy, tool-like feel.",
"prompt": "Create a design system using a Technical Minimalist aesthetic. \n- **Colors**: Background: #FFFFFF (Light) / #09090B (Dark). Text: #18181B (Light) / #F4F4F5 (Dark). Border: #F4F4F5 (Light) / #18181B (Dark). Accent: Emerald-500 (#10B981) for live indicators.\n- **Typography**: Headers and UI text: 'Inter', sans-serif. Monospace/Labels: 'JetBrains Mono', monospace. Sizes: H1: 64px bold, Subtitles: 20px, Section Headers: 14px uppercase with tracking-widest (0.1em), Body: 14px/16px.\n- **Borders/Corners**: Small radius (4px) or sharp corners. Border width: 1px.\n- **Animations**: Use 'cubic-bezier(0.4, 0, 0.2, 1)' for hover transitions. Include a 'ping' pulse for status dots (Emerald-400/500)."
},
"layout_and_structure": {
"description": "A focused single-column layout (max-width: 768px) centered on the page. The flow is linear, starting with a bold hero and ending with a status-driven action footer.",
"prompts": [
{
"part": "Header",
"prompt": "Sticky header with 90% opacity and backdrop-blur-sm. Elements: Left-aligned logo (20px square block next to 'Acme' in JetBrains Mono bold). Right-aligned theme toggle using Lucide icons (Sun/Moon)."
},
{
"part": "Hero Section",
"prompt": "Large H1 'You control the AI.' (Inter, 64px, bold, tracking-tight). 20px font-medium subtext. Primary action button: Zinc-900 (Light) / White (Dark) with right-arrow icon, hover effect: scale-[0.98] on click."
},
{
"part": "Configuration Sections",
"prompt": "Each section starts with a JetBrains Mono header (14px, uppercase, tracking-widest, Zinc-400). Use a vertical spacing of 64px between sections. Use 50% opacity for inactive sections, becoming 100% on hover/focus."
},
{
"part": "State Preview Panel",
"prompt": "A compact section (rounded-md, background Zinc-50/900). Top bar includes 'STATE PREVIEW' text and a 'Live' pulsing Emerald dot. Content area is a scrollable list of 4 lines max, each line prefixed with a grayed-out timestamp (HH:MM:SS) followed by the system event text in JetBrains Mono."
},
{
"part": "Completion Footer",
"prompt": "A two-column stats grid (e.g., '2.4s Avg Boot Time') using bold mono values and 10px uppercase labels. Primary CTA button: Full-width on mobile, auto-width on desktop, high contrast (Zinc-900 or White)."
}
]
},
"special_ui_components": [
{
"component": "Inline State Stream",
"description": "A terminal-lite log panel for real-time user feedback.",
"prompt": "Container: background: #f9f9f9 (light) / #121212 (dark); padding: 16px; border: 1px solid #e4e4e7; font-family: 'JetBrains Mono'; font-size: 12px. Logic: When a user interacts with a toggle or slider, a new line prepends the log with a timestamp (color: #a1a1aa). Only show the most recent 4 lines; older lines fade out or are removed via 'animate-in fade-in slide-in-from-bottom-1'."
},
{
"component": "Intervention Threshold Slider",
"description": "A custom range input for selection granular control.",
"prompt": "Track: height: 4px; background: #e4e4e7 (light) / #27272a (dark). Thumb: 16px diameter circle; background: CurrentColor; border: 4px solid white (light) / #18181b (dark). Labels: Four fixed points below (Silent, Suggest, Auto-complete, Take over) in 10px JetBrains Mono."
},
{
"component": "DNA Segmented Controls",
"description": "Horizontal button groups for mode selection.",
"prompt": "Container: background #f4f4f5 (light) / #18181b (dark); padding: 4px; border-radius: 4px. Active State: white background (light) / #27272a (dark); shadow-sm; text-zinc-900. Inactive: text-zinc-500; no background."
}
],
"special_notes": "MUST: Maintain strict 3-4 line limit for the Inline Preview to prevent layout shift. MUST NOT: Use vibrant colors or rounded 'pill' shapes; keep it boxy and technical. MUST: Use monospace for all system outputs and labels to reinforce the 'workspace DNA' concept."
}
---
"Superdesign Setup - Inline Preview" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-setup-inline-preview @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Superdesign Setup - Inline Preview. \"Superdesign Setup - Inline Preview\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-setup-inline-preview @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-superdesign-setup-inline-preview",
"license": "CC0-1.0",
"attribution": "\"Superdesign Setup - Inline Preview\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-setup-inline-preview @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"foreground": {
"$type": "color",
"$value": "#27272a"
},
"card": {
"$type": "color",
"$value": "#ffffff"
},
"card-foreground": {
"$type": "color",
"$value": "#27272a"
},
"primary": {
"$type": "color",
"$value": "#10b981"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#e4e4e7"
},
"secondary-foreground": {
"$type": "color",
"$value": "#27272a"
},
"accent": {
"$type": "color",
"$value": "#10b981"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#f0f0f0"
},
"muted-foreground": {
"$type": "color",
"$value": "#737375"
},
"border": {
"$type": "color",
"$value": "#dbdbdb"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#10b981"
}
},
"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 */
/* "Superdesign Setup - Inline Preview" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-setup-inline-preview @ 6c6090694520. */
:root {
--background: #ffffff;
--foreground: #27272a;
--card: #ffffff;
--card-foreground: #27272a;
--primary: #10b981;
--primary-foreground: #fafaf9;
--secondary: #e4e4e7;
--secondary-foreground: #27272a;
--accent: #10b981;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #737375;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #10b981;
--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 */
/* "Superdesign Setup - Inline Preview" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-setup-inline-preview @ 6c6090694520. */
/** Tailwind theme extend for Superdesign Setup - Inline Preview (superdesign-superdesign-setup-inline-preview) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#ffffff",
"foreground": "#27272a",
"card": "#ffffff",
"primary": "#10b981",
"primary-foreground": "#fafaf9",
"secondary": "#e4e4e7",
"accent": "#10b981",
"muted": "#f0f0f0",
"border": "#dbdbdb",
"destructive": "#dc2626",
"ring": "#10b981"
},
"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 */
/* "Superdesign Setup - Inline Preview" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/superdesign-setup-inline-preview @ 6c6090694520. */
@layer base {
:root {
--background: #ffffff;
--foreground: #27272a;
--card: #ffffff;
--card-foreground: #27272a;
--primary: #10b981;
--primary-foreground: #fafaf9;
--secondary: #e4e4e7;
--secondary-foreground: #27272a;
--accent: #10b981;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #737375;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #10b981;
--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);
}
}