Editorial Feature Announcement
superdesignCC0-1.0Prompt onlyBlog · blogTexture · textureHand-drawn · hand-drawnMinimal · minimalFuturistic · futuristicLight · lightLow (display) · lowOrange · orangeMedium · mediumSerif · serifGeneral · general
A high-end technical editorial design system tailored for feature announcements, changelogs, and whitepapers. It features a sophisticated 'paper and ink' color palette (#F7F5F0 background), high-contrast typography pairing (Fraunces serif and Inter sans), and an asymmetric 12-column grid layout. Suitable for developer tools, fintech, research institutions, and SaaS companies that prioritize credibility and deep readability. The style emphasizes content hierarchy through vertical reading rhythms, monospace technical markers, and minimal visual noise. 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
"Editorial Feature Announcement" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-feature-announcement @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/editorial-feature-announcement · 6c6090694520 · © Superdesign
Prompt
{
"summary": "An editorial-style technical announcement page that uses typography as the primary design element. It uses a 4-to-8 column layout ratio to separate metadata from long-form content, creating a vertical reading experience akin to a high-end technical journal.",
"style": {
"description": "The style is 'Technical Editorial,' combining the warmth of a paper-like background with the precision of a geometric sans-serif and the character of a variable serif. It employs a light theme with charcoal text, relying on border-based dividers and monospace utility text rather than icons or imagery.",
"prompt": "Create a design system using a 'Paper and Ink' palette: Background #F7F5F0 (Paper), Primary Text #111111 (Ink), Secondary Text #444444 (Graphite), and subtle Dividers #111111 at 10% opacity. Typography: Primary Sans is 'Inter' (300, 400, 600) for UI and body; Primary Serif is 'Fraunces' (9-144pt optical size, 300-600 weight) for headlines and blockquotes; Technical Mono is 'JetBrains Mono' for metadata and code. Use a 12-column grid. Links should have a 1px border-bottom instead of underline. Focus on generous line-heights (1.6 to 1.8) and 'chapter-marker' labels in 12px uppercase Mono for section indexing. Include subtle transition effects on hover (0.2s ease-in-out) for all interactive links and buttons."
},
"layout_and_structure": {
"description": "A structured, vertical reading experience based on an asymmetric 12-column grid. Most sections utilize a 4-column sidebar (for chapter markers/titles) and an 8-column main content area.",
"prompts": [
{
"part": "Navigation",
"prompt": "A minimalist top-bar with a max-width of 1280px. Left side: Brand mark (a 12px black square next to monospace text). Right side: Text links in 14px 'Inter' Graphite, switching to Ink on hover. Spacing: 32px vertical padding."
},
{
"part": "Editorial Hero",
"prompt": "Large header section with 80px top padding and 64px bottom padding. Features a pill-shaped status badge with a green dot and monospace version tag. Headline: 'Fraunces' serif at 96px+ size, tracking-tight, leading-[0.9], utilizing italics for emphasis. 1px divider at the bottom."
},
{
"part": "Abstract Section",
"prompt": "12-column grid. Columns 1-4: Monospace chapter marker '01 — ABSTRACT'. Columns 5-12: Large-scale introductory text (30px size, light weight, leading-snug)."
},
{
"part": "The 4/8 Split Content Block",
"prompt": "Standard content section with 1px top border. Columns 1-4: Sticky sidebar containing chapter marker and 'Fraunces' h3 title. Columns 5-12: Multi-paragraph 'Inter' body text (18px) with 1.7 line height. Include blockquotes with 2px solid left-border and serif italics."
},
{
"part": "Technical Comparison (Before vs After)",
"prompt": "Two-column grid for 'Architecture Shift'. Left column (Legacy): Monospace code-like flow with red-tinted latency labels. Right column (Modern): Monospace flow with green-tinted success labels. Separated by a vertical divider. Header for each column uses 'Fraunces' size 20px and a mono tag (e.g., 'BLOCKING I/O' vs 'NON-BLOCKING')."
},
{
"part": "Numeric Deep Dive",
"prompt": "Section with large oversized numbers (01, 02) in 10% opacity 'Fraunces'. The content is paired with an 'Inter' h3 and a light smoke-colored (#E5E2D9 at 30%) use-case box with monospace labels."
},
{
"part": "Step-Based Mechanics",
"prompt": "A vertical timeline layout. A 1px vertical line (#111111, 10% opacity) with 16px circular nodes. Content is indented with bold titles and graphite descriptions, creating a visual rhythm of process flow."
},
{
"part": "Technical Constraints Panel",
"prompt": "Full-width background of #E5E2D9 at 30% opacity. 12-column split. Sidebar has an alert icon and chapter marker. Content area uses a list of technical tags (LIMITATION, EDGE CASE, SECURITY) in monospace followed by small-text descriptions."
}
]
},
"special_ui_components": [
{
"component": "Chapter Marker",
"description": "Monospace section index labels used globally.",
"prompt": "Font: JetBrains Mono; Size: 12px; Text-Transform: uppercase; Letter-spacing: 0.05em; Color: #444444; Format: '[Number] — [Title]'."
},
{
"component": "Editorial Link",
"description": "High-visibility document links for navigation.",
"prompt": "Flex container with arrow-right icon. Text: Black Ink. Border-bottom: 1px solid Ink. Animation: On hover, text opacity drops to 70% and icon translates +4px on the X-axis."
},
{
"component": "Code Comparison Flow",
"description": "Text-only representation of data flow or architecture changes.",
"prompt": "Font: Monospace; Size: 14px; Line-height: 2.0; Spacing: 16px indents for nested steps; Colors: Use muted reds (#B91C1C at 60%) for legacy delays and muted greens (#057A55 at 60%) for modern improvements."
}
]
}
---
"Editorial Feature Announcement" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-feature-announcement @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Editorial Feature Announcement. \"Editorial Feature Announcement\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-feature-announcement @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-editorial-feature-announcement",
"license": "CC0-1.0",
"attribution": "\"Editorial Feature Announcement\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-feature-announcement @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#f7f5f0"
},
"foreground": {
"$type": "color",
"$value": "#111111"
},
"card": {
"$type": "color",
"$value": "#f7f5f0"
},
"card-foreground": {
"$type": "color",
"$value": "#111111"
},
"primary": {
"$type": "color",
"$value": "#f7f5f0"
},
"primary-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"secondary": {
"$type": "color",
"$value": "#111111"
},
"secondary-foreground": {
"$type": "color",
"$value": "#111111"
},
"accent": {
"$type": "color",
"$value": "#e5e2d9"
},
"accent-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"muted": {
"$type": "color",
"$value": "#e8e6e2"
},
"muted-foreground": {
"$type": "color",
"$value": "#646464"
},
"border": {
"$type": "color",
"$value": "#d4d3ce"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#f7f5f0"
}
},
"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 */
/* "Editorial Feature Announcement" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-feature-announcement @ 6c6090694520. */
:root {
--background: #f7f5f0;
--foreground: #111111;
--card: #f7f5f0;
--card-foreground: #111111;
--primary: #f7f5f0;
--primary-foreground: #1c1917;
--secondary: #111111;
--secondary-foreground: #111111;
--accent: #e5e2d9;
--accent-foreground: #1c1917;
--muted: #e8e6e2;
--muted-foreground: #646464;
--border: #d4d3ce;
--destructive: #dc2626;
--ring: #f7f5f0;
--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 */
/* "Editorial Feature Announcement" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-feature-announcement @ 6c6090694520. */
/** Tailwind theme extend for Editorial Feature Announcement (superdesign-editorial-feature-announcement) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#f7f5f0",
"foreground": "#111111",
"card": "#f7f5f0",
"primary": "#f7f5f0",
"primary-foreground": "#1c1917",
"secondary": "#111111",
"accent": "#e5e2d9",
"muted": "#e8e6e2",
"border": "#d4d3ce",
"destructive": "#dc2626",
"ring": "#f7f5f0"
},
"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 */
/* "Editorial Feature Announcement" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-feature-announcement @ 6c6090694520. */
@layer base {
:root {
--background: #f7f5f0;
--foreground: #111111;
--card: #f7f5f0;
--card-foreground: #111111;
--primary: #f7f5f0;
--primary-foreground: #1c1917;
--secondary: #111111;
--secondary-foreground: #111111;
--accent: #e5e2d9;
--accent-foreground: #1c1917;
--muted: #e8e6e2;
--muted-foreground: #646464;
--border: #d4d3ce;
--destructive: #dc2626;
--ring: #f7f5f0;
--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);
}
}