Mosaic Grid Architecture Style
superdesignCC0-1.0Prompt onlyLanding · landingTexture · textureFlat · flatMinimal · minimalFuturistic · futuristicLight · lightLow (display) · lowGreen · greenMedium · mediumSerif · serifGeneral · general
An architectural, technical-blueprint style design system featuring a minimalist mosaic grid, forest green (#1A3C2B) and light-gray paper-textured (#F7F7F5) palette. Optimized for B2B SaaS, developer tools, and high-end agency portfolios. Key features include editorial typography with Space Grotesk, JetBrains Mono labels, bento grid layouts, and 2D flat wireframe aesthetics with zero shadows. Category: Design Systems & Styles. 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
"Mosaic Grid Architecture Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/mosaic-grid-architecture-style @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/mosaic-grid-architecture-style · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A sophisticated, structural design system inspired by technical blueprints and high-end UI wireframes. It utilizes a large-scale mosaic background of interlocking rectangular panels, razor-thin hairlines, and a prestige-green primary color. The aesthetic is flat, 2D, and emphasizes high negative space and structural precision.",
"style": {
"description": "The style is 'Technical Minimalist'. It pairs a sans-serif header (Space Grotesk) with a monospaced functional font (JetBrains Mono). The color scheme revolves around 'Paper' (#F7F7F5), 'Forest' (#1A3C2B), and 'Grid' (#3A3A38). It avoids all depth effects (shadows, gradients) in favor of 1px border-lines and flat color blocks. Micro-interactions are snappy with linear or standard ease-out curves.",
"prompt": "Create a design system using a 'Paper' background (#F7F7F5) and 'Forest Green' (#1A3C2B) as the primary brand color. Typography: Use 'Space Grotesk' for bold, tight-tracking headers (font-size: 64px-96px, line-height: 0.9); 'General Sans' for body text; and 'JetBrains Mono' for all labels, tags, and small technical metadata (font-size: 10px-12px, tracking: 0.1em). Borders: Use 1px hairlines in #3A3A38 at 20% opacity for all dividers. Palette: Primary Forest (#1A3C2B), Coral (#FF8C69), Mint (#9EFFBF), and Gold (#F4D35E). Styling: No box shadows. All components must have 0px or 2px (sm) border-radius. Images should use 'mix-blend-luminosity' with a 90% opacity and shift to full color on hover."
},
"layout_and_structure": {
"description": "A vertical-scroll structure characterized by section-wide dividers and a background mosaic grid. Sections are divided by explicit 1px horizontal lines. Components often sit in a 'Bento Grid' format where blocks are separated by 1px gaps.",
"prompts": [
{
"part": "Mosaic Background",
"prompt": "Implement a full-page background pattern using an SVG mosaic of interlocking rectangular panels. Panels should have varying sizes (large squares, horizontal strips, vertical blocks) divided by 0.5px hairlines (#3A3A38 at 0.3 opacity). Fill all panels with #F7F7F5. The pattern should repeat seamlessly."
},
{
"part": "Technical Navigation",
"prompt": "Fixed top header with a 1px border-bottom (#3A3A38/20). Left side: square logo box (32x32px) in #1A3C2B with a white icon. Center: Nav links in JetBrains Mono, 10px, uppercase, prefixed with numerical indices (e.g., '01. Pricing'). Right side: Ghost button (1px border) and a solid Forest green button."
},
{
"part": "Hero Section",
"prompt": "Large typography layout. Header text 'Space Grotesk' 8xl, tracking-tight, forest green. Subtext in JetBrains Mono, 14px, all-caps, with a vertical 1px line on the left. Include an abstract wireframe graphic on the right: a square container with a dashed circular orbit and a luminosity-blended image."
},
{
"part": "Bento Feature Grid",
"prompt": "A 2x2 grid layout with a 1px 'Grid' color gap separating the cells. Each cell has a 'Paper' (#F7F7F5) background, 32px padding, and a monospaced header label with a colored left-border accent (Coral, Mint, Gold). Include internal 'mockup' boxes that simulate code snippets or UI errors using monospaced text and flat color chips."
},
{
"part": "Technical Form CTA",
"prompt": "A centered 640px wide form box. Background: #F7F7F5, Border: 1px hairline. Add four L-shaped 'corner markers' (10px x 10px) in #1A3C2B at each corner of the container. Form fields use solid white backgrounds with 1px borders and monospaced labels positioned directly above inputs."
}
]
},
"special_ui_components": [
{
"component": "Status Badge",
"description": "A minimalist indicator for system status.",
"prompt": "Create an inline-flex container with 1px border (#1A3C2B/20). Inside, place a 8px x 8px square dot of solid #1A3C2B followed by JetBrains Mono text at 10px, uppercase, tracking-widest. Padding: 4px 12px."
},
{
"component": "Network Topology Graph",
"description": "An abstract SVG visualization of a design system network.",
"prompt": "A circular container (max-width: 450px) with 1px border. Central 16px solid forest green node. Three orbiting nodes on dashed paths (140px radius). Connect nodes to center using 1px solid lines at 0.2 opacity. Animate orbiting nodes with a linear 20s infinite rotation."
},
{
"component": "Monospaced Testimonial Card",
"description": "Flat testimonial card with technical metadata.",
"prompt": "1px bordered square card. Top: Quote icon and star ratings (5 icons, 10px each). Body: Monospaced text at 12px, line-height 1.6. Bottom: 1px top border with user avatar (square, no radius) and name/title in JetBrains Mono."
}
]
}
---
"Mosaic Grid Architecture Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/mosaic-grid-architecture-style @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Mosaic Grid Architecture Style. \"Mosaic Grid Architecture Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/mosaic-grid-architecture-style @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-mosaic-grid-architecture-style",
"license": "CC0-1.0",
"attribution": "\"Mosaic Grid Architecture Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/mosaic-grid-architecture-style @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#f7f7f5"
},
"foreground": {
"$type": "color",
"$value": "#1a3c2b"
},
"card": {
"$type": "color",
"$value": "#f7f7f5"
},
"card-foreground": {
"$type": "color",
"$value": "#1a3c2b"
},
"primary": {
"$type": "color",
"$value": "#1a3c2b"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#3a3a38"
},
"secondary-foreground": {
"$type": "color",
"$value": "#1a3c2b"
},
"accent": {
"$type": "color",
"$value": "#ff8c69"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#e8e8e6"
},
"muted-foreground": {
"$type": "color",
"$value": "#6a8075"
},
"border": {
"$type": "color",
"$value": "#d4d4d3"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#1a3c2b"
}
},
"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 */
/* "Mosaic Grid Architecture Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/mosaic-grid-architecture-style @ 6c6090694520. */
:root {
--background: #f7f7f5;
--foreground: #1a3c2b;
--card: #f7f7f5;
--card-foreground: #1a3c2b;
--primary: #1a3c2b;
--primary-foreground: #fafaf9;
--secondary: #3a3a38;
--secondary-foreground: #1a3c2b;
--accent: #ff8c69;
--accent-foreground: #fafaf9;
--muted: #e8e8e6;
--muted-foreground: #6a8075;
--border: #d4d4d3;
--destructive: #dc2626;
--ring: #1a3c2b;
--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 */
/* "Mosaic Grid Architecture Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/mosaic-grid-architecture-style @ 6c6090694520. */
/** Tailwind theme extend for Mosaic Grid Architecture Style (superdesign-mosaic-grid-architecture-style) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#f7f7f5",
"foreground": "#1a3c2b",
"card": "#f7f7f5",
"primary": "#1a3c2b",
"primary-foreground": "#fafaf9",
"secondary": "#3a3a38",
"accent": "#ff8c69",
"muted": "#e8e8e6",
"border": "#d4d4d3",
"destructive": "#dc2626",
"ring": "#1a3c2b"
},
"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 */
/* "Mosaic Grid Architecture Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/mosaic-grid-architecture-style @ 6c6090694520. */
@layer base {
:root {
--background: #f7f7f5;
--foreground: #1a3c2b;
--card: #f7f7f5;
--card-foreground: #1a3c2b;
--primary: #1a3c2b;
--primary-foreground: #fafaf9;
--secondary: #3a3a38;
--secondary-foreground: #1a3c2b;
--accent: #ff8c69;
--accent-foreground: #fafaf9;
--muted: #e8e8e6;
--muted-foreground: #6a8075;
--border: #d4d4d3;
--destructive: #dc2626;
--ring: #1a3c2b;
--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);
}
}