Bold Editorial Studio Style
superdesignCC0-1.0Prompt onlyBlog · blogMinimal · minimalFuturistic · futuristicLuxury · luxuryLight · lightLow (display) · lowNeutral · neutralMuted · mutedSerif · serifGeneral · general
Bold Editorial Studio Style is a high-impact, minimalist design system characterized by massive typography, a strict monochromatic palette, and sophisticated micro-interactions. It features a signature 'editorial' look using ultra-large display fonts (up to 12vw), custom cursor logic, and fluid marquee animations. Ideal for creative agencies, high-end portfolios, fashion brands, and premium fintech products, the system leverages white space and motion to create a premium, curated feel. Key elements include mix-blend-mode navigation, staggered text reveals, and asymmetrical image containers with varied border radii. Category: Design Systems & Styles. Prompt author listed upstream: Jason Zhou.
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
"Bold Editorial Studio Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/bold-editorial-studio-style @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/bold-editorial-studio-style · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A sophisticated, typography-first creative studio aesthetic featuring a black-and-white color scheme, custom interactive cursor, and smooth, motion-driven layouts.",
"style": {
"description": "The style is built on 'Inter' typography with extreme weight and size contrasts. It uses a pure black (#000000) and white (#FFFFFF) palette with neutral gray accents (#525252, #737373) for secondary metadata. Motion is central, utilizing smooth cubic-bezier transitions for reveals and a custom 'difference' blend-mode cursor that scales on interaction. Images are primarily grayscale, transitioning to full color on hover to maintain visual discipline.",
"prompt": "Apply a Bold Editorial Studio Style. \n- **Color Palette**: Primary background #FFFFFF; Primary text #000000; Secondary text #525252; Accents and borders #000000 at 10% opacity; Footer background #0A0A0A with #FFFFFF text.\n- **Typography**: Primary Font: 'Inter'. \n - Headlines: font-weight: 700; letter-spacing: -0.05em; line-height: 0.9.\n - Body: font-weight: 400; letter-spacing: -0.02em; line-height: 1.5.\n - Mono/Metadata: font-family: 'monospace'; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em.\n- **Interactions**: \n - Custom cursor: 32px circle, border: 1px solid black, background: white, mix-blend-mode: difference. Scale by 2.5x on hover. \n - Image hover: Grayscale (100%) to Grayscale (0%) transition over 700ms with a 1.05x scale transform.\n- **Animations**: \n - Reveal: Text spans sliding up from translate-y(100%) to (0%) with cubic-bezier(0.16, 1, 0.3, 1) over 1s.\n - Marquee: Linear infinite scroll at 30s duration, pausing on container hover."
},
"layout_and_structure": {
"description": "The layout follows a spacious, section-based vertical flow. It starts with a massive display hero, followed by a continuous motion marquee, a centered introductory statement, and a balanced two-column project grid. The design concludes with a high-contrast dark footer.",
"prompts": [
{
"part": "Navigation Header",
"prompt": "Fixed header at the top. Use `mix-blend-mode: difference` for the container to ensure visibility against any background. Left side: lowercase logo 'sd' (font-size: 24px, weight: 700, tracking-tighter). Right side: Menu toggle button using a 'plus' icon. Padding: 24px (6rem)."
},
{
"part": "Hero Section",
"prompt": "Height: 80vh minimum. Center-aligned. Main headline: font-size: 12vw, weight: 700, tracking-tighter. Implement staggered letter reveal where each character slides up into view. Include a sub-headline: font-size: 24px, color: #525252, margin-top: 32px."
},
{
"part": "Infinite Project Marquee",
"prompt": "Full-width overflow-hidden section. Items: Vertical cards (aspect-ratio: 5/7). Apply asymmetrical rounded corners to cards (e.g., top-left: 100px, or top-right: 100px + bottom-left: 40px). Animation: Continuous horizontal scroll. Images within should be grayscale by default."
},
{
"part": "Project Grid",
"prompt": "Two-column grid for desktop, single-column for mobile. Each project item consists of: 1. A 4:3 aspect ratio image container with slight rounding. 2. A hover-triggered overlay (black at 10% opacity). 3. A top-right 'arrow-up-right' icon appearing on hover. 4. Bottom metadata row separated by a 1px #000000/10 border-top, containing a Title (24px), Category, and Year (mono font)."
},
{
"part": "Footer",
"prompt": "Background: #0A0A0A. Text: #FFFFFF. Four-column grid (on desktop). Column 1-2: Large brand name and short bio. Column 3: 'Socials' list. Column 4: 'Contact' list. Bottom bar: Thin border-top (white at 10% opacity) with copyright and credits in 14px text."
}
]
},
"special_ui_components": [
{
"component": "Interactive Difference Cursor",
"description": "A custom circular cursor that follows the mouse with smooth interpolation and changes appearance based on the underlying color.",
"prompt": "Create a 32px diameter circle `div` with `position: fixed`, `pointer-events: none`, and `z-index: 9999`. Apply `mix-blend-mode: difference` and `background-color: white`. Use `requestAnimationFrame` to interpolate movement (lerp) for a 'lagging' smooth effect. On hover of 'a' or 'button' tags, use a CSS transition to `transform: scale(2.5)`."
},
{
"component": "Asymmetrical Marquee Cards",
"description": "Image containers within the marquee that use non-uniform border-radii to create an organic, editorial feel.",
"prompt": "Style project cards with alternating border-radius patterns: Card A: `border-top-left-radius: 100px`. Card B: `border-top-right-radius: 100px; border-bottom-left-radius: 40px`. Card C: `border-radius: 40px`. This breaks the standard grid monotony."
}
],
"special_notes": "MUST: Maintain a strict black-and-white palette; any color should only come from project photography. MUST: Use smooth easing for all hover states (minimum 500ms). MUST: Hide the default browser cursor (`cursor: none` on body). DO NOT: Use borders heavier than 1px. DO NOT: Use standard system easing; stick to cubic-bezier(0.16, 1, 0.3, 1) for a premium feel."
}
---
"Bold Editorial Studio Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/bold-editorial-studio-style @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Bold Editorial Studio Style. \"Bold Editorial Studio Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/bold-editorial-studio-style @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-bold-editorial-studio-style",
"license": "CC0-1.0",
"attribution": "\"Bold Editorial Studio Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/bold-editorial-studio-style @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"foreground": {
"$type": "color",
"$value": "#000000"
},
"card": {
"$type": "color",
"$value": "#ffffff"
},
"card-foreground": {
"$type": "color",
"$value": "#000000"
},
"primary": {
"$type": "color",
"$value": "#000000"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#525252"
},
"secondary-foreground": {
"$type": "color",
"$value": "#000000"
},
"accent": {
"$type": "color",
"$value": "#000000"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#f0f0f0"
},
"muted-foreground": {
"$type": "color",
"$value": "#595959"
},
"border": {
"$type": "color",
"$value": "#dbdbdb"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#000000"
}
},
"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 */
/* "Bold Editorial Studio Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/bold-editorial-studio-style @ 6c6090694520. */
:root {
--background: #ffffff;
--foreground: #000000;
--card: #ffffff;
--card-foreground: #000000;
--primary: #000000;
--primary-foreground: #fafaf9;
--secondary: #525252;
--secondary-foreground: #000000;
--accent: #000000;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #595959;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #000000;
--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 */
/* "Bold Editorial Studio Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/bold-editorial-studio-style @ 6c6090694520. */
/** Tailwind theme extend for Bold Editorial Studio Style (superdesign-bold-editorial-studio-style) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#ffffff",
"foreground": "#000000",
"card": "#ffffff",
"primary": "#000000",
"primary-foreground": "#fafaf9",
"secondary": "#525252",
"accent": "#000000",
"muted": "#f0f0f0",
"border": "#dbdbdb",
"destructive": "#dc2626",
"ring": "#000000"
},
"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 */
/* "Bold Editorial Studio Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/bold-editorial-studio-style @ 6c6090694520. */
@layer base {
:root {
--background: #ffffff;
--foreground: #000000;
--card: #ffffff;
--card-foreground: #000000;
--primary: #000000;
--primary-foreground: #fafaf9;
--secondary: #525252;
--secondary-foreground: #000000;
--accent: #000000;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #595959;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #000000;
--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);
}
}